component: Textarea
name: textarea
category: forms
version: 1.0.0

ai:
  intent: "Multi-line text input field"
  visual_role: "Extended text entry"
  density: "comfortable"
  preferred_when:
    - "User comments or reviews"
    - "Contact form messages"
    - "Biographies or descriptions"
  avoid_when:
    - "Single-line inputs (use input)"

base:
  display: flex
  width: 100%
  min-height: "100px"
  font-family: inherit
  background-color: "{color.surface.base}"
  color: "{color.neutral.900}"
  border: "1px solid {color.border.subtle}"
  border-radius: "{radius.md}"
  outline: none
  resize: vertical
  transition-duration: "{duration.fast}"
  transition-timing-function: "{ease.standard}"

variants:
  default:
    background-color: "{color.surface.base}"
    border-color: "{color.border.subtle}"
  filled:
    background-color: "{color.neutral.100}"
    border-color: transparent

sizes:
  sm:
    font-size: "{text.sm}"
    padding-inline: "{space.2-5}"
    padding-block: "{space.2}"
    border-radius: "{radius.sm}"
  md:
    font-size: "{text.base}"
    padding-inline: "{space.3}"
    padding-block: "{space.2-5}"
    border-radius: "{radius.md}"
  lg:
    font-size: "{text.lg}"
    padding-inline: "{space.4}"
    padding-block: "{space.3}"
    border-radius: "{radius.lg}"

states:
  hover:
    border-color: "{color.primary.bg}"
  focus:
    border-color: "{color.primary.bg}"
    outline: "2px solid {color.primary.subtle}"
  disabled:
    background-color: "{color.neutral.100}"
    opacity: 0.6
    cursor: not-allowed
  invalid:
    border-color: "{color.danger.bg}"
    outline: "2px solid {color.danger.subtle}"

contract:
  anatomy:
    - root
    - control
    - resize-handle
  props:
    variant:
      default: default
      values: [default, filled]
    size:
      default: md
      values: [sm, md, lg]
    state:
      default: default
      values: [default, hover, focus, disabled, invalid]
  slots:
    - default

structure:
  base:
    native_class: qhr-textarea
    tailwind: "w-full bg-[var(--qhr-surface-base)] text-[var(--qhr-content-primary)] border border-[var(--qhr-border-strong)] transition-colors outline-none font-sans min-h-[100px] resize-y"
  sizes:
    sm:
      native_modifier: qhr-textarea--sm
      tailwind: "text-sm p-[var(--qhr-space-2-5)] rounded-[var(--qhr-radius-sm)]"
    md:
      native_modifier: qhr-textarea--md
      tailwind: "text-base p-[var(--qhr-space-3)] rounded-[var(--qhr-radius-md)]"
    lg:
      native_modifier: qhr-textarea--lg
      tailwind: "text-lg p-[var(--qhr-space-4)] rounded-[var(--qhr-radius-lg)]"
  states:
    focus:
      native_modifier: is-focused
      tailwind: "border-[var(--qhr-color-primary-600)] ring-2 ring-[var(--qhr-ring-focus)]"
    disabled:
      native_modifier: is-disabled
      tailwind: "bg-[var(--qhr-surface-muted)] opacity-60 cursor-not-allowed"

accessibility:
  role: textbox
  keyboard: "Standard multi-line editing keys"

rtl:
  supported: true
  directional_mirroring: false