Textarea

export const AutoResize: Story = {
  render: () => (
    <div className="flex max-w-sm flex-col gap-4">
      <div className="space-y-1.5">
        <Label htmlFor="textarea-auto">Auto Resize (default)</Label>
        <Textarea
          id="textarea-auto"
          placeholder="Type multiple lines and watch it grow..."
          defaultValue={"Line 1\nLine 2\nLine 3"}
        />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="textarea-fixed">Fixed Height (autoResize=false)</Label>
        <Textarea
          id="textarea-fixed"
          autoResize={false}
          rows={4}
          placeholder="Fixed height with manual resize handle"
        />
      </div>
    </div>
  ),
};

export const AllStates: Story = {
  render: () => (
    <div className="flex max-w-sm flex-col gap-4">
      <div className="space-y-1.5">
        <Label htmlFor="textarea-normal">Normal</Label>
        <Textarea id="textarea-normal" placeholder="Normal textarea" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="textarea-disabled">Disabled</Label>
        <Textarea id="textarea-disabled" placeholder="Disabled textarea" disabled />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="textarea-readonly">Read Only</Label>
        <Textarea id="textarea-readonly" value="Read-only content" readOnly />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="textarea-invalid">Invalid</Label>
        <Textarea id="textarea-invalid" placeholder="Invalid textarea" aria-invalid={true} />
      </div>
    </div>
  ),
};