Calendar

1"use client";
2 
3import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "blode-icons-react";
4import * as React from "react";
5import { DayPicker, getDefaultClassNames } from "react-day-picker";
6import type { DayButton, Locale } from "react-day-picker";
7 
8import { cn } from "@/lib/utils";
9import { Button, buttonVariants } from "@/components/ui/button";
10 
11const CalendarDayButton = ({
12  className,
13  day,
14  modifiers,
15  locale,
16  ...props
17}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) => {
18  const defaultClassNames = getDefaultClassNames();
19 
20  const ref = React.useRef<HTMLButtonElement>(null);
21  React.useEffect(() => {
22    if (modifiers.focused) {
23      ref.current?.focus();
24    }
25  }, [modifiers.focused]);
26 
27  return (
28    <Button
29      className={cn(
30        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 font-normal leading-none data-[range-end=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-end=true]:bg-primary data-[range-middle=true]:bg-muted data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
31        defaultClassNames.day,
32        className,
33      )}
34      data-day={day.date.toLocaleDateString(locale?.code ?? "en-US")}
35      data-range-end={modifiers.range_end}
36      data-range-middle={modifiers.range_middle}
37      data-range-start={modifiers.range_start}
38      data-selected-single={
39        modifiers.selected &&
40        !modifiers.range_start &&
41        !modifiers.range_end &&
42        !modifiers.range_middle
43      }
44      ref={ref}
45      size="icon"
46      variant="ghost"
47      {...props}
48    />
49  );
50};
51 
52const Calendar = ({
53  className,
54  classNames,
55  showOutsideDays = true,
56  captionLayout = "label",
57  buttonVariant = "ghost",
58  locale,
59  formatters,
60  components,
61  ...props
62}: React.ComponentProps<typeof DayPicker> & {
63// … truncated