"use client";

import {
  composeRenderProps,
  DateInput,
  DateSegment,
  type DateValue,
  DateField as RACDateField,
} from "react-aria-components";
import { cn } from "~/registry/lib/cva";
import { DateFieldStyles } from "./styles";

export interface DateFieldRootProps<T extends DateValue>
  extends React.ComponentProps<typeof RACDateField<T>> {}

export function DateFieldRoot<T extends DateValue>({
  className,
  ...props
}: DateFieldRootProps<T>) {
  return (
    <RACDateField
      {...props}
      className={composeRenderProps(className, (className) =>
        cn("group grid gap-3", className)
      )}
      data-slot="date-field-root"
    />
  );
}

export interface DateFieldInputProps
  extends React.ComponentProps<typeof DateInput> {}

export function DateFieldInput(props: DateFieldInputProps) {
  return <DateInput data-slot="date-field-input" {...props} />;
}

export interface DateFieldSegmentProps
  extends React.ComponentProps<typeof DateSegment> {}

export function DateFieldSegment({
  className,
  ...props
}: DateFieldSegmentProps) {
  return (
    <DateSegment
      {...props}
      className={composeRenderProps(className, (className) =>
        DateFieldStyles.Segment({ className })
      )}
      data-slot="date-field-segment"
    />
  );
}
date-field

Preview

Installation

Usage
