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

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

@@ -0,0 +1,192 @@
+/**
+ * Menu Component
+ * Provides comprehensive menu functionality with theme support and multiple variants
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+// Simple icon components
+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" }) }));
+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" }) }));
+const MagnifyingGlassIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+const FunnelIcon = ({ 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 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" }) }));
+export const Menu = ({ items = [], groups, variant = 'dropdown', size = 'md', 
+// TODO: Implement orientation, trigger, showArrow, and fullWidth in future version
+// orientation = 'horizontal',
+// trigger = 'click',
+placement = 'bottom', offset = 8, 
+// showArrow = false,
+// fullWidth = false,
+disabled = false, loading = false, searchable = false, onSearch, filterable = false, onFilter, selectable = false, multiSelect = false, selectedItems = [], onSelectionChange, className = '', 'data-testid': testId = 'menu', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filterValue, setFilterValue] = useState('');
+    const [internalSelectedItems, setInternalSelectedItems] = useState(selectedItems || []);
+    // TODO: Implement group expansion functionality in future version
+    // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Use controlled or uncontrolled selected items
+    const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
+    // Handle click outside to close menu
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target) &&
+                triggerRef.current && !triggerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    // Handle escape key to close menu
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen]);
+    const handleToggle = useCallback(() => {
+        if (disabled || loading)
+            return;
+        setIsOpen(!isOpen);
+    }, [disabled, loading, isOpen]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (selectable) {
+            let newSelectedItems;
+            if (multiSelect) {
+                if (currentSelectedItems.includes(item.id)) {
+                    newSelectedItems = currentSelectedItems.filter(id => id !== item.id);
+                }
+                else {
+                    newSelectedItems = [...currentSelectedItems, item.id];
+                }
+            }
+            else {
+                newSelectedItems = [item.id];
+            }
+            if (selectedItems === undefined) {
+                setInternalSelectedItems(newSelectedItems);
+            }
+            if (onSelectionChange) {
+                onSelectionChange(newSelectedItems);
+            }
+        }
+        if (item.onClick) {
+            item.onClick();
+        }
+        // Close menu for single select or non-selectable menus
+        if (!multiSelect || !selectable) {
+            setIsOpen(false);
+        }
+    }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
+    // TODO: Implement group toggle functionality in future version
+    // const handleGroupToggle = useCallback((groupId: string) => {
+    //   setExpandedGroups(prev => 
+    //     prev.includes(groupId) 
+    //       ? prev.filter(id => id !== groupId)
+    //       : [...prev, groupId]
+    //   );
+    // }, []);
+    const handleSearch = useCallback((query) => {
+        setSearchQuery(query);
+        if (onSearch) {
+            onSearch(query);
+        }
+    }, [onSearch]);
+    const handleFilter = useCallback((filter) => {
+        setFilterValue(filter);
+        if (onFilter) {
+            onFilter(filter);
+        }
+    }, [onFilter]);
+    // Filter items based on search and filter
+    const filteredItems = useMemo(() => {
+        let filtered = items;
+        if (searchQuery) {
+            filtered = filtered.filter(item => item.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                item.description?.toLowerCase().includes(searchQuery.toLowerCase()));
+        }
+        if (filterValue) {
+            filtered = filtered.filter(item => item.label.toLowerCase().includes(filterValue.toLowerCase()));
+        }
+        return filtered;
+    }, [items, searchQuery, filterValue]);
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'sm':
+                return 'menu__trigger--sm';
+            case 'lg':
+                return 'menu__trigger--lg';
+            default: // md
+                return 'menu__trigger--md';
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'dropdown':
+                return 'menu__content--dropdown';
+            case 'context':
+                return 'menu__content--context';
+            case 'command':
+                return 'menu__content--command';
+            default: // default
+                return 'menu__content--default';
+        }
+    };
+    const getThemeClasses = () => {
+        return 'menu menu--stan-design';
+    };
+    const getItemClasses = (item) => {
+        let classes = `menu__item ${getSizeClasses()}`;
+        if (item.disabled) {
+            classes += ' menu__item--disabled';
+        }
+        else if (selectable && currentSelectedItems.includes(item.id)) {
+            classes += ' menu__item--selected';
+        }
+        else {
+            classes += ' menu__item--default';
+        }
+        return classes;
+    };
+    const getPlacementClasses = () => {
+        switch (placement) {
+            case 'top':
+                return 'menu__content--placement-top';
+            case 'bottom':
+                return 'menu__content--placement-bottom';
+            case 'left':
+                return 'menu__content--placement-left';
+            case 'right':
+                return 'menu__content--placement-right';
+            default:
+                return 'menu__content--placement-bottom';
+        }
+    };
+    const renderMenuItem = (item) => (_jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: getItemClasses(item), children: [_jsxs("div", { className: "menu__item-content", children: [item.icon && _jsx("span", { className: "menu__item-icon", children: item.icon }), _jsxs("div", { className: "menu__item-text", children: [_jsx("div", { className: "menu__item-label", children: item.label }), item.description && (_jsx("div", { className: "menu__item-description", children: item.description }))] })] }), item.badge && _jsx("span", { className: "menu__item-badge", children: item.badge }), item.children && item.children.length > 0 && (_jsx(ChevronRightIcon, { className: "menu__item-arrow" }))] }, item.id));
+    const renderMenuGroup = (group) => (_jsxs("div", { className: "menu__group", children: [group.title && (_jsx("div", { className: "menu__group-title", children: group.title })), group.items.map(renderMenuItem)] }, group.id));
+    return (_jsxs("div", { className: `menu__container ${getThemeClasses()}`, "data-testid": testId, children: [_jsxs("button", { ref: triggerRef, onClick: handleToggle, disabled: disabled || loading, className: `menu__trigger ${getSizeClasses()} ${className}`, "aria-expanded": isOpen, "aria-haspopup": "true", children: ["Menu", _jsx(ChevronDownIcon, { className: "menu__trigger-icon" })] }), isOpen && (_jsxs("div", { ref: menuRef, role: "menu", className: `menu__content ${getVariantClasses()} ${getPlacementClasses()}`, style: { marginTop: placement === 'bottom' ? offset : undefined }, children: [searchable && (_jsx("div", { className: "menu__search", children: _jsxs("div", { className: "menu__search-container", children: [_jsx(MagnifyingGlassIcon, { className: "menu__search-icon" }), _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "menu__search-input" })] }) })), filterable && (_jsx("div", { className: "menu__filter", children: _jsxs("div", { className: "menu__filter-container", children: [_jsx(FunnelIcon, { className: "menu__filter-icon" }), _jsxs("select", { value: filterValue, onChange: (e) => handleFilter(e.target.value), className: "menu__filter-select", children: [_jsx("option", { value: "", children: "All" }), _jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "recent", children: "Recent" })] })] }) })), _jsx("div", { className: "menu__items", children: groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem) }), selectable && multiSelect && currentSelectedItems.length > 0 && (_jsx("div", { className: "menu__selection-actions", children: _jsxs("div", { className: "menu__selection-info", children: [_jsxs("span", { className: "menu__selection-count", children: [currentSelectedItems.length, " selected"] }), _jsx("button", { onClick: () => {
+                                        const newSelectedItems = [];
+                                        if (selectedItems === undefined) {
+                                            setInternalSelectedItems(newSelectedItems);
+                                        }
+                                        if (onSelectionChange) {
+                                            onSelectionChange(newSelectedItems);
+                                        }
+                                    }, className: "menu__selection-clear", children: "Clear" })] }) }))] }))] }));
+};
+export default Menu;

package/dist/components/ui/navigation/navigation-demo.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Navigation Components Demo
+ * Showcases all navigation components with different themes and configurations
+ */
+import * as React from 'react';
+export declare const NavigationDemo: React.FC;
+export default NavigationDemo;
+//# sourceMappingURL=navigation-demo.d.ts.map

