| 12 | import { Button, buttonVariants } from "@/components/ui/button" |
| 13 | |
| 14 | function Calendar({ |
| 15 | className, |
| 16 | classNames, |
| 17 | showOutsideDays = true, |
| 18 | captionLayout = "label", |
| 19 | buttonVariant = "ghost", |
| 20 | formatters, |
| 21 | components, |
| 22 | ...props |
| 23 | }: React.ComponentProps<typeof DayPicker> & { |
| 24 | buttonVariant?: React.ComponentProps<typeof Button>["variant"] |
| 25 | }) { |
| 26 | const defaultClassNames = getDefaultClassNames() |
| 27 | |
| 28 | return ( |
| 29 | <DayPicker |
| 30 | showOutsideDays={showOutsideDays} |
| 31 | className={cn( |
| 32 | "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", |
| 33 | String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, |
| 34 | String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, |
| 35 | className |
| 36 | )} |
| 37 | captionLayout={captionLayout} |
| 38 | formatters={{ |
| 39 | formatMonthDropdown: (date) => |
| 40 | date.toLocaleString("default", { month: "short" }), |
| 41 | ...formatters, |
| 42 | }} |
| 43 | classNames={{ |
| 44 | root: cn("w-fit", defaultClassNames.root), |
| 45 | months: cn( |
| 46 | "flex gap-4 flex-col md:flex-row relative", |
| 47 | defaultClassNames.months |
| 48 | ), |
| 49 | month: cn("flex flex-col w-full gap-4", defaultClassNames.month), |
| 50 | nav: cn( |
| 51 | "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", |
| 52 | defaultClassNames.nav |
| 53 | ), |
| 54 | button_previous: cn( |
| 55 | buttonVariants({ variant: buttonVariant }), |
| 56 | "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", |
| 57 | defaultClassNames.button_previous |
| 58 | ), |
| 59 | button_next: cn( |
| 60 | buttonVariants({ variant: buttonVariant }), |
| 61 | "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", |
| 62 | defaultClassNames.button_next |
| 63 | ), |
| 64 | month_caption: cn( |
| 65 | "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", |
| 66 | defaultClassNames.month_caption |
| 67 | ), |
| 68 | dropdowns: cn( |
| 69 | "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", |
| 70 | defaultClassNames.dropdowns |
| 71 | ), |