<.dm_textarea
  id="textarea-single-default"
  label="Description"
  name="description"
  rows={4}
  placeholder="Enter a description..."
 />

<.dm_textarea
  id="textarea-single-with-value"
  label="Notes"
  name="notes"
  value="These are some pre-filled notes that demonstrate how the textarea looks with content."
  rows={3}
 />

<.dm_textarea
  id="textarea-single-no-label"
  name="comment"
  rows={5}
  placeholder="Leave a comment..."
 />

<.dm_textarea
  id="textarea-sizes-xs"
  label="XS Textarea"
  name="xs"
  size="xs"
  rows="2"
  placeholder="XS textarea"
 />
<.dm_textarea
  id="textarea-sizes-sm"
  label="SM Textarea"
  name="sm"
  size="sm"
  rows="2"
  placeholder="SM textarea"
 />
<.dm_textarea
  id="textarea-sizes-md"
  label="MD Textarea"
  name="md"
  size="md"
  rows="2"
  placeholder="MD textarea"
 />
<.dm_textarea
  id="textarea-sizes-lg"
  label="LG Textarea"
  name="lg"
  size="lg"
  rows="2"
  placeholder="LG textarea"
 />

<.dm_textarea
  id="textarea-colors-primary"
  label="Primary"
  name="primary"
  rows="2"
  color="primary"
  placeholder="Primary textarea"
 />
<.dm_textarea
  id="textarea-colors-secondary"
  label="Secondary"
  name="secondary"
  rows="2"
  color="secondary"
  placeholder="Secondary textarea"
 />
<.dm_textarea
  id="textarea-colors-accent"
  label="Accent"
  name="accent"
  rows="2"
  color="accent"
  placeholder="Accent textarea"
 />
<.dm_textarea
  id="textarea-colors-success"
  label="Success"
  name="success"
  rows="2"
  color="success"
  placeholder="Success textarea"
 />
<.dm_textarea
  id="textarea-colors-warning"
  label="Warning"
  name="warning"
  rows="2"
  color="warning"
  placeholder="Warning textarea"
 />
<.dm_textarea
  id="textarea-colors-error"
  label="Error"
  name="error"
  rows="2"
  color="error"
  placeholder="Error textarea"
 />
<.dm_textarea
  id="textarea-colors-tertiary"
  label="Tertiary"
  name="tertiary"
  rows="2"
  color="tertiary"
  placeholder="Tertiary textarea"
 />
<.dm_textarea
  id="textarea-colors-info"
  label="Info"
  name="info"
  rows="2"
  color="info"
  placeholder="Info textarea"
 />

<.dm_textarea
  id="textarea-variants-ghost"
  label="Ghost Variant"
  name="variant_ghost"
  rows="3"
  placeholder="Ghost style"
  variant="ghost"
 />
<.dm_textarea
  id="textarea-variants-filled"
  label="Filled Variant"
  name="variant_filled"
  rows="3"
  placeholder="Filled style"
  variant="filled"
 />
<.dm_textarea
  id="textarea-variants-bordered"
  label="Bordered Variant"
  name="variant_bordered"
  rows="3"
  placeholder="Bordered style"
  variant="bordered"
 />

<.dm_textarea
  id="textarea-resize-options-no-resize"
  label="Fixed Size"
  name="no-resize"
  rows="3"
  resize="none"
  placeholder="This textarea cannot be resized"
 />
<.dm_textarea
  id="textarea-resize-options-vertical-resize"
  label="Vertical Only"
  name="vertical-resize"
  rows="3"
  resize="vertical"
  placeholder="This textarea can only be resized vertically"
 />
<.dm_textarea
  id="textarea-resize-options-horizontal-resize"
  label="Horizontal Only"
  name="horizontal-resize"
  rows="3"
  resize="horizontal"
  placeholder="This textarea can only be resized horizontally"
 />
<.dm_textarea
  id="textarea-resize-options-both-resize"
  label="Free Resize"
  name="both-resize"
  rows="3"
  resize="both"
  placeholder="This textarea can be resized in both directions"
 />

<.dm_textarea
  disabled
  id="textarea-states-disabled-state"
  label="Disabled Textarea"
  name="disabled"
  value="This textarea is disabled and cannot be edited"
  rows="3"
 />
<.dm_textarea
  id="textarea-states-readonly-state"
  label="Readonly Textarea"
  name="readonly"
  value="This textarea is readonly but can be focused"
  rows="3"
  readonly
 />
<.dm_textarea
  id="textarea-states-required-state"
  label="Required Textarea"
  name="required"
  rows="3"
  required
  placeholder="This field is required"
 />

<.dm_textarea
  id="textarea-single-with-constraints"
  label="Bio (Max 200 characters)"
  name="bio"
  rows={4}
  placeholder="Tell us about yourself..."
  maxlength={200}
 />

<.dm_textarea
  id="textarea-different-rows-rows-2"
  label="Short Text"
  name="rows2"
  rows="2"
  placeholder="Short input area"
 />
<.dm_textarea
  id="textarea-different-rows-rows-5"
  label="Medium Text"
  name="rows5"
  rows="5"
  placeholder="Medium input area with more space"
 />
<.dm_textarea
  id="textarea-different-rows-rows-10"
  label="Long Text"
  name="rows10"
  rows="10"
  placeholder="Large input area for long content"
 />

<.dm_textarea
  id="textarea-validation-states-success-state"
  label="Valid Content"
  name="ta_vs_success"
  state="success"
  rows="3"
  placeholder="Looks good!"
 />
<.dm_textarea
  id="textarea-validation-states-warning-state"
  label="Review Required"
  name="ta_vs_warning"
  state="warning"
  rows="3"
  placeholder="Please review your input"
 />

<.dm_textarea
  id="textarea-single-horizontal"
  label="Notes"
  name="ta_horizontal"
  rows="3"
  placeholder="Enter notes here"
  horizontal
 />

<.dm_textarea
  id="textarea-single-with-helper"
  label="Bio"
  name="ta_helper"
  rows="3"
  helper="Tell us a bit about yourself (up to 200 characters)."
  placeholder="Your bio..."
 />

<.dm_textarea
  id="textarea-single-with-errors"
  label="Description"
  name="ta_errors"
  rows="3"
  errors={["This field is required.", "Must be at least 20 characters."]}
  placeholder="Enter a description"
 />