diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx index ed29c89..9c96640 100644 --- a/components/ui/calendar.tsx +++ b/components/ui/calendar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ChevronLeft, ChevronRight } from 'lucide-react'; -import { DayPicker } from 'react-day-picker'; +import { Chevron, DayPicker } from 'react-day-picker'; import { cn } from '@/lib/utils'; import { buttonVariants } from '@/components/ui/button'; @@ -22,40 +22,49 @@ function Calendar({ classNames={{ months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0', month: 'space-y-4', - caption: 'flex justify-center pt-1 relative items-center', + month_caption: 'flex justify-center pt-1 relative items-center', caption_label: 'text-sm font-medium', nav: 'space-x-1 flex items-center', - nav_button: cn( + button_previous: cn( buttonVariants({ variant: 'outline' }), - 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100' + 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-3' ), - nav_button_previous: 'absolute left-1', - nav_button_next: 'absolute right-1', - table: 'w-full border-collapse space-y-1', - head_row: 'flex', - head_cell: + button_next: cn( + buttonVariants({ variant: 'outline' }), + 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-3' + ), + month_grid: 'w-full border-collapse space-y-1', + weekdays: 'flex', + weekday: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]', - row: 'flex w-full mt-2', - 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', - day: cn( + week: 'flex w-full mt-2', + day: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].range-end)]:rounded-r-md [&:has([aria-selected].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', + day_button: cn( buttonVariants({ variant: 'ghost' }), 'h-9 w-9 p-0 font-normal aria-selected:opacity-100' ), - day_range_end: 'day-range-end', - day_selected: - 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', - day_today: 'bg-accent text-accent-foreground', - day_outside: + range_end: 'day-range-end', + selected: + 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md', + today: 'bg-accent text-accent-foreground rounded-md', + outside: 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', - day_disabled: 'text-muted-foreground opacity-50', - day_range_middle: + disabled: 'text-muted-foreground opacity-50', + range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground', - day_hidden: 'invisible', + hidden: 'invisible', ...classNames, }} components={{ - IconLeft: ({ ...props }) => , - IconRight: ({ ...props }) => , + Chevron: (props) => { + if (props.orientation === 'left') + return ; + + if (props.orientation === 'right') + return ; + + return ; + }, }} {...props} /> diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx index 6835f6b..66be92f 100644 --- a/components/ui/date-picker.tsx +++ b/components/ui/date-picker.tsx @@ -96,12 +96,7 @@ export function DatePicker({ - + ); diff --git a/package.json b/package.json index 41a6585..1e16453 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "lucide-react": "^0.416.0", "next": "15.0.0-rc.0", "react": "^19.0.0-rc.0", - "react-day-picker": "^8.10.1", + "react-day-picker": "^9.0.4", "react-dom": "^19.0.0-rc.0", "sharp": "^0.33.4", "sonner": "^1.5.0", diff --git a/yarn.lock b/yarn.lock index b03f286..2be7b8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5469,13 +5469,14 @@ __metadata: languageName: node linkType: hard -"react-day-picker@npm:^8.10.1": - version: 8.10.1 - resolution: "react-day-picker@npm:8.10.1" +"react-day-picker@npm:^9.0.4": + version: 9.0.4 + resolution: "react-day-picker@npm:9.0.4" + dependencies: + date-fns: "npm:^3.6.0" peerDependencies: - date-fns: ^2.28.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10c0/a0ff28c4b61b3882e6a825b19e5679e2fdf3256cf1be8eb0a0c028949815c1ae5a6561474c2c19d231c010c8e0e0b654d3a322610881e0655abca05a2e03d9df + react: ">=16.8.0" + checksum: 10c0/15f9b3ccbfe2070ecbad322ad370d788ad5f16ba941cb403f7713d1cb46bb4e25cb8248dd5e9812798400e3c74c253e86fac921bbaa9148b3643cc25b95cff10 languageName: node linkType: hard @@ -6392,7 +6393,7 @@ __metadata: prettier-plugin-tailwindcss: "npm:^0.6.5" prisma: "npm:^5.17.0" react: "npm:^19.0.0-rc.0" - react-day-picker: "npm:^8.10.1" + react-day-picker: "npm:^9.0.4" react-dom: "npm:^19.0.0-rc.0" sharp: "npm:^0.33.4" sonner: "npm:^1.5.0"