"use client" import { VariantProps } from "class-variance-authority" import { DateField as AriaDateField, DateFieldProps as AriaDateFieldProps, DateInput as AriaDateInput, DateInputProps as AriaDateInputProps, DateSegment as AriaDateSegment, DateSegmentProps as AriaDateSegmentProps, DateValue as AriaDateValue, TimeField as AriaTimeField, TimeFieldProps as AriaTimeFieldProps, TimeValue as AriaTimeValue, ValidationResult as AriaValidationResult, composeRenderProps, Text, } from "react-aria-components" import { cn } from "@/lib/utils" import { FieldError, fieldGroupVariants, Label } from "./field" const DateField = AriaDateField const TimeField = AriaTimeField function DateSegment({ className, ...props }: AriaDateSegmentProps) { return ( cn( "type-literal:px-0 inline rounded p-0.5 caret-transparent outline outline-0", /* Placeholder */ "data-[placeholder]:text-muted-foreground", /* Disabled */ "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", /* Focused */ "data-[focused]:bg-accent data-[focused]:text-accent-foreground", /* Invalid */ "data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive", className ) )} {...props} /> ) } interface DateInputProps extends AriaDateInputProps, VariantProps {} function DateInput({ className, variant, ...props }: Omit) { return ( cn(fieldGroupVariants({ variant }), "text-sm", className) )} {...props} > {(segment) => } ) } interface JollyDateFieldProps extends AriaDateFieldProps { label?: string description?: string errorMessage?: string | ((validation: AriaValidationResult) => string) } function JollyDateField({ label, description, className, errorMessage, ...props }: JollyDateFieldProps) { return ( cn("group flex flex-col gap-2", className) )} {...props} > {label} {description && ( {description} )} {errorMessage} ) } interface JollyTimeFieldProps extends AriaTimeFieldProps { label?: string description?: string errorMessage?: string | ((validation: AriaValidationResult) => string) } function JollyTimeField({ label, description, errorMessage, className, ...props }: JollyTimeFieldProps) { return ( cn("group flex flex-col gap-2", className) )} {...props} > {label} {description && {description}} {errorMessage} ) } export { DateField, DateSegment, DateInput, TimeField, JollyDateField, JollyTimeField, } export type { DateInputProps, JollyDateFieldProps, JollyTimeFieldProps }