@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/Calendar/Calendar.tsx

@@ -59,36 +59,10 @@ import * as React from 'react';
 import { 
   DayPicker, 
   type DayPickerProps,
-  useDayPicker,
-  type DayProps,
-  type MonthsProps,
   type DateRange,
 } from 'react-day-picker';
 import { enAU } from 'date-fns/locale';
-import { format } from 'date-fns';
 import { cn } from '../../utils/core/cn';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select';
-
-// Define custom types for components that don't have exported types
-type MonthGridProps = React.TableHTMLAttributes<HTMLTableElement>;
-type WeekdaysProps = React.HTMLAttributes<HTMLTableRowElement> & {
-  children?: React.ReactNode;
-};
-type MonthProps = {
-  calendarMonth: { date: Date };
-  displayIndex: number;
-  className?: string;
-  children?: React.ReactNode;
-  captionLayout?: DayPickerProps['captionLayout'];
-  startMonth?: Date;
-  endMonth?: Date;
-};
-type RootProps = {
-  children?: React.ReactNode;
-  rootRef?: React.Ref<HTMLDivElement>;
-  className?: string;
-  style?: React.CSSProperties;
-};
 
 // ============================================================================
 // CALENDAR COMPONENT
@@ -121,23 +95,6 @@ export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'class
   onSelect?: ((date: Date | undefined) => void) | ((range: { from: Date; to?: Date } | undefined) => void) | ((dates: Date[]) => void);
 }
 
-type StoredRootProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  rootRef?: React.Ref<HTMLDivElement>;
-  restProps?: React.HTMLAttributes<HTMLTableElement>;
-};
-
-const assignToRef = <T,>(ref: React.Ref<T | null> | undefined, value: T | null) => {
-  if (!ref) {
-    return;
-  }
-  if (typeof ref === 'function') {
-    ref(value);
-    return;
-  }
-  (ref as React.MutableRefObject<T | null>).current = value;
-};
 
 /**
  * Calendar component
@@ -196,35 +153,71 @@ const assignToRef = <T,>(ref: React.Ref<T | null> | undefined, value: T | null)
  */
 const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
   ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, captionLayout, startMonth, endMonth, ...props }, ref) => {
-    const tableRef = React.useRef<HTMLTableElement | null>(null);
-    const setForwardedRef = React.useCallback(
-      (node: HTMLTableElement | null) => {
-        tableRef.current = node;
-        if (!ref) {
-          return;
-        }
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          (ref as React.MutableRefObject<HTMLTableElement | null>).current = node;
+    // Ref callback to forward ref to the table element rendered by DayPicker
+    const dayPickerRef = React.useRef<HTMLDivElement>(null);
+    
+    // Forward ref to the table element within DayPicker's rendered output
+    React.useEffect(() => {
+      if (ref && dayPickerRef.current) {
+        const tableElement = dayPickerRef.current.querySelector('table') as HTMLTableElement | null;
+        if (tableElement && typeof ref === 'function') {
+          ref(tableElement);
+        } else if (tableElement && ref && 'current' in ref) {
+          (ref as React.MutableRefObject<HTMLTableElement | null>).current = tableElement;
         }
-      },
-      [ref]
-    );
+      }
+    }, [ref]);
     
-    // Store root props so we can re-apply them to the table element
-    const rootPropsRef = React.useRef<StoredRootProps | null>(null);
     // Get selected from props to avoid TypeScript union type issues
-    const selected = (props as any).selected;
+    const selected = (props as CalendarProps).selected;
     // Determine if we're in controlled or uncontrolled mode for month
     const isMonthControlled = controlledMonth !== undefined;
     
-    // Internal state for uncontrolled month mode - always default to current month
+    // Internal state for uncontrolled month mode
+    // Initialize to selected date's month if available, otherwise current month
     const [internalMonth, setInternalMonth] = React.useState<Date>(() => {
+      if (selected) {
+        if (selected instanceof Date) {
+          return new Date(selected.getFullYear(), selected.getMonth(), 1);
+        }
+        // Handle DateRange
+        if (typeof selected === 'object' && 'from' in selected && selected.from) {
+          return new Date(selected.from.getFullYear(), selected.from.getMonth(), 1);
+        }
+        // Handle Date[]
+        if (Array.isArray(selected) && selected.length > 0 && selected[0] instanceof Date) {
+          return new Date(selected[0].getFullYear(), selected[0].getMonth(), 1);
+        }
+      }
       const now = new Date();
       return new Date(now.getFullYear(), now.getMonth(), 1);
     });
     
+    // Sync internal month to selected date when selected changes (only in uncontrolled mode)
+    React.useEffect(() => {
+      if (!isMonthControlled && selected) {
+        let monthToSync: Date | null = null;
+        if (selected instanceof Date) {
+          monthToSync = new Date(selected.getFullYear(), selected.getMonth(), 1);
+        } else if (typeof selected === 'object' && 'from' in selected && selected.from) {
+          monthToSync = new Date(selected.from.getFullYear(), selected.from.getMonth(), 1);
+        } else if (Array.isArray(selected) && selected.length > 0 && selected[0] instanceof Date) {
+          monthToSync = new Date(selected[0].getFullYear(), selected[0].getMonth(), 1);
+        }
+        
+        if (monthToSync) {
+          setInternalMonth(prevMonth => {
+            const currentMonth = new Date(prevMonth.getFullYear(), prevMonth.getMonth(), 1);
+            // Only update if the month is different to avoid unnecessary re-renders
+            if (monthToSync!.getTime() !== currentMonth.getTime()) {
+              return monthToSync!;
+            }
+            return prevMonth;
+          });
+        }
+      }
+    }, [selected, isMonthControlled]);
+    
     // Use controlled month if provided, otherwise use internal state
     // Normalize month to first day of month to ensure consistency
     const month = React.useMemo(() => {
@@ -245,436 +238,62 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
       }
       controlledOnMonthChange?.(newMonth);
     }, [isMonthControlled, controlledOnMonthChange]);
