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

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

@@ -1,602 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
 import { useTheme } from '../../../themes/useTheme';
-import { 
-  TreeProps, 
-  TreeNode, 
-  TreeItemProps
-} from './types';
-
 // Simple icon components (inline SVG)
-const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-  </svg>
-);
-
-const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-  </svg>
-);
-
-const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-  </svg>
-);
-
-const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <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" />
-  </svg>
-);
-
-const FolderIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <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" />
-  </svg>
-);
-
-const DocumentIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <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" />
-  </svg>
-);
-
-const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-  </svg>
-);
-
-const MinusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`tree__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
-  </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' 
-  }
+    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: React.FC<{
-  searchable: boolean;
-  searchValue: string;
-  onSearchChange: (value: string) => void;
-  filterable: boolean;
-  theme: string;
-  size: 'sm' | 'md' | 'lg';
-}> = ({
-  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 (
-    <div className="tree__search-filter">
-      {searchable && (
-        <div className="tree__search">
-          <div className="tree__search-icon">
-            <SearchIcon className="tree__icon" />
-          </div>
-          <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';
-            }}
-          />
-        </div>
-      )}
-
-      {filterable && (
-        <button className="tree__filter-button">
-          <FilterIcon className="tree__icon" />
-          <span>Filter</span>
-        </button>
-      )}
-    </div>
-  );
+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: React.FC<TreeItemProps> = ({
-  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: React.MouseEvent) => {
-    e.stopPropagation();
-    if (hasChildren && expandable) {
-      onToggleExpand?.(node.id, !isExpanded);
-    }
-  };
-
-  const handleSelectionChange = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (selectable) {
-      onSelectionChange?.(node.id, !isSelected);
-    }
-  };
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isClickable) {
-      onClick?.(node, e);
-    }
-  };
-
-  const getNodeIcon = () => {
-    if (node.icon) {
-      return node.icon;
-    }
-    if (hasChildren) {
-      return <FolderIcon className={iconSizes[size]} />;
-    }
-    return <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 (
-    <>
-      <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}
-      >
-        {/* Tree Lines */}
-        {showLines && level > 0 && (
-          <div
-            className="tree__line"
-            style={{
-              left: `${(level - 1) * indentWidth[size] + 12 + indentWidth[size] / 2 - 1}px`
-            }}
-          />
-        )}
-
-        {/* Expand/Collapse Button */}
-        <div className="tree__node-toggle-container">
-          {hasChildren && expandable ? (
-            <button
-              onClick={handleToggleExpand}
-              className={`tree__node-toggle tree__node-toggle--${size}`}
-            >
-              <div className={`tree__expand-icon ${isExpanded ? 'tree__expand-icon--expanded' : ''}`}>
-                {isExpanded ? (
-                  <ChevronDownIcon className={`tree__icon tree__icon--${size}`} />
-                ) : (
-                  <ChevronRightIcon className={`tree__icon tree__icon--${size}`} />
-                )}
-              </div>
-            </button>
-          ) : (
-            <div className={`tree__node-spacer tree__node-spacer--${size}`} />
-          )}
-        </div>
-
-        {/* Selection Checkbox */}
-        {selectable && (
-          <div className={`tree__checkbox tree__checkbox--${size}`}>
-            <button
-              onClick={handleSelectionChange}
-              className={`tree__checkbox-input ${
-                checkboxState ? 'tree__checkbox-input--checked' : ''
-              } ${
-                checkboxState === 'indeterminate' ? 'tree__checkbox-input--indeterminate' : ''
-              }`}
-            >
-              {checkboxState === true && <CheckIcon className="tree__checkbox-icon" />}
-              {checkboxState === 'indeterminate' && <MinusIcon className="tree__checkbox-icon" />}
-            </button>
-          </div>
-        )}
-
-        {/* Node Icon */}
-        {showIcons && (
-          <div className={`tree__node-icon tree__node-icon--${size}`}>
-            {getNodeIcon()}
-          </div>
-        )}
-
-        {/* Node Content */}
-        <div className={`tree__node-content tree__node-content--${size}`}>
-          <div className="tree__node-main">
-            <div className="tree__node-text">
-              <span className={`tree__node-label ${
-                isSelected ? 'tree__node-label--selected' : ''
-              }`}>
-                {node.label}
-              </span>
-              {node.description && (
-                <div className="tree__node-description">
-                  {node.description}
-                </div>
-              )}
-            </div>
-
-            {/* Node Metadata */}
-            {node.metadata && (
-              <div className="tree__node-metadata">
-                {node.metadata.count !== undefined && (
-                  <span className="tree__node-badge tree__node-badge--count">
-                    {node.metadata.count}
-                  </span>
-                )}
-                {node.metadata.status && (
-                  <span className={`tree__node-badge tree__node-badge--status tree__node-badge--${node.metadata.status}`}>
-                    {node.metadata.status}
-                  </span>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Child Nodes */}
-      {hasChildren && isExpanded && (
-        <>
-          {node.children!.map((childNode) => (
-            <TreeItem
-              key={childNode.id}
-              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}
-            />
-          ))}
-        </>
-      )}
-    </>
-  );
+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: React.FC<TreeProps> = ({
-  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: TreeNode): TreeNode | null => {
-      const matchesSearch = node.label.toLowerCase().includes(searchLower) ||
-                           node.description?.toLowerCase().includes(searchLower);
-      
-      let filteredChildren: TreeNode[] = [];
-      if (node.children) {
-        filteredChildren = node.children
-          .map(child => filterNode(child))
-          .filter((child): child is TreeNode => 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 is TreeNode => node !== null);
-  }, [data, searchable, searchValue]);
-
-  // Auto-expand all nodes when expandAll changes
-  React.useEffect(() => {
-    if (expandAll) {
-      const getAllNodeIds = (nodes: TreeNode[]): string[] => {
-        const ids: string[] = [];
-        const traverse = (nodeList: TreeNode[]) => {
-          nodeList.forEach(node => {
-            if (node.children && node.children.length > 0) {
-              ids.push(node.id);
-              traverse(node.children);
+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;
         };
-        traverse(nodes);
-        return ids;
-      };
-      
-      const allIds = getAllNodeIds(data);
-      onExpandedKeysChange?.(allIds);
+        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..." }));
     }
-  }, [expandAll, data, onExpandedKeysChange]);
-
-  // Auto-collapse all nodes when collapseAll changes
-  React.useEffect(() => {
-    if (collapseAll) {
-      onExpandedKeysChange?.([]);
+    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 }));
     }
-  }, [collapseAll, onExpandedKeysChange]);
-
-  const handleToggleExpand = useCallback((nodeId: string, expanded: boolean) => {
-    const newExpandedKeys = expanded
-      ? [...expandedKeys, nodeId]
-      : expandedKeys.filter(key => key !== nodeId);
-    
-    onExpandedKeysChange?.(newExpandedKeys);
-  }, [expandedKeys, onExpandedKeysChange]);
-
-  const handleSelectionChange = useCallback((nodeId: string, selected: boolean) => {
-    const newSelectedKeys = selected
-      ? [...selectedKeys, nodeId]
-      : selectedKeys.filter(key => key !== nodeId);
-    
-    onSelectedKeysChange?.(newSelectedKeys);
-  }, [selectedKeys, onSelectedKeysChange]);
-
-  if (loading) {
-    return (
-      <div 
-        className={`p-8 text-center ${className}`}
-        style={{ color: colors.text.muted }}
-      >
-        Loading...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <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'
-        }}
-      >
-        {error}
-      </div>
-    );
-  }
-
-  return (
-    <div className={`tree__container tree__container--${size} ${variant !== 'default' ? `tree__container--${variant}` : ''} ${className}`}>
-      {/* Search Bar */}
-      <TreeSearchBar
-        searchable={searchable}
-        searchValue={searchValue}
-        onSearchChange={onSearchChange || (() => {})}
-        filterable={filterable}
-        theme={theme}
-        size={size}
-      />
-
-      {/* Tree */}
-      <div className={`tree__tree tree__tree--${size} ${variant !== 'default' ? `tree__tree--${variant}` : ''}`}>
-        {filteredData.length === 0 ? (
-          <div className="tree__empty">
-            {emptyMessage}
-          </div>
-        ) : (
-          <div className="tree__nodes">
-            {filteredData.map((node) => (
-              <TreeItem
-                key={node.id}
-                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}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+    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;