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

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

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

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

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

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

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

@@ -0,0 +1,231 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+;
+import { useTheme } from '../../../themes/useTheme.js';
+// Simple icon components (inline SVG)
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__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 ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__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: `tree__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 FolderIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" }) }));
+const DocumentIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }));
+const CheckIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__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" }) }));
+const MinusIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }));
+// Default color fallbacks for when theme is not available
+const getDefaultColors = () => ({
+    surface: {
+        background: '#ffffff',
+        surface: '#f3f4f6',
+        border: '#d1d5db',
+        divider: '#e5e7eb'
+    },
+    text: {
+        primary: '#111827',
+        secondary: '#6b7280',
+        muted: '#9ca3af',
+        inverse: '#ffffff',
+        onPrimary: '#ffffff',
+        onSecondary: '#ffffff',
+        onSurface: '#111827'
+    },
+    interactive: {
+        hover: '#f3f4f6',
+        active: '#e5e7eb',
+        focus: '#3b82f6',
+        disabled: '#d1d5db'
+    },
+    primary: { 500: '#3b82f6' },
+    semantic: {
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6'
+    }
+});
+// Tree Search Bar
+const TreeSearchBar = ({ searchable, searchValue, onSearchChange, filterable, theme, 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: "tree__search-filter", children: [searchable && (_jsxs("div", { className: "tree__search", children: [_jsx("div", { className: "tree__search-icon", children: _jsx(SearchIcon, { className: "tree__icon" }) }), _jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search nodes...", className: `w-full ${sizeClasses[size]} pl-10 pr-4 rounded-lg border outline-none`, style: {
+                            backgroundColor: colors.surface.background,
+                            border: `1px solid ${colors.surface.border}`,
+                            color: colors.text.primary
+                        }, onFocus: (e) => {
+                            e.target.style.borderColor = colors.primary[500];
+                            e.target.style.boxShadow = `0 0 0 3px ${colors.primary[500]}20`;
+                        }, onBlur: (e) => {
+                            e.target.style.borderColor = colors.surface.border;
+                            e.target.style.boxShadow = 'none';
+                        } })] })), filterable && (_jsxs("button", { className: "tree__filter-button", children: [_jsx(FilterIcon, { className: "tree__icon" }), _jsx("span", { children: "Filter" })] }))] }));
+};
+// Individual Tree Item Component
+const TreeItem = ({ node, level = 0, expandedKeys, selectedKeys, selectable, expandable, onToggleExpand, onSelectionChange, onClick, theme, size, variant, 
+// draggable = false, // TODO: Implement drag and drop
+// onDragStart, // TODO: Implement drag and drop
+// onDragEnd, // TODO: Implement drag and drop
+// onDrop, // TODO: Implement drag and drop
+showLines = true, showIcons = true }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const isExpanded = expandedKeys.includes(node.id);
+    const isSelected = selectedKeys.includes(node.id);
+    const hasChildren = node.children && node.children.length > 0;
+    const isClickable = !!onClick;
+    const iconSizes = {
+        sm: 'w-3 h-3',
+        md: 'w-4 h-4',
+        lg: 'w-5 h-5'
+    };
+    const indentWidth = {
+        sm: 16,
+        md: 20,
+        lg: 24
+    };
+    const handleToggleExpand = (e) => {
+        e.stopPropagation();
+        if (hasChildren && expandable) {
+            onToggleExpand?.(node.id, !isExpanded);
+        }
+    };
+    const handleSelectionChange = (e) => {
+        e.stopPropagation();
+        if (selectable) {
+            onSelectionChange?.(node.id, !isSelected);
+        }
+    };
+    const handleClick = (e) => {
+        if (isClickable) {
+            onClick?.(node, e);
+        }
+    };
+    const getNodeIcon = () => {
+        if (node.icon) {
+            return node.icon;
+        }
+        if (hasChildren) {
+            return _jsx(FolderIcon, { className: iconSizes[size] });
+        }
+        return _jsx(DocumentIcon, { className: iconSizes[size] });
+    };
+    const getCheckboxState = () => {
+        if (!hasChildren)
+            return isSelected;
+        // For parent nodes, check if all children are selected
+        const selectedChildrenCount = node.children?.filter(child => selectedKeys.includes(child.id)).length || 0;
+        const totalChildren = node.children?.length || 0;
+        if (selectedChildrenCount === 0)
+            return false;
+        if (selectedChildrenCount === totalChildren)
+            return true;
+        return 'indeterminate'; // Some children selected
+    };
+    const checkboxState = getCheckboxState();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `tree__node tree__node--${size} ${variant !== 'default' ? `tree__node--${variant}` : ''} ${isSelected ? 'tree__node--selected' : ''} ${isClickable ? 'tree__node--clickable' : ''}`, style: {
+                    paddingLeft: `${level * indentWidth[size] + 12}px`
+                }, onClick: handleClick, children: [showLines && level > 0 && (_jsx("div", { className: "tree__line", style: {
+                            left: `${(level - 1) * indentWidth[size] + 12 + indentWidth[size] / 2 - 1}px`
+                        } })), _jsx("div", { className: "tree__node-toggle-container", children: hasChildren && expandable ? (_jsx("button", { onClick: handleToggleExpand, className: `tree__node-toggle tree__node-toggle--${size}`, children: _jsx("div", { className: `tree__expand-icon ${isExpanded ? 'tree__expand-icon--expanded' : ''}`, children: isExpanded ? (_jsx(ChevronDownIcon, { className: `tree__icon tree__icon--${size}` })) : (_jsx(ChevronRightIcon, { className: `tree__icon tree__icon--${size}` })) }) })) : (_jsx("div", { className: `tree__node-spacer tree__node-spacer--${size}` })) }), selectable && (_jsx("div", { className: `tree__checkbox tree__checkbox--${size}`, children: _jsxs("button", { onClick: handleSelectionChange, className: `tree__checkbox-input ${checkboxState ? 'tree__checkbox-input--checked' : ''} ${checkboxState === 'indeterminate' ? 'tree__checkbox-input--indeterminate' : ''}`, children: [checkboxState === true && _jsx(CheckIcon, { className: "tree__checkbox-icon" }), checkboxState === 'indeterminate' && _jsx(MinusIcon, { className: "tree__checkbox-icon" })] }) })), showIcons && (_jsx("div", { className: `tree__node-icon tree__node-icon--${size}`, children: getNodeIcon() })), _jsx("div", { className: `tree__node-content tree__node-content--${size}`, children: _jsxs("div", { className: "tree__node-main", children: [_jsxs("div", { className: "tree__node-text", children: [_jsx("span", { className: `tree__node-label ${isSelected ? 'tree__node-label--selected' : ''}`, children: node.label }), node.description && (_jsx("div", { className: "tree__node-description", children: node.description }))] }), node.metadata && (_jsxs("div", { className: "tree__node-metadata", children: [node.metadata.count !== undefined && (_jsx("span", { className: "tree__node-badge tree__node-badge--count", children: node.metadata.count })), node.metadata.status && (_jsx("span", { className: `tree__node-badge tree__node-badge--status tree__node-badge--${node.metadata.status}`, children: node.metadata.status }))] }))] }) })] }), hasChildren && isExpanded && (_jsx(_Fragment, { children: node.children.map((childNode) => (_jsx(TreeItem, { node: childNode, level: level + 1, expandedKeys: expandedKeys, selectedKeys: selectedKeys, selectable: selectable, expandable: expandable, onToggleExpand: onToggleExpand, onSelectionChange: onSelectionChange, onClick: onClick, theme: theme, size: size, variant: variant, showLines: showLines, showIcons: showIcons }, childNode.id))) }))] }));
+};
+// Main Tree Component
+export const Tree = ({ data, expandedKeys = [], selectedKeys = [], onExpandedKeysChange, onSelectedKeysChange, onNodeClick, selectable = false, expandable = true, 
+// draggable = false, // TODO: Implement drag and drop
+// onDragStart, // TODO: Implement drag and drop
+// onDragEnd, // TODO: Implement drag and drop
+// onDrop, // TODO: Implement drag and drop
+searchable = false, searchValue = '', onSearchChange, filterable = false, 
+// filters = [], // TODO: Implement filter functionality
+// onFiltersChange, // TODO: Implement filter functionality
+showLines = true, showIcons = true, expandAll = false, collapseAll = false, 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();
+    // Filter nodes based on search
+    const filteredData = useMemo(() => {
+        if (!searchable || !searchValue.trim())
+            return data;
+        const searchLower = searchValue.toLowerCase();
+        const filterNode = (node) => {
+            const matchesSearch = node.label.toLowerCase().includes(searchLower) ||
+                node.description?.toLowerCase().includes(searchLower);
+            let filteredChildren = [];
+            if (node.children) {
+                filteredChildren = node.children
+                    .map(child => filterNode(child))
+                    .filter((child) => child !== null);
+            }
+            // Include node if it matches search OR has matching children
+            if (matchesSearch || filteredChildren.length > 0) {
+                return {
+                    ...node,
+                    children: filteredChildren.length > 0 ? filteredChildren : node.children
+                };
+            }
+            return null;
+        };
+        return data
+            .map(node => filterNode(node))
+            .filter((node) => node !== null);
+    }, [data, searchable, searchValue]);
+    // Auto-expand all nodes when expandAll changes
+    React.useEffect(() => {
+        if (expandAll) {
+            const getAllNodeIds = (nodes) => {
+                const ids = [];
+                const traverse = (nodeList) => {
+                    nodeList.forEach(node => {
+                        if (node.children && node.children.length > 0) {
+                            ids.push(node.id);
+                            traverse(node.children);
+                        }
+                    });
+                };
+                traverse(nodes);
+                return ids;
+            };
+            const allIds = getAllNodeIds(data);
+            onExpandedKeysChange?.(allIds);
+        }
+    }, [expandAll, data, onExpandedKeysChange]);
+    // Auto-collapse all nodes when collapseAll changes
+    React.useEffect(() => {
+        if (collapseAll) {
+            onExpandedKeysChange?.([]);
+        }
+    }, [collapseAll, onExpandedKeysChange]);
+    const handleToggleExpand = useCallback((nodeId, expanded) => {
+        const newExpandedKeys = expanded
+            ? [...expandedKeys, nodeId]
+            : expandedKeys.filter(key => key !== nodeId);
+        onExpandedKeysChange?.(newExpandedKeys);
+    }, [expandedKeys, onExpandedKeysChange]);
+    const handleSelectionChange = useCallback((nodeId, selected) => {
+        const newSelectedKeys = selected
+            ? [...selectedKeys, nodeId]
+            : selectedKeys.filter(key => key !== nodeId);
+        onSelectedKeysChange?.(newSelectedKeys);
+    }, [selectedKeys, onSelectedKeysChange]);
+    if (loading) {
+        return (_jsx("div", { className: `p-8 text-center ${className}`, style: { color: colors.text.muted }, children: "Loading..." }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `p-8 text-center ${className}`, style: {
+                color: colors.semantic.error,
+                backgroundColor: colors.semantic.error + '10',
+                border: `1px solid ${colors.semantic.error}30`,
+                borderRadius: '8px'
+            }, children: error }));
+    }
+    return (_jsxs("div", { className: `tree__container tree__container--${size} ${variant !== 'default' ? `tree__container--${variant}` : ''} ${className}`, children: [_jsx(TreeSearchBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange || (() => { }), filterable: filterable, theme: theme, size: size }), _jsx("div", { className: `tree__tree tree__tree--${size} ${variant !== 'default' ? `tree__tree--${variant}` : ''}`, children: filteredData.length === 0 ? (_jsx("div", { className: "tree__empty", children: emptyMessage })) : (_jsx("div", { className: "tree__nodes", children: filteredData.map((node) => (_jsx(TreeItem, { node: node, level: 0, expandedKeys: expandedKeys, selectedKeys: selectedKeys, selectable: selectable, expandable: expandable, onToggleExpand: handleToggleExpand, onSelectionChange: handleSelectionChange, onClick: onNodeClick, theme: theme, size: size, variant: variant, showLines: showLines, showIcons: showIcons }, node.id))) })) })] }));
+};
+export default Tree;

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

@@ -0,0 +1,231 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+;
+import { useTheme } from '../../../themes/useTheme.js';
+// Simple icon components (inline SVG)
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__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 ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__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: `tree__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 FolderIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" }) }));
+const DocumentIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }));
+const CheckIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__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" }) }));
+const MinusIcon = ({ className = '' }) => (_jsx("svg", { className: `tree__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }));
+// Default color fallbacks for when theme is not available
+const getDefaultColors = () => ({
+    surface: {
+        background: '#ffffff',
+        surface: '#f3f4f6',
+        border: '#d1d5db',
+        divider: '#e5e7eb'
+    },
+    text: {
+        primary: '#111827',
+        secondary: '#6b7280',
+        muted: '#9ca3af',
+        inverse: '#ffffff',
+        onPrimary: '#ffffff',
+        onSecondary: '#ffffff',
+        onSurface: '#111827'
+    },
+    interactive: {
+        hover: '#f3f4f6',
+        active: '#e5e7eb',
+        focus: '#3b82f6',
+        disabled: '#d1d5db'
+    },
+    primary: { 500: '#3b82f6' },
+    semantic: {
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6'
+    }
+});
+// Tree Search Bar
+const TreeSearchBar = ({ searchable, searchValue, onSearchChange, filterable, theme, 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: "tree__search-filter", children: [searchable && (_jsxs("div", { className: "tree__search", children: [_jsx("div", { className: "tree__search-icon", children: _jsx(SearchIcon, { className: "tree__icon" }) }), _jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search nodes...", className: `w-full ${sizeClasses[size]} pl-10 pr-4 rounded-lg border outline-none`, style: {
+                            backgroundColor: colors.surface.background,
+                            border: `1px solid ${colors.surface.border}`,
+                            color: colors.text.primary
+                        }, onFocus: (e) => {
+                            e.target.style.borderColor = colors.primary[500];
+                            e.target.style.boxShadow = `0 0 0 3px ${colors.primary[500]}20`;
+                        }, onBlur: (e) => {
+                            e.target.style.borderColor = colors.surface.border;
+                            e.target.style.boxShadow = 'none';
+                        } })] })), filterable && (_jsxs("button", { className: "tree__filter-button", children: [_jsx(FilterIcon, { className: "tree__icon" }), _jsx("span", { children: "Filter" })] }))] }));
+};
+// Individual Tree Item Component
+const TreeItem = ({ node, level = 0, expandedKeys, selectedKeys, selectable, expandable, onToggleExpand, onSelectionChange, onClick, theme, size, variant, 
+// draggable = false, // TODO: Implement drag and drop
+// onDragStart, // TODO: Implement drag and drop
+// onDragEnd, // TODO: Implement drag and drop
+// onDrop, // TODO: Implement drag and drop
+showLines = true, showIcons = true }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const isExpanded = expandedKeys.includes(node.id);
+    const isSelected = selectedKeys.includes(node.id);
+    const hasChildren = node.children && node.children.length > 0;
+    const isClickable = !!onClick;
+    const iconSizes = {
+        sm: 'w-3 h-3',
+        md: 'w-4 h-4',
+        lg: 'w-5 h-5'
+    };
+    const indentWidth = {
+        sm: 16,
+        md: 20,
+        lg: 24
+    };
+    const handleToggleExpand = (e) => {
+        e.stopPropagation();
+        if (hasChildren && expandable) {
+            onToggleExpand?.(node.id, !isExpanded);
+        }
+    };
+    const handleSelectionChange = (e) => {
+        e.stopPropagation();
+        if (selectable) {
+            onSelectionChange?.(node.id, !isSelected);
+        }
+    };
+    const handleClick = (e) => {
+        if (isClickable) {
+            onClick?.(node, e);
+        }
+    };
+    const getNodeIcon = () => {
+        if (node.icon) {
+            return node.icon;
+        }
+        if (hasChildren) {
+            return _jsx(FolderIcon, { className: iconSizes[size] });
+        }
+        return _jsx(DocumentIcon, { className: iconSizes[size] });
+    };
+    const getCheckboxState = () => {
+        if (!hasChildren)
+            return isSelected;
+        // For parent nodes, check if all children are selected
+        const selectedChildrenCount = node.children?.filter(child => selectedKeys.includes(child.id)).length || 0;
+        const totalChildren = node.children?.length || 0;
+        if (selectedChildrenCount === 0)
+            return false;
+        if (selectedChildrenCount === totalChildren)
+            return true;
+        return 'indeterminate'; // Some children selected
+    };
+    const checkboxState = getCheckboxState();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `tree__node tree__node--${size} ${variant !== 'default' ? `tree__node--${variant}` : ''} ${isSelected ? 'tree__node--selected' : ''} ${isClickable ? 'tree__node--clickable' : ''}`, style: {
+                    paddingLeft: `${level * indentWidth[size] + 12}px`
+                }, onClick: handleClick, children: [showLines && level > 0 && (_jsx("div", { className: "tree__line", style: {
+                            left: `${(level - 1) * indentWidth[size] + 12 + indentWidth[size] / 2 - 1}px`
+                        } })), _jsx("div", { className: "tree__node-toggle-container", children: hasChildren && expandable ? (_jsx("button", { onClick: handleToggleExpand, className: `tree__node-toggle tree__node-toggle--${size}`, children: _jsx("div", { className: `tree__expand-icon ${isExpanded ? 'tree__expand-icon--expanded' : ''}`, children: isExpanded ? (_jsx(ChevronDownIcon, { className: `tree__icon tree__icon--${size}` })) : (_jsx(ChevronRightIcon, { className: `tree__icon tree__icon--${size}` })) }) })) : (_jsx("div", { className: `tree__node-spacer tree__node-spacer--${size}` })) }), selectable && (_jsx("div", { className: `tree__checkbox tree__checkbox--${size}`, children: _jsxs("button", { onClick: handleSelectionChange, className: `tree__checkbox-input ${checkboxState ? 'tree__checkbox-input--checked' : ''} ${checkboxState === 'indeterminate' ? 'tree__checkbox-input--indeterminate' : ''}`, children: [checkboxState === true && _jsx(CheckIcon, { className: "tree__checkbox-icon" }), checkboxState === 'indeterminate' && _jsx(MinusIcon, { className: "tree__checkbox-icon" })] }) })), showIcons && (_jsx("div", { className: `tree__node-icon tree__node-icon--${size}`, children: getNodeIcon() })), _jsx("div", { className: `tree__node-content tree__node-content--${size}`, children: _jsxs("div", { className: "tree__node-main", children: [_jsxs("div", { className: "tree__node-text", children: [_jsx("span", { className: `tree__node-label ${isSelected ? 'tree__node-label--selected' : ''}`, children: node.label }), node.description && (_jsx("div", { className: "tree__node-description", children: node.description }))] }), node.metadata && (_jsxs("div", { className: "tree__node-metadata", children: [node.metadata.count !== undefined && (_jsx("span", { className: "tree__node-badge tree__node-badge--count", children: node.metadata.count })), node.metadata.status && (_jsx("span", { className: `tree__node-badge tree__node-badge--status tree__node-badge--${node.metadata.status}`, children: node.metadata.status }))] }))] }) })] }), hasChildren && isExpanded && (_jsx(_Fragment, { children: node.children.map((childNode) => (_jsx(TreeItem, { node: childNode, level: level + 1, expandedKeys: expandedKeys, selectedKeys: selectedKeys, selectable: selectable, expandable: expandable, onToggleExpand: onToggleExpand, onSelectionChange: onSelectionChange, onClick: onClick, theme: theme, size: size, variant: variant, showLines: showLines, showIcons: showIcons }, childNode.id))) }))] }));
+};
+// Main Tree Component
+export const Tree = ({ data, expandedKeys = [], selectedKeys = [], onExpandedKeysChange, onSelectedKeysChange, onNodeClick, selectable = false, expandable = true, 
+// draggable = false, // TODO: Implement drag and drop
+// onDragStart, // TODO: Implement drag and drop
+// onDragEnd, // TODO: Implement drag and drop
+// onDrop, // TODO: Implement drag and drop
+searchable = false, searchValue = '', onSearchChange, filterable = false, 
+// filters = [], // TODO: Implement filter functionality
+// onFiltersChange, // TODO: Implement filter functionality
+showLines = true, showIcons = true, expandAll = false, collapseAll = false, 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();
+    // Filter nodes based on search
+    const filteredData = useMemo(() => {
+        if (!searchable || !searchValue.trim())
+            return data;
+        const searchLower = searchValue.toLowerCase();
+        const filterNode = (node) => {
+            const matchesSearch = node.label.toLowerCase().includes(searchLower) ||
+                node.description?.toLowerCase().includes(searchLower);
+            let filteredChildren = [];
+            if (node.children) {
+                filteredChildren = node.children
+                    .map(child => filterNode(child))
+                    .filter((child) => child !== null);
+            }
+            // Include node if it matches search OR has matching children
+            if (matchesSearch || filteredChildren.length > 0) {
+                return {
+                    ...node,
+                    children: filteredChildren.length > 0 ? filteredChildren : node.children
+                };
+            }
+            return null;
+        };
+        return data
+            .map(node => filterNode(node))
+            .filter((node) => node !== null);
+    }, [data, searchable, searchValue]);
+    // Auto-expand all nodes when expandAll changes
+    React.useEffect(() => {
+        if (expandAll) {
+            const getAllNodeIds = (nodes) => {
+                const ids = [];
+                const traverse = (nodeList) => {
+                    nodeList.forEach(node => {
+                        if (node.children && node.children.length > 0) {
+                            ids.push(node.id);
+                            traverse(node.children);
+                        }
+                    });
+                };
+                traverse(nodes);
+                return ids;
+            };
+            const allIds = getAllNodeIds(data);
+            onExpandedKeysChange?.(allIds);
+        }
+    }, [expandAll, data, onExpandedKeysChange]);
+    // Auto-collapse all nodes when collapseAll changes
+    React.useEffect(() => {
+        if (collapseAll) {
+            onExpandedKeysChange?.([]);
+        }
+    }, [collapseAll, onExpandedKeysChange]);
+    const handleToggleExpand = useCallback((nodeId, expanded) => {
+        const newExpandedKeys = expanded
+            ? [...expandedKeys, nodeId]
+            : expandedKeys.filter(key => key !== nodeId);
+        onExpandedKeysChange?.(newExpandedKeys);
+    }, [expandedKeys, onExpandedKeysChange]);
+    const handleSelectionChange = useCallback((nodeId, selected) => {
+        const newSelectedKeys = selected
+            ? [...selectedKeys, nodeId]
+            : selectedKeys.filter(key => key !== nodeId);
+        onSelectedKeysChange?.(newSelectedKeys);
+    }, [selectedKeys, onSelectedKeysChange]);
+    if (loading) {
+        return (_jsx("div", { className: `p-8 text-center ${className}`, style: { color: colors.text.muted }, children: "Loading..." }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `p-8 text-center ${className}`, style: {
+                color: colors.semantic.error,
+                backgroundColor: colors.semantic.error + '10',
+                border: `1px solid ${colors.semantic.error}30`,
+                borderRadius: '8px'
+            }, children: error }));
+    }
+    return (_jsxs("div", { className: `tree__container tree__container--${size} ${variant !== 'default' ? `tree__container--${variant}` : ''} ${className}`, children: [_jsx(TreeSearchBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange || (() => { }), filterable: filterable, theme: theme, size: size }), _jsx("div", { className: `tree__tree tree__tree--${size} ${variant !== 'default' ? `tree__tree--${variant}` : ''}`, children: filteredData.length === 0 ? (_jsx("div", { className: "tree__empty", children: emptyMessage })) : (_jsx("div", { className: "tree__nodes", children: filteredData.map((node) => (_jsx(TreeItem, { node: node, level: 0, expandedKeys: expandedKeys, selectedKeys: selectedKeys, selectable: selectable, expandable: expandable, onToggleExpand: handleToggleExpand, onSelectionChange: handleSelectionChange, onClick: onNodeClick, theme: theme, size: size, variant: variant, showLines: showLines, showIcons: showIcons }, node.id))) })) })] }));
+};
+export default Tree;