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

package/dist/components/ui/navigation/tabs.esm.js

@@ -1,205 +1,96 @@
-/**
- * Tabs Component
- * Provides comprehensive tab functionality with theme support and multiple variants
- */
-
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { TabsProps, TabItem } from './types';
-
 // Simple icon components
-const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-  </svg>
-);
-
-export const Tabs: React.FC<TabsProps> = ({
-  tabs,
-  activeTab,
-  defaultActiveTab,
-  onTabChange,
-  variant = 'default',
-  size = 'md',
-  orientation = 'horizontal',
-  fullWidth = false,
-  centered = false,
-  disabled = false,
-  loading = false,
-  closable = false,
-  onTabClose,
-  addable = false,
-  onTabAdd,
-  // TODO: Implement draggable functionality in future version
-  // draggable = false,
-  // onTabsReorder,
-  className = '',
-  'data-testid': testId = 'tabs',
-}) => {
-  const [internalActiveTab, setInternalActiveTab] = useState<string>(
-    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
-  );
-
-  // Use controlled or uncontrolled active tab
-  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
-
-  const handleTabChange = useCallback((tabId: string) => {
-    if (disabled || loading) return;
-    
-    if (activeTab === undefined) {
-      setInternalActiveTab(tabId);
-    }
-    
-    if (onTabChange) {
-      onTabChange(tabId);
-    }
-  }, [activeTab, onTabChange, disabled, loading]);
-
-  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (onTabClose) {
-      onTabClose(tabId);
-    }
-  }, [onTabClose]);
-
-  const handleTabAdd = useCallback(() => {
-    if (onTabAdd) {
-      onTabAdd();
-    }
-  }, [onTabAdd]);
-
-  // Memoize current tab content
-  const currentTabContent = useMemo(() => {
-    return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
-  }, [tabs, currentActiveTab]);
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'tabs__item--small';
-      case 'lg':
-        return 'tabs__item--large';
-      default: // md
-        return 'tabs__item--medium';
-    }
-  };
-
-  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
-    if (isDisabled) {
-      return 'tabs__item--disabled';
-    }
-
-    switch (variant) {
-      case 'pills':
-        return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
-      case 'underline':
-        return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
-      case 'cards':
-        return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
-      case 'minimal':
-        return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
-      default: // default
-        return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
-    }
-  };
-
+const PlusIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }));
+export const Tabs = ({ tabs, activeTab, defaultActiveTab, onTabChange, variant = 'default', size = 'md', orientation = 'horizontal', fullWidth = false, centered = false, disabled = false, loading = false, closable = false, onTabClose, addable = false, onTabAdd, 
+// TODO: Implement draggable functionality in future version
+// draggable = false,
+// onTabsReorder,
+className = '', 'data-testid': testId = 'tabs', }) => {
+    const [internalActiveTab, setInternalActiveTab] = useState(activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : ''));
+    // Use controlled or uncontrolled active tab
+    const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
+    const handleTabChange = useCallback((tabId) => {
+        if (disabled || loading)
+            return;
+        if (activeTab === undefined) {
+            setInternalActiveTab(tabId);
+        }
+        if (onTabChange) {
+            onTabChange(tabId);
+        }
+    }, [activeTab, onTabChange, disabled, loading]);
+    const handleTabClose = useCallback((tabId, event) => {
+        event.stopPropagation();
+        if (onTabClose) {
+            onTabClose(tabId);
+        }
+    }, [onTabClose]);
+    const handleTabAdd = useCallback(() => {
+        if (onTabAdd) {
+            onTabAdd();
+        }
+    }, [onTabAdd]);
+    // Memoize current tab content
+    const currentTabContent = useMemo(() => {
+        return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
+    }, [tabs, currentActiveTab]);
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'tabs__item--small';
+            case 'lg':
+                return 'tabs__item--large';
+            default: // md
+                return 'tabs__item--medium';
+        }
+    };
+    const getVariantClasses = (isActive, isDisabled) => {
+        if (isDisabled) {
+            return 'tabs__item--disabled';
+        }
+        switch (variant) {
+            case 'pills':
+                return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
+            case 'underline':
+                return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
+            case 'cards':
+                return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
+            case 'minimal':
+                return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
+            default: // default
+                return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
+        }
+    };
     const getTabListClasses = () => {
-    const baseClasses = 'tabs__list tabs__list--semantic';
-    
-    if (orientation === 'vertical') {
-      return `${baseClasses} tabs__list--vertical`;
-    }
-    
-    if (fullWidth) {
-      return `${baseClasses} tabs__list--full-width`;
-    }
-    
-    if (centered) {
-      return `${baseClasses} tabs__list--centered`;
-    }
-    
-    return baseClasses;
-  };
-
-  const getTabClasses = (tab: TabItem) => {
-    const isActive = tab.id === currentActiveTab;
-    const isDisabled = tab.disabled || disabled;
-    
-    const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
-    
-    if (orientation === 'vertical') {
-      return `${baseClasses} tabs__item--vertical`;
-    }
-
-    if (fullWidth) {
-      return `${baseClasses} tabs__item--full-width`;
+        const baseClasses = 'tabs__list tabs__list--semantic';
+        if (orientation === 'vertical') {
+            return `${baseClasses} tabs__list--vertical`;
+        }
+        if (fullWidth) {
+            return `${baseClasses} tabs__list--full-width`;
+        }
+        if (centered) {
+            return `${baseClasses} tabs__list--centered`;
+        }
+        return baseClasses;
+    };
+    const getTabClasses = (tab) => {
+        const isActive = tab.id === currentActiveTab;
+        const isDisabled = tab.disabled || disabled;
+        const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
+        if (orientation === 'vertical') {
+            return `${baseClasses} tabs__item--vertical`;
+        }
+        if (fullWidth) {
+            return `${baseClasses} tabs__item--full-width`;
+        }
+        return baseClasses;
+    };
+    if (tabs.length === 0) {
+        return null;
     }
-
-    return baseClasses;
-  };
-
-  if (tabs.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
-      {/* Tab List */}
-      <div className={getTabListClasses()}>
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => handleTabChange(tab.id)}
-            disabled={tab.disabled || disabled}
-            className={getTabClasses(tab)}
-            aria-selected={tab.id === currentActiveTab}
-            aria-controls={`panel-${tab.id}`}
-            role="tab"
-          >
-            {tab.icon && <span className="tabs__item-icon">{tab.icon}</span>}
-            <span className="tabs__item-label">{tab.label}</span>
-            {tab.badge && <span className="tabs__item-badge">{tab.badge}</span>}
-            {closable && tab.closable && (
-                              <button
-                  onClick={(e) => handleTabClose(tab.id, e)}
-                  className="tabs__close-button"
-                  aria-label={`Close ${tab.label} tab`}
-                >
-                  <XMarkIcon className="tabs__close-icon" />
-                </button>
-            )}
-          </button>
-        ))}
-        
-        {addable && (
-          <button
-            onClick={handleTabAdd}
-            disabled={disabled || loading}
-            className={`tabs__add-button ${getSizeClasses()}`}
-            aria-label="Add new tab"
-          >
-            <PlusIcon className="tabs__add-icon" />
-          </button>
-        )}
-      </div>
-
-      {/* Tab Panels */}
-      <div
-        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
-        role="tabpanel"
-        aria-labelledby={`tab-${currentActiveTab}`}
-      >
-        {loading ? (
-          <div className="tabs__loading">
-            <div className="tabs__loading-spinner"></div>
-          </div>
-        ) : (
-          currentTabContent
-        )}
-      </div>
-    </div>
-  );
+    return (_jsxs("div", { className: `tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`, "data-testid": testId, children: [_jsxs("div", { className: getTabListClasses(), children: [tabs.map((tab) => (_jsxs("button", { onClick: () => handleTabChange(tab.id), disabled: tab.disabled || disabled, className: getTabClasses(tab), "aria-selected": tab.id === currentActiveTab, "aria-controls": `panel-${tab.id}`, role: "tab", children: [tab.icon && _jsx("span", { className: "tabs__item-icon", children: tab.icon }), _jsx("span", { className: "tabs__item-label", children: tab.label }), tab.badge && _jsx("span", { className: "tabs__item-badge", children: tab.badge }), closable && tab.closable && (_jsx("button", { onClick: (e) => handleTabClose(tab.id, e), className: "tabs__close-button", "aria-label": `Close ${tab.label} tab`, children: _jsx(XMarkIcon, { className: "tabs__close-icon" }) }))] }, tab.id))), addable && (_jsx("button", { onClick: handleTabAdd, disabled: disabled || loading, className: `tabs__add-button ${getSizeClasses()}`, "aria-label": "Add new tab", children: _jsx(PlusIcon, { className: "tabs__add-icon" }) }))] }), _jsx("div", { className: `tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`, role: "tabpanel", "aria-labelledby": `tab-${currentActiveTab}`, children: loading ? (_jsx("div", { className: "tabs__loading", children: _jsx("div", { className: "tabs__loading-spinner" }) })) : (currentTabContent) })] }));
 };
