{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "textarea",
  "title": "Textarea",
  "type": "registry:primitives",
  "description": "Multi-line text input with optional automatic height expansion as the user types.",
  "dependencies": [],
  "usage": "import { Textarea, Label } from \"@etherealui/react\"\n\nexport function TextareaDemo() {\n  return (\n    <div className=\"w-80 space-y-1.5\">\n      <Label optional>Project description</Label>\n      <Textarea autoResize placeholder=\"Write a short summary...\" />\n    </div>\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/input.tsx",
      "target": "components/ui/textarea.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport { cn } from \"../utils/cn\"\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  prefixText?: string\n  suffixText?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = \"text\", leftIcon, rightIcon, prefixText, suffixText, ...props }, ref) => {\n    if (leftIcon || rightIcon || prefixText || suffixText) {\n      return (\n        <div\n          className={cn(\n            \"flex h-9 w-full items-center rounded-lg border border-zinc-200 bg-white text-sm text-zinc-900 transition-colors focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100\",\n            className\n          )}\n        >\n          {prefixText && (\n            <span className=\"flex h-full items-center rounded-l-lg border-r border-zinc-200 bg-zinc-50 px-3 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-300 select-none\">\n              {prefixText}\n            </span>\n          )}\n          {leftIcon && (\n            <span className=\"pl-3 text-zinc-400 flex items-center shrink-0\">\n              {leftIcon}\n            </span>\n          )}\n          <input\n            type={type}\n            ref={ref}\n            className=\"h-full w-full bg-transparent px-3 py-1.5 text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-100 dark:placeholder:text-zinc-500\"\n            {...props}\n          />\n          {rightIcon && (\n            <span className=\"pr-3 text-zinc-400 flex items-center shrink-0\">\n              {rightIcon}\n            </span>\n          )}\n          {suffixText && (\n            <span className=\"flex h-full items-center border-l border-zinc-200 bg-zinc-50 px-3 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800/50 dark:text-zinc-400 select-none\">\n              {suffixText}\n            </span>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-900 placeholder:text-zinc-400 transition-colors focus-visible:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  autoResize?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, autoResize = false, onChange, ...props }, ref) => {\n    const innerRef = React.useRef<HTMLTextAreaElement | null>(null)\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (autoResize && innerRef.current) {\n        innerRef.current.style.height = \"auto\"\n        innerRef.current.style.height = `${innerRef.current.scrollHeight}px`\n      }\n      onChange?.(e)\n    }\n\n    return (\n      <textarea\n        ref={(node) => {\n          innerRef.current = node\n          if (typeof ref === \"function\") ref(node)\n          else if (ref) ref.current = node\n        }}\n        onChange={handleChange}\n        className={cn(\n          \"flex min-h-[84px] w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 transition-colors focus-visible:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500\",\n          autoResize && \"resize-none overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  optional?: boolean\n}\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, optional, children, ...props }, ref) => (\n    <label\n      ref={ref}\n      className={cn(\n        \"text-xs font-medium text-zinc-700 dark:text-zinc-300 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex items-center justify-between\",\n        className\n      )}\n      {...props}\n    >\n      <span>{children}</span>\n      {optional && <span className=\"text-[11px] font-normal text-zinc-400\">Optional</span>}\n    </label>\n  )\n)\nLabel.displayName = \"Label\"\n\nexport { Input, Textarea, Label }\n"
    }
  ]
}