@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/data-display/data-grid.esm.js

@@ -1,680 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { 
-  DataGridProps, 
-  DataGridColumnProps, 
-  SortableColumn, 
-  FilterConfig 
-} from './types';
-
 // Simple icon components
-const ChevronUpIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
-  </svg>
-);
-
-const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-  </svg>
-);
-
-const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-  </svg>
-);
-
-const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
-  </svg>
-);
-
-const MenuIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-  </svg>
-);
-
+const ChevronUpIcon = ({ className = '' }) => (_jsx("svg", { className: `data-grid__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) }));
+const ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: `data-grid__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `data-grid__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+const FilterIcon = ({ className = '' }) => (_jsx("svg", { className: `data-grid__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" }) }));
+const MenuIcon = ({ className = '' }) => (_jsx("svg", { className: `data-grid__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }));
 // const DragIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
 //   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
 //     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M8 9l3 3-3 3m5 0h3" />
 //   </svg>
 // ); // TODO: Implement drag functionality
-
-const GroupIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-  </svg>
-);
-
+const GroupIcon = ({ className = '' }) => (_jsx("svg", { className: `data-grid__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" }) }));
 // Resizable Column Header Component
-const DataGridColumn: React.FC<DataGridColumnProps> = ({
-  column,
-  // index, // TODO: Use for column ordering
-  onSort,
-  onResize,
-  sortConfig,
-  // theme,
-  size,
-  resizable
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // const colors = themeConfig?.colors || getDefaultColors();
-  
-  const [isResizing, setIsResizing] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [startWidth, setStartWidth] = useState(0);
-  const headerRef = useRef<HTMLTableHeaderCellElement>(null);
-
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (!resizable) return;
-    
-    e.preventDefault();
-    setIsResizing(true);
-    setStartX(e.clientX);
-    setStartWidth(headerRef.current?.offsetWidth || 0);
-  }, [resizable]);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!isResizing) return;
-    
-    const diff = e.clientX - startX;
-    const newWidth = Math.max(50, startWidth + diff); // Minimum width of 50px
-    onResize(newWidth);
-  }, [isResizing, startX, startWidth, onResize]);
-
-  const handleMouseUp = useCallback(() => {
-    setIsResizing(false);
-  }, []);
-
-  useEffect(() => {
-    if (isResizing) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-    }
-  }, [isResizing, handleMouseMove, handleMouseUp]);
-
-
-  const isSorted = sortConfig?.key === column.key;
-
-  return (
-    <th
-      ref={headerRef}
-      className={`data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' : ''}`}
-      style={{
-        width: column.width,
-      }}
-      onClick={onSort}
-    >
-      <div className={`data-grid__header-content data-grid__header-content--${column.align || 'left'}`}>
-        <span>{column.label}</span>
-        {column.sortable && isSorted && (
-          sortConfig?.direction === 'asc' ? (
-            <ChevronUpIcon className="data-grid__sort-icon" />
-          ) : (
-            <ChevronDownIcon className="data-grid__sort-icon" />
-          )
-        )}
-      </div>
-      
-      {resizable && (
-        <div
-          className={`data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' : ''}`}
-          onMouseDown={handleMouseDown}
-        />
-      )}
-    </th>
-  );
+const DataGridColumn = ({ column, 
+// index, // TODO: Use for column ordering
+onSort, onResize, sortConfig, 
+// theme,
+size, resizable }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const [isResizing, setIsResizing] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [startWidth, setStartWidth] = useState(0);
+    const headerRef = useRef(null);
+    const handleMouseDown = useCallback((e) => {
+        if (!resizable)
+            return;
+        e.preventDefault();
+        setIsResizing(true);
+        setStartX(e.clientX);
+        setStartWidth(headerRef.current?.offsetWidth || 0);
+    }, [resizable]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isResizing)
+            return;
+        const diff = e.clientX - startX;
+        const newWidth = Math.max(50, startWidth + diff); // Minimum width of 50px
+        onResize(newWidth);
+    }, [isResizing, startX, startWidth, onResize]);
+    const handleMouseUp = useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    useEffect(() => {
+        if (isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isResizing, handleMouseMove, handleMouseUp]);
+    const isSorted = sortConfig?.key === column.key;
+    return (_jsxs("th", { ref: headerRef, className: `data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' : ''}`, style: {
+            width: column.width,
+        }, onClick: onSort, children: [_jsxs("div", { className: `data-grid__header-content data-grid__header-content--${column.align || 'left'}`, children: [_jsx("span", { children: column.label }), column.sortable && isSorted && (sortConfig?.direction === 'asc' ? (_jsx(ChevronUpIcon, { className: "data-grid__sort-icon" })) : (_jsx(ChevronDownIcon, { className: "data-grid__sort-icon" })))] }), resizable && (_jsx("div", { className: `data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' : ''}`, onMouseDown: handleMouseDown }))] }));
 };
-
 // Column Management Panel
-const ColumnPanel: React.FC<{
-  columns: SortableColumn[];
-  groups?: string[];
-  onGroupChange?: (groups: string[]) => void;
-  onColumnToggle?: (columnKey: string, visible: boolean) => void;
-  theme: 'stan-design' | 'enterprise' | 'harvey';
-  size: 'sm' | 'md' | 'lg';
-  onClose: () => void;
-}> = ({ columns, groups = [], onGroupChange, onColumnToggle, size, onClose }) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // const colors = themeConfig?.colors || getDefaultColors();
-
-  const handleGroupToggle = (columnKey: string) => {
-    if (!onGroupChange) return;
-    
-    const newGroups = groups.includes(columnKey)
-      ? groups.filter(g => g !== columnKey)
-      : [...groups, columnKey];
-    
-    onGroupChange(newGroups);
-  };
-
-  return (
-    <div className="data-grid__column-panel">
-      <div className="data-grid__column-panel-header">
-        <h3 className={`data-grid__column-panel-title data-grid__column-panel-title--${size}`}>
-          Column Settings
-        </h3>
-        <button
-          onClick={onClose}
-          className="data-grid__column-panel-close"
-        >
-          ×
-        </button>
-      </div>
-
-      <div className="data-grid__column-panel-section">
-        <h4 className={`data-grid__column-panel-subtitle data-grid__column-panel-subtitle--${size}`}>
-          Group By
-        </h4>
-        {columns.map(column => (
-          <label
-            key={`group-${column.key}`}
-            className="data-grid__column-panel-item"
-          >
-            <input
-              type="checkbox"
-              checked={groups.includes(column.key)}
-              onChange={() => handleGroupToggle(column.key)}
-              className="data-grid__column-panel-checkbox"
-            />
-            <span className={`data-grid__column-panel-label data-grid__column-panel-label--${size}`}>
-              {column.label}
-            </span>
-          </label>
-        ))}
-      </div>
-
-      <div className="data-grid__column-panel-section">
-        <h4 className={`data-grid__column-panel-subtitle data-grid__column-panel-subtitle--${size}`}>
-          Visible Columns
-        </h4>
-        {columns.map(column => (
-          <label
-            key={`visible-${column.key}`}
-            className="data-grid__column-panel-item"
-          >
-            <input
-              type="checkbox"
-              checked={true} // All columns are visible by default for this demo
-              onChange={(e) => onColumnToggle?.(column.key, e.target.checked)}
-              className="data-grid__column-panel-checkbox"
-            />
-            <span className={`data-grid__column-panel-label data-grid__column-panel-label--${size}`}>
-              {column.label}
-            </span>
-          </label>
-        ))}
-      </div>
-    </div>
-  );
+const ColumnPanel = ({ columns, groups = [], onGroupChange, onColumnToggle, size, onClose }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const handleGroupToggle = (columnKey) => {
+        if (!onGroupChange)
+            return;
+        const newGroups = groups.includes(columnKey)
+            ? groups.filter(g => g !== columnKey)
+            : [...groups, columnKey];
+        onGroupChange(newGroups);
+    };
+    return (_jsxs("div", { className: "data-grid__column-panel", children: [_jsxs("div", { className: "data-grid__column-panel-header", children: [_jsx("h3", { className: `data-grid__column-panel-title data-grid__column-panel-title--${size}`, children: "Column Settings" }), _jsx("button", { onClick: onClose, className: "data-grid__column-panel-close", children: "\u00D7" })] }), _jsxs("div", { className: "data-grid__column-panel-section", children: [_jsx("h4", { className: `data-grid__column-panel-subtitle data-grid__column-panel-subtitle--${size}`, children: "Group By" }), columns.map(column => (_jsxs("label", { className: "data-grid__column-panel-item", children: [_jsx("input", { type: "checkbox", checked: groups.includes(column.key), onChange: () => handleGroupToggle(column.key), className: "data-grid__column-panel-checkbox" }), _jsx("span", { className: `data-grid__column-panel-label data-grid__column-panel-label--${size}`, children: column.label })] }, `group-${column.key}`)))] }), _jsxs("div", { className: "data-grid__column-panel-section", children: [_jsx("h4", { className: `data-grid__column-panel-subtitle data-grid__column-panel-subtitle--${size}`, children: "Visible Columns" }), columns.map(column => (_jsxs("label", { className: "data-grid__column-panel-item", children: [_jsx("input", { type: "checkbox", checked: true, onChange: (e) => onColumnToggle?.(column.key, e.target.checked), className: "data-grid__column-panel-checkbox" }), _jsx("span", { className: `data-grid__column-panel-label data-grid__column-panel-label--${size}`, children: column.label })] }, `visible-${column.key}`)))] })] }));
 };
-
 // Advanced Search and Filter Bar
-const DataGridToolbar: React.FC<{
-  searchable?: boolean;
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-  filterable?: boolean;
-  filters?: FilterConfig[];
-  onFiltersChange?: (filters: FilterConfig[]) => void;
-  groupable?: boolean;
-  groups?: string[];
-  onGroupChange?: (groups: string[]) => void;
-  columns: SortableColumn[];
-  theme: 'stan-design' | 'enterprise' | 'harvey';
-  size: 'sm' | 'md' | 'lg';
-}> = ({ 
-  searchable, 
-  searchValue, 
-  onSearchChange, 
-  filterable,
-  filters = [],
-  onFiltersChange,
-  groupable,
-  groups = [],
-  onGroupChange,
-  columns,
-  theme,
-  size
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // const colors = themeConfig?.colors || getDefaultColors();
-  
-  const [showColumnPanel, setShowColumnPanel] = useState(false);
-  const [filterColumn, setFilterColumn] = useState('');
-  const [filterValue, setFilterValue] = useState('');
-
-  const addFilter = () => {
-    if (!filterColumn || !filterValue || !onFiltersChange) return;
-    
-    const newFilter: FilterConfig = {
-      key: filterColumn,
-      value: filterValue,
-      operator: 'contains'
+const DataGridToolbar = ({ searchable, searchValue, onSearchChange, filterable, filters = [], onFiltersChange, groupable, groups = [], onGroupChange, columns, theme, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const [showColumnPanel, setShowColumnPanel] = useState(false);
+    const [filterColumn, setFilterColumn] = useState('');
+    const [filterValue, setFilterValue] = useState('');
+    const addFilter = () => {
+        if (!filterColumn || !filterValue || !onFiltersChange)
+            return;
+        const newFilter = {
+            key: filterColumn,
+            value: filterValue,
+            operator: 'contains'
+        };
+        onFiltersChange([...filters, newFilter]);
+        setFilterColumn('');
+        setFilterValue('');
+    };
+    const removeFilter = (index) => {
+        if (!onFiltersChange)
+            return;
+        const newFilters = filters.filter((_, i) => i !== index);
+        onFiltersChange(newFilters);
     };
-    
-    onFiltersChange([...filters, newFilter]);
-    setFilterColumn('');
-    setFilterValue('');
-  };
-
-  const removeFilter = (index: number) => {
-    if (!onFiltersChange) return;
-    const newFilters = filters.filter((_, i) => i !== index);
-    onFiltersChange(newFilters);
-  };
-
-  return (
-    <div className={`data-grid__toolbar data-grid__toolbar--${size}`}>
-      {/* Top Row - Search and Actions */}
-      <div className="data-grid__toolbar-row">
-        {searchable && (
-          <div className="data-grid__search-container">
-            <div className="data-grid__search-icon">
-              <SearchIcon />
-            </div>
-            <input
-              type="text"
-              placeholder="Search..."
-              value={searchValue || ''}
-              onChange={(e) => onSearchChange?.(e.target.value)}
-              className={`data-grid__search-input data-grid__search-input--${size}`}
-            />
-          </div>
-        )}
-
-        <div className="data-grid__toolbar-actions">
-          {filterable && (
-            <button
-              className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => {/* TODO: Open filter dialog */}}
-            >
-              <FilterIcon className="data-grid__toolbar-icon" />
-              <span>Filter ({filters.length})</span>
-            </button>
-          )}
-          
-          {groupable && (
-            <button
-              className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => {/* TODO: Open group dialog */}}
-            >
-              <GroupIcon className="data-grid__toolbar-icon" />
-              <span>Group ({groups.length})</span>
-            </button>
-          )}
-
-          <div className="data-grid__toolbar-dropdown">
-            <button
-              className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => setShowColumnPanel(!showColumnPanel)}
-            >
-              <MenuIcon className="data-grid__toolbar-icon" />
-              <span>Columns</span>
-            </button>
-            
-            {showColumnPanel && (
-              <ColumnPanel
-                columns={columns}
-                groups={groups}
-                onGroupChange={onGroupChange}
-                theme={theme}
-                size={size}
-                onClose={() => setShowColumnPanel(false)}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Active Filters */}
-      {filters.length > 0 && (
-        <div className="data-grid__active-filters">
-          <span className={`data-grid__active-filters-label data-grid__active-filters-label--${size}`}>
-            Active Filters:
-          </span>
-          {filters.map((filter, index) => (
-            <div
-              key={index}
-              className={`data-grid__filter-tag data-grid__filter-tag--${size}`}
-            >
-              <span>{filter.key}: {String(filter.value)}</span>
-              <button
-                onClick={() => removeFilter(index)}
-                className="data-grid__filter-tag-remove"
-              >
-                ×
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Quick Filter Add */}
-      {filterable && (
-        <div className="data-grid__filter-add">
-          <select
-            value={filterColumn}
-            onChange={(e) => setFilterColumn(e.target.value)}
-            className={`data-grid__filter-select data-grid__filter-select--${size}`}
-          >
-            <option value="">Select column...</option>
-            {columns.map(column => (
-              <option key={column.key} value={column.key}>
-                {column.label}
-              </option>
-            ))}
-          </select>
-          
-          <input
-            type="text"
-            placeholder="Filter value..."
-            value={filterValue}
-            onChange={(e) => setFilterValue(e.target.value)}
-            className={`data-grid__filter-input data-grid__filter-input--${size}`}
-          />
-          
-          <button
-            onClick={addFilter}
-            disabled={!filterColumn || !filterValue}
-            className={`data-grid__filter-add-button data-grid__filter-add-button--${size} ${(!filterColumn || !filterValue) ? 'data-grid__filter-add-button--disabled' : ''}`}
-          >
-            Add Filter
-          </button>
-        </div>
-      )}
-    </div>
-  );
+    return (_jsxs("div", { className: `data-grid__toolbar data-grid__toolbar--${size}`, children: [_jsxs("div", { className: "data-grid__toolbar-row", children: [searchable && (_jsxs("div", { className: "data-grid__search-container", children: [_jsx("div", { className: "data-grid__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", placeholder: "Search...", value: searchValue || '', onChange: (e) => onSearchChange?.(e.target.value), className: `data-grid__search-input data-grid__search-input--${size}` })] })), _jsxs("div", { className: "data-grid__toolbar-actions", children: [filterable && (_jsxs("button", { className: `data-grid__toolbar-button data-grid__toolbar-button--${size}`, onClick: () => { }, children: [_jsx(FilterIcon, { className: "data-grid__toolbar-icon" }), _jsxs("span", { children: ["Filter (", filters.length, ")"] })] })), groupable && (_jsxs("button", { className: `data-grid__toolbar-button data-grid__toolbar-button--${size}`, onClick: () => { }, children: [_jsx(GroupIcon, { className: "data-grid__toolbar-icon" }), _jsxs("span", { children: ["Group (", groups.length, ")"] })] })), _jsxs("div", { className: "data-grid__toolbar-dropdown", children: [_jsxs("button", { className: `data-grid__toolbar-button data-grid__toolbar-button--${size}`, onClick: () => setShowColumnPanel(!showColumnPanel), children: [_jsx(MenuIcon, { className: "data-grid__toolbar-icon" }), _jsx("span", { children: "Columns" })] }), showColumnPanel && (_jsx(ColumnPanel, { columns: columns, groups: groups, onGroupChange: onGroupChange, theme: theme, size: size, onClose: () => setShowColumnPanel(false) }))] })] })] }), filters.length > 0 && (_jsxs("div", { className: "data-grid__active-filters", children: [_jsx("span", { className: `data-grid__active-filters-label data-grid__active-filters-label--${size}`, children: "Active Filters:" }), filters.map((filter, index) => (_jsxs("div", { className: `data-grid__filter-tag data-grid__filter-tag--${size}`, children: [_jsxs("span", { children: [filter.key, ": ", String(filter.value)] }), _jsx("button", { onClick: () => removeFilter(index), className: "data-grid__filter-tag-remove", children: "\u00D7" })] }, index)))] })), filterable && (_jsxs("div", { className: "data-grid__filter-add", children: [_jsxs("select", { value: filterColumn, onChange: (e) => setFilterColumn(e.target.value), className: `data-grid__filter-select data-grid__filter-select--${size}`, children: [_jsx("option", { value: "", children: "Select column..." }), columns.map(column => (_jsx("option", { value: column.key, children: column.label }, column.key)))] }), _jsx("input", { type: "text", placeholder: "Filter value...", value: filterValue, onChange: (e) => setFilterValue(e.target.value), className: `data-grid__filter-input data-grid__filter-input--${size}` }), _jsx("button", { onClick: addFilter, disabled: !filterColumn || !filterValue, className: `data-grid__filter-add-button data-grid__filter-add-button--${size} ${(!filterColumn || !filterValue) ? 'data-grid__filter-add-button--disabled' : ''}`, children: "Add Filter" })] }))] }));
 };
-
 // Main DataGrid Component
-export const DataGrid: React.FC<DataGridProps> = ({
-  columns,
-  data,
-  sortable = true,
-  filterable = true,
-  groupable = true,
-  resizable = true,
-  // reorderable = false, // TODO: Implement column reordering
-  onSort,
-  onFiltersChange,
-  onGroupChange,
-  onColumnResize,
-  // onColumnReorder, // TODO: Implement column reordering
-  sortConfig,
-  filters = [],
-  groups = [],
-  columnWidths = {},
-  // columnOrder = [], // TODO: Implement column ordering
-  pagination,
-  onPageChange,
-  // onPageSizeChange, // TODO: Implement page size change
-  searchable = true,
-  searchValue,
-  onSearchChange,
-  rowKey = 'id',
-  selectable = false,
-  onSelectionChange,
-  selectedKeys = [],
-  loading = false,
-  error = null,
-  emptyMessage = 'No data available',
-  className = '',
-  theme = 'stan-design',
-  size = 'md',
-  variant = 'default'
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // const colors = themeConfig?.colors || getDefaultColors();
-
-  // Internal state for selection
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(selectedKeys);
-
-  // Update internal state when props change
-  React.useEffect(() => {
-    setInternalSelectedKeys(selectedKeys);
-  }, [selectedKeys]);
-
-  // Enhanced columns with widths
-  const enhancedColumns = useMemo(() => {
-    return columns.map(column => ({
-      ...column,
-      width: columnWidths[column.key] || column.width || 150
-    }));
-  }, [columns, columnWidths]);
-
-  // Get row key function
-  const getRowKey = (row: Record<string, any>, index: number): string => {
-    if (typeof rowKey === 'function') {
-      return rowKey(row);
+export const DataGrid = ({ columns, data, sortable = true, filterable = true, groupable = true, resizable = true, 
+// reorderable = false, // TODO: Implement column reordering
+onSort, onFiltersChange, onGroupChange, onColumnResize, 
+// onColumnReorder, // TODO: Implement column reordering
+sortConfig, filters = [], groups = [], columnWidths = {}, 
+// columnOrder = [], // TODO: Implement column ordering
+pagination, onPageChange, 
+// onPageSizeChange, // TODO: Implement page size change
+searchable = true, searchValue, onSearchChange, rowKey = 'id', selectable = false, onSelectionChange, selectedKeys = [], loading = false, error = null, emptyMessage = 'No data available', className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    // Internal state for selection
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState(selectedKeys);
+    // Update internal state when props change
+    React.useEffect(() => {
+        setInternalSelectedKeys(selectedKeys);
+    }, [selectedKeys]);
+    // Enhanced columns with widths
+    const enhancedColumns = useMemo(() => {
+        return columns.map(column => ({
+            ...column,
+            width: columnWidths[column.key] || column.width || 150
+        }));
+    }, [columns, columnWidths]);
+    // Get row key function
+    const getRowKey = (row, index) => {
+        if (typeof rowKey === 'function') {
+            return rowKey(row);
+        }
+        return row[rowKey] || `row-${index}`;
+    };
+    // Handle column resize
+    const handleColumnResize = useCallback((columnKey, newWidth) => {
+        onColumnResize?.(columnKey, newWidth);
+    }, [onColumnResize]);
+    // Handle sorting
+    const handleSort = useCallback((column) => {
+        if (!sortable || !onSort || !column.sortable)
+            return;
+        const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
+        onSort({ key: column.key, direction: newDirection });
+    }, [sortable, onSort, sortConfig]);
+    // Handle row selection
+    const handleRowSelect = useCallback((row, checked) => {
+        const key = typeof rowKey === 'function' ? rowKey(row) : row[rowKey] || `row-0`;
+        let newSelectedKeys;
+        if (checked) {
+            newSelectedKeys = [...internalSelectedKeys, key];
+        }
+        else {
+            newSelectedKeys = internalSelectedKeys.filter(k => k !== key);
+        }
+        setInternalSelectedKeys(newSelectedKeys);
+        onSelectionChange?.(newSelectedKeys);
+    }, [internalSelectedKeys, onSelectionChange, rowKey]);
+    // Handle select all
+    const handleSelectAll = useCallback((checked) => {
+        const newSelectedKeys = checked ? data.map((row, index) => {
+            if (typeof rowKey === 'function') {
+                return rowKey(row);
+            }
+            return row[rowKey] || `row-${index}`;
+        }) : [];
+        setInternalSelectedKeys(newSelectedKeys);
+        onSelectionChange?.(newSelectedKeys);
+    }, [data, onSelectionChange, rowKey]);
+    // Check if all rows are selected
+    const allSelected = data.length > 0 && internalSelectedKeys.length === data.length;
+    // Loading state
+    if (loading) {
+        return (_jsx("div", { className: `data-grid__container ${className || ''}`, children: _jsx("div", { className: "data-grid__loading", children: _jsx("div", { className: `data-grid__loading-text data-grid__loading-text--${size}`, children: "Loading..." }) }) }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: `data-grid__container ${className || ''}`, children: _jsx("div", { className: "data-grid__error", children: _jsxs("div", { className: `data-grid__error-text data-grid__error-text--${size}`, children: ["Error: ", error] }) }) }));
     }
-    return row[rowKey] || `row-${index}`;
-  };
-
-  // Handle column resize
-  const handleColumnResize = useCallback((columnKey: string, newWidth: number) => {
-    onColumnResize?.(columnKey, newWidth);
-  }, [onColumnResize]);
-
-  // Handle sorting
-  const handleSort = useCallback((column: SortableColumn) => {
-    if (!sortable || !onSort || !column.sortable) return;
-    
-    const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
-    onSort({ key: column.key, direction: newDirection });
-  }, [sortable, onSort, sortConfig]);
-
-  // Handle row selection
-  const handleRowSelect = useCallback((row: Record<string, any>, checked: boolean) => {
-    const key = typeof rowKey === 'function' ? rowKey(row) : row[rowKey] || `row-0`;
-    let newSelectedKeys: string[];
-
-    if (checked) {
-      newSelectedKeys = [...internalSelectedKeys, key];
-    } else {
-      newSelectedKeys = internalSelectedKeys.filter(k => k !== key);
+    // Empty state
+    if (data.length === 0) {
+        return (_jsxs("div", { className: `data-grid__container ${className || ''}`, children: [_jsx(DataGridToolbar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange, filterable: filterable, filters: filters, onFiltersChange: onFiltersChange, groupable: groupable, groups: groups, onGroupChange: onGroupChange, columns: enhancedColumns, theme: theme, size: size }), _jsx("div", { className: "data-grid__empty", children: _jsx("div", { className: `data-grid__empty-text data-grid__empty-text--${size}`, children: emptyMessage }) })] }));
     }
-
-    setInternalSelectedKeys(newSelectedKeys);
-    onSelectionChange?.(newSelectedKeys);
-  }, [internalSelectedKeys, onSelectionChange, rowKey]);
-
-  // Handle select all
-  const handleSelectAll = useCallback((checked: boolean) => {
-    const newSelectedKeys = checked ? data.map((row, index) => {
-      if (typeof rowKey === 'function') {
-        return rowKey(row);
-      }
-      return row[rowKey] || `row-${index}`;
-    }) : [];
-    setInternalSelectedKeys(newSelectedKeys);
-    onSelectionChange?.(newSelectedKeys);
-  }, [data, onSelectionChange, rowKey]);
-
-  // Check if all rows are selected
-  const allSelected = data.length > 0 && internalSelectedKeys.length === data.length;
-
-
-  // Loading state
-  if (loading) {
-    return (
-      <div className={`data-grid__container ${className || ''}`}>
-        <div className="data-grid__loading">
-          <div className={`data-grid__loading-text data-grid__loading-text--${size}`}>
-            Loading...
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className={`data-grid__container ${className || ''}`}>
-        <div className="data-grid__error">
-          <div className={`data-grid__error-text data-grid__error-text--${size}`}>
-            Error: {error}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Empty state
-  if (data.length === 0) {
-    return (
-      <div className={`data-grid__container ${className || ''}`}>
-        <DataGridToolbar
-          searchable={searchable}
-          searchValue={searchValue}
-          onSearchChange={onSearchChange}
-          filterable={filterable}
-          filters={filters}
-          onFiltersChange={onFiltersChange}
-          groupable={groupable}
-          groups={groups}
-          onGroupChange={onGroupChange}
-          columns={enhancedColumns}
-          theme={theme}
-          size={size}
-        />
-        <div className="data-grid__empty">
-          <div className={`data-grid__empty-text data-grid__empty-text--${size}`}>
-            {emptyMessage}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`data-grid__container ${className || ''}`}>
-      <DataGridToolbar
-        searchable={searchable}
-        searchValue={searchValue}
-        onSearchChange={onSearchChange}
-        filterable={filterable}
-        filters={filters}
-        onFiltersChange={onFiltersChange}
-        groupable={groupable}
-        groups={groups}
-        onGroupChange={onGroupChange}
-        columns={enhancedColumns}
-        theme={theme}
-        size={size}
-      />
-      
-      <div className="data-grid__table-wrapper">
-        <table className={`data-grid__table data-grid__table--${variant} data-grid__table--${size}`}>
-          <thead>
-            <tr>
-              {selectable && (
-                <th className={`data-grid__select-header data-grid__select-header--${size}`}>
-                  <input
-                    type="checkbox"
-                    checked={allSelected}
-                    onChange={(e) => handleSelectAll(e.target.checked)}
-                    className="data-grid__select-checkbox"
-                  />
-                </th>
-              )}
-              {enhancedColumns.map((column, index) => (
-                <DataGridColumn
-                  key={column.key}
-                  column={column}
-                  index={index}
-                  onSort={() => handleSort(column)}
-                  onResize={(width) => handleColumnResize(column.key, width)}
-                  sortConfig={sortConfig}
-                  theme={theme}
-                  size={size}
-                  resizable={resizable}
-                />
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((row, index) => {
-              const key = getRowKey(row, index);
-              const isSelected = internalSelectedKeys.includes(key);
-              
-              return (
-                <tr
-                  key={key}
-                  className={`data-grid__row data-grid__row--${size} ${isSelected ? 'data-grid__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'data-grid__row--striped' : ''}`}
-                >
-                  {selectable && (
-                    <td className={`data-grid__select-cell data-grid__select-cell--${size}`}>
-                      <input
-                        type="checkbox"
-                        checked={isSelected}
-                        onChange={(e) => handleRowSelect(row, e.target.checked)}
-                        onClick={(e) => e.stopPropagation()}
-                        className="data-grid__select-checkbox"
-                      />
-                    </td>
-                  )}
-                  {enhancedColumns.map((column) => (
-                    <td
-                      key={column.key}
-                      className={`data-grid__cell data-grid__cell--${size} data-grid__cell--${column.align || 'left'}`}
-                      style={{ width: column.width }}
-                    >
-                      {String(row[column.key] || '')}
-                    </td>
-                  ))}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-      
-      {pagination && (
-        <div className={`data-grid__pagination data-grid__pagination--${size}`}>
-          <div className={`data-grid__pagination-info data-grid__pagination-info--${size}`}>
-            Showing {((pagination.currentPage - 1) * pagination.pageSize) + 1}-{Math.min(pagination.currentPage * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems} items
-          </div>
-          
-          <div className="data-grid__pagination-controls">
-            <button
-              onClick={() => onPageChange?.(pagination.currentPage - 1)}
-              disabled={pagination.currentPage === 1}
-              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage === 1 ? 'data-grid__pagination-button--disabled' : ''}`}
-            >
-              Previous
-            </button>
-            
-            <span className="data-grid__pagination-status">
-              Page {pagination.currentPage} of {Math.ceil(pagination.totalItems / pagination.pageSize)}
-            </span>
-            
-            <button
-              onClick={() => onPageChange?.(pagination.currentPage + 1)}
-              disabled={pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize)}
-              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize) ? 'data-grid__pagination-button--disabled' : ''}`}
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
+    return (_jsxs("div", { className: `data-grid__container ${className || ''}`, children: [_jsx(DataGridToolbar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange, filterable: filterable, filters: filters, onFiltersChange: onFiltersChange, groupable: groupable, groups: groups, onGroupChange: onGroupChange, columns: enhancedColumns, theme: theme, size: size }), _jsx("div", { className: "data-grid__table-wrapper", children: _jsxs("table", { className: `data-grid__table data-grid__table--${variant} data-grid__table--${size}`, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { className: `data-grid__select-header data-grid__select-header--${size}`, children: _jsx("input", { type: "checkbox", checked: allSelected, onChange: (e) => handleSelectAll(e.target.checked), className: "data-grid__select-checkbox" }) })), enhancedColumns.map((column, index) => (_jsx(DataGridColumn, { column: column, index: index, onSort: () => handleSort(column), onResize: (width) => handleColumnResize(column.key, width), sortConfig: sortConfig, theme: theme, size: size, resizable: resizable }, column.key)))] }) }), _jsx("tbody", { children: data.map((row, index) => {
+                                const key = getRowKey(row, index);
+                                const isSelected = internalSelectedKeys.includes(key);
+                                return (_jsxs("tr", { className: `data-grid__row data-grid__row--${size} ${isSelected ? 'data-grid__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'data-grid__row--striped' : ''}`, children: [selectable && (_jsx("td", { className: `data-grid__select-cell data-grid__select-cell--${size}`, children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => handleRowSelect(row, e.target.checked), onClick: (e) => e.stopPropagation(), className: "data-grid__select-checkbox" }) })), enhancedColumns.map((column) => (_jsx("td", { className: `data-grid__cell data-grid__cell--${size} data-grid__cell--${column.align || 'left'}`, style: { width: column.width }, children: String(row[column.key] || '') }, column.key)))] }, key));
+                            }) })] }) }), pagination && (_jsxs("div", { className: `data-grid__pagination data-grid__pagination--${size}`, children: [_jsxs("div", { className: `data-grid__pagination-info data-grid__pagination-info--${size}`, children: ["Showing ", ((pagination.currentPage - 1) * pagination.pageSize) + 1, "-", Math.min(pagination.currentPage * pagination.pageSize, pagination.totalItems), " of ", pagination.totalItems, " items"] }), _jsxs("div", { className: "data-grid__pagination-controls", children: [_jsx("button", { onClick: () => onPageChange?.(pagination.currentPage - 1), disabled: pagination.currentPage === 1, className: `data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage === 1 ? 'data-grid__pagination-button--disabled' : ''}`, children: "Previous" }), _jsxs("span", { className: "data-grid__pagination-status", children: ["Page ", pagination.currentPage, " of ", Math.ceil(pagination.totalItems / pagination.pageSize)] }), _jsx("button", { onClick: () => onPageChange?.(pagination.currentPage + 1), disabled: pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize), className: `data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize) ? 'data-grid__pagination-button--disabled' : ''}`, children: "Next" })] })] }))] }));
 };
-
 export default DataGrid;