{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "title": "Textarea",
  "description": "Multi-line text field with validation states and a character counter.",
  "dependencies": ["class-variance-authority"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/textarea.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps, useId } from 'react';\n\nimport { Body3 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\n/*\n * UX4G input area: 94px tall at rest, 1px border at radius 8px, 4px focus ring,\n * resize handle, and a character counter beneath the right edge. Validation\n * states colour the border from the -500 step, matching Input.\n */\nconst TEXTAREA_VARIANTS = cva(\n  'block w-full resize-y rounded-md border bg-neutral-0 px-3 py-2.5 text-sm transition-[color,background-color,border-color,box-shadow] duration-150 outline-none placeholder:text-neutral-500 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      state: {\n        default: 'border-neutral-200 hover:border-primary focus:border-primary-500 focus:shadow-focus-primary',\n        error: 'border-danger-500 focus:shadow-focus-danger',\n        success: 'border-success-500 focus:shadow-focus-success',\n        warning: 'border-warning-500 focus:shadow-focus-warning',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n    },\n  },\n);\n\ninterface ITextareaProps\n  extends ComponentProps<'textarea'>,\n    VariantProps<typeof TEXTAREA_VARIANTS> {\n  /** Shows a `used/maxLength` counter beneath the field, as UX4G specifies. */\n  showCount?: boolean;\n  containerClassName?: string;\n}\n\n/** Multi-line text field with optional character counter. */\nfunction Textarea({\n  className,\n  containerClassName,\n  state,\n  showCount = false,\n  maxLength,\n  value,\n  defaultValue,\n  id,\n  ...props\n}: ITextareaProps) {\n  const generatedId = useId();\n  const textareaId = id ?? generatedId;\n  const counterId = `${textareaId}-count`;\n  const current = String(value ?? defaultValue ?? '').length;\n  const withCount = showCount && maxLength !== undefined;\n\n  return (\n    <div className={cn('w-full', containerClassName)}>\n      <textarea\n        id={textareaId}\n        className={cn('min-h-[94px]', TEXTAREA_VARIANTS({ state }), className)}\n        maxLength={maxLength}\n        value={value}\n        defaultValue={defaultValue}\n        aria-describedby={withCount ? counterId : undefined}\n        {...props}\n      />\n      {withCount && (\n        <Body3 id={counterId} aria-live='polite' className='mt-1.5 block text-right text-neutral-600'>\n          {current}/{maxLength}\n        </Body3>\n      )}\n    </div>\n  );\n}\n\nexport { Textarea, TEXTAREA_VARIANTS };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}