Calendar

1"use client";
2 
3import * as React from "react";
4import {
5  ChevronDown,
6  ChevronLeft,
7  ChevronRight,
8  ChevronUp,
9} from "lucide-react";
10import { DayPicker, type ChevronProps } from "react-day-picker";
11 
12import { cn } from "@/lib/utils";
13import { buttonVariants } from "@/components/ui/button";
14 
15function Calendar({
16  className,
17  classNames,
18  showOutsideDays = true,
19  ...props
20}: React.ComponentProps<typeof DayPicker>) {
21  return (
22    <DayPicker
23      showOutsideDays={showOutsideDays}
24      className={cn(
25        "w-fit rounded-2xl border border-foreground/10 bg-background/80 p-3 shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_75%,transparent)]",
26        className,
27      )}
28      classNames={{
29        months: "relative flex flex-col gap-5 sm:flex-row",
30        month: "flex w-full flex-col gap-4",
31        nav: "absolute inset-x-0 top-0 flex items-center justify-between",
32        button_previous: cn(
33          buttonVariants({ variant: "ghost", size: "icon-sm" }),
34          "size-8 hover:-translate-y-0",
35        ),
36        button_next: cn(
37          buttonVariants({ variant: "ghost", size: "icon-sm" }),
38          "size-8 hover:-translate-y-0",
39        ),
40        month_caption: "flex h-8 items-center justify-center px-9",
41        caption_label: "text-sm font-semibold tracking-[-0.02em]",
42        dropdowns:
43          "flex h-8 items-center justify-center gap-1 text-sm font-semibold",
44        dropdown_root:
45          "relative rounded-lg border border-foreground/10 bg-foreground/[.035] px-2 py-1",
46        dropdown: "absolute inset-0 cursor-pointer opacity-0",
47        month_grid: "w-full border-collapse",
48        weekdays: "flex",
49        weekday:
50          "w-9 rounded-md text-center text-[0.68rem] font-semibold uppercase tracking-[0.06em] text-muted-foreground",
51        week: "mt-1 flex w-full",
52        day: "relative size-9 p-0 text-center text-sm [&:has([aria-selected].range-end)]:rounded-r-xl [&:has([aria-selected].range-start)]:rounded-l-xl [&:has([aria-selected])]:bg-primary/10",
53        day_button: cn(
54          buttonVariants({ variant: "ghost", size: "icon-sm" }),
55          "size-9 rounded-xl p-0 font-medium hover:-translate-y-0",
56        ),
57        range_start: "range-start",
58        range_middle:
59          "aria-selected:bg-primary/10 aria-selected:text-foreground aria-selected:rounded-none",
60        range_end: "range-end",
61        selected:
62// … truncated