{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea-18",
  "type": "registry:component",
  "title": "Textarea 18",
  "description": "Textarea 18. A multi-line input field that allows users to enter longer blocks of text, such as messages, descriptions, or comments.",
  "dependencies": [],
  "registryDependencies": [
    "label",
    "textarea"
  ],
  "files": [
    {
      "path": "components/watermelon/textarea-18.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId, useState, type ChangeEvent } from 'react';\n\nimport { Label } from '@/components/base-ui/label';\nimport { Textarea } from '@/components/base-ui/textarea';\n\nconst maxLength = 200;\nconst initialValue = '';\n\nconst Textarea18 = () => {\n  const [value, setValue] = useState(initialValue);\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\n\n  const id = useId();\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    if (e.target.value.length <= maxLength) {\n      setValue(e.target.value);\n      setCharacterCount(e.target.value.length);\n    }\n  };\n\n  return (\n    <div className=\"w-full max-w-sm space-y-2\">\n      <Label htmlFor={id}>Brief summary</Label>\n      <Textarea\n        id={id}\n        placeholder=\"Write a short summary...\"\n        value={value}\n        maxLength={maxLength}\n        onChange={handleChange}\n        className=\"focus-visible:ring-primary/20 focus-visible:border-primary/50 rounded-sm shadow-sm focus-visible:ring-2\"\n      />\n      <p className=\"text-muted-foreground text-xs\">\n        <span className=\"tabular-nums\">{maxLength - characterCount}</span>{' '}\n        remaining\n      </p>\n    </div>\n  );\n};\n\nexport default Textarea18;\n"
    }
  ]
}