{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-field",
  "type": "registry:ui",
  "title": "Field",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-merge",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Field.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {type FieldErrorProps, FieldError as RACFieldError} from 'react-aria-components/FieldError';\nimport {Group, type GroupProps} from 'react-aria-components/Group';\nimport {type InputProps, Input as RACInput} from 'react-aria-components/Input';\nimport {type LabelProps, Label as RACLabel} from 'react-aria-components/Label';\nimport {Text, type TextProps} from 'react-aria-components/Text';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {twMerge} from 'tailwind-merge';\nimport {tv} from 'tailwind-variants';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport function Label(props: LabelProps) {\n  return (\n    <RACLabel\n      {...props}\n      className={twMerge(\n        'font-sans text-sm text-neutral-600 dark:text-neutral-300 font-medium cursor-default w-fit',\n        props.className\n      )}\n    />\n  );\n}\n\nexport function Description(props: TextProps) {\n  return (\n    <Text\n      {...props}\n      slot=\"description\"\n      className={twMerge(\n        'text-xs text-neutral-600 dark:text-neutral-400 group-disabled:text-neutral-200 dark:group-disabled:text-neutral-700 contain-inline-size',\n        props.className\n      )}\n    />\n  );\n}\n\nexport function FieldError(props: FieldErrorProps) {\n  return (\n    <RACFieldError\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'text-xs text-red-600 contain-inline-size forced-colors:text-[Mark]'\n      )}\n    />\n  );\n}\n\nexport const fieldBorderStyles = tv({\n  base: 'transition',\n  variants: {\n    isFocusWithin: {\n      false:\n        'border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]',\n      true: 'border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]'\n    },\n    isInvalid: {\n      true: 'border-red-600 dark:border-red-600 forced-colors:border-[Mark]'\n    },\n    isDisabled: {\n      true: 'border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]'\n    }\n  }\n});\n\nexport const fieldGroupStyles = tv({\n  extend: focusRing,\n  base: 'group flex items-center h-9 box-border bg-white dark:bg-neutral-900 forced-colors:bg-[Field] border rounded-lg overflow-hidden transition',\n  variants: fieldBorderStyles.variants\n});\n\nexport function FieldGroup(props: GroupProps) {\n  return (\n    <Group\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        fieldGroupStyles({...renderProps, className})\n      )}\n    />\n  );\n}\n\nexport function Input(props: InputProps) {\n  return (\n    <RACInput\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white dark:bg-neutral-900 font-sans text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-600 dark:placeholder:text-neutral-400 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-600 [-webkit-tap-highlight-color:transparent]'\n      )}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}