{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "textarea",
  "title": "Textarea",
  "author": "Matthew Blode",
  "description": "A multi-line text input field for longer form content.",
  "files": [
    {
      "path": "ui/textarea.tsx",
      "content": "\"use client\";\n\nimport { CircleXFilledIcon } from \"blode-icons-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface TextareaProps extends Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"style\"\n> {\n  clearable?: boolean;\n  clearClassName?: string;\n  hasError?: boolean;\n  leftAddon?: React.ReactNode | null;\n  leftControl?: React.ReactNode | null;\n  onClear?: () => void;\n  rightAddon?: React.ReactNode | null;\n  rightControl?: React.ReactNode | null;\n}\n\nconst Textarea = ({\n  className,\n  rows = 2,\n  onClear,\n  clearable,\n  hasError,\n  leftAddon,\n  rightAddon,\n  clearClassName,\n  leftControl,\n  rightControl,\n  ref,\n  ...props\n}: TextareaProps & { ref?: React.Ref<HTMLTextAreaElement> }) => (\n  <label\n    className={cn(\"relative block w-full\", {\n      \"input-group\": !!leftAddon || !!rightAddon,\n    })}\n  >\n    {leftAddon && <span className=\"shrink-0 cursor-pointer\">{leftAddon}</span>}\n\n    {leftControl && (\n      <div className=\"absolute top-0 left-0 flex h-full flex-row place-items-center items-center justify-center\">\n        {leftControl}\n      </div>\n    )}\n\n    <textarea\n      aria-invalid={hasError || undefined}\n      className={cn(\n        \"field-sizing-content flex min-h-[var(--textarea-min-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50\",\n        {\n          \"border-destructive-foreground\": hasError,\n          \"hover:border-input! focus:border-input!\": props.readOnly,\n          \"pr-12\": clearable && !!props.value && rightControl,\n          \"pr-9\": clearable && !!props.value,\n        },\n        className,\n      )}\n      ref={ref}\n      rows={rows}\n      {...props}\n    />\n\n    {clearable && !!props.value && (\n      <div className=\"absolute top-0 right-0 h-full\">\n        <button\n          aria-label=\"clear input\"\n          className={cn(\n            \"flex h-full w-10 cursor-pointer items-center justify-center p-0! text-muted-foreground\",\n            clearClassName,\n          )}\n          onClick={() => onClear?.()}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <CircleXFilledIcon className=\"size-4 text-muted-foreground/50\" />\n        </button>\n      </div>\n    )}\n\n    {rightControl && (\n      <div\n        className={cn(\n          \"absolute top-0 right-0 flex h-full flex-row place-items-center items-center justify-center\",\n          {\n            \"right-9\": clearable && !!props.value,\n          },\n        )}\n      >\n        {rightControl}\n      </div>\n    )}\n\n    {rightAddon && <span className=\"shrink-0 cursor-pointer\">{rightAddon}</span>}\n  </label>\n);\n\nexport { Textarea };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}