Date Picker

1"use client";
2 
3import { Input as InputPrimitive } from "@base-ui/react/input";
4import { format, type Locale, startOfMonth } from "date-fns";
5import { CalendarIcon, X } from "lucide-react";
6import { motion, useReducedMotion } from "motion/react";
7import {
8  type ForwardedRef,
9  forwardRef,
10  type MouseEvent,
11  type RefObject,
12  useCallback,
13  useEffect,
14  useId,
15  useLayoutEffect,
16  useRef,
17  useState,
18} from "react";
19import { createPortal } from "react-dom";
20 
21import { Calendar, type CalendarProps } from "@/components/ui/calendar";
22import { cn } from "@/lib/utils";
23 
24const datePickerTriggerCornerClassName =
25  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
26 
27const datePickerInputShellClassName = cn(
28  "group flex w-full items-center border border-border bg-card text-left text-foreground text-sm transition-[border-color,box-shadow] focus-within:border-foreground/30 hover:border-foreground/30",
29  "[&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:opacity-50",
30  "[&:has(input[aria-invalid=true])]:border-destructive"
31);
32 
33const datePickerInputClassName = cn(
34  "min-w-0 flex-1 cursor-pointer truncate bg-transparent py-0 text-left font-medium tracking-tight outline-none focus-visible:outline-none",
35  "text-foreground placeholder:text-muted-foreground",
36  "[-webkit-tap-highlight-color:transparent]"
37);
38 
39export const DATE_PICKER_PANEL_WIDTH = {
40  sm: 212,
41  md: 240,
42  lg: 282,
43} as const;
44 
45export type DatePickerAlign = "start" | "end";
46export type DatePickerSide = "top" | "bottom";
47 
48export const DEFAULT_DATE_PICKER_FORMAT = "EEE, MMM d, yyyy";
49export const DEFAULT_DATE_PICKER_ARIA_FORMAT = "PPPP";
50const DATE_PICKER_FORM_VALUE_FORMAT = "yyyy-MM-dd";
51 
52const PANEL_GAP_PX = 12;
53const VIEWPORT_PADDING_PX = 8;
54const FOCUSABLE_SELECTOR =
55  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
56 
57export function getDatePickerPanelWidth(
58  size: NonNullable<CalendarProps["size"]> = "md"
59): number {
60  return DATE_PICKER_PANEL_WIDTH[size];
61}
62 
63export function resolveDatePickerViewMonth(
64  value: Date | null | undefined,
65  selected: Date | null | undefined,
66  fallback: Date = new Date()
67): Date {
68  const source = value !== undefined ? value : selected;
69  return startOfMonth(source ?? fallback);
70}
71 
72export function formatDatePickerLabel(
73  date: Date,
74  dateFormat: string,
75  locale?: Locale
76): string {
77// … truncated