{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form",
  "type": "registry:ui",
  "title": "Form",
  "description": "Tactile Pop-Brutalist form item, label, description, and validation error message wrappers.",
  "dependencies": [
    "@radix-ui/react-slot",
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/form.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '@/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/* Form Item Context & Helpers                                        */\n/* ------------------------------------------------------------------ */\n\ninterface FormItemContextValue {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nexport const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn('space-y-2 font-sans', className)} {...props} />\n      </FormItemContext.Provider>\n    )\n  }\n)\nFormItem.displayName = 'FormItem'\n\nexport const useFormField = () => {\n  const itemContext = React.useContext(FormItemContext)\n  const id = itemContext.id ?? React.useId()\n\n  return {\n    id,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/* Form Label                                                         */\n/* ------------------------------------------------------------------ */\n\nexport interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nexport const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const { formItemId } = useFormField()\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={formItemId}\n        className={cn(\n          'block font-display text-sm font-black text-rk-ink tracking-wide select-none',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"ml-1 text-red-500 font-extrabold\">*</span>}\n      </label>\n    )\n  }\n)\nFormLabel.displayName = 'FormLabel'\n\n/* ------------------------------------------------------------------ */\n/* Form Control                                                       */\n/* ------------------------------------------------------------------ */\n\nexport const FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot> & { hasError?: boolean }\n>(({ hasError, ...props }, ref) => {\n  const { formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={formDescriptionId}\n      aria-invalid={hasError ? true : undefined}\n      aria-errormessage={hasError ? formMessageId : undefined}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = 'FormControl'\n\n/* ------------------------------------------------------------------ */\n/* Form Description                                                   */\n/* ------------------------------------------------------------------ */\n\nexport const FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-xs font-semibold text-rk-ink/60 leading-normal', className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = 'FormDescription'\n\n/* ------------------------------------------------------------------ */\n/* Form Message (Error Badge)                                         */\n/* ------------------------------------------------------------------ */\n\nexport interface FormMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  error?: string\n}\n\nexport const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(\n  ({ className, error, children, ...props }, ref) => {\n    const { formMessageId } = useFormField()\n    const message = error || children\n\n    if (!message) return null\n\n    return (\n      <div\n        ref={ref}\n        id={formMessageId}\n        role=\"alert\"\n        className={cn(\n          'inline-flex items-center gap-1.5 rounded-lg border-2 border-rk-ink bg-red-100 px-2.5 py-1 text-xs font-extrabold text-red-900 rk-shadow-xs animate-in fade-in-50 slide-in-from-top-1',\n          className\n        )}\n        {...props}\n      >\n        <span>⚠️</span>\n        <span>{message}</span>\n      </div>\n    )\n  }\n)\nFormMessage.displayName = 'FormMessage'\n",
      "type": "registry:ui",
      "target": "components/ui/form.tsx"
    }
  ]
}