Day Picker

1"use client";
2 
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import {
5  DayPicker as ReactDayPicker,
6  getDefaultClassNames,
7} from "react-day-picker";
8import { buttonVariants } from "@/components/ui/button";
9import { cn } from "@/lib/utils";
10 
11export type DayPickerProps = React.ComponentProps<typeof ReactDayPicker>;
12 
13function DayPicker({
14  className,
15  classNames,
16  showOutsideDays = true,
17  ...props
18}: DayPickerProps) {
19  const defaultClassNames = getDefaultClassNames();
20 
21  return (
22    <ReactDayPicker
23      showOutsideDays={showOutsideDays}
24      className={cn("p-3", className)}
25      classNames={{
26        root: cn("w-fit", defaultClassNames.root),
27        months: cn(
28          "relative flex flex-col gap-4 md:flex-row",
29          defaultClassNames.months,
30        ),
31        month: cn("flex flex-col gap-4", defaultClassNames.month),
32 
33        month_caption: cn(
34          "relative flex h-7 items-center justify-center",
35          defaultClassNames.month_caption,
36        ),
37        caption_label: cn(
38          "text-sm font-medium",
39          defaultClassNames.caption_label,
40        ),
41 
42        nav: cn(
43          "absolute inset-x-0 top-0 flex w-full justify-between z-10",
44          defaultClassNames.nav,
45        ),
46        button_previous: cn(
47          buttonVariants({ variant: "outline" }),
48          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
49          defaultClassNames.button_previous,
50        ),
51        button_next: cn(
52          buttonVariants({ variant: "outline" }),
53          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
54          defaultClassNames.button_next,
55        ),
56 
57        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
58        weekdays: cn("flex", defaultClassNames.weekdays),
59        weekday: cn(
60          "text-muted-foreground w-9 font-normal text-[0.8rem]",
61          defaultClassNames.weekday,
62        ),
63        week: cn("flex w-full mt-2", defaultClassNames.week),
64 
65        day: cn(
66          "h-9 w-9 text-center text-sm p-0 relative",
67          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
68          "[&:has([aria-selected].day-outside)]:bg-accent/50",
69          "[&:has([aria-selected])]:bg-accent",
70          "first:[&:has([aria-selected])]:rounded-l-md",
71          "last:[&:has([aria-selected])]:rounded-r-md",
72          "focus-within:relative focus-within:z-20",
73          defaultClassNames.day,
74        ),
75        day_button: cn(
76// … truncated