@papernote/ui 1.9.2 → 1.10.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useCallback, useRef, useId, useImperativeHandle, useMemo, Children, isValidElement, cloneElement, Component, createContext as createContext$1, useLayoutEffect, createElement, useContext, useReducer } from 'react';
+import React__default, { forwardRef, useState, useEffect, useCallback, useRef, useId, useImperativeHandle, useMemo, Children, isValidElement, cloneElement, Component, createContext as createContext$1, useContext, useLayoutEffect, createElement, useReducer } from 'react';
 import { Loader2, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Check, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Info, Trash2, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, MoreHorizontal, Home, FileText, Image, File as File$1, Menu as Menu$1, ArrowDown, User, Settings, LogOut, Moon, Sun, Bell, ExternalLink, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, Filter, XCircle, BarChart3, MessageSquare } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { useInRouterContext, useNavigate, useLocation, Link as Link$1 } from 'react-router-dom';
@@ -8171,11 +8171,254 @@ function Breadcrumbs({ items, showHome = true }) {
             })] }));
 }
 
-function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'underline', orientation = 'horizontal', size = 'md', onChange }) {
+function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, }) {
+    const variantStyles = {
+        success: 'bg-success-50 text-success-700 border-success-200',
+        warning: 'bg-warning-50 text-warning-700 border-warning-200',
+        error: 'bg-error-50 text-error-700 border-error-200',
+        info: 'bg-primary-50 text-primary-700 border-primary-200',
+        neutral: 'bg-paper-100 text-ink-700 border-paper-300',
+    };
+    const dotVariantStyles = {
+        success: 'bg-success-500',
+        warning: 'bg-warning-500',
+        error: 'bg-error-500',
+        info: 'bg-primary-500',
+        neutral: 'bg-ink-400',
+    };
+    const sizeStyles = {
+        sm: 'px-2 py-0.5 text-xs gap-1',
+        md: 'px-3 py-1 text-xs gap-1.5',
+        lg: 'px-3 py-1.5 text-sm gap-2',
+    };
+    // Pill variant has tighter horizontal padding and fully rounded ends
+    const pillSizeStyles = {
+        sm: 'px-1.5 py-0.5 text-xs gap-1',
+        md: 'px-2 py-0.5 text-xs gap-1',
+        lg: 'px-2.5 py-1 text-sm gap-1.5',
+    };
+    const dotSizeStyles = {
+        sm: 'h-1.5 w-1.5',
+        md: 'h-2 w-2',
+        lg: 'h-2.5 w-2.5',
+    };
+    const iconSize = {
+        sm: 'h-3 w-3',
+        md: 'h-3.5 w-3.5',
+        lg: 'h-4 w-4',
+    };
+    // Dot variant - just a colored circle
+    if (dot) {
+        return (jsx("span", { className: `
+          inline-block rounded-full
+          ${dotVariantStyles[variant]}
+          ${dotSizeStyles[size]}
+          ${className}
+        `, "aria-label": `${variant} indicator` }));
+    }
+    // Regular badge
+    return (jsxs("span", { className: `
+        inline-flex items-center border font-medium
+        ${pill ? 'rounded-full' : 'rounded-full'}
+        ${variantStyles[variant]}
+        ${pill ? pillSizeStyles[size] : sizeStyles[size]}
+        ${className}
+      `, children: [icon && jsx("span", { className: iconSize[size], children: icon }), jsx("span", { children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
+}
+
+const TabsContext = createContext$1(null);
+function useTabsContext() {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('Tabs compound components must be used within a TabsRoot component');
+    }
+    return context;
+}
+/**
+ * TabsRoot - Root component for compound tabs pattern
+ *
+ * @example
+ * ```tsx
+ * <TabsRoot defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </TabsRoot>
+ * ```
+ */
+function TabsRoot({ children, defaultValue, value: controlledValue, onValueChange, variant = 'underline', orientation = 'horizontal', size = 'md', lazy = false, preserveState = false, className = '', }) {
+    const [tabValues, setTabValues] = useState([]);
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const [visitedTabs, setVisitedTabs] = useState(new Set(defaultValue ? [defaultValue] : []));
+    const isControlled = controlledValue !== undefined;
+    const activeTab = isControlled ? controlledValue : internalValue;
+    // Set initial value when tabs register
+    useEffect(() => {
+        if (!activeTab && tabValues.length > 0) {
+            const firstTab = tabValues[0];
+            if (isControlled) {
+                onValueChange?.(firstTab);
+            }
+            else {
+                setInternalValue(firstTab);
+            }
+        }
+    }, [tabValues, activeTab, isControlled, onValueChange]);
+    // Track visited tabs
+    useEffect(() => {
+        if (activeTab && preserveState) {
+            setVisitedTabs(prev => new Set(prev).add(activeTab));
+        }
+    }, [activeTab, preserveState]);
+    const setActiveTab = useCallback((value) => {
+        if (!isControlled) {
+            setInternalValue(value);
+        }
+        onValueChange?.(value);
+    }, [isControlled, onValueChange]);
+    const registerTab = useCallback((value) => {
+        setTabValues(prev => prev.includes(value) ? prev : [...prev, value]);
+    }, []);
+    const unregisterTab = useCallback((value) => {
+        setTabValues(prev => prev.filter(v => v !== value));
+    }, []);
+    const contextValue = {
+        activeTab,
+        setActiveTab,
+        variant,
+        orientation,
+        size,
+        lazy,
+        preserveState,
+        visitedTabs,
+        registerTab,
+        unregisterTab,
+        tabValues,
+    };
+    // Size-specific gap classes
+    const gapClasses = {
+        sm: orientation === 'vertical' ? 'gap-1.5' : 'gap-4',
+        md: orientation === 'vertical' ? 'gap-2' : 'gap-6',
+        lg: orientation === 'vertical' ? 'gap-3' : 'gap-8',
+    };
+    return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { className: `w-full ${orientation === 'vertical' ? `flex ${gapClasses[size]}` : ''} ${className}`, children: children }) }));
+}
+/**
+ * TabsList - Container for tab triggers
+ */
+function TabsList({ children, className = '' }) {
+    const { variant, orientation, size } = useTabsContext();
+    const sizeClasses = {
+        sm: {
+            gap: orientation === 'vertical' ? 'gap-1.5' : 'gap-4',
+            minWidth: orientation === 'vertical' ? 'min-w-[150px]' : '',
+        },
+        md: {
+            gap: orientation === 'vertical' ? 'gap-2' : 'gap-6',
+            minWidth: orientation === 'vertical' ? 'min-w-[200px]' : '',
+        },
+        lg: {
+            gap: orientation === 'vertical' ? 'gap-3' : 'gap-8',
+            minWidth: orientation === 'vertical' ? 'min-w-[250px]' : '',
+        },
+    };
+    return (jsx("div", { className: `
+        flex ${orientation === 'vertical' ? 'flex-col' : 'items-center'}
+        ${variant === 'underline'
+            ? orientation === 'vertical'
+                ? `border-r border-paper-200 ${sizeClasses[size].gap} pr-6`
+                : `border-b border-paper-200 ${sizeClasses[size].gap}`
+            : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`}
+        ${sizeClasses[size].minWidth}
+        ${className}
+      `, role: "tablist", "aria-orientation": orientation, children: children }));
+}
+/**
+ * TabsTrigger - Individual tab button
+ */
+function TabsTrigger({ children, value, disabled = false, icon, badge, badgeVariant = 'info', className = '', }) {
+    const { activeTab, setActiveTab, variant, orientation, size, registerTab, unregisterTab } = useTabsContext();
+    const isActive = activeTab === value;
+    // Register this tab on mount
+    useEffect(() => {
+        registerTab(value);
+        return () => unregisterTab(value);
+    }, [value, registerTab, unregisterTab]);
+    const sizeClasses = {
+        sm: { padding: 'px-3 py-1.5', text: 'text-xs', icon: 'h-3.5 w-3.5', badgeSize: 'sm' },
+        md: { padding: 'px-4 py-2.5', text: 'text-sm', icon: 'h-4 w-4', badgeSize: 'sm' },
+        lg: { padding: 'px-5 py-3', text: 'text-base', icon: 'h-5 w-5', badgeSize: 'md' },
+    };
+    return (jsxs("button", { role: "tab", "aria-selected": isActive, "aria-controls": `panel-${value}`, "aria-disabled": disabled, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && setActiveTab(value), className: `
+        flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
+        ${orientation === 'vertical' ? 'w-full justify-start' : ''}
+        ${variant === 'underline'
+            ? isActive
+                ? orientation === 'vertical'
+                    ? 'text-accent-900 border-r-2 border-accent-500 -mr-[1px]'
+                    : 'text-accent-900 border-b-2 border-accent-500 -mb-[1px]'
+                : orientation === 'vertical'
+                    ? 'text-ink-600 hover:text-ink-900 border-r-2 border-transparent'
+                    : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
+            : isActive
+                ? 'bg-white text-accent-900 rounded-md shadow-xs'
+                : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
+        ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
+        ${className}
+      `, children: [icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: icon }), jsx("span", { children: children }), badge !== undefined && (jsx(Badge, { variant: badgeVariant, size: sizeClasses[size].badgeSize, children: badge }))] }));
+}
+/**
+ * TabsContent - Content panel for a tab
+ */
+function TabsContent({ children, value, className = '' }) {
+    const { activeTab, lazy, preserveState, visitedTabs, orientation, size } = useTabsContext();
+    const isActive = activeTab === value;
+    // Determine if content should be rendered
+    const shouldRender = !lazy || isActive || (preserveState && visitedTabs.has(value));
+    if (!shouldRender) {
+        return null;
+    }
+    const spacingClasses = {
+        sm: orientation === 'vertical' ? '' : 'mt-4',
+        md: orientation === 'vertical' ? '' : 'mt-6',
+        lg: orientation === 'vertical' ? '' : 'mt-8',
+    };
+    return (jsx("div", { id: `panel-${value}`, role: "tabpanel", "aria-labelledby": `tab-${value}`, hidden: !isActive, tabIndex: 0, className: `
+        ${orientation === 'vertical' ? 'flex-1' : spacingClasses[size]}
+        ${isActive ? 'animate-fade-in focus:outline-none' : 'hidden'}
+        ${className}
+      `, children: children }));
+}
+// =============================================================================
+// Data-Driven Component (Original API)
+// =============================================================================
+/**
+ * Tabs - Data-driven tabs component
+ *
+ * Use this for simple use cases where tabs are defined as an array.
+ * For more complex layouts, use the compound components (TabsRoot, TabsList, TabsTrigger, TabsContent).
+ */
+function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'underline', orientation = 'horizontal', size = 'md', onChange, lazy = false, preserveState = false, closeable = false, onClose, showAddButton = false, onAdd, addButtonLabel = 'Add tab', }) {
     const [internalActiveTab, setInternalActiveTab] = useState(defaultTab || tabs[0]?.id);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [visitedTabs, setVisitedTabs] = useState(new Set([defaultTab || tabs[0]?.id]));
+    const tabListRef = useRef(null);
+    const tabRefs = useRef([]);
     // Controlled mode: use activeTab prop, Uncontrolled mode: use internal state
     const isControlled = controlledActiveTab !== undefined;
     const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+    // Track visited tabs for preserveState
+    useEffect(() => {
+        if (activeTab && preserveState) {
+            setVisitedTabs(prev => new Set(prev).add(activeTab));
+        }
+    }, [activeTab, preserveState]);
+    // Get enabled tab indices for keyboard navigation
+    const enabledIndices = tabs.map((tab, index) => tab.disabled ? -1 : index).filter(i => i !== -1);
     // Ensure the activeTab exists in the current tabs array
     // This handles the case where tabs array reference changes at the same time as activeTab
     useEffect(() => {
@@ -8190,66 +8433,196 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
             }
         }
     }, [tabs, activeTab, isControlled, onChange]);
-    const handleTabChange = (tabId) => {
+    const handleTabChange = useCallback((tabId) => {
         if (!isControlled) {
             setInternalActiveTab(tabId);
         }
         onChange?.(tabId);
-    };
+    }, [isControlled, onChange]);
+    // Handle tab close
+    const handleClose = useCallback((e, tabId) => {
+        e.stopPropagation();
+        onClose?.(tabId);
+    }, [onClose]);
+    // Keyboard navigation handler
+    const handleKeyDown = useCallback((e) => {
+        const currentIndex = focusedIndex >= 0 ? focusedIndex : tabs.findIndex(t => t.id === activeTab);
+        const currentEnabledPosition = enabledIndices.indexOf(currentIndex);
+        let nextIndex = -1;
+        let shouldPreventDefault = true;
+        // Determine navigation keys based on orientation
+        const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+        switch (e.key) {
+            case prevKey:
+                // Move to previous enabled tab
+                if (currentEnabledPosition > 0) {
+                    nextIndex = enabledIndices[currentEnabledPosition - 1];
+                }
+                else {
+                    // Wrap to last enabled tab
+                    nextIndex = enabledIndices[enabledIndices.length - 1];
+                }
+                break;
+            case nextKey:
+                // Move to next enabled tab
+                if (currentEnabledPosition < enabledIndices.length - 1) {
+                    nextIndex = enabledIndices[currentEnabledPosition + 1];
+                }
+                else {
+                    // Wrap to first enabled tab
+                    nextIndex = enabledIndices[0];
+                }
+                break;
+            case 'Home':
+                // Move to first enabled tab
+                nextIndex = enabledIndices[0];
+                break;
+            case 'End':
+                // Move to last enabled tab
+                nextIndex = enabledIndices[enabledIndices.length - 1];
+                break;
+            case 'Enter':
+            case ' ':
+                // Activate focused tab
+                if (focusedIndex >= 0 && !tabs[focusedIndex]?.disabled) {
+                    handleTabChange(tabs[focusedIndex].id);
+                }
+                break;
+            case 'Delete':
+            case 'Backspace':
+                // Close focused tab if closeable
+                if (focusedIndex >= 0) {
+                    const tab = tabs[focusedIndex];
+                    const isTabCloseable = tab.closeable !== undefined ? tab.closeable : closeable;
+                    if (isTabCloseable && !tab.disabled && onClose) {
+                        onClose(tab.id);
+                    }
+                }
+                break;
+            default:
+                shouldPreventDefault = false;
+        }
+        if (shouldPreventDefault) {
+            e.preventDefault();
+        }
+        if (nextIndex >= 0 && nextIndex !== currentIndex) {
+            setFocusedIndex(nextIndex);
+            tabRefs.current[nextIndex]?.focus();
+        }
+    }, [focusedIndex, tabs, activeTab, enabledIndices, orientation, handleTabChange, closeable, onClose]);
+    // Handle focus events
+    const handleFocus = useCallback((index) => {
+        setFocusedIndex(index);
+    }, []);
+    const handleBlur = useCallback(() => {
+        setFocusedIndex(-1);
+    }, []);
     // Size-specific classes
     const sizeClasses = {
         sm: {
             padding: 'px-3 py-1.5',
             text: 'text-xs',
             icon: 'h-3.5 w-3.5',
+            closeIcon: 'h-3 w-3',
             gap: orientation === 'vertical' ? 'gap-1.5' : 'gap-4',
             minWidth: orientation === 'vertical' ? 'min-w-[150px]' : '',
             spacing: orientation === 'vertical' ? 'mt-4' : 'mt-4',
+            badgeSize: 'sm',
+            addPadding: 'px-2 py-1.5',
         },
         md: {
             padding: 'px-4 py-2.5',
             text: 'text-sm',
             icon: 'h-4 w-4',
+            closeIcon: 'h-3.5 w-3.5',
             gap: orientation === 'vertical' ? 'gap-2' : 'gap-6',
             minWidth: orientation === 'vertical' ? 'min-w-[200px]' : '',
             spacing: orientation === 'vertical' ? 'mt-6' : 'mt-6',
+            badgeSize: 'sm',
+            addPadding: 'px-3 py-2.5',
         },
         lg: {
             padding: 'px-5 py-3',
             text: 'text-base',
             icon: 'h-5 w-5',
+            closeIcon: 'h-4 w-4',
             gap: orientation === 'vertical' ? 'gap-3' : 'gap-8',
             minWidth: orientation === 'vertical' ? 'min-w-[250px]' : '',
             spacing: orientation === 'vertical' ? 'mt-8' : 'mt-8',
+            badgeSize: 'md',
+            addPadding: 'px-4 py-3',
         },
     };
-    return (jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsx("div", { className: `
-          flex ${orientation === 'vertical' ? 'flex-col' : ''}
+    // Determine which tabs should be rendered
+    const shouldRenderContent = useCallback((tabId) => {
+        if (!lazy) {
+            // Not lazy: render all tabs
+            return true;
+        }
+        if (tabId === activeTab) {
+            // Always render active tab
+            return true;
+        }
+        if (preserveState && visitedTabs.has(tabId)) {
+            // Preserve state: render previously visited tabs
+            return true;
+        }
+        return false;
+    }, [lazy, activeTab, preserveState, visitedTabs]);
+    return (jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsxs("div", { ref: tabListRef, className: `
+          flex ${orientation === 'vertical' ? 'flex-col' : 'items-center'}
           ${variant === 'underline'
                     ? orientation === 'vertical'
                         ? `border-r border-paper-200 ${sizeClasses[size].gap} pr-6`
                         : `border-b border-paper-200 ${sizeClasses[size].gap}`
                     : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`}
           ${sizeClasses[size].minWidth}
-        `, role: "tablist", children: tabs.map((tab) => {
-                    const isActive = activeTab === tab.id;
-                    return (jsxs("button", { role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.id}`, disabled: tab.disabled, onClick: () => !tab.disabled && handleTabChange(tab.id), className: `
+        `, role: "tablist", "aria-orientation": orientation, onKeyDown: handleKeyDown, children: [tabs.map((tab, index) => {
+                        const isActive = activeTab === tab.id;
+                        const isTabCloseable = tab.closeable !== undefined ? tab.closeable : closeable;
+                        return (jsxs("button", { ref: (el) => { tabRefs.current[index] = el; }, id: `tab-${tab.id}`, role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.id}`, "aria-disabled": tab.disabled, tabIndex: isActive ? 0 : -1, disabled: tab.disabled, onClick: () => !tab.disabled && handleTabChange(tab.id), onFocus: () => handleFocus(index), onBlur: handleBlur, className: `
                 flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
                 ${orientation === 'vertical' ? 'w-full justify-start' : ''}
                 ${variant === 'underline'
-                            ? isActive
-                                ? orientation === 'vertical'
-                                    ? 'text-accent-900 border-r-2 border-accent-500 -mr-[1px]'
-                                    : 'text-accent-900 border-b-2 border-accent-500 -mb-[1px]'
-                                : orientation === 'vertical'
-                                    ? 'text-ink-600 hover:text-ink-900 border-r-2 border-transparent'
-                                    : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
-                            : isActive
-                                ? 'bg-white text-accent-900 rounded-md shadow-xs'
-                                : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
+                                ? isActive
+                                    ? orientation === 'vertical'
+                                        ? 'text-accent-900 border-r-2 border-accent-500 -mr-[1px]'
+                                        : 'text-accent-900 border-b-2 border-accent-500 -mb-[1px]'
+                                    : orientation === 'vertical'
+                                        ? 'text-ink-600 hover:text-ink-900 border-r-2 border-transparent'
+                                        : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
+                                : isActive
+                                    ? 'bg-white text-accent-900 rounded-md shadow-xs'
+                                    : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
                 ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-              `, children: [tab.icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsx("span", { children: tab.label })] }, tab.id));
-                }) }), jsx("div", { className: `${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`, children: tabs.map((tab) => (jsx("div", { id: `panel-${tab.id}`, role: "tabpanel", "aria-labelledby": tab.id, hidden: activeTab !== tab.id, className: activeTab === tab.id ? 'animate-fade-in' : '', children: activeTab === tab.id && tab.content }, tab.id))) })] }));
+                focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
+                group
+              `, children: [tab.icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsx("span", { className: isTabCloseable ? 'mr-1' : '', children: tab.label }), tab.badge !== undefined && (jsx(Badge, { variant: tab.badgeVariant || 'info', size: sizeClasses[size].badgeSize, children: tab.badge })), isTabCloseable && onClose && (jsx("span", { role: "button", "aria-label": `Close ${tab.label}`, onClick: (e) => handleClose(e, tab.id), className: `
+                    flex-shrink-0 p-0.5 rounded
+                    text-ink-400 hover:text-ink-700 hover:bg-paper-200
+                    opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100
+                    ${isActive ? 'opacity-100' : ''}
+                    transition-opacity duration-150
+                  `, children: jsx(X, { className: sizeClasses[size].closeIcon }) }))] }, tab.id));
+                    }), showAddButton && onAdd && (jsx("button", { type: "button", onClick: onAdd, "aria-label": addButtonLabel, title: addButtonLabel, className: `
+              flex items-center justify-center ${sizeClasses[size].addPadding}
+              text-ink-500 hover:text-ink-700 hover:bg-paper-100
+              rounded transition-colors duration-150
+              focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1
+              ${variant === 'underline'
+                            ? orientation === 'vertical'
+                                ? 'border-r-2 border-transparent'
+                                : 'border-b-2 border-transparent -mb-[1px]'
+                            : ''}
+            `, children: jsx(Plus, { className: sizeClasses[size].icon }) }))] }), jsx("div", { className: `${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`, children: tabs.map((tab) => {
+                    const isActive = activeTab === tab.id;
+                    const shouldRender = shouldRenderContent(tab.id);
+                    if (!shouldRender) {
+                        return null;
+                    }
+                    return (jsx("div", { id: `panel-${tab.id}`, role: "tabpanel", "aria-labelledby": `tab-${tab.id}`, hidden: !isActive, tabIndex: 0, className: isActive ? 'animate-fade-in focus:outline-none' : 'hidden', children: tab.content }, tab.id));
+                }) })] }));
 }
 
 function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = true, maxPageNumbers = 5, showPageJump = false, }) {
@@ -8323,61 +8696,6 @@ function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick
             }) }) }));
 }
 
