{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "title": "Textarea",
  "description": "The focus ring closes in on a spring and the character count rolls.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/textarea.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/textarea`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport { Textarea as TextareaPart } from \"@ui-sdk/react/textarea\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/textarea\"\n\n/* The focus ring is the outline. It starts 10px out and 0px wide and closes in onto the box\n   on a spring, easing from its resting colour to its focus colour as it lands. On blur it lets\n   go fast. Give the outline a strong colour at rest and a soft one on focus: `outline-ring focus-visible:outline-[3px] focus-visible:outline-ring/30`. */\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof TextareaPart>) {\n  return (\n    <TextareaPart\n      className={cn(\n        \"outline-offset-[10px] focus-visible:outline-offset-0\",\n        \"[transition:outline-offset_calc(160ms*var(--kf-speed,1))_var(--ease-house),outline-width_calc(160ms*var(--kf-speed,1))_var(--ease-house),outline-color_0s_linear_calc(160ms*var(--kf-speed,1)),box-shadow_calc(150ms*var(--kf-speed,1))_var(--ease-house),background-color_calc(150ms*var(--kf-speed,1))_var(--ease-house)] focus-visible:[transition:outline-offset_calc(900ms*var(--kf-speed,1))_var(--ease-spring),outline-width_calc(900ms*var(--kf-speed,1))_var(--ease-spring),outline-color_calc(700ms*var(--kf-speed,1))_var(--ease-house),box-shadow_calc(150ms*var(--kf-speed,1))_var(--ease-house),background-color_calc(150ms*var(--kf-speed,1))_var(--ease-house)]\",\n        \"motion-reduce:[transition:none]!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/textarea.tsx"
    },
    {
      "path": "registry/components/keyframery/textarea.tsx",
      "content": "\"use client\"\n\n/* Styled textarea: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport { Textarea as TextareaPrimitive, createInputController } from \"@/components/keyframery/primitives/textarea\"\nimport { cn } from \"@/lib/utils\"\n\n/* The field look, with room for a few lines. It grows with its text between\n   min-height and max-height, then scrolls. Pass autoResize={false} for a fixed box. */\nfunction Textarea({\n  className,\n  autoResize = true,\n  ...props\n}: React.ComponentProps<typeof TextareaPrimitive>) {\n  return (\n    <TextareaPrimitive\n      autoResize={autoResize}\n      className={cn(\n        \"block max-h-[220px] min-h-[76px] w-full min-w-0 resize-none rounded-[10px] bg-background px-3 py-2 text-[13px] leading-5 text-foreground placeholder:text-muted-foreground/70\",\n        \"outline-0 outline-ring aria-invalid:outline-destructive focus-visible:outline-[3px] focus-visible:outline-ring/30 aria-invalid:focus-visible:outline-destructive/30\",\n        \"[--field-line:rgb(0_0_0/0.09)] dark:[--field-line:rgb(255_255_255/0.1)]\",\n        \"shadow-[0_0_0_1px_var(--field-line),0_1px_2px_rgb(0_0_0/0.05)] dark:shadow-[0_0_0_1px_var(--field-line)]\",\n        \"hover:[--field-line:rgb(0_0_0/0.16)] dark:hover:[--field-line:rgb(255_255_255/0.18)]\",\n        \"focus-visible:[--field-line:var(--ring)] dark:focus-visible:[--field-line:var(--ring)]\",\n        \"aria-invalid:[--field-line:var(--destructive)] dark:aria-invalid:[--field-line:var(--destructive)]\",\n        \"data-readonly:bg-muted/50\",\n        \"data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:text-muted-foreground data-disabled:[--field-line:rgb(0_0_0/0.06)] dark:data-disabled:[--field-line:rgb(255_255_255/0.06)]\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea, createInputController }\n",
      "type": "registry:component",
      "target": "components/keyframery/textarea.tsx"
    }
  ],
  "type": "registry:component"
}