fix(date-fns) - revert to previous version (#965)

* fix(date-fns) - revert to previous version

* carets

Author: gabrielseco

example/package-lock.json

@@ -103,7 +103,7 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "date-fns": "4.1.0",
+    "date-fns": "3.6.0",
     "dompurify": "3.4.0",
     "fast-deep-equal": "3.1.3",
     "lodash.capitalize": "4.2.1",
@@ -114,7 +114,7 @@
     "lodash.omitby": "4.6.0",
     "lucide-react": "1.8.0",
     "postcss": "8.5.10",
-    "react-day-picker": "9.14.0",
+    "react-day-picker": "8.10.1",
     "react-flagpack": "2.0.6",
     "react-hook-form": "7.72.1",
     "tailwind-merge": "3.5.0",

package-lock.json

@@ -3,45 +3,71 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 
 import { cn } from '@/src/lib/utils';
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+import { buttonVariants } from '@/src/components/ui/button';
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker>) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
-        months: 'flex flex-col sm:flex-row gap-4',
-        month: 'flex flex-col gap-y-4',
-        month_caption: 'flex h-8 w-full items-center justify-center relative',
-        caption_label: 'font-medium text-sm mt-1',
-        nav: 'flex items-center justify-between absolute left-0 right-0 z-10',
-        month_grid: 'w-full border-collapse mt-1',
-        weekdays: 'flex',
-        weekday:
-          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
-        week: 'flex w-full mt-2',
-        day: 'h-9 w-9 text-center text-sm p-0 relative',
+        months: 'flex flex-col sm:flex-row gap-2',
+        month: 'flex flex-col gap-4',
+        caption: 'flex justify-center pt-1 relative items-center w-full',
+        caption_label: 'text-sm font-medium',
+        nav: 'flex items-center gap-1',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-x-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md',
+        ),
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'size-8 p-0 font-normal aria-selected:opacity-100',
+        ),
+        day_range_start:
+          'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
+        day_range_end:
+          'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
+        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:
+          'day-outside text-muted-foreground aria-selected:text-muted-foreground',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
-        Chevron: ({ orientation, ...props }) => {
-          if (orientation === 'left') {
-            return <ChevronLeft {...props} />;
-          }
-          return <ChevronRight {...props} />;
-        },
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn('size-4', className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn('size-4', className)} {...props} />
+        ),
       }}
       {...props}
     />
   );
 }
-Calendar.displayName = 'Calendar';
 
 export { Calendar };