@papernote/ui 1.13.0 → 1.14.1

package/dist/index.js

@@ -725,15 +725,15 @@ function usePrefersMobile() {
 
 // Size classes for trigger button
 const sizeClasses$d = {
-    sm: 'h-8 text-sm py-1',
-    md: 'h-10 text-base py-2',
-    lg: 'h-12 text-base py-3 min-h-touch', // 44px touch target
+    sm: "h-8 text-sm py-1",
+    md: "h-10 text-base py-2",
+    lg: "h-12 text-base py-3 min-h-touch", // 44px touch target
 };
 // Size classes for options
 const optionSizeClasses = {
-    sm: 'py-2 text-sm',
-    md: 'py-2.5 text-sm',
-    lg: 'py-3.5 text-base min-h-touch', // 44px touch target for mobile
+    sm: "py-2 text-sm",
+    md: "py-2.5 text-sm",
+    lg: "py-3.5 text-base min-h-touch", // 44px touch target for mobile
 };
 /**
  * Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
@@ -806,9 +806,9 @@ const optionSizeClasses = {
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', usePortal = true, required = false, } = props;
+    const { options = [], groups = [], value, onChange, placeholder = "Select an option", searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = "300px", virtualItemHeight = 42, size = "md", mobileMode = "auto", usePortal = true, required = false, } = props;
     const [isOpen, setIsOpen] = React.useState(false);
-    const [searchQuery, setSearchQuery] = React.useState('');
+    const [searchQuery, setSearchQuery] = React.useState("");
     const [scrollTop, setScrollTop] = React.useState(0);
     const [activeDescendant] = React.useState(undefined);
     const [dropdownPosition, setDropdownPosition] = React.useState(null);
@@ -821,10 +821,10 @@ const Select = React.forwardRef((props, ref) => {
     const nativeSelectRef = React.useRef(null);
     // Detect mobile viewport
     const isMobile = useIsMobile();
-    const useMobileSheet = mobileMode === 'auto' && isMobile;
-    const useNativeSelect = mobileMode === 'native' && isMobile;
+    const useMobileSheet = mobileMode === "auto" && isMobile;
+    const useNativeSelect = mobileMode === "native" && isMobile;
     // Auto-size for mobile
-    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
+    const effectiveSize = isMobile && size === "md" ? "lg" : size;
     // Generate unique IDs for ARIA
     const labelId = React.useId();
     const listboxId = React.useId();
@@ -838,11 +838,8 @@ const Select = React.forwardRef((props, ref) => {
         close: () => setIsOpen(false),
     }));
     // Flatten all options (from both options and groups)
-    const allOptions = [
-        ...options,
-        ...groups.flatMap(group => group.options)
-    ];
-    const selectedOption = allOptions.find(opt => opt.value === value);
+    const allOptions = [...options, ...groups.flatMap((group) => group.options)];
+    const selectedOption = allOptions.find((opt) => opt.value === value);
     // Filter options/groups based on search
     const getFilteredData = () => {
         if (!searchable || !searchQuery) {
@@ -850,41 +847,58 @@ const Select = React.forwardRef((props, ref) => {
         }
         const query = searchQuery.toLowerCase();
         // Filter flat options
-        const filteredOptions = options.filter(opt => opt.label.toLowerCase().includes(query));
+        const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(query));
         // Filter grouped options
         const filteredGroups = groups
-            .map(group => ({
+            .map((group) => ({
             ...group,
-            options: group.options.filter(opt => opt.label.toLowerCase().includes(query))
+            options: group.options.filter((opt) => opt.label.toLowerCase().includes(query)),
         }))
-            .filter(group => group.options.length > 0);
+            .filter((group) => group.options.length > 0);
         return { options: filteredOptions, groups: filteredGroups };
     };
     const { options: filteredOptions, groups: filteredGroups } = getFilteredData();
     // Virtual scrolling calculations
-    const totalItems = filteredOptions.length + filteredGroups.flatMap(g => g.options).length;
+    const totalItems = filteredOptions.length + filteredGroups.flatMap((g) => g.options).length;
     const useVirtualScrolling = virtualized && totalItems > 50;
     const visibleRangeStart = useVirtualScrolling
         ? Math.floor(scrollTop / virtualItemHeight)
         : 0;
     const visibleRangeEnd = useVirtualScrolling
-        ? Math.min(visibleRangeStart + Math.ceil(parseInt(virtualHeight) / virtualItemHeight) + 5, totalItems)
+        ? Math.min(visibleRangeStart +
+            Math.ceil(parseInt(virtualHeight) / virtualItemHeight) +
+            5, totalItems)
         : totalItems;
     // Flatten all filtered items for virtualization
     const allFilteredItems = [
-        ...filteredOptions.map((opt, idx) => ({ type: 'option', option: opt, groupIndex: -1, optionIndex: idx })),
-        ...filteredGroups.flatMap((group, groupIdx) => group.options.map((opt, optIdx) => ({ type: 'grouped', option: opt, groupIndex: groupIdx, optionIndex: optIdx, groupLabel: group.label })))
+        ...filteredOptions.map((opt, idx) => ({
+            type: "option",
+            option: opt,
+            groupIndex: -1,
+            optionIndex: idx,
+        })),
+        ...filteredGroups.flatMap((group, groupIdx) => group.options.map((opt, optIdx) => ({
+            type: "grouped",
+            option: opt,
+            groupIndex: groupIdx,
+            optionIndex: optIdx,
+            groupLabel: group.label,
+        }))),
     ];
     const visibleItems = useVirtualScrolling
         ? allFilteredItems.slice(visibleRangeStart, visibleRangeEnd)
         : allFilteredItems;
-    const offsetY = useVirtualScrolling ? visibleRangeStart * virtualItemHeight : 0;
-    const totalHeight = useVirtualScrolling ? totalItems * virtualItemHeight : 'auto';
+    const offsetY = useVirtualScrolling
+        ? visibleRangeStart * virtualItemHeight
+        : 0;
+    const totalHeight = useVirtualScrolling
+        ? totalItems * virtualItemHeight
+        : "auto";
     // Check if we should show "Create" option
     const showCreateOption = creatable &&
-        searchQuery.trim() !== '' &&
-        !filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
-        !filteredGroups.some(group => group.options.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()));
+        searchQuery.trim() !== "" &&
+        !filteredOptions.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
+        !filteredGroups.some((group) => group.options.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase()));
     // Handle creating new option
     const handleCreateOption = () => {
         if (onCreateOption) {
@@ -894,7 +908,7 @@ const Select = React.forwardRef((props, ref) => {
             // If no callback, just select the typed value
             onChange?.(searchQuery.trim());
         }
-        setSearchQuery('');
+        setSearchQuery("");
         setIsOpen(false);
     };
     // Handle click outside (desktop dropdown only)
@@ -908,14 +922,14 @@ const Select = React.forwardRef((props, ref) => {
             const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
             if (isOutsideSelect && isOutsideDropdown) {
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
         };
         if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
         }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, useMobileSheet]);
     // Focus search input when opened
@@ -949,8 +963,8 @@ const Select = React.forwardRef((props, ref) => {
             const hasSpaceBelow = spaceBelow >= dropdownHeight + gap;
             const hasSpaceAbove = spaceAbove >= dropdownHeight + gap;
             // Prefer bottom placement, flip to top if not enough space below but enough above
-            const placement = hasSpaceBelow || !hasSpaceAbove ? 'bottom' : 'top';
-            const top = placement === 'bottom'
+            const placement = hasSpaceBelow || !hasSpaceAbove ? "bottom" : "top";
+            const top = placement === "bottom"
                 ? rect.bottom + gap
                 : rect.top - dropdownHeight - gap;
             setDropdownPosition({
@@ -963,23 +977,23 @@ const Select = React.forwardRef((props, ref) => {
         // Initial position calculation
         updatePosition();
         // Listen for scroll events on all scrollable ancestors
-        window.addEventListener('scroll', updatePosition, true);
-        window.addEventListener('resize', updatePosition);
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
         return () => {
-            window.removeEventListener('scroll', updatePosition, true);
-            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
         };
     }, [isOpen, useMobileSheet, usePortal]);
     // Lock body scroll when mobile sheet is open
     React.useEffect(() => {
         if (useMobileSheet && isOpen) {
-            document.body.style.overflow = 'hidden';
+            document.body.style.overflow = "hidden";
         }
         else {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         }
         return () => {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         };
     }, [isOpen, useMobileSheet]);
     // Handle escape key for mobile sheet
@@ -987,83 +1001,105 @@ const Select = React.forwardRef((props, ref) => {
         if (!useMobileSheet || !isOpen)
             return;
         const handleEscape = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === "Escape") {
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
         };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen, useMobileSheet]);
     const handleSelect = (optionValue) => {
         onChange?.(optionValue);
         setIsOpen(false);
-        setSearchQuery('');
+        setSearchQuery("");
     };
     const handleClose = () => {
         setIsOpen(false);
-        setSearchQuery('');
+        setSearchQuery("");
     };
     // Render option button (shared between desktop and mobile)
     const renderOption = (option, isSelected, mobile = false) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: `
         w-full flex items-center justify-between px-4 transition-colors
         ${mobile ? optionSizeClasses.lg : optionSizeClasses[effectiveSize]}
-        ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-        ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 active:bg-paper-100 cursor-pointer'}
-      `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600` })] }, option.value));
+        ${isSelected ? "bg-accent-50 text-accent-900" : "text-ink-700"}
+        ${option.disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-paper-50 active:bg-paper-100 cursor-pointer"}
+      `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && (jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600` }))] }, option.value));
     // Render options list content (shared between desktop and mobile)
     const renderOptionsContent = (mobile = false) => {
         if (loading) {
             return (jsxRuntime.jsxs("div", { className: "px-4 py-8 flex items-center justify-center", role: "status", "aria-live": "polite", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-ink-500" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-ink-500", children: "Loading..." })] }));
         }
-        if (filteredOptions.length === 0 && filteredGroups.length === 0 && !showCreateOption) {
+        if (filteredOptions.length === 0 &&
+            filteredGroups.length === 0 &&
+            !showCreateOption) {
             return (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", role: "status", "aria-live": "polite", children: "No options found" }));
         }
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showCreateOption && (jsxRuntime.jsx("button", { type: "button", onClick: handleCreateOption, className: `
               w-full flex items-center px-4 text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200
-              ${mobile ? 'py-3.5 text-base' : 'py-2.5 text-sm'}
-            `, children: jsxRuntime.jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsxRuntime.jsx("div", { style: { height: totalHeight, position: 'relative' }, children: jsxRuntime.jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
+              ${mobile ? "py-3.5 text-base" : "py-2.5 text-sm"}
+            `, children: jsxRuntime.jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsxRuntime.jsx("div", { style: { height: totalHeight, position: "relative" }, children: jsxRuntime.jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
                             const option = item.option;
                             const isSelected = option.value === value;
                             const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
-                            return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: { height: mobile ? '56px' : `${virtualItemHeight}px` }, className: `
+                            return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: {
+                                    height: mobile ? "56px" : `${virtualItemHeight}px`,
+                                }, className: `
                       w-full flex items-center justify-between px-4 transition-colors
-                      ${mobile ? 'text-base' : 'text-sm'}
-                      ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                      ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                    `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600` })] }, key));
+                      ${mobile ? "text-base" : "text-sm"}
+                      ${isSelected ? "bg-accent-50 text-accent-900" : "text-ink-700"}
+                      ${option.disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-paper-50 cursor-pointer"}
+                    `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && (jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600` }))] }, key));
                         }) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filteredOptions.map((option) => renderOption(option, option.value === value, mobile)), filteredGroups.map((group) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: `
                   px-4 font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200
-                  ${mobile ? 'py-2.5 text-xs' : 'py-2 text-xs'}
+                  ${mobile ? "py-2.5 text-xs" : "py-2 text-xs"}
                 `, children: group.label }), group.options.map((option) => renderOption(option, option.value === value, mobile))] }, group.label)))] }))] }));
     };
     // Native select for mobile (optional)
     if (useNativeSelect) {
-        return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
+        return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || "", onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
               input w-full appearance-none pr-10
               ${sizeClasses$d[effectiveSize]}
-              ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
-              ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-required": required, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+              ${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
+              ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
+            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : helperText ? helperTextId : undefined, "aria-required": required, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
     }
     return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { ref: selectRef, className: "relative", children: jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
             input w-full flex items-center justify-between px-3
             ${sizeClasses$d[effectiveSize]}
-            ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
-            ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-          `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, "aria-required": required, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsxRuntime.jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+            ${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
+            ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
+          `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : helperText ? helperTextId : undefined, "aria-disabled": disabled, "aria-required": required, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? "text-ink-800" : "text-ink-400"}`, children: [loading && (jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" })), !loading && selectedOption?.icon && (jsxRuntime.jsx("span", { children: selectedOption.icon })), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("span", { role: "button", tabIndex: -1, onClick: (e) => {
                                         e.stopPropagation();
-                                        onChange?.('');
+                                        onChange?.("");
                                         setIsOpen(false);
-                                    }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}` }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'} text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }) }), isOpen && !useMobileSheet && (usePortal ? dropdownPosition : true) && (usePortal ? reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dropdownRef, className: `fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${dropdownPosition?.placement === 'top' ? 'origin-bottom' : 'origin-top'}`, style: {
-                    top: dropdownPosition.top,
-                    left: dropdownPosition.left,
-                    width: dropdownPosition.width,
-                }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }), document.body) : (
-            // Non-portal dropdown (inline, relative positioning)
-            jsxRuntime.jsxs("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))), isOpen && useMobileSheet && reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxRuntime.jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: 'env(safe-area-inset-bottom)' }, children: [jsxRuntime.jsx("div", { className: "py-3 cursor-grab", children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsxRuntime.jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsxRuntime.jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsxRuntime.jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsxRuntime.jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+                                    }, onKeyDown: (e) => {
+                                        if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            onChange?.("");
+                                            setIsOpen(false);
+                                        }
+                                    }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5 cursor-pointer inline-flex", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: `${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"}` }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"} text-ink-500 transition-transform ${isOpen ? "rotate-180" : ""}` })] })] }) }), isOpen &&
+                !useMobileSheet &&
+                (usePortal ? dropdownPosition : true) &&
+                (usePortal ? (reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dropdownRef, className: `fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${dropdownPosition?.placement === "top"
+                        ? "origin-bottom"
+                        : "origin-top"}`, style: {
+                        top: dropdownPosition.top,
+                        left: dropdownPosition.left,
+                        width: dropdownPosition.width,
+                    }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: {
+                                maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
+                            }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }), document.body)) : (
+                // Non-portal dropdown (inline, relative positioning)
+                jsxRuntime.jsxs("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: {
+                                maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
+                            }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))), isOpen &&
+                useMobileSheet &&
+                reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxRuntime.jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: "env(safe-area-inset-bottom)" }, children: [jsxRuntime.jsx("div", { className: "py-3 cursor-grab", children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsxRuntime.jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsxRuntime.jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsxRuntime.jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsxRuntime.jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
 });
-Select.displayName = 'Select';
+Select.displayName = "Select";
 
 const MultiSelect = React.forwardRef(({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, loading = false, 'aria-label': ariaLabel, }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
@@ -2719,7 +2755,18 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
             // Default clear: set all values to null/empty
             const clearedValues = {};
             filters.forEach(filter => {
-                clearedValues[filter.key] = filter.type === 'text' ? '' : null;
+                if (filter.type === 'text' || filter.type === 'search') {
+                    clearedValues[filter.key] = '';
+                }
+                else if (filter.type === 'dateRange') {
+                    clearedValues[filter.key] = { from: undefined, to: undefined };
+                }
+                else if (filter.type === 'multiSelect') {
+                    clearedValues[filter.key] = [];
+                }
+                else {
+                    clearedValues[filter.key] = null;
+                }
             });
             onChange(clearedValues);
         }
@@ -2751,6 +2798,38 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
                 ];
                 return (jsxRuntime.jsx(Select, { options: boolOptions, value: value === null || value === undefined ? '' : String(value), onChange: (newValue) => handleFilterChange(filter.key, newValue === '' ? null : newValue === 'true') }));
             }
+            case 'search':
+                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 text-ink-400" }) }), jsxRuntime.jsx("input", { type: "text", placeholder: filter.placeholder || `Search ${filter.label}...`, value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input pl-9" })] }));
+            case 'dateRange': {
+                const rangeValue = value || {};
+                return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "date", value: rangeValue.from || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, from: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} from` }), jsxRuntime.jsx("span", { className: "text-ink-400 text-xs", children: "to" }), jsxRuntime.jsx("input", { type: "date", value: rangeValue.to || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, to: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} to` })] }));
+            }
+            case 'toggle': {
+                const toggleOptions = [
+                    { value: '', label: 'All' },
+                    { value: 'true', label: 'Yes' },
+                    { value: 'false', label: 'No' },
+                ];
+                const currentVal = value === null || value === undefined ? '' : String(value);
+                return (jsxRuntime.jsx("div", { className: "flex rounded-lg border border-paper-300 overflow-hidden", role: "group", children: toggleOptions.map((opt) => (jsxRuntime.jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, opt.value === '' ? null : opt.value === 'true'), className: `px-3 py-1.5 text-xs font-medium transition-colors ${currentVal === opt.value
+                            ? 'bg-accent-500 text-white'
+                            : 'bg-white text-ink-600 hover:bg-paper-50'} ${opt.value !== '' ? 'border-l border-paper-300' : ''}`, children: opt.label }, opt.value))) }));
+            }
+            case 'multiSelect': {
+                const selectedValues = Array.isArray(value) ? value : [];
+                const msOptions = filter.options || [];
+                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Select, { options: [{ value: '', label: `All ${filter.label}` }, ...msOptions.map(o => ({ value: String(o.value), label: o.label }))], value: "", onChange: (newValue) => {
+                                if (!newValue) {
+                                    handleFilterChange(filter.key, []);
+                                }
+                                else if (!selectedValues.includes(newValue)) {
+                                    handleFilterChange(filter.key, [...selectedValues, newValue]);
+                                }
+                            } }), selectedValues.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedValues.map((sv) => {
+                                const opt = msOptions.find(o => String(o.value) === sv);
+                                return (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full", children: [opt?.label || sv, jsxRuntime.jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, selectedValues.filter(v => v !== sv)), className: "hover:text-accent-900", children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, sv));
+                            }) }))] }));
+            }
             default:
                 return null;
         }
@@ -2760,6 +2839,237 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
     return (jsxRuntime.jsx("div", { className: `bg-white bg-subtle-grain border border-paper-200 rounded-lg shadow-sm p-4 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [jsxRuntime.jsx("div", { className: "flex-1 flex flex-wrap gap-4", children: filters.map((filter) => (jsxRuntime.jsxs("div", { className: "flex flex-col space-y-1 min-w-[200px]", children: [jsxRuntime.jsx("label", { className: "label", children: filter.label }), renderFilter(filter)] }, filter.key))) }), showClearButton && (jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(Button, { variant: "ghost", size: "md", onClick: handleClear, icon: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }), iconPosition: "left", children: "Clear" }) }))] }) }));
 }
 
+const variantClasses$4 = {
+    primary: {
+        default: 'bg-primary-100 text-primary-700 border-primary-200',
+        hover: 'hover:bg-primary-200',
+        close: 'hover:bg-primary-300 text-primary-600',
+        selected: 'bg-primary-200 border-primary-400 ring-2 ring-primary-300',
+    },
+    secondary: {
+        default: 'bg-ink-100 text-ink-700 border-ink-200',
+        hover: 'hover:bg-ink-200',
+        close: 'hover:bg-ink-300 text-ink-600',
+        selected: 'bg-ink-200 border-ink-400 ring-2 ring-ink-300',
+    },
+    success: {
+        default: 'bg-success-100 text-success-700 border-success-200',
+        hover: 'hover:bg-success-200',
+        close: 'hover:bg-success-300 text-success-600',
+        selected: 'bg-success-200 border-success-400 ring-2 ring-success-300',
+    },
+    warning: {
+        default: 'bg-warning-100 text-warning-700 border-warning-200',
+        hover: 'hover:bg-warning-200',
+        close: 'hover:bg-warning-300 text-warning-600',
+        selected: 'bg-warning-200 border-warning-400 ring-2 ring-warning-300',
+    },
+    error: {
+        default: 'bg-error-100 text-error-700 border-error-200',
+        hover: 'hover:bg-error-200',
+        close: 'hover:bg-error-300 text-error-600',
+        selected: 'bg-error-200 border-error-400 ring-2 ring-error-300',
+    },
+    info: {
+        default: 'bg-accent-100 text-accent-700 border-accent-200',
+        hover: 'hover:bg-accent-200',
+        close: 'hover:bg-accent-300 text-accent-600',
+        selected: 'bg-accent-200 border-accent-400 ring-2 ring-accent-300',
+    },
+};
+const sizeClasses$b = {
+    sm: {
+        container: 'h-6 px-2 text-xs gap-1',
+        icon: 'h-3 w-3',
+        close: 'h-3 w-3 ml-1',
+    },
+    md: {
+        container: 'h-7 px-2.5 text-sm gap-1.5',
+        icon: 'h-3.5 w-3.5',
+        close: 'h-3.5 w-3.5 ml-1.5',
+    },
+    lg: {
+        container: 'h-8 px-3 text-base gap-2',
+        icon: 'h-4 w-4',
+        close: 'h-4 w-4 ml-2',
+    },
+};
+const gapClasses = {
+    xs: 'gap-1',
+    sm: 'gap-1.5',
+    md: 'gap-2',
+    lg: 'gap-3',
+};
+/**
+ * Chip - Compact element for displaying values with optional remove functionality
+ *
+ * @example Basic chip
+ * ```tsx
+ * <Chip>Tag Name</Chip>
+ * ```
+ *
+ * @example Removable chip
+ * ```tsx
+ * <Chip onClose={() => removeTag(tag)}>
+ *   {tag.name}
+ * </Chip>
+ * ```
+ *
+ * @example With icon and selected state
+ * ```tsx
+ * <Chip
+ *   icon={<Star className="h-3 w-3" />}
+ *   selected={isSelected}
+ *   onClick={() => toggleSelection()}
+ * >
+ *   Favorite
+ * </Chip>
+ * ```
+ */
+function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, selected = false, maxWidth, chipKey, }) {
+    const variantStyle = variantClasses$4[variant];
+    const sizeStyle = sizeClasses$b[size];
+    const isClickable = !disabled && (onClick || onClose);
+    return (jsxRuntime.jsxs("div", { className: `
+        inline-flex items-center rounded-full border font-medium
+        transition-colors
+        ${selected ? variantStyle.selected : variantStyle.default}
+        ${isClickable && !disabled && !selected ? variantStyle.hover : ''}
+        ${sizeStyle.container}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        ${onClick && !disabled ? 'cursor-pointer' : ''}
+        ${className}
+      `, onClick: onClick && !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, "aria-disabled": disabled, "aria-pressed": onClick ? selected : undefined, "data-chip-key": chipKey, style: { maxWidth: maxWidth || undefined }, children: [icon && (jsxRuntime.jsx("span", { className: `flex-shrink-0 ${sizeStyle.icon}`, children: icon })), jsxRuntime.jsx("span", { className: "truncate", children: children }), onClose && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    if (!disabled)
+                        onClose();
+                }, disabled: disabled, className: `
+            flex-shrink-0 rounded-full transition-colors
+            ${variantStyle.close}
+            ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+            ${sizeStyle.close}
+          `, "aria-label": "Remove", children: jsxRuntime.jsx(lucideReact.X, { className: "w-full h-full" }) }))] }));
+}
+/**
+ * ChipGroup - Container for multiple chips with layout and selection support
+ *
+ * @example Basic group
+ * ```tsx
+ * <ChipGroup wrap gap="sm">
+ *   {tags.map(tag => (
+ *     <Chip key={tag.id} onClose={() => removeTag(tag)}>
+ *       {tag.name}
+ *     </Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ *
+ * @example Selectable group (single)
+ * ```tsx
+ * <ChipGroup
+ *   selectionMode="single"
+ *   selectedKeys={[selectedCategory]}
+ *   onSelectionChange={(keys) => setSelectedCategory(keys[0])}
+ * >
+ *   <Chip chipKey="all">All</Chip>
+ *   <Chip chipKey="active">Active</Chip>
+ *   <Chip chipKey="archived">Archived</Chip>
+ * </ChipGroup>
+ * ```
+ *
+ * @example Multi-select group
+ * ```tsx
+ * <ChipGroup
+ *   selectionMode="multiple"
+ *   selectedKeys={selectedTags}
+ *   onSelectionChange={setSelectedTags}
+ *   wrap
+ * >
+ *   {availableTags.map(tag => (
+ *     <Chip key={tag} chipKey={tag}>{tag}</Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ */
+function ChipGroup({ children, direction = 'horizontal', wrap = false, gap = 'sm', selectionMode = 'none', selectedKeys = [], onSelectionChange, className = '', }) {
+    const handleChipClick = (chipKey) => {
+        if (selectionMode === 'none' || !onSelectionChange)
+            return;
+        if (selectionMode === 'single') {
+            // Toggle single selection
+            if (selectedKeys.includes(chipKey)) {
+                onSelectionChange([]);
+            }
+            else {
+                onSelectionChange([chipKey]);
+            }
+        }
+        else if (selectionMode === 'multiple') {
+            // Toggle in array
+            if (selectedKeys.includes(chipKey)) {
+                onSelectionChange(selectedKeys.filter(k => k !== chipKey));
+            }
+            else {
+                onSelectionChange([...selectedKeys, chipKey]);
+            }
+        }
+    };
+    // Clone children to inject selection props
+    const enhancedChildren = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child))
+            return child;
+        const chipKey = child.props.chipKey;
+        if (!chipKey || selectionMode === 'none')
+            return child;
+        const isSelected = selectedKeys.includes(chipKey);
+        return React.cloneElement(child, {
+            ...child.props,
+            selected: isSelected,
+            onClick: () => {
+                // Call original onClick if exists
+                if (child.props.onClick) {
+                    child.props.onClick();
+                }
+                handleChipClick(chipKey);
+            },
+        });
+    });
+    return (jsxRuntime.jsx("div", { className: `
+        flex
+        ${direction === 'vertical' ? 'flex-col' : 'flex-row'}
+        ${wrap ? 'flex-wrap' : ''}
+        ${gapClasses[gap]}
+        ${className}
+      `, role: selectionMode !== 'none' ? 'group' : undefined, "aria-label": selectionMode !== 'none' ? 'Chip selection group' : undefined, children: enhancedChildren }));
+}
+
+function FilterPills({ pills, onRemove, onClearAll, totalCount, className = '', }) {
+    if (pills.length === 0)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: `flex items-center gap-2 px-4 py-2 border-b border-paper-200 bg-paper-50 ${className}`, children: [jsxRuntime.jsx(lucideReact.Filter, { className: "h-3.5 w-3.5 text-ink-400 shrink-0" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-wrap flex-1", children: [pills.map((pill) => (jsxRuntime.jsxs(Chip, { size: "sm", variant: "primary", onClose: () => onRemove(pill.key), children: [pill.label, ": ", pill.displayValue] }, pill.key))), pills.length >= 2 && (jsxRuntime.jsx("button", { type: "button", onClick: onClearAll, className: "text-xs text-ink-500 hover:text-ink-700 underline underline-offset-2 ml-1", children: "Clear all" }))] }), totalCount !== undefined && (jsxRuntime.jsxs("span", { className: "text-xs text-ink-500 shrink-0 tabular-nums", children: [totalCount.toLocaleString(), " ", totalCount === 1 ? 'record' : 'records'] }))] }));
+}
+
+const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+function LetterNav({ activeLetter, onChange, availableLetters, className = '', }) {
+    const hasAvailability = availableLetters && availableLetters.length > 0;
+    const availableSet = hasAvailability
+        ? new Set(availableLetters.map((l) => l.toUpperCase()))
+        : null;
+    return (jsxRuntime.jsxs("div", { className: `flex items-center gap-0.5 px-4 py-1.5 border-b border-paper-200 bg-white overflow-x-auto ${className}`, children: [jsxRuntime.jsx("button", { type: "button", onClick: () => onChange(null), className: `px-2 py-1 text-xs font-medium rounded transition-colors ${activeLetter === null
+                    ? 'bg-accent-500 text-white'
+                    : 'text-ink-600 hover:bg-paper-100'}`, children: "All" }), LETTERS.map((letter) => {
+                const isActive = activeLetter === letter;
+                const isAvailable = !availableSet || availableSet.has(letter);
+                return (jsxRuntime.jsx("button", { type: "button", onClick: () => onChange(isActive ? null : letter), className: `w-7 h-7 text-xs font-medium rounded transition-colors ${isActive
+                        ? 'bg-accent-500 text-white'
+                        : isAvailable
+                            ? 'text-ink-600 hover:bg-paper-100'
+                            : 'text-ink-300'}`, children: letter }, letter));
+            }), jsxRuntime.jsx("button", { type: "button", onClick: () => onChange(activeLetter === '#' ? null : '#'), className: `px-2 py-1 text-xs font-medium rounded transition-colors ${activeLetter === '#'
+                    ? 'bg-accent-500 text-white'
+                    : 'text-ink-600 hover:bg-paper-100'}`, children: "#" })] }));
+}
+
 function Loading({ variant = 'spinner', size = 'md', text }) {
     const sizeClasses = {
         sm: 'h-4 w-4',
@@ -4610,7 +4920,7 @@ function BottomSheetActions({ children, className = '' }) {
 
 // Selector for all focusable elements
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const sizeClasses$b = {
+const sizeClasses$a = {
     sm: 'max-w-md',
     md: 'max-w-lg',
     lg: 'max-w-2xl',
@@ -4799,7 +5109,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return reactDom.createPortal(jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
     }
     // Render as standard modal on desktop
-    const modalContent = (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$b[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$a[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
     return reactDom.createPortal(modalContent, document.body);
@@ -5870,7 +6180,7 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
     return (jsxRuntime.jsx("div", { className: `rounded-lg border p-4 ${styles.container} ${className}`, role: "alert", children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5", children: styles.icon }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [title && jsxRuntime.jsx("h4", { className: "text-sm font-medium mb-1", children: title }), jsxRuntime.jsx("div", { className: "text-sm", children: children }), actions.length > 0 && (jsxRuntime.jsx("div", { className: "flex gap-2 mt-3", children: actions.map((action, index) => (jsxRuntime.jsx("button", { onClick: action.onClick, className: getButtonStyles(action.variant), children: action.label }, index))) }))] }), onClose && (jsxRuntime.jsx("button", { onClick: onClose, className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity", "aria-label": "Close alert", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }) }));
 }
 
-const sizeClasses$a = {
+const sizeClasses$9 = {
     left: {
         sm: 'w-64',
         md: 'w-96',
@@ -5949,7 +6259,7 @@ function Drawer({ isOpen, onClose, title, children, placement = 'right', size =
     const isHorizontal = placement === 'left' || placement === 'right';
     return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsxRuntime.jsx("div", { className: "fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsxs("div", { className: `
           fixed ${placementClasses[placement]}
-          ${sizeClasses$a[placement][size]}
+          ${sizeClasses$9[placement][size]}
           bg-white border-paper-200 shadow-2xl
           ${isHorizontal ? 'border-r' : 'border-b'}
           ${animationClasses[placement].enter}
@@ -6091,14 +6401,14 @@ function useConfirmDialog() {
     };
 }
 
-const sizeClasses$9 = {
+const sizeClasses$8 = {
     sm: 'h-3.5 w-3.5',
     md: 'h-4 w-4',
     lg: 'h-5 w-5',
 };
 function HelpTooltip({ content, icon = 'help', size = 'md', position = 'top', className = '', }) {
     const IconComponent = icon === 'info' ? lucideReact.Info : lucideReact.HelpCircle;
-    return (jsxRuntime.jsx(Tooltip, { content: content, position: position, children: jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsxRuntime.jsx(IconComponent, { className: sizeClasses$9[size] }) }) }));
+    return (jsxRuntime.jsx(Tooltip, { content: content, position: position, children: jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsxRuntime.jsx(IconComponent, { className: sizeClasses$8[size] }) }) }));
 }
 
 /**
@@ -8476,210 +8786,6 @@ function MenuDivider() {
     return { divider: true, id: `divider-${Date.now()}`, label: '' };
 }
 
-const variantClasses$4 = {
-    primary: {
-        default: 'bg-primary-100 text-primary-700 border-primary-200',
-        hover: 'hover:bg-primary-200',
-        close: 'hover:bg-primary-300 text-primary-600',
-        selected: 'bg-primary-200 border-primary-400 ring-2 ring-primary-300',
-    },
-    secondary: {
-        default: 'bg-ink-100 text-ink-700 border-ink-200',
-        hover: 'hover:bg-ink-200',
-        close: 'hover:bg-ink-300 text-ink-600',
-        selected: 'bg-ink-200 border-ink-400 ring-2 ring-ink-300',
-    },
-    success: {
-        default: 'bg-success-100 text-success-700 border-success-200',
-        hover: 'hover:bg-success-200',
-        close: 'hover:bg-success-300 text-success-600',
-        selected: 'bg-success-200 border-success-400 ring-2 ring-success-300',
-    },
-    warning: {
-        default: 'bg-warning-100 text-warning-700 border-warning-200',
-        hover: 'hover:bg-warning-200',
-        close: 'hover:bg-warning-300 text-warning-600',
-        selected: 'bg-warning-200 border-warning-400 ring-2 ring-warning-300',
-    },
-    error: {
-        default: 'bg-error-100 text-error-700 border-error-200',
-        hover: 'hover:bg-error-200',
-        close: 'hover:bg-error-300 text-error-600',
-        selected: 'bg-error-200 border-error-400 ring-2 ring-error-300',
-    },
-    info: {
-        default: 'bg-accent-100 text-accent-700 border-accent-200',
-        hover: 'hover:bg-accent-200',
-        close: 'hover:bg-accent-300 text-accent-600',
-        selected: 'bg-accent-200 border-accent-400 ring-2 ring-accent-300',
-    },
-};
-const sizeClasses$8 = {
-    sm: {
-        container: 'h-6 px-2 text-xs gap-1',
-        icon: 'h-3 w-3',
-        close: 'h-3 w-3 ml-1',
-    },
-    md: {
-        container: 'h-7 px-2.5 text-sm gap-1.5',
-        icon: 'h-3.5 w-3.5',
-        close: 'h-3.5 w-3.5 ml-1.5',
-    },
-    lg: {
-        container: 'h-8 px-3 text-base gap-2',
-        icon: 'h-4 w-4',
-        close: 'h-4 w-4 ml-2',
-    },
-};
-const gapClasses = {
-    xs: 'gap-1',
-    sm: 'gap-1.5',
-    md: 'gap-2',
-    lg: 'gap-3',
-};
-/**
- * Chip - Compact element for displaying values with optional remove functionality
- *
- * @example Basic chip
- * ```tsx
- * <Chip>Tag Name</Chip>
- * ```
- *
- * @example Removable chip
- * ```tsx
- * <Chip onClose={() => removeTag(tag)}>
- *   {tag.name}
- * </Chip>
- * ```
- *
- * @example With icon and selected state
- * ```tsx
- * <Chip
- *   icon={<Star className="h-3 w-3" />}
- *   selected={isSelected}
- *   onClick={() => toggleSelection()}
- * >
- *   Favorite
- * </Chip>
- * ```
- */
-function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, selected = false, maxWidth, chipKey, }) {
-    const variantStyle = variantClasses$4[variant];
-    const sizeStyle = sizeClasses$8[size];
-    const isClickable = !disabled && (onClick || onClose);
-    return (jsxRuntime.jsxs("div", { className: `
-        inline-flex items-center rounded-full border font-medium
-        transition-colors
-        ${selected ? variantStyle.selected : variantStyle.default}
-        ${isClickable && !disabled && !selected ? variantStyle.hover : ''}
-        ${sizeStyle.container}
-        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-        ${onClick && !disabled ? 'cursor-pointer' : ''}
-        ${className}
-      `, onClick: onClick && !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, "aria-disabled": disabled, "aria-pressed": onClick ? selected : undefined, "data-chip-key": chipKey, style: { maxWidth: maxWidth || undefined }, children: [icon && (jsxRuntime.jsx("span", { className: `flex-shrink-0 ${sizeStyle.icon}`, children: icon })), jsxRuntime.jsx("span", { className: "truncate", children: children }), onClose && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
-                    e.stopPropagation();
-                    if (!disabled)
-                        onClose();
-                }, disabled: disabled, className: `
-            flex-shrink-0 rounded-full transition-colors
-            ${variantStyle.close}
-            ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
-            ${sizeStyle.close}
-          `, "aria-label": "Remove", children: jsxRuntime.jsx(lucideReact.X, { className: "w-full h-full" }) }))] }));
-}
-/**
- * ChipGroup - Container for multiple chips with layout and selection support
- *
- * @example Basic group
- * ```tsx
- * <ChipGroup wrap gap="sm">
- *   {tags.map(tag => (
- *     <Chip key={tag.id} onClose={() => removeTag(tag)}>
- *       {tag.name}
- *     </Chip>
- *   ))}
- * </ChipGroup>
- * ```
- *
- * @example Selectable group (single)
- * ```tsx
- * <ChipGroup
- *   selectionMode="single"
- *   selectedKeys={[selectedCategory]}
- *   onSelectionChange={(keys) => setSelectedCategory(keys[0])}
- * >
- *   <Chip chipKey="all">All</Chip>
- *   <Chip chipKey="active">Active</Chip>
- *   <Chip chipKey="archived">Archived</Chip>
- * </ChipGroup>
- * ```
- *
- * @example Multi-select group
- * ```tsx
- * <ChipGroup
- *   selectionMode="multiple"
- *   selectedKeys={selectedTags}
- *   onSelectionChange={setSelectedTags}
- *   wrap
- * >
- *   {availableTags.map(tag => (
- *     <Chip key={tag} chipKey={tag}>{tag}</Chip>
- *   ))}
- * </ChipGroup>
- * ```
- */
-function ChipGroup({ children, direction = 'horizontal', wrap = false, gap = 'sm', selectionMode = 'none', selectedKeys = [], onSelectionChange, className = '', }) {
-    const handleChipClick = (chipKey) => {
-        if (selectionMode === 'none' || !onSelectionChange)
-            return;
-        if (selectionMode === 'single') {
-            // Toggle single selection
-            if (selectedKeys.includes(chipKey)) {
-                onSelectionChange([]);
-            }
-            else {
-                onSelectionChange([chipKey]);
-            }
-        }
-        else if (selectionMode === 'multiple') {
-            // Toggle in array
-            if (selectedKeys.includes(chipKey)) {
-                onSelectionChange(selectedKeys.filter(k => k !== chipKey));
-            }
-            else {
-                onSelectionChange([...selectedKeys, chipKey]);
-            }
-        }
-    };
-    // Clone children to inject selection props
-    const enhancedChildren = React.Children.map(children, (child) => {
-        if (!React.isValidElement(child))
-            return child;
-        const chipKey = child.props.chipKey;
-        if (!chipKey || selectionMode === 'none')
-            return child;
-        const isSelected = selectedKeys.includes(chipKey);
-        return React.cloneElement(child, {
-            ...child.props,
-            selected: isSelected,
-            onClick: () => {
-                // Call original onClick if exists
-                if (child.props.onClick) {
-                    child.props.onClick();
-                }
-                handleChipClick(chipKey);
-            },
-        });
-    });
-    return (jsxRuntime.jsx("div", { className: `
-        flex
-        ${direction === 'vertical' ? 'flex-col' : 'flex-row'}
-        ${wrap ? 'flex-wrap' : ''}
-        ${gapClasses[gap]}
-        ${className}
-      `, role: selectionMode !== 'none' ? 'group' : undefined, "aria-label": selectionMode !== 'none' ? 'Chip selection group' : undefined, children: enhancedChildren }));
-}
-
 const sizeClasses$7 = {
     sm: {
         item: 'py-1.5 px-2',
@@ -11799,7 +11905,7 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
                 }) })] }));
 }
 
