Calendar (Tailwind)

1"use client";
2 
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import * as React from "react";
5import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
6import { cn } from "@/lib/utils";
7 
8interface CalendarDayButtonProps extends React.ComponentProps<typeof DayButton> {}
9 
10function CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps) {
11  const defaultClassNames = getDefaultClassNames();
12  const buttonRef = React.useRef<HTMLButtonElement>(null);
13 
14  React.useEffect(() => {
15    if (modifiers.focused) {
16      buttonRef.current?.focus();
17    }
18  }, [modifiers.focused]);
19 
20  return (
21    <button
22      className={cn(
23        "flex aspect-square h-auto w-full min-w-8 flex-col items-center justify-center gap-1",
24        "cursor-pointer rounded-[var(--radius)] border-none bg-transparent font-normal text-foreground text-sm leading-none",
25        "transition-colors duration-150",
26        "hover:not-data-[selected-single=true]:not-data-[range-start=true]:not-data-[range-end=true]:bg-accent",
27        "[&_span]:text-xs [&_span]:opacity-70",
28        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground",
29        "data-[range-start=true]:rounded-[var(--radius)] data-[range-start=true]:rounded-l-[var(--radius)] data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground",
30        "data-[range-end=true]:rounded-[var(--radius)] data-[range-end=true]:rounded-r-[var(--radius)] data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground",
31        "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground",
32        defaultClassNames.day,
33        className
34      )}
35      data-day={day.date.toLocaleDateString()}
36      data-range-end={modifiers.range_end}
37      data-range-middle={modifiers.range_middle}
38      data-range-start={modifiers.range_start}
39      data-selected-single={
40        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
41      }
42      ref={buttonRef}
43      type="button"
44      {...props}
45    />
46  );
47}
48 
49type CalendarProps = React.ComponentProps<typeof DayPicker>;
50 
51function Calendar({
52  className,
53  classNames,
54  showOutsideDays = true,
55  captionLayout = "label",
56  formatters,
57  components,
58  ...props
59}: CalendarProps) {
60  const defaultClassNames = getDefaultClassNames();
61 
62  return (
63    <DayPicker
64// … truncated