{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-datefield",
  "type": "registry:ui",
  "title": "DateField",
  "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/DateField.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  DateField as AriaDateField,\n  type DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  type DateInputProps,\n  DateSegment,\n  type DateValue,\n  type ValidationResult\n} from 'react-aria-components/DateField';\nimport {tv} from 'tailwind-variants';\nimport {Description, FieldError, Label, fieldGroupStyles} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<T> {\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nexport function DateField<T extends DateValue>({\n  label,\n  description,\n  errorMessage,\n  ...props\n}: DateFieldProps<T>) {\n  return (\n    <AriaDateField\n      {...props}\n      className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>\n      {label && <Label>{label}</Label>}\n      <DateInput />\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </AriaDateField>\n  );\n}\n\nconst segmentStyles = tv({\n  base: 'inline p-0.5 whitespace-nowrap type-literal:p-0 rounded-xs outline outline-0 forced-color-adjust-none caret-transparent text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText] [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isPlaceholder: {\n      true: 'text-neutral-600 dark:text-neutral-400'\n    },\n    isDisabled: {\n      true: 'text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    },\n    isFocused: {\n      true: 'bg-blue-600 text-white dark:text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'\n    }\n  }\n});\n\nexport function DateInput(props: Omit<DateInputProps, 'children'>) {\n  return (\n    <AriaDateInput\n      className={renderProps =>\n        fieldGroupStyles({\n          ...renderProps,\n          class:\n            'inline min-w-[150px] px-3 h-9 text-sm leading-8.5 font-sans cursor-text disabled:cursor-default whitespace-nowrap overflow-x-auto [scrollbar-width:none]'\n        })\n      }\n      {...props}>\n      {segment => <DateSegment segment={segment} className={segmentStyles} />}\n    </AriaDateInput>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}