-    
-    // Create a wrapped handler to ensure it's always a function
-    const wrappedHandleMonthChange = React.useCallback((newMonth: Date) => {
-      handleMonthChange(newMonth);
-    }, [handleMonthChange]);
-    
-    // Removed mount logging - was for debugging only
-    
-    // Custom Root: capture provided props so we can attach them to the table directly
-    const CustomRoot = React.memo(({ children, rootRef: dayPickerRootRef, ...rootProps }: RootProps) => {
-      const {
-        className: rootClassName,
-        style: rootStyle,
-        children: _ignoredChildren,
-        ...restProps
-      } = rootProps as React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode };
-      
-      rootPropsRef.current = {
-        className: rootClassName,
-        style: rootStyle as React.CSSProperties | undefined,
-        rootRef: dayPickerRootRef,
-        restProps: restProps as React.HTMLAttributes<HTMLTableElement>,
-      };
-      return <>{children}</>;
-    });
-    CustomRoot.displayName = 'CustomRoot';
-    
-    // Custom Months: Remove wrapper div, filter out MonthCaption and Dropdown when dropdown layout is used
-    const CustomMonths = React.memo(({ children }: MonthsProps) => {
-      // When captionLayout="dropdown", react-day-picker may render MonthCaption or Dropdown components
-      // Filter them out since we render our own dropdowns inside the table's <caption> element
-      const childrenArray = React.Children.toArray(children);
-      const filteredChildren = childrenArray.filter((child: any) => {
-        if (!React.isValidElement(child)) return true;
-        const childType = child.type as any;
-        const displayName = childType?.displayName || childType?.name;
-        // Filter out MonthCaption and any Dropdown-related components
-        if (displayName === 'MonthCaption' || 
-            displayName === 'Dropdown' || 
-            displayName === 'DropdownMonth' ||
-            displayName === 'DropdownYear' ||
-            (typeof childType === 'string' && childType.includes('dropdown'))) {
-          return false;
-        }
-        // Also check for the div wrapper that react-day-picker might render
-        if (childType === 'div') {
-          const childProps = child.props as { children?: React.ReactNode; [key: string]: unknown };
-          if (childProps?.children) {
-            const childChildren = React.Children.toArray(childProps.children);
-            // If it contains a span with role="status" and aria-live="polite", it's likely the default caption
-            const hasCaptionSpan = childChildren.some((cc: any) => {
-              if (!React.isValidElement(cc) || cc.type !== 'span') return false;
-              const spanProps = cc.props as { role?: string; 'aria-live'?: string; [key: string]: unknown };
-              return spanProps?.role === 'status' && spanProps?.['aria-live'] === 'polite';
-            });
-            if (hasCaptionSpan) {
-              return false;
-            }
-          }
-        }
-        return true;
-      });
-      return <>{filteredChildren}</>;
-    });
-    CustomMonths.displayName = 'CustomMonths';
-    
-    const CustomMonthGrid = React.forwardRef<HTMLTableElement, MonthGridProps>((props, forwardedRef) => {
-      return <table ref={forwardedRef} {...props} />;
-    });
-    CustomMonthGrid.displayName = 'CustomMonthGrid';
-
-    // Custom MonthCaption: renders dropdowns for month/year selection
-    type MonthCaptionProps = {
-      displayMonth: Date;
-      startMonth?: Date;
-      endMonth?: Date;
-      locale?: DayPickerProps['locale'];
-    };
-    const CustomMonthCaption = React.memo(({ displayMonth, startMonth: captionStartMonth, endMonth: captionEndMonth, locale: captionLocale }: MonthCaptionProps) => {
-      const { goToMonth } = useDayPicker();
-      // Get locale from props (defaults to enAU)
-      const calendarLocale = (captionLocale || enAU) as typeof enAU;
-      
-      // Get start and end months from props (passed via Calendar)
-      const fromDate = captionStartMonth || new Date(1900, 0);
-      const toDate = captionEndMonth || new Date(2100, 11);
-      
-      // Generate month options using date-fns format
-      const monthOptions = React.useMemo(() => {
-        const months: { value: string; label: string }[] = [];
-        for (let i = 0; i < 12; i++) {
-          const monthDate = new Date(displayMonth.getFullYear(), i, 1);
-          const label = format(monthDate, 'MMMM', { locale: calendarLocale });
-          months.push({ value: i.toString(), label });
-        }
-        return months;
-      }, [calendarLocale, displayMonth]);
-      
-      // Generate year options based on startMonth and endMonth
-      const yearOptions = React.useMemo(() => {
-        const years: { value: string; label: string }[] = [];
-        const startYear = fromDate.getFullYear();
-        const endYear = toDate.getFullYear();
-        for (let year = startYear; year <= endYear; year++) {
-          years.push({ value: year.toString(), label: year.toString() });
-        }
-        return years;
-      }, [fromDate, toDate]);
-      
-      const currentMonth = displayMonth.getMonth();
-      const currentYear = displayMonth.getFullYear();
-      
-      const handleMonthChange = React.useCallback((value: string) => {
-        const newMonth = parseInt(value, 10);
-        const newDate = new Date(currentYear, newMonth, 1);
-        goToMonth(newDate);
-      }, [currentYear, goToMonth]);
-      
-      const handleYearChange = React.useCallback((value: string) => {
-        const newYear = parseInt(value, 10);
-        const newDate = new Date(newYear, currentMonth, 1);
-        goToMonth(newDate);
-      }, [currentMonth, goToMonth]);
-      
-      return (
-        <nav className="relative flex items-center justify-center gap-2">
-          <Select value={currentMonth.toString()} onValueChange={handleMonthChange}>
-            <SelectTrigger className="w-auto min-w-[120px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {monthOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select value={currentYear.toString()} onValueChange={handleYearChange}>
-            <SelectTrigger className="w-auto min-w-[100px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {yearOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </nav>
-      );
-    });
-    CustomMonthCaption.displayName = 'CustomMonthCaption';
 
