@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/components/ui/navigation/tabs.d.ts

@@ -0,0 +1,196 @@
+
+// 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 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`;
+    }
+
+    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>
+  );
+};
+
+export default Tabs;

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

@@ -0,0 +1,194 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TabsProps, TabItem } from './types';
+
+// Simple icon components
+const PlusIcon}> = ({ 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= ({
+  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= false,
+  // onTabsReorder,
+  className = '',
+  'data-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 ;
+
+  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';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getVariantClasses = (isActive, isDisabled) => {
+    if (isDisabled) {
+      return 'tabs__item--disabled';
+    }
+
+    switch (variant) {
+      case 'pills';
+      case 'underline';
+      case 'cards';
+      case 'minimal';
+      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) => {
+    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 (
+    <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>
+        ) )}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

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

@@ -0,0 +1,194 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TabsProps, TabItem } from './types';
+
+// Simple icon components
+const PlusIcon}> = ({ 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= ({
+  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= false,
+  // onTabsReorder,
+  className = '',
+  'data-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 ;
+
+  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';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getVariantClasses = (isActive, isDisabled) => {
+    if (isDisabled) {
+      return 'tabs__item--disabled';
+    }
+
+    switch (variant) {
+      case 'pills';
+      case 'underline';
+      case 'cards';
+      case 'minimal';
+      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) => {
+    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 (
+    <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>
+        ) )}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;