{"name":"datefield-rac","title":"Date Field","description":"Date and time input with segmented fields.","type":"registry:ui","docs":"/components/datefield-rac","categories":["forms","data-entry"],"dependencies":["react-aria-components"],"files":[{"path":"components/ui/datefield-rac.tsx","target":"components/ui/datefield-rac.tsx","type":"registry:ui","content":"\"use client\";\n\nimport {\n  composeRenderProps,\n  type DateFieldProps,\n  DateField as DateFieldRac,\n  type DateInputProps as DateInputPropsRac,\n  DateInput as DateInputRac,\n  type DateSegmentProps,\n  DateSegment as DateSegmentRac,\n  type DateValue as DateValueRac,\n  type TimeFieldProps,\n  TimeField as TimeFieldRac,\n  type TimeValue as TimeValueRac,\n} from \"react-aria-components\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction DateField<T extends DateValueRac>({\n  className,\n  children,\n  ...props\n}: DateFieldProps<T>) {\n  return (\n    <DateFieldRac\n      className={composeRenderProps(className, (className) => cn(className))}\n      {...props}\n    >\n      {children}\n    </DateFieldRac>\n  );\n}\n\nfunction TimeField<T extends TimeValueRac>({\n  className,\n  children,\n  ...props\n}: TimeFieldProps<T>) {\n  return (\n    <TimeFieldRac\n      className={composeRenderProps(className, (className) => cn(className))}\n      {...props}\n    >\n      {children}\n    </TimeFieldRac>\n  );\n}\n\nfunction DateSegment({ className, ...props }: DateSegmentProps) {\n  return (\n    <DateSegmentRac\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"inline data-focused:bg-accent data-invalid:data-focused:bg-destructive data-disabled:opacity-50 p-0.5 data-[type=literal]:px-0 rounded outline-hidden text-foreground data-[type=literal]:text-muted-foreground/70 data-focused:data-placeholder:text-foreground data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-primary-foreground data-invalid:data-focused:text-primary-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 caret-transparent data-disabled:cursor-not-allowed\",\n          className,\n        ),\n      )}\n      {...props}\n      data-invalid\n    />\n  );\n}\n\nconst dateInputStyle =\n  \"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:ring-[3px] aria-invalid:border-destructive aria-invalid:data-focus-within:ring-destructive/50 aria-invalid:data-focus-within:border-destructive dark:aria-invalid:border-destructive/50\";\n\ninterface DateInputProps extends DateInputPropsRac {\n  className?: string;\n  unstyled?: boolean;\n}\n\nfunction DateInput({\n  className,\n  unstyled = false,\n  ...props\n}: Omit<DateInputProps, \"children\">) {\n  return (\n    <DateInputRac\n      className={composeRenderProps(className, (className) =>\n        cn(!unstyled && dateInputStyle, className),\n      )}\n      {...props}\n    >\n      {(segment) => <DateSegment segment={segment} />}\n    </DateInputRac>\n  );\n}\n\nexport { DateField, DateInput, dateInputStyle, DateSegment, TimeField };\nexport type { DateInputProps };\n"}]}