{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:ui",
  "title": "Textarea",
  "description": "Fluent 2-styled multi-line text field with shadcn APIs. Grows with content (field-sizing-content) and shares the signature Fluent bottom brand accent on focus (inset box-shadow, no layout shift) with Input.",
  "author": "graundtech <https://github.com/graundtech/fluent2-react-kit>",
  "registryDependencies": [
    "https://fluent2-react-kit.graund.io/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/textarea.tsx",
      "type": "registry:ui",
      "target": "components/ui/textarea.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Textarea — Fluent 2-styled, shadcn-API multi-line text field.\n *\n * Aesthetics follow Fluent 2 (flat at rest, `rounded-md` = 4px); the prop\n * surface is a bare `ComponentProps<\"textarea\">` — shadcn parity, no size\n * variants. No `cva`/variants export: there is only one visual treatment,\n * same reasoning as `Input`/`Separator`.\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only,\n * so the file can be dropped straight into an RSC tree.\n *\n * `field-sizing-content` (current shadcn/ui baseline) lets the field grow\n * with its content up to `min-h-16`, instead of being permanently boxed to a\n * fixed row count; the browser's native corner-drag resize handle still\n * applies on top of that since no `resize-*` utility overrides it.\n *\n * Focus/invalid: identical Fluent bottom-accent recipe as `Input` (see that\n * file for the full rationale) — an inset box-shadow underline plus\n * `border-primary` on focus, swapping to `--destructive` when the field is\n * both invalid and focused. Copied verbatim from `input.tsx` per\n * conventions §4 so every field-like control in the kit behaves identically.\n */\nfunction Textarea({ className, ...props }: ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        // layout — grows with content (field-sizing-content), Fluent flat field\n        \"flex field-sizing-content min-h-16 w-full min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm\",\n        // placeholder / text selection\n        \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n        // motion — color transitions plus the focus box-shadow accent below\n        \"outline-none transition-[color,box-shadow] duration-fast ease-ease\",\n        // disabled — opacity-based, matches conventions §4 exactly\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        // focus — Fluent bottom brand accent via inset box-shadow, no reflow.\n        // Replaces the generic ring recipe for this component (documented\n        // deviation, conventions §4).\n        \"focus-visible:border-primary focus-visible:shadow-[inset_0_-2px_0_0_var(--brand-80)] dark:focus-visible:shadow-[inset_0_-2px_0_0_var(--brand-100)]\",\n        // invalid — shadcn aria-invalid treatment, conventions §4. Declared\n        // after focus-visible so it wins the border tie when both apply; the\n        // compound aria-invalid+focus-visible rule swaps the underline accent\n        // to destructive too, so an invalid+focused field reads consistently.\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        \"aria-invalid:focus-visible:shadow-[inset_0_-2px_0_0_var(--destructive)]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n"
    }
  ]
}