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

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

@@ -0,0 +1,144 @@
+/**
+ * Stepper Component
+ * Provides comprehensive stepper functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+// Simple icon components
+const ExclamationCircleIcon = ({ 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+export const Stepper = ({ steps, currentStep = 0, defaultCurrentStep = 0, onStepChange, variant = 'default', size = 'md', showStepNumbers = true, showStepLabels = true, showStepDescriptions = true, showStepIcons = true, allowStepClick = true, allowStepNavigation = true, showProgress = true, 
+// TODO: Implement step status display in future version
+// showStepStatus = true,
+onStepComplete, onStepError, onFinish, onCancel, className = '', 'data-testid': testId = 'stepper', }) => {
+    const [internalCurrentStep, setInternalCurrentStep] = useState(currentStep !== undefined ? currentStep : defaultCurrentStep);
+    // Use controlled or uncontrolled current step
+    const currentStepIndex = currentStep !== undefined ? currentStep : internalCurrentStep;
+    const handleStepClick = useCallback((stepIndex) => {
+        if (!allowStepClick || !allowStepNavigation)
+            return;
+        const step = steps[stepIndex];
+        if (step.disabled)
+            return;
+        if (currentStep === undefined) {
+            setInternalCurrentStep(stepIndex);
+        }
+        if (onStepChange) {
+            onStepChange(stepIndex);
+        }
+    }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
+    const handleStepComplete = useCallback(async (stepIndex) => {
+        const step = steps[stepIndex];
+        if (!step.validation)
+            return;
+        try {
+            const isValid = await step.validation();
+            if (isValid) {
+                if (onStepComplete) {
+                    onStepComplete(stepIndex);
+                }
+                // Move to next step if available
+                if (stepIndex < steps.length - 1) {
+                    handleStepClick(stepIndex + 1);
+                }
+                else if (onFinish) {
+                    onFinish();
+                }
+            }
+        }
+        catch (error) {
+            if (onStepError) {
+                onStepError(stepIndex);
+            }
+        }
+    }, [steps, onStepComplete, onStepError, onFinish, handleStepClick]);
+    const handleFinish = useCallback(() => {
+        if (onFinish) {
+            onFinish();
+        }
+    }, [onFinish]);
+    const handleCancel = useCallback(() => {
+        if (onCancel) {
+            onCancel();
+        }
+    }, [onCancel]);
+    // Calculate progress percentage
+    const progressPercentage = useMemo(() => {
+        return ((currentStepIndex + 1) / steps.length) * 100;
+    }, [currentStepIndex, steps.length]);
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'stepper--size-sm';
+            case 'lg':
+                return 'stepper--size-lg';
+            default: // md
+                return 'stepper--size-md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'vertical':
+                return 'stepper--vertical';
+            case 'horizontal':
+                return 'stepper--horizontal';
+            case 'wizard':
+                return 'stepper--wizard';
+            default:
+                return 'stepper--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'stepper stepper--stan-design';
+    };
+    const getStepStatusIcon = (step, stepIndex) => {
+        if (!showStepIcons)
+            return null;
+        if (step.status === 'completed') {
+            return _jsx(CheckIcon, { className: "stepper__step-icon stepper__step-icon--completed" });
+        }
+        if (step.status === 'error') {
+            return _jsx(ExclamationCircleIcon, { className: "stepper__step-icon stepper__step-icon--error" });
+        }
+        if (step.status === 'warning') {
+            return _jsx(ExclamationTriangleIcon, { className: "stepper__step-icon stepper__step-icon--warning" });
+        }
+        if (stepIndex === currentStepIndex) {
+            return _jsx("div", { className: "stepper__step-number stepper__step-number--current", children: stepIndex + 1 });
+        }
+        if (showStepNumbers) {
+            return _jsx("div", { className: "stepper__step-number stepper__step-number--default", children: stepIndex + 1 });
+        }
+        return null;
+    };
+    const getStepClasses = (step, stepIndex) => {
+        let classes = 'stepper__step';
+        if (step.disabled) {
+            classes += ' stepper__step--disabled';
+        }
+        else if (stepIndex === currentStepIndex) {
+            classes += ' stepper__step--current';
+        }
+        else if (step.status === 'completed') {
+            classes += ' stepper__step--completed';
+        }
+        else if (step.status === 'error') {
+            classes += ' stepper__step--error';
+        }
+        else if (step.status === 'warning') {
+            classes += ' stepper__step--warning';
+        }
+        else {
+            classes += ' stepper__step--default';
+        }
+        return classes;
+    };
+    if (steps.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: `stepper__container ${getThemeClasses()} ${getSizeClasses()} ${className}`, "data-testid": testId, children: [showProgress && (_jsxs("div", { className: "stepper__progress", children: [_jsxs("div", { className: "stepper__progress-header", children: [_jsx("span", { className: "stepper__progress-label", children: "Progress" }), _jsxs("span", { className: "stepper__progress-percentage", children: [Math.round(progressPercentage), "%"] })] }), _jsx("div", { className: "stepper__progress-track", children: _jsx("div", { className: "stepper__progress-bar", style: {
+                                width: `${progressPercentage}%`
+                            } }) })] })), _jsx("div", { className: `stepper__steps ${getVariantClasses()}`, children: steps.map((step, stepIndex) => (_jsxs("div", { className: `stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' : ''}`, children: [_jsxs("div", { className: `${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' : ''}`, onClick: () => handleStepClick(stepIndex), children: [getStepStatusIcon(step, stepIndex), _jsxs("div", { className: `stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' : ''}`, children: [showStepLabels && (_jsxs("div", { className: "stepper__step-label", children: [step.label, step.required && _jsx("span", { className: "stepper__step-required", children: "*" })] })), showStepDescriptions && step.description && (_jsx("div", { className: "stepper__step-description", children: step.description }))] })] }), variant === 'wizard' && stepIndex === currentStepIndex && step.content && (_jsxs("div", { className: "stepper__step-panel", children: [step.content, step.actions && (_jsx("div", { className: "stepper__step-actions", children: step.actions.map((action, actionIndex) => (_jsx("button", { onClick: action.onClick, disabled: action.disabled, className: `stepper__action stepper__action--${action.variant || 'default'}`, children: action.loading ? 'Loading...' : action.label }, actionIndex))) }))] }))] }, step.id))) }), _jsxs("div", { className: "stepper__navigation", children: [_jsx("button", { onClick: handleCancel, className: "stepper__nav-button stepper__nav-button--cancel", children: "Cancel" }), _jsxs("div", { className: "stepper__nav-actions", children: [currentStepIndex > 0 && (_jsx("button", { onClick: () => handleStepClick(currentStepIndex - 1), className: "stepper__nav-button stepper__nav-button--previous", children: "Previous" })), currentStepIndex < steps.length - 1 && !steps.slice(currentStepIndex + 1).every(step => step.disabled) ? (_jsx("button", { onClick: () => handleStepComplete(currentStepIndex), className: "stepper__nav-button stepper__nav-button--next", children: "Next" })) : (_jsx("button", { onClick: handleFinish, className: "stepper__nav-button stepper__nav-button--finish", children: "Finish" }))] })] })] }));
+};
+export default Stepper;

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

@@ -0,0 +1,144 @@
+/**
+ * Stepper Component
+ * Provides comprehensive stepper functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+// Simple icon components
+const ExclamationCircleIcon = ({ 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+export const Stepper = ({ steps, currentStep = 0, defaultCurrentStep = 0, onStepChange, variant = 'default', size = 'md', showStepNumbers = true, showStepLabels = true, showStepDescriptions = true, showStepIcons = true, allowStepClick = true, allowStepNavigation = true, showProgress = true, 
+// TODO: Implement step status display in future version
+// showStepStatus = true,
+onStepComplete, onStepError, onFinish, onCancel, className = '', 'data-testid': testId = 'stepper', }) => {
+    const [internalCurrentStep, setInternalCurrentStep] = useState(currentStep !== undefined ? currentStep : defaultCurrentStep);
+    // Use controlled or uncontrolled current step
+    const currentStepIndex = currentStep !== undefined ? currentStep : internalCurrentStep;
+    const handleStepClick = useCallback((stepIndex) => {
+        if (!allowStepClick || !allowStepNavigation)
+            return;
+        const step = steps[stepIndex];
+        if (step.disabled)
+            return;
+        if (currentStep === undefined) {
+            setInternalCurrentStep(stepIndex);
+        }
+        if (onStepChange) {
+            onStepChange(stepIndex);
+        }
+    }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
+    const handleStepComplete = useCallback(async (stepIndex) => {
+        const step = steps[stepIndex];
+        if (!step.validation)
+            return;
+        try {
+            const isValid = await step.validation();
+            if (isValid) {
+                if (onStepComplete) {
+                    onStepComplete(stepIndex);
+                }
+                // Move to next step if available
+                if (stepIndex < steps.length - 1) {
+                    handleStepClick(stepIndex + 1);
+                }
+                else if (onFinish) {
+                    onFinish();
+                }
+            }
+        }
+        catch (error) {
+            if (onStepError) {
+                onStepError(stepIndex);
+            }
+        }
+    }, [steps, onStepComplete, onStepError, onFinish, handleStepClick]);
+    const handleFinish = useCallback(() => {
+        if (onFinish) {
+            onFinish();
+        }
+    }, [onFinish]);
+    const handleCancel = useCallback(() => {
+        if (onCancel) {
+            onCancel();
+        }
+    }, [onCancel]);
+    // Calculate progress percentage
+    const progressPercentage = useMemo(() => {
+        return ((currentStepIndex + 1) / steps.length) * 100;
+    }, [currentStepIndex, steps.length]);
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'stepper--size-sm';
+            case 'lg':
+                return 'stepper--size-lg';
+            default: // md
+                return 'stepper--size-md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'vertical':
+                return 'stepper--vertical';
+            case 'horizontal':
+                return 'stepper--horizontal';
+            case 'wizard':
+                return 'stepper--wizard';
+            default:
+                return 'stepper--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'stepper stepper--stan-design';
+    };
+    const getStepStatusIcon = (step, stepIndex) => {
+        if (!showStepIcons)
+            return null;
+        if (step.status === 'completed') {
+            return _jsx(CheckIcon, { className: "stepper__step-icon stepper__step-icon--completed" });
+        }
+        if (step.status === 'error') {
+            return _jsx(ExclamationCircleIcon, { className: "stepper__step-icon stepper__step-icon--error" });
+        }
+        if (step.status === 'warning') {
+            return _jsx(ExclamationTriangleIcon, { className: "stepper__step-icon stepper__step-icon--warning" });
+        }
+        if (stepIndex === currentStepIndex) {
+            return _jsx("div", { className: "stepper__step-number stepper__step-number--current", children: stepIndex + 1 });
+        }
+        if (showStepNumbers) {
+            return _jsx("div", { className: "stepper__step-number stepper__step-number--default", children: stepIndex + 1 });
+        }
+        return null;
+    };
+    const getStepClasses = (step, stepIndex) => {
+        let classes = 'stepper__step';
+        if (step.disabled) {
+            classes += ' stepper__step--disabled';
+        }
+        else if (stepIndex === currentStepIndex) {
+            classes += ' stepper__step--current';
+        }
+        else if (step.status === 'completed') {
+            classes += ' stepper__step--completed';
+        }
+        else if (step.status === 'error') {
+            classes += ' stepper__step--error';
+        }
+        else if (step.status === 'warning') {
+            classes += ' stepper__step--warning';
+        }
+        else {
+            classes += ' stepper__step--default';
+        }
+        return classes;
+    };
+    if (steps.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: `stepper__container ${getThemeClasses()} ${getSizeClasses()} ${className}`, "data-testid": testId, children: [showProgress && (_jsxs("div", { className: "stepper__progress", children: [_jsxs("div", { className: "stepper__progress-header", children: [_jsx("span", { className: "stepper__progress-label", children: "Progress" }), _jsxs("span", { className: "stepper__progress-percentage", children: [Math.round(progressPercentage), "%"] })] }), _jsx("div", { className: "stepper__progress-track", children: _jsx("div", { className: "stepper__progress-bar", style: {
+                                width: `${progressPercentage}%`
+                            } }) })] })), _jsx("div", { className: `stepper__steps ${getVariantClasses()}`, children: steps.map((step, stepIndex) => (_jsxs("div", { className: `stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' : ''}`, children: [_jsxs("div", { className: `${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' : ''}`, onClick: () => handleStepClick(stepIndex), children: [getStepStatusIcon(step, stepIndex), _jsxs("div", { className: `stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' : ''}`, children: [showStepLabels && (_jsxs("div", { className: "stepper__step-label", children: [step.label, step.required && _jsx("span", { className: "stepper__step-required", children: "*" })] })), showStepDescriptions && step.description && (_jsx("div", { className: "stepper__step-description", children: step.description }))] })] }), variant === 'wizard' && stepIndex === currentStepIndex && step.content && (_jsxs("div", { className: "stepper__step-panel", children: [step.content, step.actions && (_jsx("div", { className: "stepper__step-actions", children: step.actions.map((action, actionIndex) => (_jsx("button", { onClick: action.onClick, disabled: action.disabled, className: `stepper__action stepper__action--${action.variant || 'default'}`, children: action.loading ? 'Loading...' : action.label }, actionIndex))) }))] }))] }, step.id))) }), _jsxs("div", { className: "stepper__navigation", children: [_jsx("button", { onClick: handleCancel, className: "stepper__nav-button stepper__nav-button--cancel", children: "Cancel" }), _jsxs("div", { className: "stepper__nav-actions", children: [currentStepIndex > 0 && (_jsx("button", { onClick: () => handleStepClick(currentStepIndex - 1), className: "stepper__nav-button stepper__nav-button--previous", children: "Previous" })), currentStepIndex < steps.length - 1 && !steps.slice(currentStepIndex + 1).every(step => step.disabled) ? (_jsx("button", { onClick: () => handleStepComplete(currentStepIndex), className: "stepper__nav-button stepper__nav-button--next", children: "Next" })) : (_jsx("button", { onClick: handleFinish, className: "stepper__nav-button stepper__nav-button--finish", children: "Finish" }))] })] })] }));
+};
+export default Stepper;

package/dist/components/ui/navigation/subscription-badge.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SubscriptionBadge Component
+ * Displays subscription tier with appropriate styling
+ */
+import * as React from 'react';
+import { SubscriptionBadgeProps } from './user-menu-types.js';
+export declare const SubscriptionBadge: React.FC<SubscriptionBadgeProps>;
+export default SubscriptionBadge;
+//# sourceMappingURL=subscription-badge.d.ts.map

