11import { ChevronDownIcon , ChevronLeftIcon , ChevronRightIcon } from 'lucide-react' ;
22import * as React from 'react' ;
3- import { type DayButton , DayPicker , getDefaultClassNames } from 'react-day-picker' ;
3+ import { type DayButton , DayPicker } from 'react-day-picker' ;
44
55import { Button , buttonVariants } from './button' ;
66import { cn } from './utils' ;
@@ -17,7 +17,6 @@ function Calendar({
1717} : React . ComponentProps < typeof DayPicker > & {
1818 buttonVariant ?: React . ComponentProps < typeof Button > [ 'variant' ] ;
1919} ) {
20- const defaultClassNames = getDefaultClassNames ( ) ;
2120
2221 return (
2322 < DayPicker
@@ -34,63 +33,42 @@ function Calendar({
3433 ...formatters ,
3534 } }
3635 classNames = { {
37- root : cn ( 'w-fit' , defaultClassNames . root ) ,
38- months : cn ( 'flex gap-4 flex-col md:flex-row relative' , defaultClassNames . months ) ,
39- month : cn ( 'flex flex-col w-full gap-4' , defaultClassNames . month ) ,
40- nav : cn ( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between' , defaultClassNames . nav ) ,
36+ root : 'w-fit' ,
37+ months : 'flex gap-4 flex-col md:flex-row relative' ,
38+ month : 'flex flex-col w-full gap-4' ,
39+ nav : 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between' ,
4140 button_previous : cn (
4241 buttonVariants ( { variant : buttonVariant } ) ,
4342 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none' ,
44- defaultClassNames . button_previous ,
4543 ) ,
4644 button_next : cn (
4745 buttonVariants ( { variant : buttonVariant } ) ,
4846 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none' ,
49- defaultClassNames . button_next ,
5047 ) ,
51- month_caption : cn (
52- 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)' ,
53- defaultClassNames . month_caption ,
54- ) ,
55- dropdowns : cn (
56- 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5' ,
57- defaultClassNames . dropdowns ,
58- ) ,
59- dropdown_root : cn (
60- 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md' ,
61- defaultClassNames . dropdown_root ,
62- ) ,
63- dropdown : cn ( 'absolute inset-0 opacity-0' , defaultClassNames . dropdown ) ,
48+ month_caption : 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)' ,
49+ dropdowns : 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5' ,
50+ dropdown_root : 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md' ,
51+ dropdown : 'absolute inset-0 opacity-0' ,
6452 caption_label : cn (
6553 'select-none font-medium' ,
6654 captionLayout === 'label'
6755 ? 'text-sm'
6856 : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5' ,
69- defaultClassNames . caption_label ,
7057 ) ,
7158 table : 'w-full border-collapse' ,
72- weekdays : cn ( 'flex' , defaultClassNames . weekdays ) ,
73- weekday : cn (
74- 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none' ,
75- defaultClassNames . weekday ,
76- ) ,
77- week : cn ( 'flex w-full mt-2' , defaultClassNames . week ) ,
78- week_number_header : cn ( 'select-none w-(--cell-size)' , defaultClassNames . week_number_header ) ,
79- week_number : cn ( 'text-[0.8rem] select-none text-muted-foreground' , defaultClassNames . week_number ) ,
80- day : cn (
81- 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none' ,
82- defaultClassNames . day ,
83- ) ,
84- range_start : cn ( 'rounded-l-md bg-accent' , defaultClassNames . range_start ) ,
85- range_middle : cn ( 'rounded-none' , defaultClassNames . range_middle ) ,
86- range_end : cn ( 'rounded-r-md bg-accent' , defaultClassNames . range_end ) ,
87- today : cn (
88- 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none' ,
89- defaultClassNames . today ,
90- ) ,
91- outside : cn ( 'text-muted-foreground aria-selected:text-muted-foreground' , defaultClassNames . outside ) ,
92- disabled : cn ( 'text-muted-foreground opacity-50' , defaultClassNames . disabled ) ,
93- hidden : cn ( 'invisible' , defaultClassNames . hidden ) ,
59+ weekdays : 'flex' ,
60+ weekday : 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none' ,
61+ week : 'flex w-full mt-2' ,
62+ week_number_header : 'select-none w-(--cell-size)' ,
63+ week_number : 'text-[0.8rem] select-none text-muted-foreground' ,
64+ day : 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none' ,
65+ range_start : 'rounded-l-md bg-accent' ,
66+ range_middle : 'rounded-none' ,
67+ range_end : 'rounded-r-md bg-accent' ,
68+ today : 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none' ,
69+ outside : 'text-muted-foreground aria-selected:text-muted-foreground' ,
70+ disabled : 'text-muted-foreground opacity-50' ,
71+ hidden : 'invisible' ,
9472 ...classNames ,
9573 } }
9674 components = { {
@@ -124,8 +102,6 @@ function Calendar({
124102}
125103
126104function CalendarDayButton ( { className, day, modifiers, ...props } : React . ComponentProps < typeof DayButton > ) {
127- const defaultClassNames = getDefaultClassNames ( ) ;
128-
129105 const ref = React . useRef < HTMLButtonElement > ( null ) ;
130106 React . useEffect ( ( ) => {
131107 if ( modifiers . focused ) ref . current ?. focus ( ) ;
@@ -145,7 +121,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
145121 data-range-middle = { modifiers . range_middle }
146122 className = { cn (
147123 'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70' ,
148- defaultClassNames . day ,
149124 className ,
150125 ) }
151126 { ...props }
0 commit comments