{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-colorfield",
  "type": "registry:ui",
  "title": "ColorField",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/ColorField.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  ColorField as AriaColorField,\n  type ColorFieldProps as AriaColorFieldProps,\n  type ValidationResult\n} from 'react-aria-components/ColorField';\nimport {tv} from 'tailwind-variants';\nimport {Description, FieldError, Input, Label, fieldBorderStyles} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nconst inputStyles = tv({\n  extend: focusRing,\n  base: 'border-1 rounded-lg min-h-9 font-sans text-sm py-0 px-3 box-border transition [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isFocused: fieldBorderStyles.variants.isFocusWithin,\n    isInvalid: fieldBorderStyles.variants.isInvalid,\n    isDisabled: fieldBorderStyles.variants.isDisabled\n  }\n});\n\nexport interface ColorFieldProps extends AriaColorFieldProps {\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nexport function ColorField({label, description, errorMessage, ...props}: ColorFieldProps) {\n  return (\n    <AriaColorField\n      {...props}\n      className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1 font-sans')}>\n      {label && <Label>{label}</Label>}\n      <Input className={inputStyles} />\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </AriaColorField>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}