{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:ui",
  "title": "Textarea",
  "description": "Multi-line text field with intent states and auto-sizing support for comments and messages.",
  "dependencies": [
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/textarea.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Textarea — multi-line text input with spring-animated focus ring and auto-sizing support.\n * @module packages/ui/components/ui/textarea\n * @layer core\n *\n * @component\n * @example\n * import { Textarea } from '@saasflare/ui';\n * <Textarea placeholder=\"Write your message...\" />\n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion } from \"@saasflare/ui\"\n\ntype TextareaBaseProps = Omit<\n  React.ComponentProps<\"textarea\">,\n  \"onDrag\" | \"onDragStart\" | \"onDragEnd\" | \"onAnimationStart\" | \"onAnimationEnd\"\n>\n\n/**\n * Props for {@link Textarea}.\n *\n * Extends the native textarea props with {@link SaasflareComponentProps}, so\n * `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from <SaasflareProvider>.\n */\ninterface TextareaProps\n  extends Omit<TextareaBaseProps, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * Multi-line text input with a spring-animated focus ring and content-based\n * auto-sizing (`field-sizing-content`). `surface`, `radius`, and `animated`\n * resolve against the <SaasflareProvider> context when omitted.\n *\n * @component\n * @layer core\n */\nfunction Textarea({ className, surface, radius, animated, iconWeight, ...props }: TextareaProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, { type: \"spring\", stiffness: 300, damping: 20 })\n\n  return (\n    <m.textarea\n      {...props}\n      data-slot=\"textarea\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      whileFocus={motion.disabled ? undefined : { boxShadow: \"0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent)\" }}\n      transition={motion.transition}\n      className={cn(\n        \"w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30\",\n        \"field-sizing-content min-h-16\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n    />\n  )\n}\n\nexport { Textarea, type TextareaProps }\n",
      "target": "components/ui/textarea.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/textarea.json"
  }
}