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

package/dist/components/ui/navigation/progressive-navigation.js

@@ -0,0 +1,145 @@
+/**
+ * Progressive Navigation Component
+ * Implements Phase 2 progressive navigation patterns as defined in the implementation plan
+ *
+ * Navigation Patterns:
+ * - mobile (xs-sm): hamburger menu pattern with 56px height
+ * - tablet (md): horizontal-compact pattern with 64px height
+ * - desktop (lg+): horizontal-full pattern with 72px height
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+// Simple icon components for navigation
+const HamburgerIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }));
+const XMarkIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+const ChevronDownIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
+export const ProgressiveNavigation = ({ items = [], groups = [], logo, logoHref, hamburgerHeight = '56px', mobileLogoSize = 'sm', mobileTouchTarget = '48px', tabletHeight = '64px', tabletLogoSize = 'md', desktopHeight = '72px', desktopLogoSize = 'lg', showSecondaryActions = true, secondaryActions = [], mobileBreakpoint = '640px', tabletBreakpoint = '768px', // Currently unused - reserved for future tablet sub-patterns
+desktopBreakpoint = '1024px', onItemClick, onLogoClick, 'aria-label': ariaLabel = 'Main navigation', 'data-testid': testId = 'progressive-navigation', className = '', }) => {
+    // Suppress unused variable warning for tabletBreakpoint (reserved for future use)
+    void tabletBreakpoint;
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const [activeDropdown, setActiveDropdown] = useState(null);
+    const [screenSize, setScreenSize] = useState('desktop');
+    const navRef = useRef(null);
+    // Determine current screen size based on configurable breakpoints
+    // Default: mobile < 640px, tablet 640-1023px, desktop >= 1024px
+    // This ensures sm range (640-767px) uses tablet-compact pattern, not hamburger
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+            if (width < parseInt(mobileBreakpoint)) {
+                setScreenSize('mobile'); // < 640px: hamburger menu
+            }
+            else if (width < parseInt(desktopBreakpoint)) {
+                setScreenSize('tablet'); // 640-1023px: horizontal-compact
+            }
+            else {
+                setScreenSize('desktop'); // >= 1024px: horizontal-full
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [mobileBreakpoint, desktopBreakpoint]);
+    // Close mobile menu on escape key
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isMobileMenuOpen) {
+                setIsMobileMenuOpen(false);
+            }
+        };
+        if (isMobileMenuOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isMobileMenuOpen]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close mobile menu after item click
+        if (screenSize === 'mobile') {
+            setIsMobileMenuOpen(false);
+        }
+        // Close dropdown if open
+        setActiveDropdown(null);
+    }, [onItemClick, screenSize]);
+    const handleDropdownToggle = useCallback((groupId) => {
+        setActiveDropdown(activeDropdown === groupId ? null : groupId);
+    }, [activeDropdown]);
+    const handleLogoClick = useCallback(() => {
+        if (onLogoClick) {
+            onLogoClick();
+        }
+    }, [onLogoClick]);
+    const getNavigationHeight = () => {
+        switch (screenSize) {
+            case 'mobile':
+                return hamburgerHeight;
+            case 'tablet':
+                return tabletHeight;
+            case 'desktop':
+                return desktopHeight;
+            default:
+                return desktopHeight;
+        }
+    };
+    const getLogoSize = () => {
+        switch (screenSize) {
+            case 'mobile':
+                return mobileLogoSize;
+            case 'tablet':
+                return tabletLogoSize;
+            case 'desktop':
+                return desktopLogoSize;
+            default:
+                return desktopLogoSize;
+        }
+    };
+    const renderLogo = () => {
+        const logoContent = (_jsx("div", { className: `progressive-nav__logo progressive-nav__logo--${getLogoSize()}`, children: logo }));
+        if (logoHref) {
+            return (_jsx("a", { href: logoHref, className: "progressive-nav__logo-link", onClick: handleLogoClick, children: logoContent }));
+        }
+        return logoContent;
+    };
+    const renderNavigationItems = () => {
+        const allItems = groups.length > 0
+            ? groups.flatMap(group => group.items)
+            : items;
+        return allItems.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `progressive-nav__item ${item.active ? 'progressive-nav__item--active' : ''} ${item.disabled ? 'progressive-nav__item--disabled' : ''}`, children: [item.icon && (_jsx("span", { className: "progressive-nav__item-icon", children: item.icon })), _jsx("span", { className: "progressive-nav__item-label", children: item.label }), item.badge && (_jsx("span", { className: "progressive-nav__item-badge", children: item.badge }))] }, item.id)));
+    };
+    const renderDropdownItems = (groupItems) => {
+        return groupItems.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `progressive-nav__dropdown-item ${item.active ? 'progressive-nav__dropdown-item--active' : ''} ${item.disabled ? 'progressive-nav__dropdown-item--disabled' : ''}`, children: [item.icon && (_jsx("span", { className: "progressive-nav__dropdown-item-icon", children: item.icon })), _jsx("span", { className: "progressive-nav__dropdown-item-label", children: item.label }), item.badge && (_jsx("span", { className: "progressive-nav__dropdown-item-badge", children: item.badge }))] }, item.id)));
+    };
+    const renderNavigationGroups = () => {
+        return groups.map((group) => (_jsxs("div", { className: "progressive-nav__group", children: [_jsxs("button", { onClick: () => handleDropdownToggle(group.id), className: `progressive-nav__group-trigger ${activeDropdown === group.id ? 'progressive-nav__group-trigger--active' : ''}`, children: [_jsx("span", { className: "progressive-nav__group-title", children: group.title }), _jsx(ChevronDownIcon, { className: `progressive-nav__group-arrow ${activeDropdown === group.id ? 'progressive-nav__group-arrow--expanded' : ''}` })] }), activeDropdown === group.id && (_jsx("div", { className: "progressive-nav__dropdown", children: renderDropdownItems(group.items) }))] }, group.id)));
+    };
+    const renderSecondaryActions = () => {
+        if (!showSecondaryActions || !secondaryActions.length)
+            return null;
+        return (_jsx("div", { className: "progressive-nav__secondary-actions", children: secondaryActions.map((action, index) => (_jsx("div", { className: "progressive-nav__secondary-action", children: action }, index))) }));
+    };
+    // Mobile hamburger menu pattern
+    if (screenSize === 'mobile') {
+        return (_jsx("nav", { ref: navRef, className: `progressive-nav progressive-nav--mobile ${className}`, style: { height: getNavigationHeight() }, "aria-label": ariaLabel, "data-testid": testId, children: _jsxs("div", { className: "progressive-nav__mobile-container", children: [_jsxs("div", { className: "progressive-nav__mobile-header", children: [renderLogo(), _jsx("button", { onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), className: "progressive-nav__mobile-toggle", style: {
+                                    minHeight: mobileTouchTarget,
+                                    minWidth: mobileTouchTarget
+                                }, "aria-label": isMobileMenuOpen ? 'Close menu' : 'Open menu', "aria-expanded": isMobileMenuOpen, children: isMobileMenuOpen ? (_jsx(XMarkIcon, { className: "progressive-nav__mobile-toggle-icon" })) : (_jsx(HamburgerIcon, { className: "progressive-nav__mobile-toggle-icon" })) })] }), isMobileMenuOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "progressive-nav__mobile-overlay", onClick: () => setIsMobileMenuOpen(false) }), _jsx("div", { className: "progressive-nav__mobile-menu", children: _jsx("div", { className: "progressive-nav__mobile-content", children: groups.length > 0 ? (_jsx("div", { className: "progressive-nav__mobile-groups", children: groups.map((group) => (_jsxs("div", { className: "progressive-nav__mobile-group", children: [group.title && (_jsx("div", { className: "progressive-nav__mobile-group-title", children: group.title })), _jsx("div", { className: "progressive-nav__mobile-group-items", children: group.items.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `progressive-nav__mobile-item ${item.active ? 'progressive-nav__mobile-item--active' : ''} ${item.disabled ? 'progressive-nav__mobile-item--disabled' : ''}`, children: [item.icon && (_jsx("span", { className: "progressive-nav__mobile-item-icon", children: item.icon })), _jsx("span", { className: "progressive-nav__mobile-item-label", children: item.label }), item.badge && (_jsx("span", { className: "progressive-nav__mobile-item-badge", children: item.badge }))] }, item.id))) })] }, group.id))) })) : (_jsx("div", { className: "progressive-nav__mobile-items", children: renderNavigationItems() })) }) })] }))] }) }));
+    }
+    // Tablet horizontal-compact pattern
+    if (screenSize === 'tablet') {
+        return (_jsx("nav", { ref: navRef, className: `progressive-nav progressive-nav--tablet ${className}`, style: { height: getNavigationHeight() }, "aria-label": ariaLabel, "data-testid": testId, children: _jsxs("div", { className: "progressive-nav__tablet-container", children: [renderLogo(), _jsx("div", { className: "progressive-nav__tablet-content", children: groups.length > 0 ? renderNavigationGroups() : (_jsx("div", { className: "progressive-nav__tablet-items", children: renderNavigationItems() })) })] }) }));
+    }
+    // Desktop horizontal-full pattern
+    return (_jsx("nav", { ref: navRef, className: `progressive-nav progressive-nav--desktop ${className}`, style: { height: getNavigationHeight() }, "aria-label": ariaLabel, "data-testid": testId, children: _jsxs("div", { className: "progressive-nav__desktop-container", children: [renderLogo(), _jsx("div", { className: "progressive-nav__desktop-content", children: groups.length > 0 ? renderNavigationGroups() : (_jsx("div", { className: "progressive-nav__desktop-items", children: renderNavigationItems() })) }), renderSecondaryActions()] }) }));
+};
+export default ProgressiveNavigation;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/sidebar.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAmC,MAAM,YAAY,CAAC;AAsB3E,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+V1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,176 @@
+/**
+ * Sidebar Component
+ * Provides comprehensive sidebar functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+// Simple icon components
+const ChevronLeftIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }));
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+// TODO: Implement close icon functionality in future version
+// const XMarkIcon: 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="M6 18L18 6M6 6l12 12" />
+//   </svg>
+// );
+export const Sidebar = ({ items = [], groups = [], variant = 'default', size = 'md', position = 'left', collapsed = false, defaultCollapsed = false, onCollapseChange, collapsible = true, showToggle = true, toggleIcon, header, footer, overlay = false, overlayCloseOnClick = true, overlayCloseOnEscape = true, overlayCloseOnOutsideClick = true, responsive = true, breakpoint = 'lg', onItemClick, onGroupToggle, expandedGroups = [], defaultExpandedGroups = [], 
+// TODO: Implement group icons in future version
+// showGroupIcons = true,
+showItemIcons = true, showItemBadges = true, showItemDescriptions = true, sticky = false, zIndex = 1000, className = '', 'data-testid': testId = 'sidebar', }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState(collapsed !== undefined ? collapsed : defaultCollapsed);
+    const [internalExpandedGroups, setInternalExpandedGroups] = useState(expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const sidebarRef = useRef(null);
+    // Use controlled or uncontrolled collapsed state
+    const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
+    const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
+    // Handle responsive behavior
+    useEffect(() => {
+        const handleResize = () => {
+            const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
+            setIsMobile(window.innerWidth < breakpointWidth);
+        };
+        if (responsive) {
+            handleResize();
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            if (responsive) {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, [responsive, breakpoint]);
+    // Handle escape key for overlay
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
+                setIsOverlayOpen(false);
+            }
+        };
+        if (isOverlayOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOverlayOpen, overlayCloseOnEscape]);
+    const handleCollapseToggle = useCallback(() => {
+        if (!collapsible)
+            return;
+        const newCollapsed = !currentCollapsed;
+        if (collapsed === undefined) {
+            setInternalCollapsed(newCollapsed);
+        }
+        if (onCollapseChange) {
+            onCollapseChange(newCollapsed);
+        }
+    }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
+    const handleGroupToggle = useCallback((groupId) => {
+        const newExpandedGroups = currentExpandedGroups.includes(groupId)
+            ? currentExpandedGroups.filter(id => id !== groupId)
+            : [...currentExpandedGroups, groupId];
+        if (expandedGroups === undefined) {
+            setInternalExpandedGroups(newExpandedGroups);
+        }
+        if (onGroupToggle) {
+            onGroupToggle(groupId, newExpandedGroups.includes(groupId));
+        }
+    }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close overlay on mobile after item click
+        if (isMobile && overlay && overlayCloseOnClick) {
+            setIsOverlayOpen(false);
+        }
+    }, [onItemClick, isMobile, overlay, overlayCloseOnClick]);
+    const handleOverlayClose = useCallback(() => {
+        setIsOverlayOpen(false);
+    }, []);
+    const getSizeClasses = () => {
+        if (currentCollapsed)
+            return 'sidebar--collapsed';
+        switch (size) {
+            case 'sm':
+                return 'sidebar--size-sm';
+            case 'lg':
+                return 'sidebar--size-lg';
+            case 'xl':
+                return 'sidebar--size-xl';
+            default: // md
+                return 'sidebar--size-md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'collapsible':
+                return 'sidebar--collapsible';
+            case 'overlay':
+                return 'sidebar--overlay';
+            case 'drawer':
+                return 'sidebar--drawer';
+            default: // default
+                return 'sidebar--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'sidebar sidebar--stan-design';
+    };
+    const getPositionClasses = () => {
+        if (variant === 'overlay' || variant === 'drawer') {
+            return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
+        }
+        return '';
+    };
+    const getTransformClasses = () => {
+        if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
+            if (position === 'right') {
+                return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
+            }
+            return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
+        }
+        return '';
+    };
+    const getItemClasses = (item) => {
+        let classes = `sidebar__item ${currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'}`;
+        if (item.disabled) {
+            classes += ' sidebar__item--disabled';
+        }
+        else if (item.active) {
+            classes += ' sidebar__item--active';
+        }
+        else {
+            classes += ' sidebar__item--default';
+        }
+        return classes;
+    };
+    const getGroupClasses = (groupId) => {
+        const isExpanded = currentExpandedGroups.includes(groupId);
+        let classes = 'sidebar__group';
+        if (isExpanded) {
+            classes += ' sidebar__group--expanded';
+        }
+        else {
+            classes += ' sidebar__group--collapsed';
+        }
+        return classes;
+    };
+    const renderMenuItem = (item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: getItemClasses(item), title: currentCollapsed ? item.label : undefined, children: [showItemIcons && item.icon && (_jsx("span", { className: `sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`, children: item.icon })), !currentCollapsed && (_jsxs("div", { className: "sidebar__item-content", children: [_jsx("div", { className: "sidebar__item-label", children: item.label }), showItemDescriptions && item.description && (_jsx("div", { className: "sidebar__item-description", children: item.description }))] })), !currentCollapsed && showItemBadges && item.badge && (_jsx("span", { className: "sidebar__item-badge", children: item.badge }))] }, item.id));
+    const renderMenuGroup = (group) => (_jsxs("div", { children: [_jsx("button", { onClick: () => handleGroupToggle(group.id), className: getGroupClasses(group.id), title: currentCollapsed ? group.title : undefined, children: !currentCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { className: "sidebar__group-title", children: group.title }), _jsx(ChevronRightIcon, { className: `sidebar__group-arrow ${currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''}` })] })) }), !currentCollapsed && currentExpandedGroups.includes(group.id) && (_jsx("div", { className: "sidebar__group-items", children: group.items.map(renderMenuItem) }))] }, group.id));
+    const sidebarContent = (_jsxs("div", { ref: sidebarRef, className: `${getSizeClasses()} ${getVariantClasses()} ${getThemeClasses()} ${getPositionClasses()} ${getTransformClasses()} ${className}`, "data-testid": testId, style: { zIndex }, children: [header && (_jsx("div", { className: "sidebar__header", children: header })), showToggle && collapsible && (_jsx("div", { className: "sidebar__toggle-container", children: _jsx("button", { onClick: handleCollapseToggle, className: "sidebar__toggle-button", "aria-label": currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: toggleIcon || (currentCollapsed ? _jsx(ChevronRightIcon, { className: "sidebar__toggle-icon" }) : _jsx(ChevronLeftIcon, { className: "sidebar__toggle-icon" })) }) })), _jsx("nav", { className: "sidebar__navigation", children: groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem) }), footer && (_jsx("div", { className: "sidebar__footer", children: footer }))] }));
+    // Mobile overlay
+    if (isMobile && overlay) {
+        return (_jsxs(_Fragment, { children: [isOverlayOpen && (_jsx("div", { className: "sidebar__overlay-backdrop", onClick: overlayCloseOnOutsideClick ? handleOverlayClose : undefined })), sidebarContent, _jsx("button", { onClick: () => setIsOverlayOpen(!isOverlayOpen), className: "sidebar__mobile-toggle", "aria-label": "Toggle sidebar", children: _jsx("svg", { className: "sidebar__mobile-toggle-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16M4 18h16" }) }) })] }));
+    }
+    // Desktop sidebar
+    return (_jsx("div", { className: `sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`, children: sidebarContent }));
+};
+export default Sidebar;

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

@@ -0,0 +1,176 @@
+/**
+ * Sidebar Component
+ * Provides comprehensive sidebar functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+// Simple icon components
+const ChevronLeftIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }));
+const ChevronRightIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+// TODO: Implement close icon functionality in future version
+// const XMarkIcon: 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="M6 18L18 6M6 6l12 12" />
+//   </svg>
+// );
+export const Sidebar = ({ items = [], groups = [], variant = 'default', size = 'md', position = 'left', collapsed = false, defaultCollapsed = false, onCollapseChange, collapsible = true, showToggle = true, toggleIcon, header, footer, overlay = false, overlayCloseOnClick = true, overlayCloseOnEscape = true, overlayCloseOnOutsideClick = true, responsive = true, breakpoint = 'lg', onItemClick, onGroupToggle, expandedGroups = [], defaultExpandedGroups = [], 
+// TODO: Implement group icons in future version
+// showGroupIcons = true,
+showItemIcons = true, showItemBadges = true, showItemDescriptions = true, sticky = false, zIndex = 1000, className = '', 'data-testid': testId = 'sidebar', }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState(collapsed !== undefined ? collapsed : defaultCollapsed);
+    const [internalExpandedGroups, setInternalExpandedGroups] = useState(expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const sidebarRef = useRef(null);
+    // Use controlled or uncontrolled collapsed state
+    const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
+    const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
+    // Handle responsive behavior
+    useEffect(() => {
+        const handleResize = () => {
+            const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
+            setIsMobile(window.innerWidth < breakpointWidth);
+        };
+        if (responsive) {
+            handleResize();
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            if (responsive) {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, [responsive, breakpoint]);
+    // Handle escape key for overlay
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
+                setIsOverlayOpen(false);
+            }
+        };
+        if (isOverlayOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOverlayOpen, overlayCloseOnEscape]);
+    const handleCollapseToggle = useCallback(() => {
+        if (!collapsible)
+            return;
+        const newCollapsed = !currentCollapsed;
+        if (collapsed === undefined) {
+            setInternalCollapsed(newCollapsed);
+        }
+        if (onCollapseChange) {
+            onCollapseChange(newCollapsed);
+        }
+    }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
+    const handleGroupToggle = useCallback((groupId) => {
+        const newExpandedGroups = currentExpandedGroups.includes(groupId)
+            ? currentExpandedGroups.filter(id => id !== groupId)
+            : [...currentExpandedGroups, groupId];
+        if (expandedGroups === undefined) {
+            setInternalExpandedGroups(newExpandedGroups);
+        }
+        if (onGroupToggle) {
+            onGroupToggle(groupId, newExpandedGroups.includes(groupId));
+        }
+    }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close overlay on mobile after item click
+        if (isMobile && overlay && overlayCloseOnClick) {
+            setIsOverlayOpen(false);
+        }
+    }, [onItemClick, isMobile, overlay, overlayCloseOnClick]);
+    const handleOverlayClose = useCallback(() => {
+        setIsOverlayOpen(false);
+    }, []);
+    const getSizeClasses = () => {
+        if (currentCollapsed)
+            return 'sidebar--collapsed';
+        switch (size) {
+            case 'sm':
+                return 'sidebar--size-sm';
+            case 'lg':
+                return 'sidebar--size-lg';
+            case 'xl':
+                return 'sidebar--size-xl';
+            default: // md
+                return 'sidebar--size-md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'collapsible':
+                return 'sidebar--collapsible';
+            case 'overlay':
+                return 'sidebar--overlay';
+            case 'drawer':
+                return 'sidebar--drawer';
+            default: // default
+                return 'sidebar--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'sidebar sidebar--stan-design';
+    };
+    const getPositionClasses = () => {
+        if (variant === 'overlay' || variant === 'drawer') {
+            return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
+        }
+        return '';
+    };
+    const getTransformClasses = () => {
+        if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
+            if (position === 'right') {
+                return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
+            }
+            return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
+        }
+        return '';
+    };
+    const getItemClasses = (item) => {
+        let classes = `sidebar__item ${currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'}`;
+        if (item.disabled) {
+            classes += ' sidebar__item--disabled';
+        }
+        else if (item.active) {
+            classes += ' sidebar__item--active';
+        }
+        else {
+            classes += ' sidebar__item--default';
+        }
+        return classes;
+    };
+    const getGroupClasses = (groupId) => {
+        const isExpanded = currentExpandedGroups.includes(groupId);
+        let classes = 'sidebar__group';
+        if (isExpanded) {
+            classes += ' sidebar__group--expanded';
+        }
+        else {
+            classes += ' sidebar__group--collapsed';
+        }
+        return classes;
+    };
+    const renderMenuItem = (item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: getItemClasses(item), title: currentCollapsed ? item.label : undefined, children: [showItemIcons && item.icon && (_jsx("span", { className: `sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`, children: item.icon })), !currentCollapsed && (_jsxs("div", { className: "sidebar__item-content", children: [_jsx("div", { className: "sidebar__item-label", children: item.label }), showItemDescriptions && item.description && (_jsx("div", { className: "sidebar__item-description", children: item.description }))] })), !currentCollapsed && showItemBadges && item.badge && (_jsx("span", { className: "sidebar__item-badge", children: item.badge }))] }, item.id));
+    const renderMenuGroup = (group) => (_jsxs("div", { children: [_jsx("button", { onClick: () => handleGroupToggle(group.id), className: getGroupClasses(group.id), title: currentCollapsed ? group.title : undefined, children: !currentCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { className: "sidebar__group-title", children: group.title }), _jsx(ChevronRightIcon, { className: `sidebar__group-arrow ${currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''}` })] })) }), !currentCollapsed && currentExpandedGroups.includes(group.id) && (_jsx("div", { className: "sidebar__group-items", children: group.items.map(renderMenuItem) }))] }, group.id));
+    const sidebarContent = (_jsxs("div", { ref: sidebarRef, className: `${getSizeClasses()} ${getVariantClasses()} ${getThemeClasses()} ${getPositionClasses()} ${getTransformClasses()} ${className}`, "data-testid": testId, style: { zIndex }, children: [header && (_jsx("div", { className: "sidebar__header", children: header })), showToggle && collapsible && (_jsx("div", { className: "sidebar__toggle-container", children: _jsx("button", { onClick: handleCollapseToggle, className: "sidebar__toggle-button", "aria-label": currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: toggleIcon || (currentCollapsed ? _jsx(ChevronRightIcon, { className: "sidebar__toggle-icon" }) : _jsx(ChevronLeftIcon, { className: "sidebar__toggle-icon" })) }) })), _jsx("nav", { className: "sidebar__navigation", children: groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem) }), footer && (_jsx("div", { className: "sidebar__footer", children: footer }))] }));
+    // Mobile overlay
+    if (isMobile && overlay) {
+        return (_jsxs(_Fragment, { children: [isOverlayOpen && (_jsx("div", { className: "sidebar__overlay-backdrop", onClick: overlayCloseOnOutsideClick ? handleOverlayClose : undefined })), sidebarContent, _jsx("button", { onClick: () => setIsOverlayOpen(!isOverlayOpen), className: "sidebar__mobile-toggle", "aria-label": "Toggle sidebar", children: _jsx("svg", { className: "sidebar__mobile-toggle-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16M4 18h16" }) }) })] }));
+    }
+    // Desktop sidebar
+    return (_jsx("div", { className: `sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`, children: sidebarContent }));
+};
+export default Sidebar;

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

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

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

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