Aurora Date Picker

1"use client"
2 
3import * as React from "react"
4import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"
5import { Button } from "@/registry/aurora/ui/button"
6 
7export interface DatePickerProps
8  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
9  /** Optional field label rendered above the trigger. */
10  label?: string
11  /** Controlled selected date. */
12  value?: Date
13  /** Uncontrolled initial selected date. */
14  defaultValue?: Date
15  /** Fired with the newly selected date. */
16  onChange?: (date: Date) => void
17  /** Open the popover by default (uncontrolled). */
18  defaultOpen?: boolean
19  /** Placeholder text shown in the trigger when no date is selected. */
20  placeholder?: string
21}
22 
23function sameDay(a?: Date, b?: Date) {
24  return Boolean(a && b && a.toDateString() === b.toDateString())
25}
26 
27/**
28 * Build the visible month grid as weeks of 7 cells. Leading days before the 1st
29 * and trailing days after the last day of the month are rendered as empty cells
30 * (CD shows only the current month's dates — no greyed adjacent-month days).
31 */
32function buildCells(month: Date): (Date | null)[] {
33  const year = month.getFullYear()
34  const m = month.getMonth()
35  const firstWeekday = new Date(year, m, 1).getDay()
36  const daysInMonth = new Date(year, m + 1, 0).getDate()
37 
38  const cells: (Date | null)[] = []
39  for (let i = 0; i < firstWeekday; i += 1) cells.push(null)
40  for (let day = 1; day <= daysInMonth; day += 1) cells.push(new Date(year, m, day))
41  while (cells.length % 7 !== 0) cells.push(null)
42  return cells
43}
44 
45  const triggerFormatter = new Intl.DateTimeFormat(undefined, {
46  month: "short",
47  day: "numeric",
48  year: "numeric",
49})
50 
51/**
52 * Aurora DatePicker — trigger + month-grid popover.
53 *
54 * Visual spec ported 1:1 from the Claude Design source: a lit-outline trigger
55 * button (calendar icon + formatted date + chevron) over an Aurora panel popover
56 * holding a self-contained month grid. The selected day is a cyan-filled, glowing
57 * pill; "today" is a cyan-outlined cell. Reads only `--aurora-*` tokens.
58 */
59export function DatePicker(
60  {
61    ref,
62    className,
63    label,
64    value,
65    defaultValue,
66    onChange,
67    defaultOpen = false,
68    placeholder = "Select date",
69    ...props
70  }: DatePickerProps & { ref?: React.Ref<HTMLDivElement> }
71) {
72    const isControlled = value !== undefined
73    const [internalValue, setInternalValue] = React.useState<Date | undefined>(defaultValue)
74// … truncated