@jmruthers/pace-core 0.5.189 → 0.5.191

package/src/components/DataTable/components/BulkOperationsDropdown.tsx

@@ -127,7 +127,7 @@ export function BulkOperationsDropdown({
           disabled={!hasSelection}
           className={`min-w-[140px] h-9 px-3 py-2 text-sm font-medium ${className || ''}`}
         >
-          <MoreHorizontal className="h-4 w-4 mr-2 flex-shrink-0" />
+          <MoreHorizontal className="size-4 mr-2 flex-shrink-0" />
           <span className="truncate">
             Bulk Actions ({selectedCount})
           </span>
@@ -149,7 +149,7 @@ export function BulkOperationsDropdown({
                 variant === 'destructive' ? 'text-destructive focus:text-destructive' : ''
               }`}
             >
-              <Icon className="h-4 w-4" />
+              <Icon className="size-4" />
               <span>{label}</span>
             </SelectItem>
           );

package/src/components/DataTable/components/ColumnFilter.tsx

@@ -108,7 +108,7 @@ export function ColumnFilter({
           variant="ghost"
           onClick={clearFilter}
         >
-          <X className="h-3 w-3" />
+          <X className="size-3" />
         </Button>
       )}
       {hasFilter && (

package/src/components/DataTable/components/ColumnVisibilityDropdown.tsx

@@ -30,7 +30,7 @@ export function ColumnVisibilityDropdown<TData>({
         <Button 
           variant="outline" 
         >
-          <Settings2 className="h-4 w-4 mr-2 flex-shrink-0" />
+          <Settings2 className="size-4 mr-2 flex-shrink-0" />
           <span className="truncate">Columns</span>
         </Button>
       </SelectTrigger>
@@ -49,7 +49,7 @@ export function ColumnVisibilityDropdown<TData>({
                 });
               }}
             >
-              <Eye className="h-3 w-3 mr-1" />
+              <Eye className="size-3 mr-1" />
               Show All
             </Button>
             <Button
@@ -64,7 +64,7 @@ export function ColumnVisibilityDropdown<TData>({
                 });
               }}
             >
-              <EyeOff className="h-3 w-3 mr-1" />
+              <EyeOff className="size-3 mr-1" />
               Hide All
             </Button>
           </div>

package/src/components/DataTable/components/DataTableBody.tsx

@@ -222,14 +222,14 @@ export function DataTableBody<TData extends DataRecord>({
                   variant="ghost"
                   size="sm"
                   onClick={hierarchical.isAllExpanded ? hierarchical.collapseAll : hierarchical.expandAll}
-                  className="h-8 w-8 p-0"
+                  className="size-8 p-0"
                   aria-label={hierarchical.isAllExpanded ? 'Collapse all' : 'Expand all'}
                   title={hierarchical.isAllExpanded ? 'Collapse all' : 'Expand all'}
                 >
                   {hierarchical.isAllExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
+                    <ChevronDown className="size-4" />
                   ) : (
-                    <ChevronRight className="h-4 w-4" />
+                    <ChevronRight className="size-4" />
                   )}
                 </Button>
               </th>
@@ -263,11 +263,11 @@ export function DataTableBody<TData extends DataRecord>({
                             ? header.column.columnDef.header(header.getContext())
                             : header.column.columnDef.header}
                           {header.column.getIsSorted() === 'asc' ? (
-                            <ChevronUp className="h-4 w-4" />
+                            <ChevronUp className="size-4" />
                           ) : header.column.getIsSorted() === 'desc' ? (
-                            <ChevronDown className="h-4 w-4" />
+                            <ChevronDown className="size-4" />
                           ) : (
-                            <ChevronsUpDown className="h-4 w-4" />
+                            <ChevronsUpDown className="size-4" />
                           )}
                         </div>
                       </Button>
@@ -308,19 +308,19 @@ export function DataTableBody<TData extends DataRecord>({
               <>
                 <button
                   onClick={onSaveCreation}
-                  className="h-8 w-8 p-0 bg-app-main-500 text-app-main-50 rounded hover:bg-app-main-600 flex items-center justify-center"
+                  className="size-8 p-0 bg-app-main-500 text-app-main-50 rounded hover:bg-app-main-600 flex items-center justify-center"
                   title="Save new row"
                 >
-                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                   </svg>
                 </button>
                 <button
                   onClick={onCancelCreation}
-                  className="h-8 w-8 p-0 bg-app-sec-500 text-app-main-50 rounded hover:bg-app-sec-600 flex items-center justify-center"
+                  className="size-8 p-0 bg-app-sec-500 text-app-main-50 rounded hover:bg-app-sec-600 flex items-center justify-center"
                   title="Cancel new row"
                 >
-                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
@@ -368,9 +368,9 @@ export function DataTableBody<TData extends DataRecord>({
                         className="p-0 h-auto mr-2"
                       >
                         {isExpanded ? (
-                          <ChevronDown className="h-4 w-4" />
+                          <ChevronDown className="size-4" />
                         ) : (
-                          <ChevronRight className="h-4 w-4" />
+                          <ChevronRight className="size-4" />
                         )}
                       </Button>
                       <span className="text-sm">

package/src/components/DataTable/components/DataTableCore.tsx

@@ -1120,11 +1120,11 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
                               ? header.column.columnDef.header(header.getContext())
                               : header.column.columnDef.header}
                             {header.column.getIsSorted() === 'asc' ? (
-                              <ChevronUp className="h-4 w-4" />
+                              <ChevronUp className="size-4" />
                             ) : header.column.getIsSorted() === 'desc' ? (
-                              <ChevronDown className="h-4 w-4" />
+                              <ChevronDown className="size-4" />
                             ) : (
-                              <ChevronsUpDown className="h-4 w-4" />
+                              <ChevronsUpDown className="size-4" />
                             )}
                           </Button>
                         ) : (

package/src/components/DataTable/components/DataTableToolbar.tsx

@@ -204,7 +204,7 @@ export function DataTableToolbar<TData extends DataRecord>({
             variant="outline" 
             onClick={onToggleFilterRow}
           >
-            <Filter className="h-4 w-4 mr-2 flex-shrink-0" />
+            <Filter className="size-4 mr-2 flex-shrink-0" />
             <span className="truncate">
               {showFilterRow ? 'Hide Filters' : 'Show Filters'}
             </span>
@@ -217,7 +217,7 @@ export function DataTableToolbar<TData extends DataRecord>({
             variant="outline" 
             onClick={onCreateRow}
           >
-            <Plus className="h-4 w-4 mr-2 flex-shrink-0" />
+            <Plus className="size-4 mr-2 flex-shrink-0" />
             <span className="truncate">Add Row</span>
           </Button>
         )}
@@ -229,7 +229,7 @@ export function DataTableToolbar<TData extends DataRecord>({
             onClick={onImportClick}
             data-restore-target="datatable-import-button"
           >
-            <Upload className="h-4 w-4 mr-2 flex-shrink-0" />
+            <Upload className="size-4 mr-2 flex-shrink-0" />
             <span className="truncate">Import</span>
           </Button>
         )}
@@ -240,7 +240,7 @@ export function DataTableToolbar<TData extends DataRecord>({
             variant="outline" 
             onClick={onExport}
           >
-            <Download className="h-4 w-4 mr-2 flex-shrink-0" />
+            <Download className="size-4 mr-2 flex-shrink-0" />
             <span className="truncate">Export</span>
           </Button>
         )}
@@ -252,7 +252,7 @@ export function DataTableToolbar<TData extends DataRecord>({
             onClick={() => onDeleteSelected?.(rowSelection)}
             disabled={Object.values(rowSelection).filter(Boolean).length === 0}
           >
-            <Trash2 className="h-4 w-4 mr-2 flex-shrink-0" />
+            <Trash2 className="size-4 mr-2 flex-shrink-0" />
             <span className="truncate">Delete</span>
           </Button>
         )}

package/src/components/DataTable/components/DraggableColumnHeader.tsx

@@ -121,11 +121,11 @@ export function DraggableColumnHeader<TData>({
                     ? header.column.columnDef.header(header.getContext())
                     : header.column.columnDef.header}
                   {header.column.getIsSorted() === 'asc' ? (
-                    <ChevronUp className="h-4 w-4" />
+                    <ChevronUp className="size-4" />
                   ) : header.column.getIsSorted() === 'desc' ? (
-                    <ChevronDown className="h-4 w-4" />
+                    <ChevronDown className="size-4" />
                   ) : (
-                    <ChevronsUpDown className="h-4 w-4" />
+                    <ChevronsUpDown className="size-4" />
                   )}
                 </div>
               </Button>

package/src/components/DataTable/components/EditableRow.tsx

@@ -378,10 +378,10 @@ export function EditableRow<TData extends DataRecord>({
                 cell.column.id === 'actions' ? (
                   <div className="flex gap-1">
                     <Button onClick={onSave} size="sm" variant="default" aria-label="Save changes">
-                      <Check className="h-4 w-4" />
+                      <Check className="size-4" />
                     </Button>
                     <Button onClick={onCancel} size="sm" variant="outline" aria-label="Cancel editing">
-                      <X className="h-4 w-4" />
+                      <X className="size-4" />
                     </Button>
                   </div>
                 ) : (

package/src/components/DataTable/components/EmptyState.tsx

@@ -36,7 +36,7 @@ export function EmptyState({
       <Icon 
         role="img" 
         aria-hidden="true" 
-        className="h-12 w-12 text-muted-foreground mb-4"
+        className="size-12 text-muted-foreground mb-4"
         data-testid={Icon === Database ? 'lucide-database' : Icon === User ? 'lucide-user' : 'custom-icon'}
       />
       <h3 className="text-lg font-semibold mb-2">
@@ -50,14 +50,14 @@ export function EmptyState({
         <div className="flex gap-2">
           {isFiltered && onClearFilters && (
             <Button variant="outline" onClick={onClearFilters}>
-              <Search className="h-4 w-4 mr-2" />
+              <Search className="size-4 mr-2" />
               Clear filters
             </Button>
           )}
           
           {action && (
             <Button onClick={action.onClick}>
-              <Plus className="h-4 w-4 mr-2" />
+              <Plus className="size-4 mr-2" />
               {action.label}
             </Button>
           )}

package/src/components/DataTable/components/GroupHeader.tsx

@@ -29,9 +29,9 @@ export function GroupHeader<TData>({
         className="p-0 h-auto mr-2"
       >
         {isExpanded ? (
-          <ChevronDown className="h-4 w-4" />
+          <ChevronDown className="size-4" />
         ) : (
-          <ChevronRight className="h-4 w-4" />
+          <ChevronRight className="size-4" />
         )}
       </Button>
       <span className="text-sm">

package/src/components/DataTable/components/GroupingDropdown.tsx

@@ -62,7 +62,7 @@ export function GroupingDropdown<TData extends DataRecord>({
           variant="outline" 
           className={className || ''}
         >
-          <Group className="h-4 w-4 mr-2 flex-shrink-0" />
+          <Group className="size-4 mr-2 flex-shrink-0" />
           <span className="truncate">Grouping</span>
         </Button>
       </SelectTrigger>

package/src/components/DataTable/components/ImportModal.tsx

@@ -375,7 +375,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
         <div className="space-y-4">
           <div className="border-2 border-dashed border-sec-200 rounded-lg p-6 text-center">
-            <FileText className="h-8 w-8 mx-auto text-sec-400 mb-2" />
+            <FileText className="size-8 mx-auto text-sec-400 mb-2" />
             <p className="text-sec-600 mb-2">
               {file ? `Selected: ${file.name}` : uploadText}
             </p>
@@ -389,7 +389,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
               size="sm"
               onClick={() => fileInputRef.current?.click()}
             >
-              <Upload className="h-4 w-4 mr-2" />
+              <Upload className="size-4 mr-2" />
               {selectFileButtonText}
             </Button>
             <Input
@@ -403,7 +403,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
           {error && (
             <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
-              <AlertCircle className="h-4 w-4" />
+              <AlertCircle className="size-4" />
               <span className="text-sm">{error}</span>
             </div>
           )}
@@ -411,7 +411,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
           {validationErrors.length > 0 && (
             <div className="space-y-2">
               <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
-                <AlertCircle className="h-4 w-4" />
+                <AlertCircle className="size-4" />
                 <span className="text-sm font-medium">
                   {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
                 </span>

package/src/components/DataTable/components/LoadingState.tsx

@@ -4,7 +4,7 @@ export function LoadingState() {
   return (
     <div className="p-8 text-center">
       <div className="flex items-center justify-center space-x-2">
-        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+        <div className="animate-spin rounded-full size-6 border-b-2 border-primary"></div>
         <span aria-live="polite" className="text-muted-foreground">Loading...</span>
       </div>
     </div>

package/src/components/DataTable/components/PaginationControls.tsx

@@ -76,11 +76,11 @@ export function PaginationControls<TData extends DataRecord>({
   const getModeIcon = () => {
     switch (paginationMode) {
       case 'server':
-        return <Server className="h-3 w-3" />;
+        return <Server className="size-3" />;
       case 'hybrid':
-        return <Database className="h-3 w-3" />;
+        return <Database className="size-3" />;
       default:
-        return <Zap className="h-3 w-3" />;
+        return <Zap className="size-3" />;
     }
   };
 
@@ -157,49 +157,49 @@ export function PaginationControls<TData extends DataRecord>({
       <Button
         variant="outline"
         size="sm"
-        className="h-8 w-8 p-0"
+        className="size-8 p-0"
         onClick={goToFirstPage}
         disabled={!canPreviousPage || isLoading}
         aria-label="Go to first page"
         tabIndex={0}
       >
-        <ChevronsLeft className="h-4 w-4" />
+        <ChevronsLeft className="size-4" />
       </Button>
 
       <Button
         variant="outline"
         size="sm"
-        className="h-8 w-8 p-0"
+        className="size-8 p-0"
         onClick={goToPreviousPage}
         disabled={!canPreviousPage || isLoading}
         aria-label="Go to previous page"
         tabIndex={0}
       >
-        <ChevronLeft className="h-4 w-4" />
+        <ChevronLeft className="size-4" />
       </Button>
 
       <Button
         variant="outline"
         size="sm"
-        className="h-8 w-8 p-0"
+        className="size-8 p-0"
         onClick={goToNextPage}
         disabled={!canNextPage || isLoading}
         aria-label="Go to next page"
         tabIndex={0}
       >
-        <ChevronRight className="h-4 w-4" />
+        <ChevronRight className="size-4" />
       </Button>
 
       <Button
         variant="outline"
         size="sm"
-        className="h-8 w-8 p-0"
+        className="size-8 p-0"
         onClick={goToLastPage}
         disabled={!canNextPage || isLoading}
         aria-label="Go to last page"
         tabIndex={0}
       >
-        <ChevronsRight className="h-4 w-4" />
+        <ChevronsRight className="size-4" />
       </Button>
     </footer>
   );

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -594,9 +594,9 @@ const RowComponent = React.memo(({
                   className="p-0 h-auto mr-2"
                 >
                   {isExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
+                    <ChevronDown className="size-4" />
                   ) : (
-                    <ChevronRight className="h-4 w-4" />
+                    <ChevronRight className="size-4" />
                   )}
                 </Button>
                 <span className="text-sm">
@@ -755,14 +755,14 @@ const RowComponent = React.memo(({
                 variant="ghost"
                 size="sm"
                 onClick={() => hierarchical?.state?.toggleRow(rowId)}
-                className="h-6 w-6 p-0 flex-shrink-0"
+                className="size-6 p-0 flex-shrink-0"
                 aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
                 title={isExpanded ? 'Collapse row' : 'Expand row'}
               >
                 {isExpanded ? (
-                  <ChevronDown className="h-4 w-4" />
+                  <ChevronDown className="size-4" />
                 ) : (
-                  <ChevronRight className="h-4 w-4" />
+                  <ChevronRight className="size-4" />
                 )}
               </Button>
             )}
@@ -1039,19 +1039,19 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
           >
             <button
               onClick={onSaveCreation}
-              className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+              className="size-8 p-0 hover:bg-muted/50 flex items-center justify-center"
               title="Save new row"
             >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
               </svg>
             </button>
             <button
               onClick={onCancelCreation}
-              className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+              className="size-8 p-0 hover:bg-muted/50 flex items-center justify-center"
               title="Cancel new row"
             >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>

package/src/components/DataTable/components/ViewRowModal.tsx

@@ -35,9 +35,9 @@ export function ViewRowModal<TData extends Record<string, any>>({
               variant="ghost"
               size="sm"
               onClick={onClose}
-              className="h-6 w-6 p-0"
+              className="size-6 p-0"
             >
-              <X className="h-4 w-4" />
+              <X className="size-4" />
             </Button>
           </DialogTitle>
         </DialogHeader>

package/src/components/DataTable/components/__tests__/AccessDeniedPage.test.tsx

@@ -14,35 +14,6 @@ import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { AccessDeniedPage } from '../AccessDeniedPage';
 
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  ShieldX: ({ className }: { className?: string }) => (
-    <div data-testid="shield-x-icon" className={className}>ShieldX</div>
-  ),
-  ArrowLeft: ({ className }: { className?: string }) => (
-    <div data-testid="arrow-left-icon" className={className}>ArrowLeft</div>
-  ),
-  RefreshCw: ({ className }: { className?: string }) => (
-    <div data-testid="refresh-cw-icon" className={className}>RefreshCw</div>
-  ),
-}));
-
-// Mock Card component - need to match the actual import path
-vi.mock('../../../Card/Card', () => ({
-  Card: ({ children, className }: any) => (
-    <article data-testid="card" className={className}>{children}</article>
-  ),
-}));
-
-// Mock Button component
-vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, variant, className, ...props }: any) => (
-    <button onClick={onClick} data-variant={variant} className={className} {...props}>
-      {children}
-    </button>
-  ),
-}));
-
 describe('[component] AccessDeniedPage', () => {
   beforeAll(() => {
     // Set up navigator globally for all tests (needed for userEvent cleanup)
@@ -190,7 +161,7 @@ describe('[component] AccessDeniedPage', () => {
     it('renders ShieldX icon', () => {
       render(<AccessDeniedPage resource="users" />);
 
-      expect(screen.getByTestId('shield-x-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('lucide-shieldx')).toBeInTheDocument();
     });
 
     it('displays resource information', () => {
@@ -408,19 +379,19 @@ describe('[component] AccessDeniedPage', () => {
       const handleRetry = vi.fn();
 
       render(
-        <AccessDeniedPage 
-          resource="users" 
+        <AccessDeniedPage
+          resource="users"
           onRetry={handleRetry}
         />
       );
 
-      expect(screen.getByTestId('refresh-cw-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('lucide-refreshcw')).toBeInTheDocument();
     });
 
     it('renders ArrowLeft icon in back button', () => {
       render(<AccessDeniedPage resource="users" />);
 
-      expect(screen.getByTestId('arrow-left-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('lucide-arrowleft')).toBeInTheDocument();
     });
   });
 
@@ -479,7 +450,7 @@ describe('[component] AccessDeniedPage', () => {
     it('has proper icon structure', () => {
       render(<AccessDeniedPage resource="users" />);
 
-      expect(screen.getByTestId('shield-x-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('lucide-shieldx')).toBeInTheDocument();
     });
   });
 
@@ -529,9 +500,12 @@ describe('[component] AccessDeniedPage', () => {
         });
       }
       
-      render(<AccessDeniedPage resource="users" />);
+      const { container } = render(<AccessDeniedPage resource="users" />);
 
-      expect(screen.getByTestId('card')).toBeInTheDocument();
+      const card = screen.getByRole('article');
+      expect(card).toBeInTheDocument();
+      expect(container.firstChild).toContainElement(card);
+      expect(card.className).toContain('max-w-md');
     });
   });