{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "datefield-rac",
  "title": "Date Field (React Aria)",
  "description": "Dates and times typed segment by segment.",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/ui/datefield-rac.tsx",
      "content": "'use client';\n\nimport {\n  composeRenderProps,\n  DateField as DateFieldRac,\n  DateInput as DateInputRac,\n  DateSegment as DateSegmentRac,\n  TimeField as TimeFieldRac,\n  type DateFieldProps,\n  type DateInputProps as DateInputRacProps,\n  type DateSegmentProps,\n  type DateValue,\n  type TimeFieldProps,\n  type TimeValue,\n} from 'react-aria-components';\n\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nfunction DateField<T extends DateValue>({\n  className,\n  children,\n  ...props\n}: DateFieldProps<T>) {\n  return (\n    <DateFieldRac\n      className={composeRenderProps(className, (value) => cn(value))}\n      {...props}\n    >\n      {children}\n    </DateFieldRac>\n  );\n}\n\nfunction TimeField<T extends TimeValue>({\n  className,\n  children,\n  ...props\n}: TimeFieldProps<T>) {\n  return (\n    <TimeFieldRac\n      className={composeRenderProps(className, (value) => cn(value))}\n      {...props}\n    >\n      {children}\n    </TimeFieldRac>\n  );\n}\n\nconst SEGMENT = [\n  'inline rounded-[4px] p-0.5 tabular-nums text-foreground caret-transparent outline-none',\n  'data-placeholder:text-muted-foreground/75 data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground/75',\n  'data-focused:bg-primary/10 data-focused:text-foreground data-focused:data-placeholder:text-foreground',\n  'data-invalid:text-destructive-ink data-invalid:data-placeholder:text-destructive-ink data-invalid:data-focused:bg-destructive data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white',\n  'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n].join(' ');\n\nconst NARROW_NO_BREAK_SPACE = '\\u202f';\n\n/**\n * Node and the browser ship different ICU data: one puts a narrow no-break space before AM and PM,\n * the other a plain space, so the server HTML would not match and React would rebuild the field.\n */\nfunction segmentTextOf(text: string) {\n  return text.replaceAll(NARROW_NO_BREAK_SPACE, ' ');\n}\n\nfunction DateSegment({\n  className,\n  children,\n  segment,\n  ...props\n}: DateSegmentProps) {\n  const content = children ?? segmentTextOf(segment.text);\n\n  return (\n    <DateSegmentRac\n      segment={segment}\n      className={composeRenderProps(className, (value) => cn(SEGMENT, value))}\n      {...props}\n    >\n      {content}\n    </DateSegmentRac>\n  );\n}\n\nconst dateInputStyle = [\n  'relative inline-flex h-8 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-transparent bg-card px-2.5 text-[13px]',\n  'shadow-[0_1px_2px_rgb(0_0_0/0.05)] hairline-ring ring-foreground/12 outline-none transition-[color,box-shadow,border-color] dark:bg-foreground/[0.04] dark:ring-foreground/15',\n  'data-focus-within:border-foreground/30 data-focus-within:ring-[3px] data-focus-within:ring-ring/25 dark:data-focus-within:ring-ring/25',\n  'data-focus-within:has-aria-invalid:border-destructive/60 data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40',\n].join(' ');\n\ntype DateInputProps = Omit<DateInputRacProps, 'children' | 'className'> & {\n  className?: string;\n  unstyled?: boolean;\n};\n\nfunction DateInput({ className, unstyled = false, ...props }: DateInputProps) {\n  const isStyled = !unstyled;\n\n  return (\n    <DateInputRac\n      className={composeRenderProps(className, (value) =>\n        cn(isStyled && dateInputStyle, value)\n      )}\n      {...props}\n    >\n      {(segment) => <DateSegment segment={segment} />}\n    </DateInputRac>\n  );\n}\n\nexport { DateField, DateInput, DateSegment, TimeField, dateInputStyle };\nexport type { DateInputProps };\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}