|
1
|
import * as React from "react" |
|
2
|
import { ChevronLeft, ChevronRight } from "lucide-react" |
|
3
|
import { DayPicker } from "react-day-picker" |
|
4
|
|
|
5
|
import { cn } from "@/lib/utils" |
|
6
|
import { buttonVariants } from "@/components/ui/button" |
|
7
|
|
|
8
|
export type CalendarProps = React.ComponentProps<typeof DayPicker> |
|
9
|
|
|
10
|
function Calendar({ |
|
11
|
className, |
|
12
|
classNames, |
|
13
|
showOutsideDays = true, |
|
14
|
...props |
|
15
|
}: CalendarProps) { |
|
16
|
return ( |
|
17
|
<DayPicker |
|
18
|
showOutsideDays={showOutsideDays} |
|
19
|
className={cn("p-3", className)} |
|
20
|
classNames={{ |
|
21
|
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", |
|
22
|
month: "space-y-4", |
|
23
|
month_caption: "flex justify-center pt-1 relative items-center", |
|
24
|
caption_label: "text-sm font-medium", |
|
25
|
nav: "space-x-1 flex items-center", |
|
26
|
button_previous: cn( |
|
27
|
buttonVariants({ variant: "outline" }), |
|
28
|
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" |
|
29
|
), |
|
30
|
button_next: cn( |
|
31
|
buttonVariants({ variant: "outline" }), |
|
32
|
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" |
|
33
|
), |
|
34
|
month_grid: "w-full border-collapse space-y-1", |
|
35
|
weekdays: "flex", |
|
36
|
weekday: |
|
37
|
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", |
|
38
|
week: "flex w-full mt-2", |
|
39
|
day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", |
|
40
|
day_button: cn( |
|
41
|
buttonVariants({ variant: "ghost" }), |
|
42
|
"h-9 w-9 p-0 font-normal aria-selected:opacity-100" |
|
43
|
), |
|
44
|
range_end: "day-range-end", |
|
45
|
selected: |
|
46
|
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", |
|
47
|
today: "bg-accent text-accent-foreground", |
|
48
|
outside: |
|
49
|
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", |
|
50
|
disabled: "text-muted-foreground opacity-50", |
|
51
|
range_middle: |
|
52
|
"aria-selected:bg-accent aria-selected:text-accent-foreground", |
|
53
|
hidden: "invisible", |
|
54
|
...classNames, |
|
55
|
}} |
|
56
|
{...(props as any)} |
|
57
|
/> |
|
58
|
) |
|
59
|
} |
|
60
|
Calendar.displayName = "Calendar" |
|
61
|
|
|
62
|
export { Calendar } |