Updated React Day Picker

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',
+        button_next: cn(
-        nav_button_next: 'absolute right-1',
+          buttonVariants({ variant: 'outline' }),
-        table: 'w-full border-collapse space-y-1',
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-3'
-        head_row: 'flex',
+        ),
-        head_cell:
+        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',
+        week: '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: '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: cn(
+        day_button: cn(
           buttonVariants({ variant: 'ghost' }),
           'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
         ),
-        day_range_end: 'day-range-end',
+        range_end: 'day-range-end',
-        day_selected:
+        selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md',
-        day_today: 'bg-accent text-accent-foreground',
+        today: 'bg-accent text-accent-foreground rounded-md',
-        day_outside:
+        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',
+        disabled: 'text-muted-foreground opacity-50',
-        day_range_middle:
+        range_middle:
           'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        day_hidden: 'invisible',
+        hidden: 'invisible',
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className='h-4 w-4' />,
+        Chevron: (props) => {
-        IconRight: ({ ...props }) => <ChevronRight className='h-4 w-4' />,
+          if (props.orientation === 'left')
+            return <ChevronLeft className='h-4 w-4' />;
+
+          if (props.orientation === 'right')
+            return <ChevronRight className='h-4 w-4' />;
+
+          return <Chevron {...props} />;
+        },
       }}
       {...props}
     />

components/ui/date-picker.tsx

@@ -96,12 +96,7 @@ export function DatePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent className='w-auto p-0' onBlur={onBlur}>
-        <Calendar
+        <Calendar mode='single' selected={date} onSelect={setDate} />
-          mode='single'
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
       </PopoverContent>
     </Popover>
   );

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",

yarn.lock

@@ -5469,13 +5469,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-day-picker@npm:^8.10.1":
+"react-day-picker@npm:^9.0.4":
-  version: 8.10.1
+  version: 9.0.4
-  resolution: "react-day-picker@npm:8.10.1"
+  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"
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/15f9b3ccbfe2070ecbad322ad370d788ad5f16ba941cb403f7713d1cb46bb4e25cb8248dd5e9812798400e3c74c253e86fac921bbaa9148b3643cc25b95cff10
-  checksum: 10c0/a0ff28c4b61b3882e6a825b19e5679e2fdf3256cf1be8eb0a0c028949815c1ae5a6561474c2c19d231c010c8e0e0b654d3a322610881e0655abca05a2e03d9df
   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"