Date Field

"use client";
 
import {
  DateField as DateFieldPrimitive,
  type DateFieldProps as DateFieldPrimitiveProps,
  DateInput as DateInputPrimitive,
  DateSegment,
  type DateValue,
} from "react-aria-components";
import { DateFieldStyles } from "./styles";
 
export interface DateFieldRootProps<T extends DateValue>
  extends DateFieldPrimitiveProps<T> {}
 
export function DateFieldRoot<T extends DateValue>({
  className,
  ...props
}: DateFieldRootProps<T>) {
  return (
    <DateFieldPrimitive
      {...props}
      className={(values) =>
        DateFieldStyles.Root({
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}
 
export interface DateFieldInputProps
  extends React.ComponentProps<typeof DateInputPrimitive> {}
 
export function DateFieldInput({ className, ...props }: DateFieldInputProps) {
  return (
    <DateInputPrimitive
      {...props}
      className={(values) =>
        DateFieldStyles.Input({
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}
 
export interface DateFieldSegmentProps
  extends React.ComponentProps<typeof DateSegment> {}
 
export function DateFieldSegment({
  className,
  ...props
}: DateFieldSegmentProps) {
  return (
    <DateSegment
      {...props}
      className={(values) =>
        DateFieldStyles.Segment({
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}

export * from "./date-field";
export * as DateField from "./namespace";
export * from "./styles";

export {
  DateFieldRoot as Root,
  DateFieldInput as Input,
  DateFieldSegment as Segment,
} from "./date-field";

import { compose, cva } from "~/lib/cva";
import { TextFieldStyles } from "../textfield/styles";
 
export const DateFieldStyles = {
  Root: cva({
    base: ["group flex flex-col gap-y-1.5"],
  }),
  Input: compose(
    TextFieldStyles.Root,
    cva({
      base: [
        "block w-full min-w-sm px-2.5 py-2 text-base uppercase",
        "disabled:bg-secondary",
        "lg:text-sm/[1.4rem]",
      ],
    })
  ),
  Segment: cva({
    base: [
      "inline rounded p-0.5 text-fg tabular-nums caret-transparent outline-hidden",
      "type-literal:px-0 type-literal:text-muted-fg/70",
      "data-placeholder:text-muted-fg/70",
      "focus:bg-accent focus:text-fg focus:data-placeholder:text-fg",
      "invalid:text-danger invalid:data-placeholder:text-danger",
      "invalid:focus:bg-danger invalid:focus:text-white invalid:focus:placeholder:text-white",
      "disabled:cursor-not-allowed disabled:opacity-50",
    ],
  }),
};