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

package/dist/components/ui/data-display/list.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;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-display/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,UAAU,EAOX,MAAM,YAAY,CAAC;AAoSpB,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmLtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+;
+// Simple icon components
+const ChevronUpIcon = ({ className = '' }) => (_jsx("svg", { className: `table__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: `table__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 ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: `table__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `table__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: `table__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" }) }));
+// Table Header Component
+const TableHeader = ({ columns, sortable, sortConfig, onSort, selectable, onSelectAll, allSelected, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    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]);
+    return (_jsx("thead", { className: "table__head", children: _jsxs("tr", { className: "table__header-row", children: [selectable && (_jsx("th", { className: `table__header table__header--select table__header--${size}`, children: _jsx("input", { type: "checkbox", checked: allSelected, onChange: (e) => onSelectAll?.(e.target.checked), className: "table__select-checkbox" }) })), columns.map((column) => (_jsx("th", { className: `table__header table__header--${size} table__header--${column.align || 'left'} ${sortable && column.sortable ? 'table__header--sortable' : ''} ${sortConfig?.key === column.key ? 'table__header--sorted' : ''}`, style: { width: column.width }, onClick: () => handleSort(column), children: _jsxs("div", { className: `table__header-content table__header-content--${column.align || 'left'}`, children: [_jsx("span", { children: column.label }), sortable && column.sortable && sortConfig?.key === column.key && (sortConfig.direction === 'asc' ? (_jsx(ChevronUpIcon, { className: "table__sort-icon" })) : (_jsx(ChevronDownIcon, { className: "table__sort-icon" })))] }) }, column.key)))] }) }));
+};
+// Table Row Component
+const TableRow = ({ row, index, columns, selected, expanded, onSelect, onExpand, onClick, size, variant }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    return (_jsxs("tr", { className: `table__row table__row--${size} table__row--${variant} ${selected ? 'table__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'table__row--striped' : ''}`, onClick: onClick, children: [_jsx("td", { className: `table__cell table__cell--select table__cell--${size}`, children: _jsx("input", { type: "checkbox", checked: selected, onChange: (e) => onSelect(e.target.checked), onClick: (e) => e.stopPropagation(), className: "table__select-checkbox" }) }), columns.map((column) => (_jsx("td", { className: `table__cell table__cell--${size} table__cell--${column.align || 'left'}`, style: { width: column.width }, children: column.key === 'expand' ? (_jsx("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        onExpand();
+                    }, className: "table__expand-button", children: _jsx("div", { className: `table__expand-icon ${expanded ? 'table__expand-icon--expanded' : ''}`, children: _jsx(ChevronRightIcon, { className: "table__expand-chevron" }) }) })) : (String(row[column.key] || '')) }, column.key)))] }));
+};
+// Search and Filter Bar Component
+const SearchFilterBar = ({ searchable, searchValue, onSearchChange, filters, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    if (!searchable && (!filters || filters.length === 0))
+        return null;
+    return (_jsxs("div", { className: `table__search-filter-bar table__search-filter-bar--${size}`, children: [searchable && (_jsxs("div", { className: "table__search-container", children: [_jsx("div", { className: "table__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", placeholder: "Search...", value: searchValue || '', onChange: (e) => onSearchChange?.(e.target.value), className: `table__search-input table__search-input--${size}` })] })), filters && filters.length > 0 && (_jsxs("div", { className: "table__filters", children: [_jsx("div", { className: "table__filter-icon", children: _jsx(FilterIcon, {}) }), _jsxs("span", { className: `table__filter-text table__filter-text--${size}`, children: ["Filters: ", filters.length] })] }))] }));
+};
+// Pagination Component
+const TablePagination = ({ pagination, onPageChange, onPageSizeChange, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    if (!pagination)
+        return null;
+    const { currentPage, pageSize, totalItems, pageSizeOptions = [10, 20, 50, 100] } = pagination;
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+    return (_jsxs("div", { className: `table__pagination table__pagination--${size}`, children: [_jsxs("div", { className: `table__pagination-info table__pagination-info--${size}`, children: [_jsxs("span", { children: ["Showing ", startItem, "-", endItem, " of ", totalItems, " items"] }), _jsxs("div", { className: "table__pagination-size", children: [_jsx("span", { children: "Items per page:" }), _jsx("select", { value: pageSize, onChange: (e) => onPageSizeChange?.(Number(e.target.value)), className: `table__pagination-select table__pagination-select--${size}`, children: pageSizeOptions.map(option => (_jsx("option", { value: option, children: option }, option))) })] })] }), _jsxs("div", { className: "table__pagination-controls", children: [_jsx("button", { onClick: () => onPageChange?.(1), disabled: currentPage === 1, className: `table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`, children: "First" }), _jsx("button", { onClick: () => onPageChange?.(currentPage - 1), disabled: currentPage === 1, className: `table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`, children: "Previous" }), _jsxs("span", { className: `table__pagination-status table__pagination-status--${size}`, children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange?.(currentPage + 1), disabled: currentPage === totalPages, className: `table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`, children: "Next" }), _jsx("button", { onClick: () => onPageChange?.(totalPages), disabled: currentPage === totalPages, className: `table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`, children: "Last" })] })] }));
+};
+// Main Table Component
+export const Table = ({ columns, data, sortable = false, selectable = false, onSort, onSelectionChange, onRowClick, onRowExpand, selectedKeys = [], expandedKeys = [], sortConfig, pagination, onPageChange, onPageSizeChange, filters, 
+// onFiltersChange, // TODO: Implement filters change handler
+searchable = false, searchValue, onSearchChange, rowKey = 'id', 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 and expansion
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState(selectedKeys || []);
+    const [internalExpandedKeys, setInternalExpandedKeys] = useState(expandedKeys || []);
+    // Use internal state for uncontrolled behavior, props for controlled
+    const currentSelectedKeys = selectedKeys || internalSelectedKeys;
+    const currentExpandedKeys = expandedKeys || internalExpandedKeys;
+    // Get row key function
+    const getRowKey = useCallback((row, index) => {
+        if (typeof rowKey === 'function') {
+            return rowKey(row);
+        }
+        return row[rowKey] || `row-${index}`;
+    }, [rowKey]);
+    // Handle row selection
+    const handleRowSelect = useCallback((row, checked) => {
+        const key = getRowKey(row, 0);
+        let newSelectedKeys;
+        if (checked) {
+            newSelectedKeys = [...currentSelectedKeys, key];
+        }
+        else {
+            newSelectedKeys = currentSelectedKeys.filter(k => k !== key);
+        }
+        setInternalSelectedKeys(newSelectedKeys);
+        onSelectionChange?.(newSelectedKeys);
+    }, [currentSelectedKeys, onSelectionChange, getRowKey]);
+    // Handle select all
+    const handleSelectAll = useCallback((checked) => {
+        const newSelectedKeys = checked ? data.map((row, index) => getRowKey(row, index)) : [];
+        setInternalSelectedKeys(newSelectedKeys);
+        onSelectionChange?.(newSelectedKeys);
+    }, [data, onSelectionChange, getRowKey]);
+    // Handle row expansion
+    const handleRowExpand = useCallback((row) => {
+        const key = getRowKey(row, 0);
+        const expanded = currentExpandedKeys.includes(key);
+        const newExpandedKeys = expanded
+            ? currentExpandedKeys.filter(k => k !== key)
+            : [...currentExpandedKeys, key];
+        setInternalExpandedKeys(newExpandedKeys);
+        onRowExpand?.(row, !expanded);
+    }, [currentExpandedKeys, onRowExpand, getRowKey]);
+    // Handle row click
+    const handleRowClick = useCallback((row, index) => {
+        onRowClick?.(row, index);
+    }, [onRowClick]);
+    // Check if all rows are selected
+    const allSelected = data.length > 0 && currentSelectedKeys.length === data.length;
+    // Loading state
+    if (loading) {
+        return (_jsx("div", { className: "table__loading", children: _jsx("div", { className: `table__loading-text table__loading-text--${size}`, children: "Loading..." }) }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: "table__error", children: _jsxs("div", { className: `table__error-text table__error-text--${size}`, children: ["Error: ", error] }) }));
+    }
+    // Empty state
+    if (data.length === 0) {
+        return (_jsx("div", { className: "table__empty", children: _jsx("div", { className: `table__empty-text table__empty-text--${size}`, children: emptyMessage }) }));
+    }
+    return (_jsxs("div", { className: `table__container ${className || ''}`, children: [_jsx(SearchFilterBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange, filters: filters, theme: theme, size: size }), _jsx("div", { className: "table__wrapper", children: _jsxs("table", { className: `table__table table__table--${variant} table__table--${size}`, children: [_jsx(TableHeader, { columns: columns, sortable: sortable, sortConfig: sortConfig, onSort: onSort, selectable: selectable, onSelectAll: handleSelectAll, allSelected: allSelected, theme: theme, size: size, variant: variant }), _jsx("tbody", { className: "table__body", children: data.map((row, index) => (_jsx(TableRow, { row: row, index: index, columns: columns, selected: currentSelectedKeys.includes(getRowKey(row, index)), expanded: currentExpandedKeys.includes(getRowKey(row, index)), onSelect: (checked) => handleRowSelect(row, checked), onExpand: () => handleRowExpand(row), onClick: () => handleRowClick(row, index), theme: theme, size: size, variant: variant }, getRowKey(row, index)))) })] }) }), _jsx(TablePagination, { pagination: pagination, onPageChange: onPageChange, onPageSizeChange: onPageSizeChange, theme: theme, size: size })] }));
+};
+export default Table;

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

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+;
+// Simple icon components
+const ChevronUpIcon = ({ className = '' }) => (_jsx("svg", { className: `table__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: `table__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 ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: `table__icon ${className}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `table__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: `table__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" }) }));
+// Table Header Component
+const TableHeader = ({ columns, sortable, sortConfig, onSort, selectable, onSelectAll, allSelected, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    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]);
+    return (_jsx("thead", { className: "table__head", children: _jsxs("tr", { className: "table__header-row", children: [selectable && (_jsx("th", { className: `table__header table__header--select table__header--${size}`, children: _jsx("input", { type: "checkbox", checked: allSelected, onChange: (e) => onSelectAll?.(e.target.checked), className: "table__select-checkbox" }) })), columns.map((column) => (_jsx("th", { className: `table__header table__header--${size} table__header--${column.align || 'left'} ${sortable && column.sortable ? 'table__header--sortable' : ''} ${sortConfig?.key === column.key ? 'table__header--sorted' : ''}`, style: { width: column.width }, onClick: () => handleSort(column), children: _jsxs("div", { className: `table__header-content table__header-content--${column.align || 'left'}`, children: [_jsx("span", { children: column.label }), sortable && column.sortable && sortConfig?.key === column.key && (sortConfig.direction === 'asc' ? (_jsx(ChevronUpIcon, { className: "table__sort-icon" })) : (_jsx(ChevronDownIcon, { className: "table__sort-icon" })))] }) }, column.key)))] }) }));
+};
+// Table Row Component
+const TableRow = ({ row, index, columns, selected, expanded, onSelect, onExpand, onClick, size, variant }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    return (_jsxs("tr", { className: `table__row table__row--${size} table__row--${variant} ${selected ? 'table__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'table__row--striped' : ''}`, onClick: onClick, children: [_jsx("td", { className: `table__cell table__cell--select table__cell--${size}`, children: _jsx("input", { type: "checkbox", checked: selected, onChange: (e) => onSelect(e.target.checked), onClick: (e) => e.stopPropagation(), className: "table__select-checkbox" }) }), columns.map((column) => (_jsx("td", { className: `table__cell table__cell--${size} table__cell--${column.align || 'left'}`, style: { width: column.width }, children: column.key === 'expand' ? (_jsx("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        onExpand();
+                    }, className: "table__expand-button", children: _jsx("div", { className: `table__expand-icon ${expanded ? 'table__expand-icon--expanded' : ''}`, children: _jsx(ChevronRightIcon, { className: "table__expand-chevron" }) }) })) : (String(row[column.key] || '')) }, column.key)))] }));
+};
+// Search and Filter Bar Component
+const SearchFilterBar = ({ searchable, searchValue, onSearchChange, filters, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    if (!searchable && (!filters || filters.length === 0))
+        return null;
+    return (_jsxs("div", { className: `table__search-filter-bar table__search-filter-bar--${size}`, children: [searchable && (_jsxs("div", { className: "table__search-container", children: [_jsx("div", { className: "table__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", placeholder: "Search...", value: searchValue || '', onChange: (e) => onSearchChange?.(e.target.value), className: `table__search-input table__search-input--${size}` })] })), filters && filters.length > 0 && (_jsxs("div", { className: "table__filters", children: [_jsx("div", { className: "table__filter-icon", children: _jsx(FilterIcon, {}) }), _jsxs("span", { className: `table__filter-text table__filter-text--${size}`, children: ["Filters: ", filters.length] })] }))] }));
+};
+// Pagination Component
+const TablePagination = ({ pagination, onPageChange, onPageSizeChange, size }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    if (!pagination)
+        return null;
+    const { currentPage, pageSize, totalItems, pageSizeOptions = [10, 20, 50, 100] } = pagination;
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+    return (_jsxs("div", { className: `table__pagination table__pagination--${size}`, children: [_jsxs("div", { className: `table__pagination-info table__pagination-info--${size}`, children: [_jsxs("span", { children: ["Showing ", startItem, "-", endItem, " of ", totalItems, " items"] }), _jsxs("div", { className: "table__pagination-size", children: [_jsx("span", { children: "Items per page:" }), _jsx("select", { value: pageSize, onChange: (e) => onPageSizeChange?.(Number(e.target.value)), className: `table__pagination-select table__pagination-select--${size}`, children: pageSizeOptions.map(option => (_jsx("option", { value: option, children: option }, option))) })] })] }), _jsxs("div", { className: "table__pagination-controls", children: [_jsx("button", { onClick: () => onPageChange?.(1), disabled: currentPage === 1, className: `table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`, children: "First" }), _jsx("button", { onClick: () => onPageChange?.(currentPage - 1), disabled: currentPage === 1, className: `table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`, children: "Previous" }), _jsxs("span", { className: `table__pagination-status table__pagination-status--${size}`, children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange?.(currentPage + 1), disabled: currentPage === totalPages, className: `table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`, children: "Next" }), _jsx("button", { onClick: () => onPageChange?.(totalPages), disabled: currentPage === totalPages, className: `table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`, children: "Last" })] })] }));
+};
+// Main Table Component
+export const Table = ({ columns, data, sortable = false, selectable = false, onSort, onSelectionChange, onRowClick, onRowExpand, selectedKeys = [], expandedKeys = [], sortConfig, pagination, onPageChange, onPageSizeChange, filters, 
+// onFiltersChange, // TODO: Implement filters change handler
+searchable = false, searchValue, onSearchChange, rowKey = 'id', 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 and expansion
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState(selectedKeys || []);
+    const [internalExpandedKeys, setInternalExpandedKeys] = useState(expandedKeys || []);
+    // Use internal state for uncontrolled behavior, props for controlled
+    const currentSelectedKeys = selectedKeys || internalSelectedKeys;
+    const currentExpandedKeys = expandedKeys || internalExpandedKeys;
+    // Get row key function
+    const getRowKey = useCallback((row, index) => {
+        if (typeof rowKey === 'function') {
+            return rowKey(row);
+        }
+        return row[rowKey] || `row-${index}`;
+    }, [rowKey]);
+    // Handle row selection
+    const handleRowSelect = useCallback((row, checked) => {
+        const key = getRowKey(row, 0);
+        let newSelectedKeys;
+        if (checked) {
+            newSelectedKeys = [...currentSelectedKeys, key];
+        }
+        else {
+            newSelectedKeys = currentSelectedKeys.filter(k => k !== key);
+        }
+        setInternalSelectedKeys(newSelectedKeys);
+        onSelectionChange?.(newSelectedKeys);
+    }, [currentSelectedKeys, onSelectionChange, getRowKey]);
+    // Handle select all
+    const handleSelectAll = useCallback((checked) => {
+        const newSelectedKeys = checked ? data.map((row, index) => getRowKey(row, index)) : [];
+        setInternalSelectedKeys(newSelectedKeys);
+        onSelectionChange?.(newSelectedKeys);
+    }, [data, onSelectionChange, getRowKey]);
+    // Handle row expansion
+    const handleRowExpand = useCallback((row) => {
+        const key = getRowKey(row, 0);
+        const expanded = currentExpandedKeys.includes(key);
+        const newExpandedKeys = expanded
+            ? currentExpandedKeys.filter(k => k !== key)
+            : [...currentExpandedKeys, key];
+        setInternalExpandedKeys(newExpandedKeys);
+        onRowExpand?.(row, !expanded);
+    }, [currentExpandedKeys, onRowExpand, getRowKey]);
+    // Handle row click
+    const handleRowClick = useCallback((row, index) => {
+        onRowClick?.(row, index);
+    }, [onRowClick]);
+    // Check if all rows are selected
+    const allSelected = data.length > 0 && currentSelectedKeys.length === data.length;
+    // Loading state
+    if (loading) {
+        return (_jsx("div", { className: "table__loading", children: _jsx("div", { className: `table__loading-text table__loading-text--${size}`, children: "Loading..." }) }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: "table__error", children: _jsxs("div", { className: `table__error-text table__error-text--${size}`, children: ["Error: ", error] }) }));
+    }
+    // Empty state
+    if (data.length === 0) {
+        return (_jsx("div", { className: "table__empty", children: _jsx("div", { className: `table__empty-text table__empty-text--${size}`, children: emptyMessage }) }));
+    }
+    return (_jsxs("div", { className: `table__container ${className || ''}`, children: [_jsx(SearchFilterBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange, filters: filters, theme: theme, size: size }), _jsx("div", { className: "table__wrapper", children: _jsxs("table", { className: `table__table table__table--${variant} table__table--${size}`, children: [_jsx(TableHeader, { columns: columns, sortable: sortable, sortConfig: sortConfig, onSort: onSort, selectable: selectable, onSelectAll: handleSelectAll, allSelected: allSelected, theme: theme, size: size, variant: variant }), _jsx("tbody", { className: "table__body", children: data.map((row, index) => (_jsx(TableRow, { row: row, index: index, columns: columns, selected: currentSelectedKeys.includes(getRowKey(row, index)), expanded: currentExpandedKeys.includes(getRowKey(row, index)), onSelect: (checked) => handleRowSelect(row, checked), onExpand: () => handleRowExpand(row), onClick: () => handleRowClick(row, index), theme: theme, size: size, variant: variant }, getRowKey(row, index)))) })] }) }), _jsx(TablePagination, { pagination: pagination, onPageChange: onPageChange, onPageSizeChange: onPageSizeChange, theme: theme, size: size })] }));
+};
+export default Table;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-display/timeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,aAAa,EAId,MAAM,YAAY,CAAC;AAmUpB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6G5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+;
+// Simple icon components (inline SVG)
+const CalendarIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }));
+const ClockIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+const UserIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }));
+const BellIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-5 5-5-5h5V3h5v14z" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__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: `timeline__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: `timeline__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" }) }));
+// Timeline Search and Filter Bar
+const TimelineSearchFilterBar = ({ searchable, searchValue, onSearchChange, filterable, size }) => {
+    if (!searchable && !filterable)
+        return null;
+    return (_jsxs("div", { className: `timeline__search-filter-bar timeline__search-filter-bar--${size}`, children: [searchable && (_jsxs("div", { className: "timeline__search-container", children: [_jsx("div", { className: "timeline__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search timeline...", className: `timeline__search-input timeline__search-input--${size}` })] })), filterable && (_jsxs("button", { className: `timeline__filter-button timeline__filter-button--${size}`, children: [_jsx(FilterIcon, { className: "timeline__filter-icon" }), _jsx("span", { className: "timeline__filter-text", children: "Filter" })] }))] }));
+};
+// Timeline Item Actions Component
+const TimelineItemActions = ({ actions, item, size }) => {
+    const [showMenu, setShowMenu] = useState(false);
+    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: `timeline__action-button timeline__action-button--${size} ${action.variant === 'danger' ? 'timeline__action-button--danger' : ''}`, title: action.label, children: action.icon || _jsx(DotsIcon, { className: "timeline__action-icon" }) }));
+    }
+    // Multiple actions - show dropdown menu
+    return (_jsxs("div", { className: "timeline__action-dropdown", children: [_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setShowMenu(!showMenu);
+                }, className: `timeline__action-button timeline__action-button--${size}`, children: _jsx(DotsIcon, { className: "timeline__action-icon" }) }), showMenu && (_jsxs(_Fragment, { children: [_jsx("div", { className: "timeline__action-backdrop", onClick: () => setShowMenu(false) }), _jsx("div", { className: "timeline__action-menu", children: actions.map((action, index) => (_jsxs("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                action.onClick(item);
+                                setShowMenu(false);
+                            }, className: `timeline__action-menu-item ${action.variant === 'danger' ? 'timeline__action-menu-item--danger' : ''}`, children: [action.icon && _jsx("span", { className: "timeline__action-menu-icon", children: action.icon }), action.label] }, index))) })] }))] }));
+};
+// Individual Timeline Item Component
+const TimelineItemComponent = ({ item, position, isLast, mode, actions, onClick, theme, size, variant, showConnector }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const isClickable = !!onClick;
+    const getIcon = () => {
+        if (item.icon) {
+            return item.icon;
+        }
+        switch (item.type) {
+            case 'event': return _jsx(CalendarIcon, { className: "timeline__dot-icon" });
+            case 'task': return _jsx(ClockIcon, { className: "timeline__dot-icon" });
+            case 'user': return _jsx(UserIcon, { className: "timeline__dot-icon" });
+            case 'system': return _jsx(BellIcon, { className: "timeline__dot-icon" });
+            default: return null;
+        }
+    };
+    const formatTimestamp = (timestamp) => {
+        const date = new Date(timestamp);
+        return date.toLocaleString();
+    };
+    return (_jsxs("div", { className: `timeline__item timeline__item--${mode} timeline__item--${position} timeline__item--${size}`, children: [_jsx("div", { className: `timeline__item-content timeline__item-content--${size} timeline__item-content--${variant} ${isClickable ? 'timeline__item-content--clickable' : ''}`, onClick: isClickable ? () => onClick(item) : undefined, children: _jsxs("div", { className: `timeline__item-content-wrapper timeline__item-content-wrapper--${position}`, children: [_jsxs("div", { className: "timeline__item-header", children: [_jsxs("div", { className: "timeline__item-text", children: [_jsx("h3", { className: "timeline__item-title", children: item.title }), _jsx("p", { className: "timeline__item-timestamp", children: formatTimestamp(item.timestamp) })] }), _jsx("div", { className: "timeline__item-actions", children: _jsx(TimelineItemActions, { actions: actions, item: item, theme: theme, size: size }) })] }), item.description && (_jsx("p", { className: "timeline__item-description", children: item.description })), item.content && (_jsx("div", { className: "timeline__item-content-extra", children: item.content })), item.metadata && (_jsxs("div", { className: "timeline__item-metadata", children: [item.metadata.author && (_jsxs("span", { className: "timeline__item-author", children: ["By ", item.metadata.author] })), item.metadata.category && (_jsx("span", { className: "timeline__item-category", children: item.metadata.category })), item.metadata.tags && item.metadata.tags.map((tag, index) => (_jsxs("span", { className: "timeline__item-tag", children: ["#", tag] }, index)))] }))] }) }), _jsxs("div", { className: "timeline__dot-container", children: [_jsx("div", { className: `timeline__dot timeline__dot--${size} timeline__dot--${item.status || 'default'}`, children: getIcon() }), showConnector && !isLast && (_jsx("div", { className: `timeline__connector timeline__connector--${size}` }))] })] }));
+};
+// Main Timeline Component
+export const Timeline = ({ items, mode = 'left', reverse = false, actions = [], onItemClick, searchable = false, searchValue = '', onSearchChange, filterable = false, 
+// filters = [], // TODO: Implement filter functionality
+// onFiltersChange, // TODO: Implement filter functionality
+showConnector = true, loading = false, error = null, emptyMessage = 'No timeline items', className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // 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.description?.toLowerCase().includes(searchLower) ||
+            item.metadata?.author?.toLowerCase().includes(searchLower) ||
+            item.metadata?.category?.toLowerCase().includes(searchLower) ||
+            item.metadata?.tags?.some(tag => tag.toLowerCase().includes(searchLower)));
+    }, [items, searchable, searchValue]);
+    // Sort items by timestamp
+    const sortedItems = useMemo(() => {
+        const sorted = [...filteredItems].sort((a, b) => {
+            const dateA = new Date(a.timestamp).getTime();
+            const dateB = new Date(b.timestamp).getTime();
+            return reverse ? dateB - dateA : dateA - dateB;
+        });
+        return sorted;
+    }, [filteredItems, reverse]);
+    if (loading) {
+        return (_jsx("div", { className: `timeline__loading ${className || ''}`, children: "Loading timeline..." }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `timeline__error ${className || ''}`, children: error }));
+    }
+    return (_jsxs("div", { className: `timeline__container ${className || ''}`, children: [_jsx(TimelineSearchFilterBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange || (() => { }), filterable: filterable, theme: theme, size: size }), _jsx("div", { className: "timeline__timeline", children: sortedItems.length === 0 ? (_jsx("div", { className: "timeline__empty", children: emptyMessage })) : (_jsx("div", { className: "timeline__items", children: sortedItems.map((item, index) => {
+                        const position = mode === 'alternate'
+                            ? (index % 2 === 0 ? 'left' : 'right')
+                            : mode;
+                        return (_jsx(TimelineItemComponent, { item: item, position: position, isLast: index === sortedItems.length - 1, mode: mode, actions: actions, onClick: onItemClick, theme: theme, size: size, variant: variant, showConnector: showConnector }, item.id));
+                    }) })) })] }));
+};
+export default Timeline;