package/dist/components/ui/navigation/navigation-demo.d.ts.map

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

package/dist/components/ui/navigation/navigation-demo.esm.js

@@ -0,0 +1,144 @@
+/**
+ * Navigation Components Demo
+ * Showcases all navigation components with different themes and configurations
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Breadcrumb } from './breadcrumb.js';
+import { Tabs } from './tabs.js';
+import { Menu } from './menu.js';
+import { Sidebar } from './sidebar.js';
+import { Stepper } from './stepper.js';
+import { Pagination } from './pagination.js';
+export const NavigationDemo = () => {
+    const [currentTab, setCurrentTab] = useState('overview');
+    const [currentStep, setCurrentStep] = useState(0);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    // const [menuOpen, setMenuOpen] = useState(false);
+    // Sample data for components
+    const breadcrumbItems = [
+        { id: 'home', label: 'Home', href: '/' },
+        { id: 'products', label: 'Products', href: '/products' },
+        { id: 'electronics', label: 'Electronics', href: '/products/electronics' },
+        { id: 'smartphones', label: 'Smartphones', href: '/products/electronics/smartphones' },
+    ];
+    const tabItems = [
+        {
+            id: 'overview',
+            label: 'Overview',
+            content: (_jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Overview Tab" }), _jsx("p", { className: "text-gray-600", children: "This is the overview content with some sample text." })] })),
+        },
+        {
+            id: 'details',
+            label: 'Details',
+            content: (_jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Details Tab" }), _jsx("p", { className: "text-gray-600", children: "Detailed information goes here." })] })),
+        },
+        {
+            id: 'settings',
+            label: 'Settings',
+            content: (_jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Settings Tab" }), _jsx("p", { className: "text-gray-600", children: "Configuration options and settings." })] })),
+        },
+    ];
+    const stepperSteps = [
+        {
+            id: 'step1',
+            label: 'Account Setup',
+            description: 'Create your account and verify email',
+            status: 'completed',
+        },
+        {
+            id: 'step2',
+            label: 'Profile Information',
+            description: 'Fill in your personal details',
+            status: 'active',
+        },
+        {
+            id: 'step3',
+            label: 'Preferences',
+            description: 'Configure your account preferences',
+            status: 'pending',
+        },
+        {
+            id: 'step4',
+            label: 'Review & Confirm',
+            description: 'Review your information and confirm',
+            status: 'pending',
+        },
+    ];
+    const menuItems = [
+        {
+            id: 'dashboard',
+            label: 'Dashboard',
+            description: 'Main dashboard view',
+            icon: '📊',
+        },
+        {
+            id: 'analytics',
+            label: 'Analytics',
+            description: 'View detailed analytics',
+            icon: '📈',
+        },
+        {
+            id: 'reports',
+            label: 'Reports',
+            description: 'Generate and view reports',
+            icon: '📋',
+        },
+        {
+            id: 'settings',
+            label: 'Settings',
+            description: 'Configure your account',
+            icon: '⚙️',
+        },
+    ];
+    const sidebarItems = [
+        {
+            id: 'dashboard',
+            label: 'Dashboard',
+            icon: '📊',
+            active: true,
+        },
+        {
+            id: 'analytics',
+            label: 'Analytics',
+            icon: '📈',
+        },
+        {
+            id: 'reports',
+            label: 'Reports',
+            icon: '📋',
+        },
+        {
+            id: 'settings',
+            label: 'Settings',
+            icon: '⚙️',
+        },
+    ];
+    const sidebarGroups = [
+        {
+            id: 'management',
+            title: 'Management',
+            items: [
+                { id: 'users', label: 'Users', icon: '👥' },
+                { id: 'roles', label: 'Roles', icon: '🔐' },
+                { id: 'permissions', label: 'Permissions', icon: '🔑' },
+            ],
+        },
+        {
+            id: 'content',
+            title: 'Content',
+            items: [
+                { id: 'articles', label: 'Articles', icon: '📝' },
+                { id: 'media', label: 'Media', icon: '🖼️' },
+                { id: 'comments', label: 'Comments', icon: '💬' },
+            ],
+        },
+    ];
+    // const getThemeClasses = () => {
+    //   return 'navigation-demo navigation-demo--stan-design';
+    // };
+    return (_jsxs("div", { className: "space-y-8 p-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-2", children: "Navigation Components Demo" }), _jsx("p", { className: "text-gray-600", children: "Showcasing all navigation components with Stan Design theme" })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Breadcrumb Component" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Breadcrumb, { items: breadcrumbItems, onItemClick: (item) => console.log('Breadcrumb clicked:', item) }), _jsx(Breadcrumb, { items: breadcrumbItems, maxItems: 3, truncate: true })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Pagination Component" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Pagination, { currentPage: currentPage, totalPages: 20, totalItems: 200, onPageChange: setCurrentPage }), _jsx(Pagination, { currentPage: currentPage, totalPages: 20, variant: "outlined", size: "sm", showItemsPerPage: true, showTotal: true, onPageChange: setCurrentPage })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Tabs Component" }), _jsxs("div", { className: "space-y-6", children: [_jsx(Tabs, { tabs: tabItems, activeTab: currentTab, onTabChange: setCurrentTab, variant: "default" }), _jsx(Tabs, { tabs: tabItems, activeTab: currentTab, onTabChange: setCurrentTab, variant: "pills" }), _jsx(Tabs, { tabs: tabItems, activeTab: currentTab, onTabChange: setCurrentTab, variant: "underline" })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Stepper Component" }), _jsxs("div", { className: "space-y-6", children: [_jsx(Stepper, { steps: stepperSteps, currentStep: currentStep, onStepChange: setCurrentStep, variant: "horizontal" }), _jsx(Stepper, { steps: stepperSteps, currentStep: currentStep, onStepChange: setCurrentStep, variant: "vertical" })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Menu Component" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Menu, { items: menuItems, variant: "dropdown", searchable: true, selectable: true, multiSelect: true, selectedItems: [], onSelectionChange: () => { } }), _jsx(Menu, { items: menuItems, variant: "command" })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Sidebar Component" }), _jsxs("div", { className: "flex space-x-4", children: [_jsx("div", { className: "h-96", children: _jsx(Sidebar, { items: sidebarItems, collapsed: sidebarCollapsed, onCollapseChange: setSidebarCollapsed, collapsible: true, showToggle: true, header: _jsx("div", { className: "font-semibold text-lg", children: "Navigation" }), footer: _jsx("div", { className: "text-sm text-gray-500", children: "v1.0.0" }) }) }), _jsx("div", { className: "h-96", children: _jsx(Sidebar, { items: sidebarItems, groups: sidebarGroups, variant: "collapsible", size: "lg" }) })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Current Theme: Stan Design" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-medium text-gray-900", children: "Stan Design" }), _jsx("p", { className: "text-sm text-gray-600", children: "Default theme with gray tones" })] }), _jsxs("div", { className: "text-center p-4 bg-blue-50 rounded-lg", children: [_jsx("h3", { className: "font-medium text-blue-900", children: "Enterprise" }), _jsx("p", { className: "text-sm text-blue-600", children: "Professional blue theme" })] }), _jsxs("div", { className: "text-center p-4 bg-purple-50 rounded-lg", children: [_jsx("h3", { className: "font-medium text-purple-900", children: "Harvey" }), _jsx("p", { className: "text-sm text-purple-600", children: "Creative purple theme" })] })] })] })] }));
+};
+export default NavigationDemo;

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

@@ -0,0 +1,144 @@
+/**
+ * Navigation Components Demo
+ * Showcases all navigation components with different themes and configurations
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Breadcrumb } from './breadcrumb.js';
+import { Tabs } from './tabs.js';
+import { Menu } from './menu.js';
+import { Sidebar } from './sidebar.js';
+import { Stepper } from './stepper.js';
+import { Pagination } from './pagination.js';
+export const NavigationDemo = () => {
+    const [currentTab, setCurrentTab] = useState('overview');
+    const [currentStep, setCurrentStep] = useState(0);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    // const [menuOpen, setMenuOpen] = useState(false);
+    // Sample data for components
+    const breadcrumbItems = [
+        { id: 'home', label: 'Home', href: '/' },
+        { id: 'products', label: 'Products', href: '/products' },
+        { id: 'electronics', label: 'Electronics', href: '/products/electronics' },
+        { id: 'smartphones', label: 'Smartphones', href: '/products/electronics/smartphones' },
+    ];
+    const tabItems = [
+        {
+            id: 'overview',
+            label: 'Overview',
+            content: (_jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Overview Tab" }), _jsx("p", { className: "text-gray-600", children: "This is the overview content with some sample text." })] })),
+        },
+        {
+            id: 'details',
+            label: 'Details',
+            content: (_jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Details Tab" }), _jsx("p", { className: "text-gray-600", children: "Detailed information goes here." })] })),
+        },
+        {
+            id: 'settings',
+            label: 'Settings',
+            content: (_jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Settings Tab" }), _jsx("p", { className: "text-gray-600", children: "Configuration options and settings." })] })),
+        },
+    ];
+    const stepperSteps = [
+        {
+            id: 'step1',
+            label: 'Account Setup',
+            description: 'Create your account and verify email',
+            status: 'completed',
+        },
+        {
+            id: 'step2',
+            label: 'Profile Information',
+            description: 'Fill in your personal details',
+            status: 'active',
+        },
+        {
+            id: 'step3',
+            label: 'Preferences',
+            description: 'Configure your account preferences',
+            status: 'pending',
+        },
+        {
+            id: 'step4',
+            label: 'Review & Confirm',
+            description: 'Review your information and confirm',
+            status: 'pending',
+        },
+    ];
+    const menuItems = [
+        {
+            id: 'dashboard',
+            label: 'Dashboard',
+            description: 'Main dashboard view',
+            icon: '📊',
+        },
+        {
+            id: 'analytics',
+            label: 'Analytics',
+            description: 'View detailed analytics',
+            icon: '📈',
+        },
+        {
+            id: 'reports',
+            label: 'Reports',
+            description: 'Generate and view reports',
+            icon: '📋',
+        },
+        {
+            id: 'settings',
+            label: 'Settings',
+            description: 'Configure your account',
+            icon: '⚙️',
+        },
+    ];
+    const sidebarItems = [
+        {
+            id: 'dashboard',
+            label: 'Dashboard',
+            icon: '📊',
+            active: true,
+        },
+        {
+            id: 'analytics',
+            label: 'Analytics',
+            icon: '📈',
+        },
+        {
+            id: 'reports',
+            label: 'Reports',
+            icon: '📋',
+        },
+        {
+            id: 'settings',
+            label: 'Settings',
+            icon: '⚙️',
+        },
+    ];
+    const sidebarGroups = [
+        {
+            id: 'management',
+            title: 'Management',
+            items: [
+                { id: 'users', label: 'Users', icon: '👥' },
+                { id: 'roles', label: 'Roles', icon: '🔐' },
+                { id: 'permissions', label: 'Permissions', icon: '🔑' },
+            ],
+        },
+        {
+            id: 'content',
+            title: 'Content',
+            items: [
+                { id: 'articles', label: 'Articles', icon: '📝' },
+                { id: 'media', label: 'Media', icon: '🖼️' },
+                { id: 'comments', label: 'Comments', icon: '💬' },
+            ],
+        },
+    ];
+    // const getThemeClasses = () => {
+    //   return 'navigation-demo navigation-demo--stan-design';
+    // };
+    return (_jsxs("div", { className: "space-y-8 p-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-2", children: "Navigation Components Demo" }), _jsx("p", { className: "text-gray-600", children: "Showcasing all navigation components with Stan Design theme" })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Breadcrumb Component" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Breadcrumb, { items: breadcrumbItems, onItemClick: (item) => console.log('Breadcrumb clicked:', item) }), _jsx(Breadcrumb, { items: breadcrumbItems, maxItems: 3, truncate: true })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Pagination Component" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Pagination, { currentPage: currentPage, totalPages: 20, totalItems: 200, onPageChange: setCurrentPage }), _jsx(Pagination, { currentPage: currentPage, totalPages: 20, variant: "outlined", size: "sm", showItemsPerPage: true, showTotal: true, onPageChange: setCurrentPage })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Tabs Component" }), _jsxs("div", { className: "space-y-6", children: [_jsx(Tabs, { tabs: tabItems, activeTab: currentTab, onTabChange: setCurrentTab, variant: "default" }), _jsx(Tabs, { tabs: tabItems, activeTab: currentTab, onTabChange: setCurrentTab, variant: "pills" }), _jsx(Tabs, { tabs: tabItems, activeTab: currentTab, onTabChange: setCurrentTab, variant: "underline" })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Stepper Component" }), _jsxs("div", { className: "space-y-6", children: [_jsx(Stepper, { steps: stepperSteps, currentStep: currentStep, onStepChange: setCurrentStep, variant: "horizontal" }), _jsx(Stepper, { steps: stepperSteps, currentStep: currentStep, onStepChange: setCurrentStep, variant: "vertical" })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Menu Component" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Menu, { items: menuItems, variant: "dropdown", searchable: true, selectable: true, multiSelect: true, selectedItems: [], onSelectionChange: () => { } }), _jsx(Menu, { items: menuItems, variant: "command" })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Sidebar Component" }), _jsxs("div", { className: "flex space-x-4", children: [_jsx("div", { className: "h-96", children: _jsx(Sidebar, { items: sidebarItems, collapsed: sidebarCollapsed, onCollapseChange: setSidebarCollapsed, collapsible: true, showToggle: true, header: _jsx("div", { className: "font-semibold text-lg", children: "Navigation" }), footer: _jsx("div", { className: "text-sm text-gray-500", children: "v1.0.0" }) }) }), _jsx("div", { className: "h-96", children: _jsx(Sidebar, { items: sidebarItems, groups: sidebarGroups, variant: "collapsible", size: "lg" }) })] })] }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Current Theme: Stan Design" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("h3", { className: "font-medium text-gray-900", children: "Stan Design" }), _jsx("p", { className: "text-sm text-gray-600", children: "Default theme with gray tones" })] }), _jsxs("div", { className: "text-center p-4 bg-blue-50 rounded-lg", children: [_jsx("h3", { className: "font-medium text-blue-900", children: "Enterprise" }), _jsx("p", { className: "text-sm text-blue-600", children: "Professional blue theme" })] }), _jsxs("div", { className: "text-center p-4 bg-purple-50 rounded-lg", children: [_jsx("h3", { className: "font-medium text-purple-900", children: "Harvey" }), _jsx("p", { className: "text-sm text-purple-600", children: "Creative purple theme" })] })] })] })] }));
+};
+export default NavigationDemo;

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

@@ -0,0 +1,9 @@
+/**
+ * Pagination Component
+ * Provides comprehensive pagination with theme support and responsive design
+ */
+import * as React from 'react';
+import { PaginationProps } from './types.js';
+export declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;
+//# sourceMappingURL=pagination.d.ts.map

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

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