@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,195 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+;
+// Simple icon components
+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 = ({ 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 = ({ 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 = ({ 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 = ({ 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);
+    };
+    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 = ({ 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] }) }) }));
+    }
+    // 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 }) })] }));
+    }
+    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;

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

@@ -0,0 +1,195 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+;
+// Simple icon components
+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 = ({ 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 = ({ 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 = ({ 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 = ({ 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);
+    };
+    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 = ({ 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] }) }) }));
+    }
+    // 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 }) })] }));
+    }
+    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;

package/dist/components/ui/data-display/list.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ListProps } from './types.js';
+export declare const List: React.FC<ListProps>;
+export default List;
+//# sourceMappingURL=list.d.ts.map

package/dist/components/ui/data-display/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-display/list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,SAAS,EAIV,MAAM,YAAY,CAAC;AAgVpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+GpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+;
+// Simple icon components (inline SVG)
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: `list__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `list__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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: `list__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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.414A1 1 0 013 6.707V4z" }) }));
+const DotsIcon = ({ className = '' }) => (_jsx("svg", { className: `list__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) }));
+const CheckIcon = ({ className = '' }) => (_jsx("svg", { className: `list__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
+// List Search and Filter Bar
+const ListSearchFilterBar = ({ searchable, searchValue, onSearchChange, filterable, filters, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    // const sizeClasses = {
+    //   sm: 'h-8 text-sm px-3',
+    //   md: 'h-10 text-base px-4',
+    //   lg: 'h-12 text-lg px-5'
+    // };
+    if (!searchable && !filterable)
+        return null;
+    return (_jsxs("div", { className: `list__search-filter-bar list__search-filter-bar--${size}`, children: [searchable && (_jsxs("div", { className: "list__search-container", children: [_jsx("div", { className: "list__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search items...", className: `list__search-input list__search-input--${size}` })] })), filterable && (_jsxs("button", { className: `list__filter-button list__filter-button--${size}`, children: [_jsx(FilterIcon, { className: "list__filter-icon" }), _jsx("span", { className: "list__filter-text", children: "Filters" }), filters.length > 0 && (_jsx("span", { className: "list__filter-badge", children: filters.length }))] }))] }));
+};
+// List Item Action Component
+const ListItemActions = ({ actions, item, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const [showMenu, setShowMenu] = useState(false);
+    // const sizeClasses = {
+    //   sm: 'p-1',
+    //   md: 'p-1.5',
+    //   lg: 'p-2'
+    // };
+    if (actions.length === 0)
+        return null;
+    // If only one action, show it directly
+    if (actions.length === 1) {
+        const action = actions[0];
+        return (_jsx("button", { onClick: (e) => {
+                e.stopPropagation();
+                action.onClick(item);
+            }, className: `list__action-button list__action-button--${size} ${action.variant === 'danger' ? 'list__action-button--danger' : ''}`, title: action.label, children: action.icon || _jsx(DotsIcon, { className: "list__action-icon" }) }));
+    }
+    // Multiple actions - show dropdown menu
+    return (_jsxs("div", { className: "list__action-dropdown", children: [_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setShowMenu(!showMenu);
+                }, className: `list__action-button list__action-button--${size}`, children: _jsx(DotsIcon, { className: "list__action-icon" }) }), showMenu && (_jsxs(_Fragment, { children: [_jsx("div", { className: "list__action-backdrop", onClick: () => setShowMenu(false) }), _jsx("div", { className: "list__action-menu", children: actions.map((action, index) => (_jsxs("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                action.onClick(item);
+                                setShowMenu(false);
+                            }, className: `list__action-menu-item ${action.variant === 'danger' ? 'list__action-menu-item--danger' : ''}`, children: [action.icon && _jsx("span", { className: "list__action-menu-icon", children: action.icon }), action.label] }, index))) })] }))] }));
+};
+// Individual List Item Component
+const ListItemComponent = ({ item, index, selectable, selected, onSelectionChange, onClick, actions, showDivider, theme, size, variant }) => {
+    const isClickable = !!onClick;
+    return (_jsxs("div", { className: `list__item list__item--${size} list__item--${variant} ${isClickable ? 'list__item--clickable' : ''} ${index % 2 === 1 && variant === 'striped' ? 'list__item--striped' : ''}`, onClick: isClickable ? () => onClick(item, index) : undefined, children: [selectable && (_jsx("div", { className: "list__item-select", onClick: (e) => e.stopPropagation(), children: _jsx("button", { onClick: () => onSelectionChange?.(!selected), className: `list__item-checkbox ${selected ? 'list__item-checkbox--selected' : ''}`, children: selected && _jsx(CheckIcon, { className: "list__item-checkbox-icon" }) }) })), item.avatar && (_jsx("div", { className: "list__item-avatar", children: typeof item.avatar === 'string' ? (_jsx("img", { src: item.avatar, alt: item.title, className: "list__item-avatar-image" })) : (_jsx("div", { className: "list__item-avatar-placeholder", children: item.avatar })) })), _jsx("div", { className: "list__item-content", children: _jsxs("div", { className: "list__item-content-layout", children: [_jsxs("div", { className: "list__item-text", children: [_jsx("h3", { className: "list__item-title", children: item.title }), item.subtitle && (_jsx("p", { className: "list__item-subtitle", children: item.subtitle })), item.description && (_jsx("p", { className: "list__item-description", children: item.description }))] }), item.metadata && (_jsxs("div", { className: "list__item-metadata", children: [item.metadata.timestamp && (_jsx("p", { className: "list__item-timestamp", children: item.metadata.timestamp })), item.metadata.status && (_jsx("span", { className: `list__item-status list__item-status--${item.metadata.status}`, children: item.metadata.status })), item.metadata.badge && (_jsx("span", { className: "list__item-badge", children: item.metadata.badge }))] }))] }) }), _jsx("div", { className: "list__item-actions", children: _jsx(ListItemActions, { actions: actions, item: item, theme: theme, size: size }) }), isClickable && (_jsx("div", { className: "list__item-navigation", children: _jsx(ChevronRightIcon, { className: "list__item-navigation-icon" }) })), showDivider && variant !== 'bordered' && (_jsx("div", { className: "list__item-divider" }))] }));
+};
+// Main List Component
+export const List = ({ items, selectable = false, selectedKeys = [], onSelectionChange, onClick, actions = [], searchable = false, searchValue = '', onSearchChange, filterable = false, filters = [], 
+// onFiltersChange, // TODO: Implement filter functionality
+loading = false, error = null, emptyMessage = 'No items found', showDividers = true, className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    // Filter items based on search
+    const filteredItems = useMemo(() => {
+        if (!searchable || !searchValue.trim())
+            return items;
+        const searchLower = searchValue.toLowerCase();
+        return items.filter(item => item.title.toLowerCase().includes(searchLower) ||
+            item.subtitle?.toLowerCase().includes(searchLower) ||
+            item.description?.toLowerCase().includes(searchLower));
+    }, [items, searchable, searchValue]);
+    const handleSelectionChange = useCallback((itemKey, selected) => {
+        if (!onSelectionChange)
+            return;
+        const newSelectedKeys = selected
+            ? [...selectedKeys, itemKey]
+            : selectedKeys.filter(key => key !== itemKey);
+        onSelectionChange(newSelectedKeys);
+    }, [selectedKeys, onSelectionChange]);
+    if (loading) {
+        return (_jsx("div", { className: `list__loading ${className || ''}`, children: "Loading..." }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `list__error ${className || ''}`, children: error }));
+    }
+    return (_jsxs("div", { className: `list__container ${className || ''}`, children: [_jsx(ListSearchFilterBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange || (() => { }), filterable: filterable, filters: filters, 
+                // onFiltersChange={onFiltersChange}
+                theme: theme, size: size }), _jsx("div", { className: `list__items list__items--${variant}`, children: filteredItems.length === 0 ? (_jsx("div", { className: "list__empty", children: emptyMessage })) : (filteredItems.map((item, index) => {
+                    const itemKey = item.key || item.id || index.toString();
+                    const isSelected = selectedKeys.includes(itemKey);
+                    const shouldShowDivider = showDividers && index < filteredItems.length - 1;
+                    return (_jsx(ListItemComponent, { item: item, index: index, selectable: selectable, selected: isSelected, onSelectionChange: (selected) => handleSelectionChange(itemKey, selected), onClick: onClick, actions: actions, showDivider: shouldShowDivider, theme: theme, size: size, variant: variant }, itemKey));
+                })) })] }));
+};
+export default List;