package/dist/components/ui/navigation/subscription-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscription-badge.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/subscription-badge.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAwC9D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2D9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/ui/navigation/subscription-badge.esm.js

@@ -0,0 +1,58 @@
+/**
+ * SubscriptionBadge Component
+ * Displays subscription tier with appropriate styling
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../badge.js';
+// Default icons for subscription tiers
+const StarIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", strokeWidth: "0", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }));
+// const CrownIcon = () => (
+//   <svg
+//     width="12"
+//     height="12"
+//     viewBox="0 0 24 24"
+//     fill="currentColor"
+//     strokeWidth="0"
+//   >
+//     <path d="M3 18h18l-2-12-4 6-3-6-3 6-4-6-2 12z"/>
+//   </svg>
+// );
+const DiamondIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", strokeWidth: "0", children: _jsx("path", { d: "M6 3h12l4 6-10 12L2 9l4-6z" }) }));
+export const SubscriptionBadge = ({ subscription, size = 'sm', variant = 'default', showIcon = true, className = '' }) => {
+    const getDefaultIcon = () => {
+        switch (subscription.tier) {
+            case 'pro':
+                return _jsx(StarIcon, {});
+            case 'enterprise':
+                return _jsx(DiamondIcon, {});
+            case 'free':
+            default:
+                return null;
+        }
+    };
+    const getBadgeVariant = () => {
+        switch (subscription.tier) {
+            case 'pro':
+                return 'default';
+            case 'enterprise':
+                return 'secondary';
+            case 'free':
+            default:
+                return 'outline';
+        }
+    };
+    const getSizeClass = () => {
+        switch (size) {
+            case 'sm':
+                return 'subscription-badge--sm';
+            case 'lg':
+                return 'subscription-badge--lg';
+            default: // md
+                return 'subscription-badge--md';
+        }
+    };
+    const icon = subscription.icon || (showIcon ? getDefaultIcon() : null);
+    return (_jsxs(Badge, { variant: variant === 'default' ? getBadgeVariant() : variant, className: `subscription-badge ${getSizeClass()} ${className}`, children: [icon && (_jsx("span", { className: "subscription-badge__icon", children: icon })), _jsx("span", { className: "subscription-badge__label", children: subscription.label })] }));
+};
+export default SubscriptionBadge;

package/dist/components/ui/navigation/subscription-badge.js

@@ -0,0 +1,58 @@
+/**
+ * SubscriptionBadge Component
+ * Displays subscription tier with appropriate styling
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../badge.js';
+// Default icons for subscription tiers
+const StarIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", strokeWidth: "0", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }));
+// const CrownIcon = () => (
+//   <svg
+//     width="12"
+//     height="12"
+//     viewBox="0 0 24 24"
+//     fill="currentColor"
+//     strokeWidth="0"
+//   >
+//     <path d="M3 18h18l-2-12-4 6-3-6-3 6-4-6-2 12z"/>
+//   </svg>
+// );
+const DiamondIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", strokeWidth: "0", children: _jsx("path", { d: "M6 3h12l4 6-10 12L2 9l4-6z" }) }));
+export const SubscriptionBadge = ({ subscription, size = 'sm', variant = 'default', showIcon = true, className = '' }) => {
+    const getDefaultIcon = () => {
+        switch (subscription.tier) {
+            case 'pro':
+                return _jsx(StarIcon, {});
+            case 'enterprise':
+                return _jsx(DiamondIcon, {});
+            case 'free':
+            default:
+                return null;
+        }
+    };
+    const getBadgeVariant = () => {
+        switch (subscription.tier) {
+            case 'pro':
+                return 'default';
+            case 'enterprise':
+                return 'secondary';
+            case 'free':
+            default:
+                return 'outline';
+        }
+    };
+    const getSizeClass = () => {
+        switch (size) {
+            case 'sm':
+                return 'subscription-badge--sm';
+            case 'lg':
+                return 'subscription-badge--lg';
+            default: // md
+                return 'subscription-badge--md';
+        }
+    };
+    const icon = subscription.icon || (showIcon ? getDefaultIcon() : null);
+    return (_jsxs(Badge, { variant: variant === 'default' ? getBadgeVariant() : variant, className: `subscription-badge ${getSizeClass()} ${className}`, children: [icon && (_jsx("span", { className: "subscription-badge__icon", children: icon })), _jsx("span", { className: "subscription-badge__label", children: subscription.label })] }));
+};
+export default SubscriptionBadge;

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

@@ -0,0 +1,9 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+import * as React from 'react';
+import { TabsProps } from './types.js';
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/tabs.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAW,MAAM,YAAY,CAAC;AAShD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyLpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,101 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+// Simple icon components
+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) => {
+        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 (_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

@@ -0,0 +1,101 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+// Simple icon components
+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) => {
+        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 (_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;