-function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = true, maxPageNumbers = 5, showPageJump = false, }) {
+function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = true, maxPageNumbers = 5, showPageJump = false, totalItems, pageSize, pageSizeOptions, onPageSizeChange, showRecordCount = false, }) {
     const [jumpValue, setJumpValue] = React.useState('');
     const getPageNumbers = () => {
         const pages = [];
@@ -11840,16 +11946,20 @@ function Pagination({ currentPage, totalPages, onPageChange, showPageNumbers = t
             setJumpValue('');
         }
     };
-    return (jsxRuntime.jsxs("nav", { className: "flex items-center justify-center gap-2", "aria-label": "Pagination", children: [jsxRuntime.jsxs("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 hover:border-paper-400 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-xs hover:shadow-sm", "aria-label": "Previous page", children: [jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Previous" })] }), showPageNumbers && (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: pageNumbers.map((page, index) => {
-                    if (page === '...') {
-                        return (jsxRuntime.jsx("span", { className: "px-3 py-2 text-ink-500", children: "..." }, `ellipsis-${index}`));
-                    }
-                    const pageNum = page;
-                    const isActive = pageNum === currentPage;
-                    return (jsxRuntime.jsx("button", { onClick: () => onPageChange(pageNum), className: `px-3 py-2 text-sm font-medium rounded-lg transition-all ${isActive
-                            ? 'bg-accent-500 text-white shadow-sm'
-                            : 'text-ink-700 bg-white border border-paper-300 hover:bg-paper-50 hover:border-paper-400'}`, "aria-label": `Page ${pageNum}`, "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
-                }) })), jsxRuntime.jsxs("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 hover:border-paper-400 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-xs hover:shadow-sm", "aria-label": "Next page", children: [jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Next" }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })] }), showPageJump && (jsxRuntime.jsxs("form", { onSubmit: handlePageJump, className: "flex items-center gap-2 ml-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-600 hidden sm:inline", children: "Go to:" }), jsxRuntime.jsx("input", { type: "number", min: "1", max: totalPages, value: jumpValue, onChange: (e) => setJumpValue(e.target.value), placeholder: "#", className: "w-16 px-2 py-1.5 text-sm text-center border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", "aria-label": "Jump to page" }), jsxRuntime.jsx("button", { type: "submit", disabled: !jumpValue, className: "px-3 py-1.5 text-sm font-medium text-white bg-accent-500 rounded-lg hover:bg-accent-600 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: "Go" })] }))] }));
+    const showLeftSection = showRecordCount && totalItems !== undefined && pageSize;
+    const showRightSection = onPageSizeChange && pageSizeOptions && pageSizeOptions.length > 0;
+    const rangeStart = totalItems ? (currentPage - 1) * (pageSize || 0) + 1 : 0;
+    const rangeEnd = totalItems ? Math.min(currentPage * (pageSize || 0), totalItems) : 0;
+    return (jsxRuntime.jsxs("nav", { className: `flex items-center gap-2 ${showLeftSection || showRightSection ? 'justify-between' : 'justify-center'}`, "aria-label": "Pagination", children: [showLeftSection ? (jsxRuntime.jsxs("span", { className: "text-sm text-ink-500 tabular-nums shrink-0", children: ["Showing ", rangeStart.toLocaleString(), "\u2013", rangeEnd.toLocaleString(), " of ", totalItems.toLocaleString()] })) : showRightSection ? jsxRuntime.jsx("div", {}) : null, jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 hover:border-paper-400 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-xs hover:shadow-sm", "aria-label": "Previous page", children: [jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Previous" })] }), showPageNumbers && (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: pageNumbers.map((page, index) => {
+                            if (page === '...') {
+                                return (jsxRuntime.jsx("span", { className: "px-3 py-2 text-ink-500", children: "..." }, `ellipsis-${index}`));
+                            }
+                            const pageNum = page;
+                            const isActive = pageNum === currentPage;
+                            return (jsxRuntime.jsx("button", { onClick: () => onPageChange(pageNum), className: `px-3 py-2 text-sm font-medium rounded-lg transition-all ${isActive
+                                    ? 'bg-accent-500 text-white shadow-sm'
+                                    : 'text-ink-700 bg-white border border-paper-300 hover:bg-paper-50 hover:border-paper-400'}`, "aria-label": `Page ${pageNum}`, "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
+                        }) })), jsxRuntime.jsxs("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 hover:border-paper-400 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-xs hover:shadow-sm", "aria-label": "Next page", children: [jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Next" }), jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })] }), showPageJump && (jsxRuntime.jsxs("form", { onSubmit: handlePageJump, className: "flex items-center gap-2 ml-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-600 hidden sm:inline", children: "Go to:" }), jsxRuntime.jsx("input", { type: "number", min: "1", max: totalPages, value: jumpValue, onChange: (e) => setJumpValue(e.target.value), placeholder: "#", className: "w-16 px-2 py-1.5 text-sm text-center border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", "aria-label": "Jump to page" }), jsxRuntime.jsx("button", { type: "submit", disabled: !jumpValue, className: "px-3 py-1.5 text-sm font-medium text-white bg-accent-500 rounded-lg hover:bg-accent-600 disabled:opacity-40 disabled:cursor-not-allowed transition-all", children: "Go" })] }))] }), showRightSection ? (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-500 hidden sm:inline", children: "Per page:" }), jsxRuntime.jsx("select", { value: pageSize || pageSizeOptions[0], onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "px-2 py-1.5 text-sm border border-paper-300 rounded-lg bg-white text-ink-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 cursor-pointer", "aria-label": "Items per page", children: pageSizeOptions.map((size) => (jsxRuntime.jsx("option", { value: size, children: size }, size))) })] })) : showLeftSection ? jsxRuntime.jsx("div", {}) : null] }));
 }
 
 function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick, }) {
@@ -15706,52 +15816,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;
@@ -15760,7 +15862,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -25414,7 +25516,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 = {
@@ -37042,7 +37144,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;
 
@@ -37804,7 +37906,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 {
@@ -62855,6 +62957,7 @@ exports.FieldArray = FieldArray;
 exports.FileUpload = FileUpload;
 exports.FilterBar = FilterBar;
 exports.FilterControls = FilterControls;
+exports.FilterPills = FilterPills;
 exports.FilterStatusBanner = FilterStatusBanner;
 exports.FloatingActionButton = FloatingActionButton;
 exports.Form = Form;
@@ -62874,6 +62977,7 @@ exports.InsightsPanelUI = InsightsPanelUI;
 exports.InviteCard = InviteCard;
 exports.KanbanBoard = KanbanBoard;
 exports.Layout = Layout;
+exports.LetterNav = LetterNav;
 exports.Loading = Loading;
 exports.LoadingOverlay = LoadingOverlay;
 exports.Logo = Logo;