Date Picker

1"use client";
2 
3import * as React from "react";
4import { CalendarIcon, X } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { Button, type ButtonProps } from "@/components/ui/atoms/button";
8import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/molecules/popover";
9import { Calendar, type CalendarSingleProps } from "@/components/ui/molecules/calendar";
10import type { FloatingSurfaceProps } from "@/components/ui/recipes";
11 
12export interface DatePickerProps {
13  /** Controlled selection. Passing the prop makes selection controlled, including `undefined`. */
14  selected?: Date;
15  /** Initial value for uncontrolled usage. */
16  defaultSelected?: Date;
17  onSelect?: (date: Date | undefined) => void;
18  /** Controlled popover state. */
19  open?: boolean;
20  defaultOpen?: boolean;
21  onOpenChange?: (open: boolean) => void;
22  placeholder?: string;
23  formatDate?: (date: Date) => string;
24  className?: string;
25  disabled?: boolean;
26  clearable?: boolean;
27  closeOnSelect?: boolean;
28  triggerVariant?: ButtonProps["variant"];
29  triggerSize?: ButtonProps["size"];
30  triggerRadius?: ButtonProps["radius"];
31  popoverSurface?: NonNullable<FloatingSurfaceProps["surface"]>;
32  popoverRadius?: NonNullable<FloatingSurfaceProps["radius"]>;
33  calendarProps?: Omit<CalendarSingleProps, "mode" | "selected" | "defaultSelected" | "onSelect">;
34}
35 
36function defaultFormat(date: Date): string {
37  return date.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" });
38}
39 
40function DatePicker(props: DatePickerProps) {
41  const {
42    calendarProps,
43    className,
44    clearable = false,
45    closeOnSelect = true,
46    defaultOpen = false,
47    defaultSelected,
48    disabled = false,
49    formatDate = defaultFormat,
50    onOpenChange,
51    onSelect,
52    placeholder = "Pick a date",
53    popoverRadius = "xl",
54    popoverSurface = "glass",
55    triggerRadius = "md",
56    triggerSize = "default",
57    triggerVariant = "outline",
58  } = props;
59  const selectionControlled = Object.prototype.hasOwnProperty.call(props, "selected");
60  const openControlled = Object.prototype.hasOwnProperty.call(props, "open");
61  const [internalSelected, setInternalSelected] = React.useState(defaultSelected);
62  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
63  const selected = selectionControlled ? props.selected : internalSelected;
64  const open = openControlled ? (props.open ?? false) : internalOpen;
65 
66  const setOpen = (next: boolean) => {
67// … truncated