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

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

@@ -9,13 +9,13 @@ import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { StepperProps, StepItem } from './types';
 
 // Simple icon components
-const ExclamationCircleIcon}> = ({ className = '' }) => (
+const ExclamationCircleIcon: 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   </svg>
 );
 
-export const Stepper= ({
+export const Stepper: React.FC<StepperProps> = ({
   steps,
   currentStep = 0,
   defaultCurrentStep = 0,
@@ -29,21 +29,23 @@ export const Stepper= ({
   allowStepClick = true,
   allowStepNavigation = true,
   showProgress = true,
-  // TODO= true,
+  // TODO: Implement step status display in future version
+  // showStepStatus = true,
   onStepComplete,
   onStepError,
   onFinish,
   onCancel,
   className = '',
-  'data-testid'= 'stepper',
+  'data-testid': testId = 'stepper',
 }) => {
   const [internalCurrentStep, setInternalCurrentStep] = useState<number>(
-    currentStep !== undefined ? currentStep );
+    currentStep !== undefined ? currentStep : defaultCurrentStep
+  );
 
   // Use controlled or uncontrolled current step
-  const currentStepIndex = currentStep !== undefined ? currentStep ;
+  const currentStepIndex = currentStep !== undefined ? currentStep : internalCurrentStep;
 
-  const handleStepClick = useCallback((stepIndex) => {
+  const handleStepClick = useCallback((stepIndex: number) => {
     if (!allowStepClick || !allowStepNavigation) return;
     
     const step = steps[stepIndex];
@@ -58,7 +60,7 @@ export const Stepper= ({
     }
   }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
 
-  const handleStepComplete = useCallback(async (stepIndex) => {
+  const handleStepComplete = useCallback(async (stepIndex: number) => {
     const step = steps[stepIndex];
     if (!step.validation) return;
 
@@ -101,18 +103,25 @@ export const Stepper= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'stepper--size-sm';
+      case 'lg':
+        return 'stepper--size-lg';
+      default: // md
+        return 'stepper--size-md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'vertical';
-      case 'horizontal';
-      case 'wizard';
-      default;
+      case 'vertical':
+        return 'stepper--vertical';
+      case 'horizontal':
+        return 'stepper--horizontal';
+      case 'wizard':
+        return 'stepper--wizard';
+      default:
+        return 'stepper--default';
     }
   };
 
@@ -120,7 +129,7 @@ export const Stepper= ({
     return 'stepper stepper--stan-design';
   };
 
-  const getStepStatusIcon = (step, stepIndex) => {
+  const getStepStatusIcon = (step: StepItem, stepIndex: number) => {
     if (!showStepIcons) return null;
 
     if (step.status === 'completed') {
@@ -150,7 +159,7 @@ export const Stepper= ({
     return null;
   };
 
-  const getStepClasses = (step, stepIndex) => {
+  const getStepClasses = (step: StepItem, stepIndex: number) => {
     let classes = 'stepper__step';
 
     if (step.disabled) {
@@ -187,7 +196,7 @@ export const Stepper= ({
             <div
               className="stepper__progress-bar"
               style={{
-                width}%`
+                width: `${progressPercentage}%`
               }}
             />
           </div>
@@ -199,15 +208,15 @@ export const Stepper= ({
         {steps.map((step, stepIndex) => (
           <div
             key={step.id}
-            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' }`}
+            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' : ''}`}
           >
             <div
-              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' }`}
+              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' : ''}`}
               onClick={() => handleStepClick(stepIndex)}
             >
               {getStepStatusIcon(step, stepIndex)}
               
-              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' }`}>
+              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' : ''}`}>
                 {showStepLabels && (
                   <div className="stepper__step-label">
                     {step.label}
@@ -240,7 +249,7 @@ export const Stepper= ({
                           action.variant || 'default'
                         }`}
                       >
-                        {action.loading ? 'Loading...' }
+                        {action.loading ? 'Loading...' : action.label}
                       </button>
                     ))}
                   </div>
@@ -277,7 +286,9 @@ export const Stepper= ({
             >
               Next
             </button>
-          ) ={handleFinish}
+          ) : (
+            <button
+              onClick={handleFinish}
               className="stepper__nav-button stepper__nav-button--finish"
             >
               Finish

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

@@ -9,13 +9,13 @@ import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { StepperProps, StepItem } from './types';
 
 // Simple icon components
-const ExclamationCircleIcon}> = ({ className = '' }) => (
+const ExclamationCircleIcon: 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   </svg>
 );
 
-export const Stepper= ({
+export const Stepper: React.FC<StepperProps> = ({
   steps,
   currentStep = 0,
   defaultCurrentStep = 0,
@@ -29,21 +29,23 @@ export const Stepper= ({
   allowStepClick = true,
   allowStepNavigation = true,
   showProgress = true,
-  // TODO= true,
+  // TODO: Implement step status display in future version
+  // showStepStatus = true,
   onStepComplete,
   onStepError,
   onFinish,
   onCancel,
   className = '',
-  'data-testid'= 'stepper',
+  'data-testid': testId = 'stepper',
 }) => {
   const [internalCurrentStep, setInternalCurrentStep] = useState<number>(
-    currentStep !== undefined ? currentStep );
+    currentStep !== undefined ? currentStep : defaultCurrentStep
+  );
 
   // Use controlled or uncontrolled current step
-  const currentStepIndex = currentStep !== undefined ? currentStep ;
+  const currentStepIndex = currentStep !== undefined ? currentStep : internalCurrentStep;
 
-  const handleStepClick = useCallback((stepIndex) => {
+  const handleStepClick = useCallback((stepIndex: number) => {
     if (!allowStepClick || !allowStepNavigation) return;
     
     const step = steps[stepIndex];
@@ -58,7 +60,7 @@ export const Stepper= ({
     }
   }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
 
-  const handleStepComplete = useCallback(async (stepIndex) => {
+  const handleStepComplete = useCallback(async (stepIndex: number) => {
     const step = steps[stepIndex];
     if (!step.validation) return;
 
@@ -101,18 +103,25 @@ export const Stepper= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'stepper--size-sm';
+      case 'lg':
+        return 'stepper--size-lg';
+      default: // md
+        return 'stepper--size-md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'vertical';
-      case 'horizontal';
-      case 'wizard';
-      default;
+      case 'vertical':
+        return 'stepper--vertical';
+      case 'horizontal':
+        return 'stepper--horizontal';
+      case 'wizard':
+        return 'stepper--wizard';
+      default:
+        return 'stepper--default';
     }
   };
 
@@ -120,7 +129,7 @@ export const Stepper= ({
     return 'stepper stepper--stan-design';
   };
 
-  const getStepStatusIcon = (step, stepIndex) => {
+  const getStepStatusIcon = (step: StepItem, stepIndex: number) => {
     if (!showStepIcons) return null;
 
     if (step.status === 'completed') {
@@ -150,7 +159,7 @@ export const Stepper= ({
     return null;
   };
 
-  const getStepClasses = (step, stepIndex) => {
+  const getStepClasses = (step: StepItem, stepIndex: number) => {
     let classes = 'stepper__step';
 
     if (step.disabled) {
@@ -187,7 +196,7 @@ export const Stepper= ({
             <div
               className="stepper__progress-bar"
               style={{
-                width}%`
+                width: `${progressPercentage}%`
               }}
             />
           </div>
@@ -199,15 +208,15 @@ export const Stepper= ({
         {steps.map((step, stepIndex) => (
           <div
             key={step.id}
-            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' }`}
+            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' : ''}`}
           >
             <div
-              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' }`}
+              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' : ''}`}
               onClick={() => handleStepClick(stepIndex)}
             >
               {getStepStatusIcon(step, stepIndex)}
               
-              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' }`}>
+              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' : ''}`}>
                 {showStepLabels && (
                   <div className="stepper__step-label">
                     {step.label}
@@ -240,7 +249,7 @@ export const Stepper= ({
                           action.variant || 'default'
                         }`}
                       >
-                        {action.loading ? 'Loading...' }
+                        {action.loading ? 'Loading...' : action.label}
                       </button>
                     ))}
                   </div>
@@ -277,7 +286,9 @@ export const Stepper= ({
             >
               Next
             </button>
-          ) ={handleFinish}
+          ) : (
+            <button
+              onClick={handleFinish}
               className="stepper__nav-button stepper__nav-button--finish"
             >
               Finish

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

@@ -9,13 +9,13 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 import { TabsProps, TabItem } from './types';
 
 // Simple icon components
-const PlusIcon}> = ({ className = '' }) => (
+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= ({
+export const Tabs: React.FC<TabsProps> = ({
   tabs,
   activeTab,
   defaultActiveTab,
@@ -31,19 +31,20 @@ export const Tabs= ({
   onTabClose,
   addable = false,
   onTabAdd,
-  // TODO= false,
+  // TODO: Implement draggable functionality in future version
+  // draggable = false,
   // onTabsReorder,
   className = '',
-  'data-testid'= 'tabs',
+  'data-testid': testId = 'tabs',
 }) => {
   const [internalActiveTab, setInternalActiveTab] = useState<string>(
-    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id )
+    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
   );
 
   // Use controlled or uncontrolled active tab
-  const currentActiveTab = activeTab !== undefined ? activeTab ;
+  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
 
-  const handleTabChange = useCallback((tabId) => {
+  const handleTabChange = useCallback((tabId: string) => {
     if (disabled || loading) return;
     
     if (activeTab === undefined) {
@@ -55,7 +56,7 @@ export const Tabs= ({
     }
   }, [activeTab, onTabChange, disabled, loading]);
 
-  const handleTabClose = useCallback((tabId, event) => {
+  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
     event.stopPropagation();
     if (onTabClose) {
       onTabClose(tabId);
@@ -75,23 +76,31 @@ export const Tabs= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'tabs__item--small';
+      case 'lg':
+        return 'tabs__item--large';
+      default: // md
+        return 'tabs__item--medium';
     }
   };
 
-  const getVariantClasses = (isActive, isDisabled) => {
+  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
     if (isDisabled) {
       return 'tabs__item--disabled';
     }
 
     switch (variant) {
-      case 'pills';
-      case 'underline';
-      case 'cards';
-      case 'minimal';
-      default;
+      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';
     }
   };
 
@@ -113,7 +122,7 @@ export const Tabs= ({
     return baseClasses;
   };
 
-  const getTabClasses = (tab) => {
+  const getTabClasses = (tab: TabItem) => {
     const isActive = tab.id === currentActiveTab;
     const isDisabled = tab.disabled || disabled;
     
@@ -135,7 +144,7 @@ export const Tabs= ({
   }
 
   return (
-    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' } ${className}`} data-testid={testId}>
+    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
       {/* Tab List */}
       <div className={getTabListClasses()}>
         {tabs.map((tab) => (
@@ -177,7 +186,7 @@ export const Tabs= ({
 
       {/* Tab Panels */}
       <div
-        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' }`}
+        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
         role="tabpanel"
         aria-labelledby={`tab-${currentActiveTab}`}
       >
@@ -185,7 +194,9 @@ export const Tabs= ({
           <div className="tabs__loading">
             <div className="tabs__loading-spinner"></div>
           </div>
-        ) )}
+        ) : (
+          currentTabContent
+        )}
       </div>
     </div>
   );

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

@@ -9,13 +9,13 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 import { TabsProps, TabItem } from './types';
 
 // Simple icon components
-const PlusIcon}> = ({ className = '' }) => (
+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= ({
+export const Tabs: React.FC<TabsProps> = ({
   tabs,
   activeTab,
   defaultActiveTab,
@@ -31,19 +31,20 @@ export const Tabs= ({
   onTabClose,
   addable = false,
   onTabAdd,
-  // TODO= false,
+  // TODO: Implement draggable functionality in future version
+  // draggable = false,
   // onTabsReorder,
   className = '',
-  'data-testid'= 'tabs',
+  'data-testid': testId = 'tabs',
 }) => {
   const [internalActiveTab, setInternalActiveTab] = useState<string>(
-    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id )
+    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
   );
 
   // Use controlled or uncontrolled active tab
-  const currentActiveTab = activeTab !== undefined ? activeTab ;
+  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
 
-  const handleTabChange = useCallback((tabId) => {
+  const handleTabChange = useCallback((tabId: string) => {
     if (disabled || loading) return;
     
     if (activeTab === undefined) {
@@ -55,7 +56,7 @@ export const Tabs= ({
     }
   }, [activeTab, onTabChange, disabled, loading]);
 
-  const handleTabClose = useCallback((tabId, event) => {
+  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
     event.stopPropagation();
     if (onTabClose) {
       onTabClose(tabId);
@@ -75,23 +76,31 @@ export const Tabs= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'tabs__item--small';
+      case 'lg':
+        return 'tabs__item--large';
+      default: // md
+        return 'tabs__item--medium';
     }
   };
 
-  const getVariantClasses = (isActive, isDisabled) => {
+  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
     if (isDisabled) {
       return 'tabs__item--disabled';
     }
 
     switch (variant) {
-      case 'pills';
-      case 'underline';
-      case 'cards';
-      case 'minimal';
-      default;
+      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';
     }
   };
 
@@ -113,7 +122,7 @@ export const Tabs= ({
     return baseClasses;
   };
 
-  const getTabClasses = (tab) => {
+  const getTabClasses = (tab: TabItem) => {
     const isActive = tab.id === currentActiveTab;
     const isDisabled = tab.disabled || disabled;
     
@@ -135,7 +144,7 @@ export const Tabs= ({
   }
 
   return (
-    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' } ${className}`} data-testid={testId}>
+    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
       {/* Tab List */}
       <div className={getTabListClasses()}>
         {tabs.map((tab) => (
@@ -177,7 +186,7 @@ export const Tabs= ({
 
       {/* Tab Panels */}
       <div
-        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' }`}
+        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
         role="tabpanel"
         aria-labelledby={`tab-${currentActiveTab}`}
       >
@@ -185,7 +194,9 @@ export const Tabs= ({
           <div className="tabs__loading">
             <div className="tabs__loading-spinner"></div>
           </div>
-        ) )}
+        ) : (
+          currentTabContent
+        )}
       </div>
     </div>
   );