Aurora Calendar

1"use client"
2 
3import * as React from "react"
4import { ChevronLeft, ChevronRight } from "lucide-react"
5import { Button } from "@/registry/aurora/ui/button"
6 
7export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
8  month?: Date
9  selected?: Date
10  onSelect?: (date: Date) => void
11  onMonthChange?: (month: Date) => void
12}
13 
14function sameDay(a?: Date, b?: Date) {
15  return Boolean(a && b && a.toDateString() === b.toDateString())
16}
17 
18/**
19 * Build the visible month grid as weeks of 7 cells. Leading days before the 1st
20 * and trailing days after the last day of the month are rendered as empty cells
21 * (CD shows only the current month's dates — no greyed adjacent-month days).
22 */
23function buildCells(month: Date): (Date | null)[] {
24  const year = month.getFullYear()
25  const m = month.getMonth()
26  const firstWeekday = new Date(year, m, 1).getDay()
27  const daysInMonth = new Date(year, m + 1, 0).getDate()
28 
29  const cells: (Date | null)[] = []
30  for (let i = 0; i < firstWeekday; i += 1) cells.push(null)
31  for (let day = 1; day <= daysInMonth; day += 1) cells.push(new Date(year, m, day))
32  while (cells.length % 7 !== 0) cells.push(null)
33  return cells
34}
35 
36export function Calendar({ month, selected, onSelect, onMonthChange, className, style, ...props }: CalendarProps) {
37  const [internalVisibleMonth, setInternalVisibleMonth] = React.useState(month ?? new Date())
38  const visibleMonth = month ?? internalVisibleMonth
39  const cells = buildCells(visibleMonth)
40  const formatter = new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" })
41  const today = new Date()
42 
43  const handleMonthChange = React.useCallback(
44    (nextMonth: Date) => {
45      if (month === undefined) {
46        setInternalVisibleMonth(nextMonth)
47      }
48      onMonthChange?.(nextMonth)
49    },
50    [month, onMonthChange]
51  )
52 
53  return (
54    <div
55      className={["grid gap-4 border p-4", className].filter(Boolean).join(" ")}
56      style={{
57        width: "320px",
58        borderRadius: "16px",
59        background: "var(--aurora-panel-medium)",
60        borderColor: "var(--aurora-border-default)",
61        color: "var(--aurora-text-primary)",
62        boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
63        ...style,
64      }}
65      {...props}
66    >
67      <div className="flex items-center justify-between gap-2">
68        <Button
69          type="button"
70          variant="neutral"
71          size="icon"
72          aria-label="Previous month"
73// … truncated