Date picker

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiCalendarBlankOutline } from "@mdi/js";
5import { type Locale, format } from "date-fns";
6import * as React from "react";
7import type { DateRange } from "react-day-picker";
8 
9import { Button } from "@/components/ui/button";
10import { Calendar } from "@/components/ui/calendar";
11import {
12  Popover,
13  PopoverContent,
14  PopoverTrigger,
15} from "@/components/ui/popover";
16import { cn } from "@/lib/utils";
17 
18type CalendarProps = React.ComponentProps<typeof Calendar>;
19 
20/**
21 * Optional ARIA strings for the date picker UI outside the calendar grid.
22 * For DayPicker label creators (nav, days, etc.), use `calendarProps.ariaLabels`.
23 */
24export type DatePickerAriaLabels = {
25  /**
26   * `aria-label` on the popover trigger when **no date is selected** (empty state).
27   * When a date is shown, `aria-label` is omitted so the visible formatted date is the accessible name.
28   */
29  popoverTrigger?: string;
30};
31 
32export type DatePickerSimpleCalendarProps = Omit<
33  CalendarProps,
34  "mode" | "selected" | "onSelect"
35>;
36 
37export type DatePickerSimpleProps = {
38  /** Uncontrolled initial selection */
39  defaultValue?: Date;
40  /** Fires when the selected date changes */
41  onChange?: (date: Date | undefined) => void;
42  /** Trigger label when empty (e.g. translated placeholder) */
43  placeholder?: React.ReactNode;
44  /** `date-fns` format string for the trigger when a date is selected */
45  dateFormat?: string;
46  /** Used with `format()` and forwarded to `Calendar` */
47  locale?: Locale;
48  disabled?: boolean;
49  id?: string;
50  className?: string;
51  ariaLabels?: DatePickerAriaLabels;
52  /** Props forwarded to `Calendar`; `mode`, `selected`, and `onSelect` are fixed */
53  calendarProps?: DatePickerSimpleCalendarProps;
54} & (
55  | {
56      /** Controlled value; pass `undefined` to clear. Omit for uncontrolled usage. */
57      value: Date | undefined;
58    }
59  | { value?: never }
60);
61 
62function DatePickerSimple(props: DatePickerSimpleProps) {
63  const {
64    defaultValue,
65    onChange,
66    placeholder = "Pick a date",
67    dateFormat = "PPP",
68    locale,
69    disabled,
70    id,
71    className,
72    ariaLabels,
73    calendarProps,
74  } = props;
75 
76  const isControlled = "value" in props;
77  const valueProp = isControlled ? props.value : undefined;
78 
79  const [internalDate, setInternalDate] = React.useState<Date | undefined>(
80    defaultValue,
81  );
82 
83  const date = isControlled ? valueProp : internalDate;
84 
85  const setDate = React.useCallback(
86// … truncated