| 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({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { |
| 11 | return ( |
| 12 | <DayPicker |
| 13 | showOutsideDays={showOutsideDays} |
| 14 | className={cn("p-3", className)} |
| 15 | classNames={{ |
| 16 | months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", |
| 17 | month: "space-y-4", |
| 18 | caption: "flex justify-center pt-1 relative items-center", |
| 19 | caption_label: "text-sm font-medium", |
| 20 | nav: "space-x-1 flex items-center", |
| 21 | nav_button: cn( |
| 22 | buttonVariants({ variant: "outline" }), |
| 23 | "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", |
| 24 | ), |
| 25 | nav_button_previous: "absolute left-1", |
| 26 | nav_button_next: "absolute right-1", |
| 27 | table: "w-full border-collapse space-y-1", |
| 28 | head_row: "flex", |
| 29 | head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", |
| 30 | row: "flex w-full mt-2", |
| 31 | cell: "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", |
| 32 | day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"), |
| 33 | day_range_end: "day-range-end", |
| 34 | day_selected: |
| 35 | "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", |
| 36 | day_today: "bg-accent text-accent-foreground", |
| 37 | day_outside: |
| 38 | "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", |
| 39 | day_disabled: "text-muted-foreground opacity-50", |
| 40 | day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", |
| 41 | day_hidden: "invisible", |
| 42 | ...classNames, |
| 43 | }} |
| 44 | components={{ |
| 45 | IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />, |
| 46 | IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />, |
| 47 | }} |
| 48 | {...props} |
| 49 | /> |
| 50 | ); |
| 51 | } |
| 52 | Calendar.displayName = "Calendar"; |
| 53 | |
| 54 | export { Calendar }; |