-    // Custom Month: inject caption + navigation directly inside the <table>
-    const CustomMonth = React.memo(({ calendarMonth, displayIndex, className, children, captionLayout: monthCaptionLayout, startMonth: monthStartMonth, endMonth: monthEndMonth }: MonthProps) => {
-      const { formatters, components, labels, classNames, previousMonth, nextMonth, goToMonth } = useDayPicker();
-      const caption = formatters.formatCaption(calendarMonth.date, {});
-      const Chevron = components?.Chevron;
-      
-      const childrenArray = React.Children.toArray(children);
-      const monthGridIndex = childrenArray.findIndex((child: any) => {
-        if (!React.isValidElement(child)) return false;
-        const childType = child.type as any;
-        return (typeof childType === 'function' && childType.displayName === 'MonthGrid') ||
-          child.type === 'table';
-      });
-      
-      return (
-        <>
-          {childrenArray.map((child, index) => {
-            if (React.isValidElement(child) && (child.type as any)?.displayName === 'MonthCaption') {
-              return null;
-            }
-            
-            if (index === monthGridIndex && React.isValidElement(child)) {
-              const monthGridChild = child as React.ReactElement<MonthGridProps>;
-              const applyRootProps = displayIndex === 0 && index === monthGridIndex;
-              const storedRootProps = applyRootProps ? rootPropsRef.current : null;
-              
-              const { children: monthGridChildren, className: monthGridClassName, style: monthGridStyle, ...monthGridRest } =
-                monthGridChild.props as React.TableHTMLAttributes<HTMLTableElement>;
-              
-              const mergedClassName = cn(
-                'w-full border-collapse rounded-md border border-sec-200 bg-background',
-                applyRootProps ? storedRootProps?.className : undefined,
-                className,
-                monthGridClassName
-              );
-              
-              const mergedStyle = {
-                ...(applyRootProps ? storedRootProps?.style ?? {} : {}),
-                ...(monthGridStyle ?? {}),
-              };
-              
-              const tableProps: React.TableHTMLAttributes<HTMLTableElement> = {
-                ...(applyRootProps && storedRootProps?.restProps ? storedRootProps.restProps : {}),
-                ...monthGridRest,
-                className: mergedClassName,
-                ...(Object.keys(mergedStyle).length ? { style: mergedStyle } : {}),
-              };
-              
-              if (mode && (tableProps as Record<string, unknown>)['data-mode'] === undefined) {
-                (tableProps as Record<string, unknown>)['data-mode'] = mode;
-              }
-              
-              const shouldAttachRef = applyRootProps || storedRootProps?.rootRef;
-              const handleTableRef = shouldAttachRef
-                ? (node: HTMLTableElement | null) => {
-                    if (applyRootProps) {
-                      setForwardedRef(node);
-                    }
-                    if (storedRootProps?.rootRef) {
-                      assignToRef(storedRootProps.rootRef as React.Ref<HTMLTableElement | null>, node);
-                    }
-                  }
-                : undefined;
-              
-              const handlePreviousClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-                event.preventDefault();
-                if (!previousMonth) return;
-                goToMonth(previousMonth);
-              };
-              
-              const handleNextClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-                event.preventDefault();
-                if (!nextMonth) return;
-                goToMonth(nextMonth);
-              };
-              
-              const monthGridElement = monthGridChild as React.ReactElement<any> & {
-                ref?: React.Ref<HTMLTableElement | null>;
-              };
-              const mergedRef =
-                handleTableRef || monthGridElement.ref
-                  ? (node: HTMLTableElement | null) => {
-                      if (handleTableRef) {
-                        handleTableRef(node);
-                      }
-                      assignToRef(monthGridElement.ref as React.Ref<HTMLTableElement | null> | undefined, node);
-                    }
-                  : undefined;
-              
-              // Determine if we should render dropdowns or buttons
-              const isDropdownLayout = monthCaptionLayout === 'dropdown';
-              
-              return React.cloneElement(
-                monthGridElement,
-                {
-                  key: child.key ?? `month-grid-${displayIndex}`,
-                  ...tableProps,
-                  ...(mergedRef ? { ref: mergedRef } : {}),
-                },
-                <>
-                  <caption className="relative">
-                    {isDropdownLayout ? (
-                      <CustomMonthCaption 
-                        displayMonth={calendarMonth.date}
-                        startMonth={monthStartMonth}
-                        endMonth={monthEndMonth}
-                        locale={locale}
-                      />
-                    ) : (
-                      <nav className="relative flex items-center justify-center gap-1">
-                        <button
-                          type="button"
-                          className={cn(
-                            'h-7 w-7 bg-transparent p-0',
-                            'inline-flex items-center justify-center rounded-md',
-                            'hover:bg-acc-100',
-                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
-                            'disabled:opacity-50 disabled:pointer-events-none',
-                            classNames?.button_previous
-                          )}
-                          tabIndex={previousMonth ? undefined : -1}
-                          aria-disabled={previousMonth ? undefined : true}
-                          aria-label={previousMonth ? labels.labelPrevious(previousMonth) : undefined}
-                          onClick={handlePreviousClick}
-                          disabled={!previousMonth}
-                        >
-                          {Chevron ? <Chevron orientation="left" className="size-4" disabled={!previousMonth} /> : <span>‹</span>}
-                        </button>
-                        <span className="text-sm font-medium">{caption}</span>
-                        <button
-                          type="button"
-                          className={cn(
-                            'h-7 w-7 bg-transparent p-0',
-                            'inline-flex items-center justify-center rounded-md',
-                            'hover:bg-acc-100',
-                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
-                            'disabled:opacity-50 disabled:pointer-events-none',
-                            classNames?.button_next
-                          )}
-                          tabIndex={nextMonth ? undefined : -1}
-                          aria-disabled={nextMonth ? undefined : true}
-                          aria-label={nextMonth ? labels.labelNext(nextMonth) : undefined}
-                          onClick={handleNextClick}
-                          disabled={!nextMonth}
-                        >
-                          {Chevron ? <Chevron orientation="right" className="size-4" disabled={!nextMonth} /> : <span>›</span>}
-                        </button>
-                      </nav>
-                    )}
-                  </caption>
-                  {monthGridChildren}
-                </>
-              );
-            }
-
-            return React.isValidElement(child) 
-              ? React.cloneElement(child, { key: child.key ?? `calendar-child-${index}` })
-              : child;
-          })}
-        </>
-      );
-    });
-    CustomMonth.displayName = 'CustomMonth';
-
-    // Custom Weekdays: render table head with semantic row
-    const CustomWeekdays = React.memo(({ className, children, ...props }: WeekdaysProps) => {
-      return (
-        <thead>
-          <tr className={cn('text-xs text-sec-500', className)} {...props}>
-            {children}
-          </tr>
-        </thead>
-      );
-    });
-    CustomWeekdays.displayName = 'CustomWeekdays';
-
-    // Create a wrapper for CustomMonth that passes the required props
-    const CustomMonthWithProps = React.useCallback((props: MonthProps) => {
-      return (
-        <CustomMonth
-          {...props}
-          captionLayout={captionLayout}
-          startMonth={startMonth}
-          endMonth={endMonth}
-        />
-      );
-    }, [captionLayout, startMonth, endMonth]);
-
-    // Custom MonthCaption wrapper: returns null to prevent default rendering
-    // The actual caption is rendered inside CustomMonth within the table's <caption> element
-    const CustomMonthCaptionWrapper = React.memo((_props: any) => {
-      return null;
-    });
-    CustomMonthCaptionWrapper.displayName = 'CustomMonthCaptionWrapper';
-
-    // Memoize components to ensure stable references
-    const defaultComponents = React.useMemo(() => ({
-      Root: CustomRoot,
-      Months: CustomMonths,
-      Month: CustomMonthWithProps,
-      MonthGrid: CustomMonthGrid,
-      // MonthCaption returns null - actual caption is rendered in CustomMonth inside <caption>
-      MonthCaption: CustomMonthCaptionWrapper,
-      Weekdays: CustomWeekdays,
-      // Spread user components AFTER ours so ours take precedence
-      ...(components || {}),
-    }), [components, CustomRoot, CustomMonths, CustomMonthWithProps, CustomMonthCaptionWrapper, CustomWeekdays]);
+    // Type assertion needed because CalendarProps extends DayPickerProps with union types
+    // that don't perfectly match DayPicker's conditional types based on mode
+    // Extract captionLayout, startMonth, endMonth from props to ensure they're passed correctly
+    const {
+      captionLayout: _captionLayoutFromProps,
+      startMonth: _startMonthFromProps,
+      endMonth: _endMonthFromProps,
+      ...restProps
+    } = props as CalendarProps;
+    
+    const dayPickerProps = {
+      ...(mode ? { mode } : {}),
+      locale: locale ?? enAU,
+      // Explicitly pass captionLayout, startMonth, endMonth to ensure they're not overridden
+      ...(captionLayout !== undefined ? { captionLayout } : {}),
+      ...(startMonth !== undefined ? { startMonth } : {}),
+      ...(endMonth !== undefined ? { endMonth } : {}),
+      ...(restProps as Omit<DayPickerProps, 'selected' | 'onSelect' | 'month' | 'onMonthChange' | 'className' | 'classNames' | 'components' | 'captionLayout' | 'startMonth' | 'endMonth'>),
+      ...(selected !== undefined ? { selected } : {}),
+      ...(onSelect !== undefined ? { onSelect } : {}),
+      month,
+      onMonthChange: handleMonthChange,
+      className,
+      classNames: {
+        // Basic spacing for calendar grid
+        month_grid: 'w-full border-collapse',
+        weekdays: 'text-xs text-sec-500',
+        weekday: 'w-9 p-0 font-normal text-center',
+        week: 'mt-2',
+        day: 'p-0 text-center',
+        day_button: cn(
+          'h-9 w-9 p-0 font-normal',
+          'hover:bg-acc-100 hover:text-main-600',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
+          'inline-flex items-center justify-center rounded-md'
+        ),
+        selected: 'bg-main-600 text-main-50 hover:bg-main-600 hover:text-main-50',
+        today: 'bg-sec-100 text-main-600 font-semibold',
+        disabled: 'text-sec-400 opacity-50 cursor-not-allowed',
+        // Caption and dropdown layout styling
+        month_caption: 'flex items-center justify-center gap-2 mb-2',
+        caption_label: captionLayout === 'dropdown' ? 'hidden' : 'text-sm font-medium', // Hide label when using dropdowns
+        dropdowns: 'flex items-center gap-2',
+        months_dropdown: 'px-2 py-1 text-sm border border-sec-300 rounded bg-background',
+        years_dropdown: 'px-2 py-1 text-sm border border-sec-300 rounded bg-background',
+        chevron: 'hidden', // Hide extra chevron icons
+        ...classNames,
+      },
+      ...(components ? { components } : {}),
+    } as DayPickerProps;
 
     return (
-      <DayPicker
-        {...(mode ? { mode } : {})}
-        locale={locale ?? enAU}
-        hideNavigation={true}
-        {...(props as any)}
-        // CRITICAL: Explicit props must come AFTER spread to ensure they override any props from spread
-        // This ensures month, onMonthChange, selected, and onSelect are always correct
-        selected={selected}
-        onSelect={onSelect}
-        month={month}
-        onMonthChange={wrappedHandleMonthChange}
-        className={className}
-        classNames={{
-          // v9 API: Updated for table-based structure
-          months: '', // No wrapper - removed by CustomMonths
-          month: '', // No wrapper - removed by CustomMonth
-          month_caption: '', // Now handled by custom component (renders as <caption>)
-          caption_label: 'text-sm font-medium',
-          nav: 'relative flex items-center justify-center space-x-1',
-          // v9: button_previous and button_next for navigation buttons
-          button_previous: cn(
-            'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-            'border border-input hover:bg-acc-100',
-            'inline-flex items-center justify-center rounded-md',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2'
-          ),
-          button_next: cn(
-            'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-            'border border-input hover:bg-acc-100',
-            'inline-flex items-center justify-center rounded-md',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2'
-          ),
-          // v9: table -> month_grid (now a proper <table>)
-          month_grid: '', // Styles applied directly to table in CustomMonth
-          // v9: head_row -> weekdays (now wrapped in <thead> by custom component)
-          weekdays: '', // Styles applied to <tr> inside <thead>
-          weekday: 'text-sec-600 rounded-md w-9 font-normal text-[0.8rem]',
-          // v9: row -> week (now a proper <tr>)
-          week: 'mt-2',
-          // v9: cell -> day (now a proper <td> by custom component)
-          day: '', // Styles moved to <td> in custom component
-          // v9: day -> day_button (the button inside the cell)
-          day_button: cn(
-            'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
-            'hover:bg-acc-100 hover:text-main-600',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
-            'inline-flex items-center justify-center rounded-md'
-          ),
-          // v9: day_range_end -> range_end
-          range_end: 'range-end',
-          // v9: day_selected -> selected
-          selected: 'bg-main-600 text-main-50 hover:bg-main-600 hover:text-main-50 focus:bg-main-600 focus:text-main-50',
-          // v9: day_today -> today
-          today: 'bg-sec-100 text-main-600 font-semibold',
-          // v9: day_outside -> outside
-          outside: 'outside text-sec-400 opacity-50 aria-selected:bg-acc-50/50 aria-selected:text-sec-400 aria-selected:opacity-30',
-          // v9: day_disabled -> disabled
-          disabled: 'text-sec-400 opacity-50 cursor-not-allowed',
-          // v9: day_range_middle -> range_middle
-          range_middle: 'aria-selected:bg-acc-100 aria-selected:text-main-600',
-          // v9: day_hidden -> hidden
-          hidden: 'invisible',
-          ...classNames,
-        }}
-        components={defaultComponents}
-      />
+      <div ref={dayPickerRef}>
+        <DayPicker {...dayPickerProps} />
+      </div>
     );
   }
 );