@jmruthers/pace-core 0.5.189 → 0.5.190

package/src/components/Calendar/Calendar.tsx

@@ -10,7 +10,7 @@
  * Features:
  * - Single, range, and multiple date selection modes
  * - Date disabling (past dates, weekends, etc.)
- * - Localization support
+ * - Localization support (defaults to Australian locale with Monday as first day of week)
  * - Keyboard navigation
  * - Accessible date selection
  * - Customizable styling
@@ -56,22 +56,53 @@
  */
 
 import * as React from 'react';
-import { DayPicker, type DayPickerProps } from 'react-day-picker';
+import { 
+  DayPicker, 
+  type DayPickerProps,
+  useDayPicker,
+  type DayProps,
+  type MonthsProps,
+  type DateRange,
+} from 'react-day-picker';
+import { enAU } from 'date-fns/locale';
 import { cn } from '../../utils/core/cn';
 
+// 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;
+};
+type RootProps = {
+  children?: React.ReactNode;
+  rootRef?: React.Ref<HTMLDivElement>;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
 // ============================================================================
 // CALENDAR COMPONENT
 // ============================================================================
 
 export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'classNames' | 'styles' | 'onSelect'> {
   /**
-   * Additional CSS classes to apply to the calendar wrapper
+   * Additional CSS classes to apply to the calendar table
    */
   className?: string;
   /**
    * Custom classNames for DayPicker sub-components
    */
   classNames?: DayPickerProps['classNames'];
+  /**
+   * Currently selected value; mirrors DayPicker's `selected` prop so callers
+   * can control the selection state.
+   */
+  selected?: Date | Date[] | DateRange | undefined;
   /**
    * Date selection handler. Signature depends on mode:
    * - mode="single": (date: Date | undefined) => void
@@ -81,18 +112,45 @@ 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
  * A flexible, accessible calendar component for date selection.
  * Built on react-day-picker with pace-core styling.
  * 
+ * Defaults to Australian locale (en-AU) with Monday as the first day of the week.
+ * The locale can be overridden by passing a `locale` prop.
+ * 
+ * Month navigation is automatically managed internally when `month` and `onMonthChange` props
+ * are not provided. The displayed month will sync with the selected date when available,
+ * or default to the current month. Navigation buttons (prev/next) work automatically.
+ * 
+ * For controlled month state, pass `month` and `onMonthChange` props.
+ * 
  * @param props - Calendar configuration and styling
  * @param ref - Forwarded ref (not used directly, but maintained for API consistency)
  * @returns JSX.Element - The rendered calendar element
  * 
  * @example
  * ```tsx
- * // Single date selection
+ * // Single date selection (uses default Australian locale)
  * <Calendar
  *   mode="single"
  *   selected={date}
@@ -106,88 +164,357 @@ export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'class
  *   onSelect={setDate}
  *   disabled={(date) => date < new Date()}
  * />
+ * 
+ * // Override locale (e.g., US locale with Sunday as first day)
+ * import { enUS } from 'date-fns/locale';
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   locale={enUS}
+ * />
+ * 
+ * // Controlled month state (optional - month is auto-managed if not provided)
+ * const [month, setMonth] = useState(new Date());
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   month={month}
+ *   onMonthChange={setMonth}
+ * />
  * ```
  */
-const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
-  ({ className, classNames, mode, components, ...props }, ref) => {
-    const defaultComponents = {
-      IconLeft: ({ ...iconProps }) => (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="h-4 w-4"
-          {...iconProps}
-        >
-          <path d="m15 18-6-6 6-6" />
-        </svg>
-      ),
-      IconRight: ({ ...iconProps }) => (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="h-4 w-4"
-          {...iconProps}
-        >
-          <path d="m9 18 6-6-6-6" />
-        </svg>
-      ),
-      ...components,
-    };
+const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
+  ({ className, classNames, mode, components, locale, month: controlledMonth, onMonthChange: controlledOnMonthChange, onSelect, ...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]
+    );
+    
+    // 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;
+    // 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
+    const [internalMonth, setInternalMonth] = React.useState<Date>(() => {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), 1);
+    });
+    
+    // Use controlled month if provided, otherwise use internal state
+    // Normalize month to first day of month to ensure consistency
+    const month = React.useMemo(() => {
+      const monthToUse = isMonthControlled ? controlledMonth : internalMonth;
+      if (!monthToUse) {
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), 1);
+      }
+      // Ensure month is normalized to first day
+      const normalized = new Date(monthToUse.getFullYear(), monthToUse.getMonth(), 1);
+      return normalized;
+    }, [isMonthControlled, controlledMonth, internalMonth]);
+    
+    // Handler for month changes - must be stable reference
+    const handleMonthChange = React.useCallback((newMonth: Date) => {
+      if (!isMonthControlled) {
+        setInternalMonth(newMonth);
+      }
+      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, return children directly
+    const CustomMonths = React.memo(({ children }: MonthsProps) => {
+      return <>{children}</>;
+    });
+    CustomMonths.displayName = 'CustomMonths';
+    
+    const CustomMonthGrid = React.forwardRef<HTMLTableElement, MonthGridProps>((props, forwardedRef) => {
+      return <table ref={forwardedRef} {...props} />;
+    });
+    CustomMonthGrid.displayName = 'CustomMonthGrid';
+    
+    // Custom Month: inject caption + navigation directly inside the <table>
+    const CustomMonth = React.memo(({ calendarMonth, displayIndex, className, children }: 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 & {
+                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;
+              
+              return React.cloneElement(
+                monthGridElement,
+                {
+                  key: child.key ?? `month-grid-${displayIndex}`,
+                  ...tableProps,
+                  ...(mergedRef ? { ref: mergedRef } : {}),
+                },
+                <>
+                  <caption className="relative">
+                    <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 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';
+
+    // Memoize components to ensure stable references
+    const defaultComponents = React.useMemo(() => ({
+      Root: CustomRoot,
+      Months: CustomMonths,
+      Month: CustomMonth,
+      MonthGrid: CustomMonthGrid,
+      // MonthCaption is now handled inside CustomMonth (injected into table)
+      Weekdays: CustomWeekdays,
+      // Spread user components AFTER ours so ours take precedence
+      ...(components || {}),
+    }), [components, CustomRoot, CustomMonths, CustomMonth, CustomWeekdays]);
 
     return (
-      <div ref={ref} className={cn('p-3', className)}>
-        {/* Type assertion needed due to TypeScript limitation with discriminated unions when mode is optional */}
-        <DayPicker
-          {...(mode ? { mode } : {})}
-          {...(props as any)}
-          className="rounded-md border border-sec-200 bg-background"
-          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',
-            caption_label: 'text-sm font-medium',
-            nav: 'space-x-1 flex items-center',
-            nav_button: cn(
-              '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'
-            ),
-            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: 'text-sec-600 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-acc-50/50 [&:has([aria-selected])]:bg-acc-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
-            day: 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'
-            ),
-            day_range_end: 'day-range-end',
-            day_selected: 'bg-main-600 text-main-50 hover:bg-main-600 hover:text-main-50 focus:bg-main-600 focus:text-main-50',
-            day_today: 'bg-sec-100 text-main-600 font-semibold',
-            day_outside: 'day-outside text-sec-400 opacity-50 aria-selected:bg-acc-50/50 aria-selected:text-sec-400 aria-selected:opacity-30',
-            day_disabled: 'text-sec-400 opacity-50 cursor-not-allowed',
-            day_range_middle: 'aria-selected:bg-acc-100 aria-selected:text-main-600',
-            day_hidden: 'invisible',
-            ...classNames,
-          }}
-          components={defaultComponents}
-        />
-      </div>
+      <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}
+      />
     );
   }
 );

