Calendar

1"use client";
2 
3import * as React from "react";
4import { DayPicker } from "react-day-picker";
5 
6import { buttonVariants } from "@/registry/default/button/button";
7 
8import { cn } from "@/lib/utils";
9 
10import { HugeiconsIcon } from "@hugeicons/react";
11import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
12function Calendar({
13  classNames,
14  ...props
15}: React.ComponentProps<typeof DayPicker>) {
16  return (
17    <div
18      className={cn(
19        "size-fit rounded-md p-0.5 pt-0",
20        "bg-muted ring-border/60 ring-1",
21        props.className,
22      )}
23    >
24      <DayPicker
25        showOutsideDays
26        classNames={{
27          root: cn(
28            "relative size-fit select-none border-none",
29            classNames?.root,
30          ),
31          months: cn(
32            "flex flex-col md:flex-row [&>*:not(:first-child):not(:last-child)]:md:mr-2",
33            classNames?.months,
34          ),
35          month: cn("m-0 text-center", classNames?.month),
36          month_caption: cn(
37            "relative flex h-9 items-center justify-center bg-transparent px-10",
38            classNames?.month_caption,
39          ),
40          caption_label: cn("text-sm font-medium", classNames?.caption_label),
41          today: cn("bg-accent", classNames?.today),
42          week: cn("flex justify-center py-0.5 last:pb-2", classNames?.week),
43          day: cn(
44            "flex size-9 items-center justify-center rounded-md text-sm font-normal hover:[&:has(>button)]:bg-surface-hover hover:[&:has(>button)]:text-accent-foreground",
45            classNames?.day,
46          ),
47          day_button: cn(
48            "size-9 rounded-md focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent outline-solid focus-visible:outline-2 focus-visible:outline-offset-2",
49            classNames?.day_button,
50          ),
51          weekdays: cn(
52            "flex justify-center mb-1 px-4 pt-2",
53            classNames?.weekdays,
54          ),
55          weekday: cn(
56            "size-9 text-sm font-normal text-muted-foreground",
57            classNames?.weekday,
58          ),
59          outside: cn(
60            "text-muted-foreground/80 hover:text-muted-foreground!",
61            classNames?.outside,
62          ),
63          selected: cn(
64            "bg-primary! text-primary-foreground! hover:bg-primary! hover:text-primary-foreground!",
65            classNames?.selected,
66          ),
67          range_middle: cn(
68// … truncated