@papernote/ui 1.9.3 → 1.10.1

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)
@@ -10546,6 +10864,9 @@ function getColumnStyle(column, dynamicWidth) {
     if (column.align) {
         style.textAlign = column.align;
     }
+    if (column.verticalAlign) {
+        style.verticalAlign = column.verticalAlign;
+    }
     return style;
 }
 /**
@@ -57870,5 +58191,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