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"