-function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, }) {
-    const variantStyles = {
-        success: 'bg-success-50 text-success-700 border-success-200',
-        warning: 'bg-warning-50 text-warning-700 border-warning-200',
-        error: 'bg-error-50 text-error-700 border-error-200',
-        info: 'bg-primary-50 text-primary-700 border-primary-200',
-        neutral: 'bg-paper-100 text-ink-700 border-paper-300',
-    };
-    const dotVariantStyles = {
-        success: 'bg-success-500',
-        warning: 'bg-warning-500',
-        error: 'bg-error-500',
-        info: 'bg-primary-500',
-        neutral: 'bg-ink-400',
-    };
-    const sizeStyles = {
-        sm: 'px-2 py-0.5 text-xs gap-1',
-        md: 'px-3 py-1 text-xs gap-1.5',
-        lg: 'px-3 py-1.5 text-sm gap-2',
-    };
-    // Pill variant has tighter horizontal padding and fully rounded ends
-    const pillSizeStyles = {
-        sm: 'px-1.5 py-0.5 text-xs gap-1',
-        md: 'px-2 py-0.5 text-xs gap-1',
-        lg: 'px-2.5 py-1 text-sm gap-1.5',
-    };
-    const dotSizeStyles = {
-        sm: 'h-1.5 w-1.5',
-        md: 'h-2 w-2',
-        lg: 'h-2.5 w-2.5',
-    };
-    const iconSize = {
-        sm: 'h-3 w-3',
-        md: 'h-3.5 w-3.5',
-        lg: 'h-4 w-4',
-    };
-    // Dot variant - just a colored circle
-    if (dot) {
-        return (jsx("span", { className: `
-          inline-block rounded-full
-          ${dotVariantStyles[variant]}
-          ${dotSizeStyles[size]}
-          ${className}
-        `, "aria-label": `${variant} indicator` }));
-    }
-    // Regular badge
-    return (jsxs("span", { className: `
-        inline-flex items-center border font-medium
-        ${pill ? 'rounded-full' : 'rounded-full'}
-        ${variantStyles[variant]}
-        ${pill ? pillSizeStyles[size] : sizeStyles[size]}
-        ${className}
-      `, children: [icon && jsx("span", { className: iconSize[size], children: icon }), jsx("span", { children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
-}
-
 /**
  * Avatar component that displays:
  * - User initials in a colored circle (default)
@@ -10152,7 +10470,7 @@ function getPopoverPlacement(position) {
  * />
  * ```
  */
-function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading = false, dropdownPosition = 'bottom-right', maxHeight = '400px', size = 'md', emptyMessage = 'No notifications', viewAllText = 'View all notifications', disabled = false, className = '', variant = 'compact', showUnreadInHeader = false, bellStyle = 'ghost', }) {
+function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading = false, dropdownPosition = 'bottom-right', maxHeight = '400px', size = 'md', emptyMessage = 'No notifications', viewAllText = 'View all notifications', disabled = false, className = '', variant = 'compact', showUnreadInHeader = false, bellStyle = 'ghost', icon: customIcon, }) {
     const [isOpen, setIsOpen] = useState(false);
     // Calculate unread count if not provided
     const unreadCount = useMemo(() => {
@@ -10197,6 +10515,8 @@ function NotificationBell({ notifications, unreadCount: providedUnreadCount, onM
         md: 'p-3',
         lg: 'p-4',
     };
+    // Default bell icon or custom icon
+    const bellIcon = customIcon || jsx(Bell, { className: `${iconSizes[size]} text-ink-600` });
     // Trigger button
     const triggerButton = bellStyle === 'outlined' ? (jsxs("div", { className: "relative inline-block", children: [jsx("button", { className: `
           ${outlinedSizeClasses[size]}
@@ -10208,16 +10528,16 @@ function NotificationBell({ notifications, unreadCount: providedUnreadCount, onM
           ${className}
         `, disabled: disabled, "aria-label": unreadCount > 0
                     ? `Notifications - ${unreadCount} unread`
-                    : 'Notifications', children: jsx(Bell, { className: `${iconSizes[size]} text-ink-600` }) }), unreadCount > 0 && (jsx("span", { className: `
+                    : 'Notifications', children: bellIcon }), unreadCount > 0 && (jsx("span", { className: `
             absolute -top-1 -right-1
             flex items-center justify-center
             min-w-[18px] h-[18px] px-1.5
             rounded-full text-white font-semibold text-[11px]
             bg-error-500 shadow-sm
             pointer-events-none
-          `, "aria-label": `${unreadCount > 99 ? '99+' : unreadCount} notifications`, children: unreadCount > 99 ? '99+' : unreadCount }))] })) : (jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
+          `, "aria-label": `${unreadCount > 99 ? '99+' : unreadCount} notifications`, children: unreadCount > 99 ? '99+' : unreadCount }))] })) : (jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, icon: bellIcon, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
             ? `Notifications - ${unreadCount} unread`
-            : 'Notifications', className: className, children: jsx(Bell, { className: iconSizes[size] }) }));
+            : 'Notifications', className: className }));
     // Header title with optional unread count
     const headerTitle = showUnreadInHeader && unreadCount > 0
         ? `Notifications (${unreadCount} unread)`
@@ -11273,52 +11593,44 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-var collection;
-var hasRequiredCollection;
-
-function requireCollection () {
-	if (hasRequiredCollection) return collection;
-	hasRequiredCollection = 1;
-	class Collection {
+let Collection$3 = class Collection {
 
-	    constructor(data, refs) {
-	        if (data == null && refs == null) {
-	            this._data = [];
-	            this._refs = [];
-	        } else {
-	            if (data.length !== refs.length)
-	                throw Error('Collection: data length should match references length.');
-	            this._data = data;
-	            this._refs = refs;
-	        }
-	    }
+    constructor(data, refs) {
+        if (data == null && refs == null) {
+            this._data = [];
+            this._refs = [];
+        } else {
+            if (data.length !== refs.length)
+                throw Error('Collection: data length should match references length.');
+            this._data = data;
+            this._refs = refs;
+        }
+    }
 
-	    get data() {
-	        return this._data;
-	    }
+    get data() {
+        return this._data;
+    }
 
-	    get refs() {
-	        return this._refs;
-	    }
+    get refs() {
+        return this._refs;
+    }
 
-	    get length() {
-	        return this._data.length;
-	    }
+    get length() {
+        return this._data.length;
+    }
 
-	    /**
-	     * Add data and references to this collection.
-	     * @param {{}} obj - data
-	     * @param {{}} ref - reference
-	     */
-	    add(obj, ref) {
-	        this._data.push(obj);
-	        this._refs.push(ref);
-	    }
-	}
+    /**
+     * Add data and references to this collection.
+     * @param {{}} obj - data
+     * @param {{}} ref - reference
+     */
+    add(obj, ref) {
+        this._data.push(obj);
+        this._refs.push(ref);
+    }
+};
 
-	collection = Collection;
-	return collection;
-}
+var collection = Collection$3;
 
 var helpers;
 var hasRequiredHelpers;
@@ -11327,7 +11639,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -20981,7 +21293,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = requireCollection();
+const Collection$2 = collection;
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -32609,7 +32921,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = requireCollection();
+const Collection$1 = collection;
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -33371,7 +33683,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = requireCollection();
+const Collection = collection;
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -57876,5 +58188,5 @@ function Responsive({ mobile, tablet, desktop, }) {
     return jsx(Fragment, { children: mobile || tablet || desktop });
 }
 
-export { Accordion, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, CheckboxList, Chip, ChipGroup, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, SwipeActions, SwipeableCard, Switch, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
+export { Accordion, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, CheckboxList, Chip, ChipGroup, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, SwipeActions, SwipeableCard, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
 //# sourceMappingURL=index.esm.js.map