-
 export default Tabs;

package/dist/components/ui/navigation/tabs.js

@@ -1,205 +1,96 @@
-/**
- * Tabs Component
- * Provides comprehensive tab functionality with theme support and multiple variants
- */
-
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { TabsProps, TabItem } from './types';
-
 // Simple icon components
-const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-  </svg>
-);
-
-export const Tabs: React.FC<TabsProps> = ({
-  tabs,
-  activeTab,
-  defaultActiveTab,
-  onTabChange,
-  variant = 'default',
-  size = 'md',
-  orientation = 'horizontal',
-  fullWidth = false,
-  centered = false,
-  disabled = false,
-  loading = false,
-  closable = false,
-  onTabClose,
-  addable = false,
-  onTabAdd,
-  // TODO: Implement draggable functionality in future version
-  // draggable = false,
-  // onTabsReorder,
-  className = '',
-  'data-testid': testId = 'tabs',
-}) => {
-  const [internalActiveTab, setInternalActiveTab] = useState<string>(
-    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
-  );
-
-  // Use controlled or uncontrolled active tab
-  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
-
-  const handleTabChange = useCallback((tabId: string) => {
-    if (disabled || loading) return;
-    
-    if (activeTab === undefined) {
-      setInternalActiveTab(tabId);
-    }
-    
-    if (onTabChange) {
-      onTabChange(tabId);
-    }
-  }, [activeTab, onTabChange, disabled, loading]);
-
-  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (onTabClose) {
-      onTabClose(tabId);
-    }
-  }, [onTabClose]);
-
-  const handleTabAdd = useCallback(() => {
-    if (onTabAdd) {
-      onTabAdd();
-    }
-  }, [onTabAdd]);
-
-  // Memoize current tab content
-  const currentTabContent = useMemo(() => {
-    return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
-  }, [tabs, currentActiveTab]);
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'tabs__item--small';
-      case 'lg':
-        return 'tabs__item--large';
-      default: // md
-        return 'tabs__item--medium';
-    }
-  };
-
-  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
-    if (isDisabled) {
-      return 'tabs__item--disabled';
-    }
-
-    switch (variant) {
-      case 'pills':
-        return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
-      case 'underline':
-        return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
-      case 'cards':
-        return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
-      case 'minimal':
-        return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
-      default: // default
-        return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
-    }
-  };
-
+const PlusIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }));
+export const Tabs = ({ tabs, activeTab, defaultActiveTab, onTabChange, variant = 'default', size = 'md', orientation = 'horizontal', fullWidth = false, centered = false, disabled = false, loading = false, closable = false, onTabClose, addable = false, onTabAdd, 
+// TODO: Implement draggable functionality in future version
+// draggable = false,
+// onTabsReorder,
+className = '', 'data-testid': testId = 'tabs', }) => {
+    const [internalActiveTab, setInternalActiveTab] = useState(activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : ''));
+    // Use controlled or uncontrolled active tab
+    const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
+    const handleTabChange = useCallback((tabId) => {
+        if (disabled || loading)
+            return;
+        if (activeTab === undefined) {
+            setInternalActiveTab(tabId);
+        }
+        if (onTabChange) {
+            onTabChange(tabId);
+        }
+    }, [activeTab, onTabChange, disabled, loading]);
+    const handleTabClose = useCallback((tabId, event) => {
+        event.stopPropagation();
+        if (onTabClose) {
+            onTabClose(tabId);
+        }
+    }, [onTabClose]);
+    const handleTabAdd = useCallback(() => {
+        if (onTabAdd) {
+            onTabAdd();
+        }
+    }, [onTabAdd]);
+    // Memoize current tab content
+    const currentTabContent = useMemo(() => {
+        return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
+    }, [tabs, currentActiveTab]);
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'tabs__item--small';
+            case 'lg':
+                return 'tabs__item--large';
+            default: // md
+                return 'tabs__item--medium';
+        }
+    };
+    const getVariantClasses = (isActive, isDisabled) => {
+        if (isDisabled) {
+            return 'tabs__item--disabled';
+        }
+        switch (variant) {
+            case 'pills':
+                return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
+            case 'underline':
+                return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
+            case 'cards':
+                return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
+            case 'minimal':
+                return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
+            default: // default
+                return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
+        }
+    };
     const getTabListClasses = () => {
-    const baseClasses = 'tabs__list tabs__list--semantic';
-    
-    if (orientation === 'vertical') {
-      return `${baseClasses} tabs__list--vertical`;
-    }
-    
-    if (fullWidth) {
-      return `${baseClasses} tabs__list--full-width`;
-    }
-    
-    if (centered) {
-      return `${baseClasses} tabs__list--centered`;
-    }
-    
-    return baseClasses;
-  };
-
-  const getTabClasses = (tab: TabItem) => {
-    const isActive = tab.id === currentActiveTab;
-    const isDisabled = tab.disabled || disabled;
-    
-    const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
-    
-    if (orientation === 'vertical') {
-      return `${baseClasses} tabs__item--vertical`;
-    }
-
-    if (fullWidth) {
-      return `${baseClasses} tabs__item--full-width`;
+        const baseClasses = 'tabs__list tabs__list--semantic';
+        if (orientation === 'vertical') {
+            return `${baseClasses} tabs__list--vertical`;
+        }
+        if (fullWidth) {
+            return `${baseClasses} tabs__list--full-width`;
+        }
+        if (centered) {
+            return `${baseClasses} tabs__list--centered`;
+        }
+        return baseClasses;
+    };
+    const getTabClasses = (tab) => {
+        const isActive = tab.id === currentActiveTab;
+        const isDisabled = tab.disabled || disabled;
+        const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
+        if (orientation === 'vertical') {
+            return `${baseClasses} tabs__item--vertical`;
+        }
+        if (fullWidth) {
+            return `${baseClasses} tabs__item--full-width`;
+        }
+        return baseClasses;
+    };
+    if (tabs.length === 0) {
+        return null;
     }
-
-    return baseClasses;
-  };
-
-  if (tabs.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
-      {/* Tab List */}
-      <div className={getTabListClasses()}>
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => handleTabChange(tab.id)}
-            disabled={tab.disabled || disabled}
-            className={getTabClasses(tab)}
-            aria-selected={tab.id === currentActiveTab}
-            aria-controls={`panel-${tab.id}`}
-            role="tab"
-          >
-            {tab.icon && <span className="tabs__item-icon">{tab.icon}</span>}
-            <span className="tabs__item-label">{tab.label}</span>
-            {tab.badge && <span className="tabs__item-badge">{tab.badge}</span>}
-            {closable && tab.closable && (
-                              <button
-                  onClick={(e) => handleTabClose(tab.id, e)}
-                  className="tabs__close-button"
-                  aria-label={`Close ${tab.label} tab`}
-                >
-                  <XMarkIcon className="tabs__close-icon" />
-                </button>
-            )}
-          </button>
-        ))}
-        
-        {addable && (
-          <button
-            onClick={handleTabAdd}
-            disabled={disabled || loading}
-            className={`tabs__add-button ${getSizeClasses()}`}
-            aria-label="Add new tab"
-          >
-            <PlusIcon className="tabs__add-icon" />
-          </button>
-        )}
-      </div>
-
-      {/* Tab Panels */}
-      <div
-        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
-        role="tabpanel"
-        aria-labelledby={`tab-${currentActiveTab}`}
-      >
-        {loading ? (
-          <div className="tabs__loading">
-            <div className="tabs__loading-spinner"></div>
-          </div>
-        ) : (
-          currentTabContent
-        )}
-      </div>
-    </div>
-  );
+    return (_jsxs("div", { className: `tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`, "data-testid": testId, children: [_jsxs("div", { className: getTabListClasses(), children: [tabs.map((tab) => (_jsxs("button", { onClick: () => handleTabChange(tab.id), disabled: tab.disabled || disabled, className: getTabClasses(tab), "aria-selected": tab.id === currentActiveTab, "aria-controls": `panel-${tab.id}`, role: "tab", children: [tab.icon && _jsx("span", { className: "tabs__item-icon", children: tab.icon }), _jsx("span", { className: "tabs__item-label", children: tab.label }), tab.badge && _jsx("span", { className: "tabs__item-badge", children: tab.badge }), closable && tab.closable && (_jsx("button", { onClick: (e) => handleTabClose(tab.id, e), className: "tabs__close-button", "aria-label": `Close ${tab.label} tab`, children: _jsx(XMarkIcon, { className: "tabs__close-icon" }) }))] }, tab.id))), addable && (_jsx("button", { onClick: handleTabAdd, disabled: disabled || loading, className: `tabs__add-button ${getSizeClasses()}`, "aria-label": "Add new tab", children: _jsx(PlusIcon, { className: "tabs__add-icon" }) }))] }), _jsx("div", { className: `tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`, role: "tabpanel", "aria-labelledby": `tab-${currentActiveTab}`, children: loading ? (_jsx("div", { className: "tabs__loading", children: _jsx("div", { className: "tabs__loading-spinner" }) })) : (currentTabContent) })] }));
 };
-
 export default Tabs;