{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-field",
  "dependencies": [
    "react-aria-components",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/field.json",
    "https://taki-ui.com/r/input.json",
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/date-field.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  composeRenderProps,\n  DateInputProps,\n  DateSegment,\n  DateValue,\n  ValidationResult,\n} from \"react-aria-components\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cn } from \"../lib/utils\"\nimport { FieldDescription, FieldError, FieldLabel } from \"./field\"\nimport { inputStyles } from \"./input\"\n\nexport interface DateFieldProps<T extends DateValue>\n  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={composeRenderProps(props.className, (className) =>\n        cn(\"flex flex-col gap-1\", className)\n      )}\n    >\n      {label && <FieldLabel>{label}</FieldLabel>}\n      <DateInput />\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{errorMessage}</FieldError>\n    </AriaDateField>\n  )\n}\n\nconst segmentStyles = tv({\n  base: \"inline p-0.5 type-literal:px-0 rounded-xs outline-0 forced-color-adjust-none caret-transparent text-foreground\",\n  variants: {\n    isPlaceholder: {\n      true: \"text-muted-foreground italic\",\n    },\n    isDisabled: {\n      true: \"text-muted-foreground opacity-50 forced-colors:text-[GrayText]\",\n    },\n    isFocused: {\n      true: \"bg-primary text-primary-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n    },\n  },\n})\n\nconst dateInputStyles = tv({\n  extend: inputStyles,\n  base: \"flex h-9 items-center\",\n  variants: {\n    isFocusWithin: {\n      true: \"border-ring ring-ring/50 ring-[3px]\",\n    },\n  },\n})\n\nexport function DateInput(props: Omit<DateInputProps, \"children\">) {\n  const { className, ...rest } = props\n\n  return (\n    <AriaDateInput\n      data-slot=\"input\"\n      className={composeRenderProps(className, (className, renderProps) =>\n        dateInputStyles({\n          ...renderProps,\n          className,\n        })\n      )}\n      {...rest}\n    >\n      {(segment) => <DateSegment segment={segment} className={segmentStyles} />}\n    </AriaDateInput>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}