package/src/components/Card/Card.test.tsx

@@ -146,7 +146,8 @@ describe('Card Component Suite', () => {
       it('has proper semantic structure', () => {
         renderWithProviders(<CardHeader>Header content</CardHeader>);
         const header = screen.getByRole('banner');
-        expect(header).toHaveClass('flex', 'flex-col', 'space-y-1.5', 'p-6');
+        expect(header.tagName).toBe('HEADER');
+        expect(header).toHaveClass('p-6', 'min-w-0', 'w-full');
       });
     });
   });
@@ -172,10 +173,11 @@ describe('Card Component Suite', () => {
         expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
       });
 
-      it('has proper heading styles', () => {
+      it('uses semantic heading element', () => {
         renderWithProviders(<CardTitle>Card Title</CardTitle>);
         const title = screen.getByRole('heading', { level: 3 });
-        expect(title).toHaveClass('text-2xl', 'font-semibold', 'leading-none', 'tracking-tight');
+        expect(title.tagName).toBe('H3');
+        expect(title.className).toBe('');
       });
     });
   });
@@ -256,7 +258,8 @@ describe('Card Component Suite', () => {
       it('has proper semantic structure', () => {
         renderWithProviders(<CardFooter>Footer content</CardFooter>);
         const footer = screen.getByRole('contentinfo');
-        expect(footer).toHaveClass('flex', 'items-center', 'p-6', 'pt-0');
+        expect(footer.tagName).toBe('FOOTER');
+        expect(footer).toHaveClass('p-6', 'pt-0', 'min-w-0', 'w-full');
       });
     });
   });

package/src/components/Card/Card.tsx

@@ -191,7 +191,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <header
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6 min-w-0 w-full", className)}
+    className={cn("p-6 min-w-0 w-full", className)}
     {...props}
   />
 ))
@@ -203,10 +203,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
-      className
-    )}
+    className={cn(className)}
     {...props}
   />
 ))
@@ -242,7 +239,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <footer
     ref={ref}
-    className={cn("flex items-center p-6 pt-0 min-w-0 w-full", className)}
+    className={cn("p-6 pt-0 min-w-0 w-full", className)}
     {...props}
   />
 ))

package/src/components/Checkbox/Checkbox.tsx

@@ -58,7 +58,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

package/src/components/DataTable/components/ActionButtons.tsx

@@ -136,9 +136,9 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
               aria-disabled={isDisabled}
               data-testid={action.testId}
               aria-label={label}
-              className="h-8 w-8 p-0"
+              className="size-8 p-0"
             >
-              {Icon && <Icon className="h-4 w-4" />}
+              {Icon && <Icon className="size-4" />}
             </Button>
           );
         })}
@@ -149,9 +149,9 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
   return (
     <Select>
       <SelectTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
+        <Button variant="ghost" className="size-8 p-0">
           <span className="sr-only">Open menu</span>
-          <MoreHorizontal className="h-4 w-4" />
+          <MoreHorizontal className="size-4" />
         </Button>
       </SelectTrigger>
       <SelectContent className="!bg-main-50 border border-sec-200 shadow-lg z-[9999]" style={{ backgroundColor: 'white' }}>
@@ -172,7 +172,7 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
               className="flex items-center gap-2"
               aria-disabled={isDisabled}
             >
-              {Icon && <Icon className="h-4 w-4" />}
+              {Icon && <Icon className="size-4" />}
               <span>{label}</span>
             </SelectItem>
           );