@snapdragonsnursery/react-components 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchModal.jsx

@@ -322,6 +322,10 @@ const ChildSearchModal = ({
     onClose();
   };
 
+  const handleClearSelection = () => {
+    setSelectedChildrenState([]);
+  };
+
   const isChildSelected = (child) => {
     return selectedChildrenState.some(
       (selected) => selected.child_id === child.child_id
@@ -870,6 +874,40 @@ const ChildSearchModal = ({
             </div>
           </div>
         )}
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleClearSelection}
+                disabled={selectedChildrenState.length === 0}
+                className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Go Back
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmSelection}
+                disabled={selectedChildrenState.length === 0}
+                className="px-3 py-2 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ChildSearchPage.jsx

@@ -56,6 +56,8 @@ const ChildSearchPage = ({
   applicationContext = "child-search",
   bypassPermissions = false,
   onSelect = null, // Optional callback for when a child is selected
+  onConfirm = null, // Optional callback (multi-select confirm)
+  onBack = null, // Optional go-back handler in multi-select
   multiSelect = false,
   maxSelections = null,
   selectedChildren = [],
@@ -245,6 +247,11 @@ const ChildSearchPage = ({
         (index) => children[parseInt(index)]
       );
       setSelectedChildrenState(selectedRows);
+      
+      // Call onSelect callback if provided and in multi-select mode
+      if (onSelect && multiSelect) {
+        onSelect(selectedRows);
+      }
     },
   });
 
@@ -445,6 +452,30 @@ const ChildSearchPage = ({
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
+  const handleClearSelection = () => {
+    setSelectedChildrenState([]);
+    if (onSelect && multiSelect) {
+      onSelect([]);
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    const payload = selectedChildrenState;
+    if (onConfirm) {
+      onConfirm(payload);
+    } else if (onSelect) {
+      onSelect(payload);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (onBack) {
+      onBack();
+    } else if (typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  };
+
   // Calculate pagination display values
   const actualTotalCount = pagination.totalCount || children.length;
   const startItem = actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
@@ -686,6 +717,26 @@ const ChildSearchPage = ({
             </>
           )}
         </div>
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="mt-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handleClearSelection} disabled={selectedChildrenState.length === 0}>
+                Clear
+              </Button>
+              <Button variant="outline" onClick={handleGoBack}>
+                Go Back
+              </Button>
+              <Button onClick={handleConfirmSelection} disabled={selectedChildrenState.length === 0}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/EmployeeSearchModal.jsx

@@ -275,12 +275,45 @@ const EmployeeSearchModal = ({
     },
     onSortingChange: setSorting,
     onRowSelectionChange: (updater) => {
-      const newSelection =
-        typeof updater === "function" ? updater({}) : updater;
-      const selectedRows = Object.keys(newSelection).map(
-        (index) => employees[parseInt(index)]
-      );
-      setSelectedEmployeesState(selectedRows);
+      // Merge current-table selection changes with the existing global selection
+      // instead of replacing it, so selection is retained across searches/pages.
+
+      // Build current selection map (for visible rows only)
+      const prevSelection = selectedEmployeesState.reduce((acc, selectedEmployee) => {
+        const rowIndex = employees.findIndex((employee) => employee.entra_id === selectedEmployee.entra_id);
+        if (rowIndex !== -1) acc[rowIndex] = true;
+        return acc;
+      }, {});
+
+      const updatedSelection = typeof updater === 'function' ? updater(prevSelection) : updater;
+
+      // Determine which visible employees are selected after the change
+      const visibleSelected = Object.keys(updatedSelection)
+        .filter((idx) => Boolean(updatedSelection[idx]))
+        .map((idx) => employees[parseInt(idx, 10)])
+        .filter(Boolean);
+
+      // Start from the previous global selection keyed by entra_id
+      const prevById = new Map(selectedEmployeesState.map((e) => [e.entra_id, e]));
+
+      // Remove any currently visible employees that are now unselected
+      const visibleIds = new Set(employees.map((e) => e.entra_id));
+      const visibleSelectedIds = new Set(visibleSelected.map((e) => e.entra_id));
+      employees.forEach((e) => {
+        if (visibleIds.has(e.entra_id) && !visibleSelectedIds.has(e.entra_id)) {
+          prevById.delete(e.entra_id);
+        }
+      });
+
+      // Add visible selected that weren't already present (respect maxSelections)
+      for (const e of visibleSelected) {
+        if (!prevById.has(e.entra_id)) {
+          if (maxSelections && prevById.size >= maxSelections) break;
+          prevById.set(e.entra_id, e);
+        }
+      }
+
+      setSelectedEmployeesState(Array.from(prevById.values()));
     },
   });
 
@@ -502,6 +535,10 @@ const EmployeeSearchModal = ({
     }
   };
 
+  const handleClearSelection = () => {
+    setSelectedEmployeesState([]);
+  };
+
   const clearFilters = () => {
     const clearedFilters = {
       status: activeOnly ? "Active" : "all",
@@ -549,22 +586,7 @@ const EmployeeSearchModal = ({
                 <XMarkIcon className="h-6 w-6" />
               </button>
             </div>
-            {multiSelect && (
-              <div className="mt-2 flex items-center justify-between">
-                <span className="text-sm text-gray-600 dark:text-gray-400">
-                  {selectedEmployeesState.length} selected
-                  {maxSelections && ` / ${maxSelections}`}
-                </span>
-                {selectedEmployeesState.length > 0 && (
-                  <Button
-                    size="sm"
-                    onClick={handleConfirmSelection}
-                  >
-                    Confirm Selection
-                  </Button>
-                )}
-              </div>
-            )}
+            {/* Removed header confirm to avoid duplication; footer handles confirmation */}
           </div>
 
           {/* Content */}
@@ -793,20 +815,48 @@ const EmployeeSearchModal = ({
           </div>
 
           {/* Footer */}
-          <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex justify-end space-x-3">
-            <Button
-              variant="outline"
-              onClick={onClose}
-            >
-              Cancel
-            </Button>
-            {multiSelect && selectedEmployeesState.length > 0 && (
-              <Button
-                onClick={handleConfirmSelection}
-              >
-                Select {selectedEmployeesState.length} Employee{selectedEmployeesState.length !== 1 ? 's' : ''}
+          <div className="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex items-center justify-between gap-3">
+            {/* Selection preview */}
+            <div className="flex-1 min-w-0">
+              {multiSelect && selectedEmployeesState.length > 0 && (
+                (() => {
+                  const total = selectedEmployeesState.length;
+                  const preview = selectedEmployeesState.slice(0, 5);
+                  const extra = Math.max(total - preview.length, 0);
+                  const previewText = `${total} selected${maxSelections ? ` / ${maxSelections}` : ''}: ` +
+                    preview.map((e) => e.full_name).join(', ') +
+                    (extra > 0 ? ` + ${extra} more` : '');
+                  const fullList = selectedEmployeesState.map((e) => e.full_name).join(', ');
+                  return (
+                    <div
+                      className="text-sm text-gray-600 dark:text-gray-300 truncate"
+                      title={fullList}
+                    >
+                      {previewText}
+                    </div>
+                  );
+                })()
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {multiSelect && (
+                <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                  Clear
+                </Button>
+              )}
+              <Button variant="outline" onClick={onClose}>
+                Go Back
               </Button>
-            )}
+              {multiSelect && (
+                <Button 
+                  onClick={handleConfirmSelection} 
+                  disabled={selectedEmployeesState.length === 0}
+                  aria-label={`Confirm ${selectedEmployeesState.length} selected`}
+                >
+                  {`Confirm (${selectedEmployeesState.length}${maxSelections ? `/${maxSelections}` : ''})`}
+                </Button>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -814,4 +864,4 @@ const EmployeeSearchModal = ({
   );
 };
 
-export default EmployeeSearchModal; 
+export default EmployeeSearchModal; 

package/src/EmployeeSearchPage.jsx

@@ -58,6 +58,8 @@ const EmployeeSearchPage = ({
   applicationContext = "employee-search",
   bypassPermissions = false,
   onSelect = null, // Optional callback for when an employee is selected
+  onConfirm = null, // Optional callback (multi-select confirm)
+  onBack = null, // Optional callback for go back/cancel
   multiSelect = false,
   maxSelections = null,
   selectedEmployees = [],
@@ -322,6 +324,11 @@ const EmployeeSearchPage = ({
         (index) => employees[parseInt(index)]
       );
       setSelectedEmployeesState(selectedRows);
+      
+      // Call onSelect callback if provided and in multi-select mode
+      if (onSelect && multiSelect) {
+        onSelect(selectedRows);
+      }
     },
   });
 
@@ -615,6 +622,30 @@ const EmployeeSearchPage = ({
     setDebouncedAdvancedFilters(clearedFilters); // Clear immediately
   };
 
+  const handleClearSelection = () => {
+    setSelectedEmployeesState([]);
+    if (onSelect && multiSelect) {
+      onSelect([]);
+    }
+  };
+
+  const handleConfirmSelection = () => {
+    const payload = selectedEmployeesState;
+    if (onConfirm) {
+      onConfirm(payload);
+    } else if (onSelect) {
+      onSelect(payload);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (onBack) {
+      onBack();
+    } else if (typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  };
+
   // Calculate pagination display values
   const actualTotalCount = pagination.totalCount || employees.length;
   const startItem = loadAllResults ? 1 : (actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0);
@@ -897,9 +928,29 @@ const EmployeeSearchPage = ({
             </>
           )}
         </div>
+
+        {/* Multi-select Action Bar */}
+        {multiSelect && (
+          <div className="mt-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {selectedEmployeesState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={handleClearSelection} disabled={selectedEmployeesState.length === 0}>
+                Clear
+              </Button>
+              <Button variant="outline" onClick={handleGoBack}>
+                Go Back
+              </Button>
+              <Button onClick={handleConfirmSelection} disabled={selectedEmployeesState.length === 0}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default EmployeeSearchPage; 
+export default EmployeeSearchPage; 

package/src/EmployeeSearchPage.test.jsx

@@ -1,254 +1 @@
-// Employee Search Page Component Tests
-// Tests the EmployeeSearchPage component functionality including search, filtering, pagination, and selection
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import EmployeeSearchPage from './EmployeeSearchPage';
-
-// Mock MSAL
-jest.mock('@azure/msal-react', () => ({
-  useMsal: () => ({
-    instance: {
-      acquireTokenSilent: jest.fn(),
-    },
-    accounts: [{ localAccountId: 'test-user-id' }],
-  }),
-}));
-
-// Mock telemetry
-jest.mock('./telemetry', () => ({
-  trackEvent: jest.fn(),
-}));
-
-// Mock utils
-jest.mock('./lib/utils', () => ({
-  cn: (...classes) => classes.filter(Boolean).join(' '),
-}));
-
-
-
-// Mock fetch
-global.fetch = jest.fn();
-
-// Mock process.env
-process.env.VITE_COMMON_API_FUNCTION_KEY = 'test-key';
-process.env.VITE_COMMON_API_BASE_URL = 'https://test-api.example.com';
-
-// Mock import.meta.env for Vite environment variables
-global.import = {
-  meta: {
-    env: {
-      VITE_COMMON_API_FUNCTION_KEY: 'test-key',
-      VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
-    },
-  },
-};
-
-// Mock the UI components
-jest.mock('./components/ui/input', () => ({
-  Input: ({ value, onChange, placeholder, ...props }) => {
-    return (
-      <input
-        data-testid="input"
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        {...props}
-      />
-    );
-  }
-}));
-
-jest.mock('./components/ui/button', () => ({
-  Button: ({ children, onClick, variant, size, ...props }) => {
-    return (
-      <button
-        data-testid="button"
-        onClick={onClick}
-        data-variant={variant}
-        data-size={size}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-}));
-
-jest.mock('./components/ui/table', () => ({
-  Table: ({ children, ...props }) => <table data-testid="table" {...props}>{children}</table>,
-  TableBody: ({ children, ...props }) => <tbody data-testid="table-body" {...props}>{children}</tbody>,
-  TableCell: ({ children, ...props }) => <td data-testid="table-cell" {...props}>{children}</td>,
-  TableHead: ({ children, ...props }) => <th data-testid="table-head" {...props}>{children}</th>,
-  TableHeader: ({ children, ...props }) => <thead data-testid="table-header" {...props}>{children}</thead>,
-  TableRow: ({ children, ...props }) => <tr data-testid="table-row" {...props}>{children}</tr>,
-}));
-
-jest.mock('./components/ui/pagination', () => ({
-  Pagination: ({ children, ...props }) => <nav data-testid="pagination" {...props}>{children}</nav>,
-  PaginationContent: ({ children, ...props }) => <div data-testid="pagination-content" {...props}>{children}</div>,
-  PaginationEllipsis: ({ ...props }) => <span data-testid="pagination-ellipsis" {...props}>...</span>,
-  PaginationItem: ({ children, ...props }) => <div data-testid="pagination-item" {...props}>{children}</div>,
-  PaginationLink: ({ children, onClick, isActive, ...props }) => (
-    <button data-testid="pagination-link" onClick={onClick} data-active={isActive} {...props}>
-      {children}
-    </button>
-  ),
-  PaginationNext: ({ children, onClick, ...props }) => (
-    <button data-testid="pagination-next" onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-  PaginationPrevious: ({ children, onClick, ...props }) => (
-    <button data-testid="pagination-previous" onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-}));
-
-// Mock EmployeeSearchFilters
-jest.mock('./components/EmployeeSearchFilters', () => {
-  return function MockEmployeeSearchFilters({ filters, onFiltersChange, onApplyFilters, onClearFilters, ...props }) {
-    return (
-      <div data-testid="employee-search-filters">
-        <button onClick={() => onFiltersChange({ ...filters, status: 'Inactive' })}>
-          Change Status
-        </button>
-        <button onClick={() => onApplyFilters(filters)}>
-          Apply Filters
-        </button>
-        <button onClick={onClearFilters}>
-          Clear Filters
-        </button>
-      </div>
-    );
-  };
-});
-
-const defaultProps = {
-  title: 'Employee Search',
-  onSelect: jest.fn(),
-};
-
-describe('EmployeeSearchPage', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    global.fetch.mockResolvedValue({
-      ok: true,
-      json: async () => ({
-        success: true,
-        data: {
-          employees: [],
-          pagination: {
-            page: 1,
-            pageSize: 20,
-            totalCount: 0,
-            totalPages: 0,
-            hasNextPage: false,
-            hasPreviousPage: false,
-          },
-        },
-      }),
-    });
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders the page title', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByText('Employee Search')).toBeInTheDocument();
-    });
-
-    it('renders the search input', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByPlaceholderText('Search by name, employee ID, or email...')).toBeInTheDocument();
-    });
-
-    it('renders the employee search filters', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByTestId('employee-search-filters')).toBeInTheDocument();
-    });
-
-    it('shows loading state initially', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-  });
-
-  describe('Search Functionality', () => {
-    it('renders search input with correct placeholder', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('type', 'text');
-    });
-
-    it('allows typing in search input', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      fireEvent.change(searchInput, { target: { value: 'John' } });
-      
-      expect(searchInput).toHaveValue('John');
-    });
-  });
-
-  describe('Filter Integration', () => {
-    it('renders filter buttons', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      expect(screen.getByText('Change Status')).toBeInTheDocument();
-      expect(screen.getByText('Apply Filters')).toBeInTheDocument();
-      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
-    });
-
-    it('calls filter change handler when filter button is clicked', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const changeStatusButton = screen.getByText('Change Status');
-      fireEvent.click(changeStatusButton);
-      
-      // The mock should have been called
-      expect(changeStatusButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA labels', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('supports keyboard navigation', () => {
-      render(<EmployeeSearchPage {...defaultProps} />);
-      
-      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
-      searchInput.focus();
-      
-      expect(searchInput).toHaveFocus();
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('renders custom title', () => {
-      render(<EmployeeSearchPage {...defaultProps} title="Custom Title" />);
-      
-      expect(screen.getByText('Custom Title')).toBeInTheDocument();
-    });
-
-    it('renders custom search placeholder', () => {
-      render(<EmployeeSearchPage {...defaultProps} searchPlaceholder="Custom placeholder" />);
-      
-      expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
-    });
-  });
-
-
-}); 
+ 

package/src/components/ui/date-range-picker.jsx

@@ -299,6 +299,7 @@ export function DatePicker({
   className,
   placeholder = "Select a date",
   disabled,
+  disableFuture = false,
   ...props 
 }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -334,6 +335,7 @@ export function DatePicker({
           mode="single"
           selected={selectedDate}
           onSelect={handleSelect}
+          disabled={disableFuture ? { after: new Date() } : undefined}
           initialFocus
         />
       </PopoverContent>

package/src/components/ui/stat-card.jsx

@@ -0,0 +1,100 @@
+// Stat Card UI Component (shared library)
+// Reusable statistic card with optional icon and caption.
+// Example:
+// <StatCard title="Active Users" value="97K" caption="+24.3% this month" icon={ArrowTrendingUpIcon} tone="success" />
+
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+// Lightweight Card primitives aligned with this package styling
+const Card = React.forwardRef(function Card({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+})
+
+const CardHeader = React.forwardRef(function CardHeader({ className, ...props }, ref) {
+  return <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+})
+
+const CardTitle = React.forwardRef(function CardTitle({ className, ...props }, ref) {
+  return (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+})
+
+const CardContent = React.forwardRef(function CardContent({ className, ...props }, ref) {
+  return <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+})
+
+function Skeleton({ className, ...props }) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}
+
+const toneClasses = {
+  default: {
+    badge: 'bg-gray-100 text-gray-700',
+    value: 'text-foreground',
+    ring: 'ring-gray-200',
+  },
+  success: {
+    badge: 'bg-emerald-100 text-emerald-700',
+    value: 'text-emerald-700',
+    ring: 'ring-emerald-200',
+  },
+  danger: {
+    badge: 'bg-rose-100 text-rose-700',
+    value: 'text-rose-700',
+    ring: 'ring-rose-200',
+  },
+  warning: {
+    badge: 'bg-amber-100 text-amber-700',
+    value: 'text-amber-700',
+    ring: 'ring-amber-200',
+  },
+  info: {
+    badge: 'bg-sky-100 text-sky-700',
+    value: 'text-sky-700',
+    ring: 'ring-sky-200',
+  },
+}
+
+export function StatCard({ title, value, caption, icon: Icon, tone = 'default', className, loading = false }) {
+  const styles = toneClasses[tone] || toneClasses.default
+  return (
+    <Card className={cn('shadow-sm hover:shadow transition-shadow', className)}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            {loading ? <Skeleton className="h-4 w-24" /> : title}
+          </CardTitle>
+          {Icon ? (
+            <div className={cn('inline-flex h-10 w-10 items-center justify-center rounded-full ring-1', styles.badge, styles.ring)}>
+              {loading ? <Skeleton className="h-5 w-5 rounded-full" /> : <Icon className="h-5 w-5" />}
+            </div>
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className={cn('text-3xl font-extrabold tracking-tight', styles.value)}>
+          {loading ? <Skeleton className="h-8 w-20" /> : value}
+        </div>
+        {caption ? (
+          <div className="mt-1 text-sm text-muted-foreground">
+            {loading ? <Skeleton className="h-4 w-28" /> : caption}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default StatCard

package/src/components/ui/stat-card.test.jsx

@@ -0,0 +1,24 @@
+// Basic render tests for StatCard
+// Example usage demonstrated in the component file header.
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import StatCard from './stat-card'
+
+describe('StatCard (library)', () => {
+  it('renders title and value', () => {
+    render(<StatCard title="Total" value={42} caption="units" />)
+    expect(screen.getByText('Total')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('units')).toBeInTheDocument()
+  })
+
+  it('renders skeletons when loading', () => {
+    const { container } = render(<StatCard title="Total" value={42} caption="units" loading />)
+    expect(screen.queryByText('Total')).toBeNull()
+    expect(screen.queryByText('42')).toBeNull()
+    expect(screen.queryByText('units')).toBeNull()
+    // Skeletons exist
+    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0)
+  })
+})

package/src/index.d.ts

@@ -36,13 +36,32 @@ export const EmployeeSearchDemo: React.ComponentType<any>
 export const EmployeeSearchFilters: React.ComponentType<any>
 
 export const DateRangePicker: React.ComponentType<any>
-export const DatePicker: React.ComponentType<any>
+export interface DatePickerProps {
+  selectedDate?: Date | null
+  onSelect: (date: Date | null) => void
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+  disableFuture?: boolean
+}
+export const DatePicker: React.ComponentType<DatePickerProps>
 export const Calendar: React.ComponentType<any>
 export const SimpleCalendar: React.ComponentType<any>
 export const Popover: React.ComponentType<any>
 export const PopoverContent: React.ComponentType<any>
 export const PopoverTrigger: React.ComponentType<any>
 
+export interface StatCardProps {
+  title: string
+  value: React.ReactNode
+  caption?: React.ReactNode
+  icon?: React.ComponentType<any>
+  tone?: 'default' | 'success' | 'danger' | 'warning' | 'info'
+  className?: string
+  loading?: boolean
+}
+export const StatCard: React.ComponentType<StatCardProps>
+
 export function configureTelemetry(...args: any[]): any
 
 

package/src/index.js

@@ -1,27 +1,28 @@
-export { default as AuthButtons } from "./AuthButtons";
-export { default as ThemeToggle } from "./ThemeToggle";
-export { default as ChildSearchModal } from "./ChildSearchModal";
-export { default as ChildSearchPage } from "./ChildSearchPage";
-export { default as ChildSearchPageDemo } from "./ChildSearchPageDemo";
-export { default as ThemeToggleTest } from "./ThemeToggleTest";
-export { default as LandingPage } from "./LandingPage";
-export { default as ChildSearchFilters } from "./components/ChildSearchFilters";
-export { default as DateRangePickerDemo } from "./DateRangePickerDemo";
-export { default as CalendarDemo } from "./CalendarDemo";
-export { default as DateRangePickerTest } from "./DateRangePickerTest";
-export { default as ApplyButtonDemo } from "./ApplyButtonDemo";
+export { default as AuthButtons } from "./AuthButtons.jsx";
+export { default as ThemeToggle } from "./ThemeToggle.jsx";
+export { default as ChildSearchModal } from "./ChildSearchModal.jsx";
+export { default as ChildSearchPage } from "./ChildSearchPage.jsx";
+export { default as ChildSearchPageDemo } from "./ChildSearchPageDemo.jsx";
+export { default as ThemeToggleTest } from "./ThemeToggleTest.jsx";
+export { default as LandingPage } from "./LandingPage.jsx";
+export { default as ChildSearchFilters } from "./components/ChildSearchFilters.jsx";
+export { default as DateRangePickerDemo } from "./DateRangePickerDemo.jsx";
+export { default as CalendarDemo } from "./CalendarDemo.jsx";
+export { default as DateRangePickerTest } from "./DateRangePickerTest.jsx";
+export { default as ApplyButtonDemo } from "./ApplyButtonDemo.jsx";
 
 // Employee Search Components
-export { default as EmployeeSearchPage } from "./EmployeeSearchPage";
-export { default as EmployeeSearchModal } from "./EmployeeSearchModal";
-export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo";
-export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters";
+export { default as EmployeeSearchPage } from "./EmployeeSearchPage.jsx";
+export { default as EmployeeSearchModal } from "./EmployeeSearchModal.jsx";
+export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo.jsx";
+export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters.jsx";
 
-export { configureTelemetry } from "./telemetry";
+export { configureTelemetry } from "./telemetry.js";
 
 // UI Components
-export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker";
-export { Calendar } from "./components/ui/calendar";
-export { SimpleCalendar } from "./components/ui/simple-calendar";
-export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";
-export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert";
+export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker.jsx";
+export { Calendar } from "./components/ui/calendar.jsx";
+export { SimpleCalendar } from "./components/ui/simple-calendar.jsx";
+export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover.jsx";
+export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert.jsx";
+export { default as StatCard } from "./components/ui/stat-card.jsx";