@pk-design/react-tailwind 1.9.0 → 1.10.0

package/dist/react-tailwind.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useId, useMemo, useState, forwardRef, useEffect, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useCallback, Fragment as Fragment$1, createContext, useContext, useLayoutEffect } from 'react';
+import React__default, { useId, useMemo, useState, forwardRef, useEffect, useCallback, useSyncExternalStore, Children, isValidElement, cloneElement, useRef, useImperativeHandle, Fragment as Fragment$1, createContext, useContext, useLayoutEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
 import { FixedSizeList } from 'react-window';
@@ -321,6 +321,45 @@ var SvgX = function SvgX(props) {
   })));
 };
 
+const BREAKPOINT_QUERIES = {
+    medium: '(min-width: 768px)',
+    expanded: '(min-width: 1024px)',
+};
+// jsdom and some embedded webviews have no matchMedia; treat every query as
+// unmatched there (the compact layout) rather than throwing.
+const hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+/** Live result of a CSS media query. `false` during server rendering or without `matchMedia`. */
+const useMediaQuery = (query) => {
+    const subscribe = useCallback((onChange) => {
+        if (!hasMatchMedia())
+            return () => { };
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    return useSyncExternalStore(subscribe, () => hasMatchMedia() && window.matchMedia(query).matches, () => false);
+};
+/** Current layout range; `compact` during server rendering. */
+const useBreakpoint = () => {
+    const isMedium = useMediaQuery(BREAKPOINT_QUERIES.medium);
+    const isExpanded = useMediaQuery(BREAKPOINT_QUERIES.expanded);
+    if (isExpanded)
+        return 'expanded';
+    return isMedium ? 'medium' : 'compact';
+};
+/** Resolves a `ResponsiveValue` for the current viewport. */
+const useResponsiveValue = (value) => {
+    var _a, _b, _c;
+    const breakpoint = useBreakpoint();
+    if (typeof value !== 'object' || value === null || !('base' in value))
+        return value;
+    if (breakpoint === 'expanded')
+        return (_b = (_a = value.lg) !== null && _a !== void 0 ? _a : value.md) !== null && _b !== void 0 ? _b : value.base;
+    if (breakpoint === 'medium')
+        return (_c = value.md) !== null && _c !== void 0 ? _c : value.base;
+    return value.base;
+};
+
 const alignmentMap = {
     center: 'items-center justify-center h-full',
     start: 'justify-start h-full',
@@ -333,7 +372,8 @@ const panelAlignmentMap = {
     start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
     end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
     top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
-    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',
+    // Bottom sheets clear the home indicator on notched phones (0 elsewhere).
+    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh] pb-[env(safe-area-inset-bottom,0px)]',
 };
 const panelSizeMap = {
     xs: 'max-w-xs',
@@ -344,7 +384,9 @@ const panelSizeMap = {
     '2xl': 'max-w-2xl',
     full: 'w-full',
 };
-const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align = 'end', size = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align: alignProp = 'end', size: sizeProp = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+    const align = useResponsiveValue(alignProp);
+    const size = useResponsiveValue(sizeProp);
     const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
     const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
     const [viewportHeight, setViewportHeight] = React__default.useState(null);
@@ -659,20 +701,23 @@ const BodyText = forwardRef((props, ref) => {
 });
 BodyText.displayName = 'BodyText';
 
-function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', }) {
+function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, }) {
     const handleTabClick = (item) => {
         var _a;
         if (item.disabled)
             return;
         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-        onChange(item.id);
+        onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
     };
+    // Removed from the tree, not just covered, so hidden tabs can't take focus.
+    if (hidden)
+        return null;
     const themeStyles = {
         light: 'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',
         dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
         primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
     }[theme];
-    return (jsx("nav", { "aria-label": "Bottom Navigation", className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
+    return (jsx("nav", { "aria-label": ariaLabel, className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
             const isActive = item.id === activeId;
             const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
             const activeItemColor = {
@@ -695,11 +740,17 @@ function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels
                 info: 'bg-blue-500 text-white',
                 success: 'bg-emerald-500 text-white',
             }[item.badgeVariant || 'danger'];
-            return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabClick(item), className: buildClassName('flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive ? activeItemColor : inactiveItemColor, itemClass), "data-testid": `bottom-nav-item-${item.id}`, "aria-selected": isActive, children: [activeIndicatorStyle === 'line' && isActive && (jsx("span", { className: buildClassName('absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') })), jsxs("div", { className: buildClassName('relative inline-flex items-center justify-center transition-all duration-200', activeIndicatorStyle === 'pill'
+            // A disabled item stays a button: a link can't be disabled.
+            const isLink = Boolean(item.href) && !item.disabled;
+            const ItemElement = isLink ? linkAs : 'button';
+            const elementProps = isLink
+                ? { [linkHrefProp]: item.href }
+                : { type: 'button', disabled: item.disabled };
+            return (jsxs(ItemElement, { ...elementProps, onClick: () => handleTabClick(item), className: buildClassName('flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive ? activeItemColor : inactiveItemColor, itemClass), "data-testid": `bottom-nav-item-${item.id}`, "aria-current": isActive ? 'page' : undefined, "aria-label": !showLabelText && typeof item.label === 'string' ? item.label : undefined, children: [activeIndicatorStyle === 'line' && isActive && (jsx("span", { className: buildClassName('absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') })), jsxs("div", { className: buildClassName('relative inline-flex items-center justify-center transition-all duration-200', activeIndicatorStyle === 'pill'
                             ? buildClassName('px-4 py-1 rounded-full', isActive
                                 ? pillActiveStyles
                                 : 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40')
-                            : 'px-1 py-0.5'), children: [jsx("span", { className: "text-xl transition-transform duration-150 group-active:scale-95", children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && item.badge !== null && (jsx("span", { className: buildClassName('absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10', badgeColor), "data-testid": `bottom-nav-badge-${item.id}`, children: item.badge }))] }), showLabelText && (jsx("span", { className: buildClassName('text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150', isActive ? 'font-bold' : 'font-medium opacity-90'), children: item.label })), activeIndicatorStyle === 'dot' && isActive && (jsx("span", { className: buildClassName('size-1.5 rounded-full mt-1 transition-all duration-200', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') }))] }, item.id));
+                            : 'px-1 py-0.5'), children: [jsx("span", { className: "text-xl transition-transform duration-150 group-active:scale-95", "aria-hidden": "true", children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && item.badge !== null && (jsx("span", { className: buildClassName('absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10', badgeColor), "data-testid": `bottom-nav-badge-${item.id}`, children: item.badge }))] }), showLabelText && (jsx("span", { className: buildClassName('text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150', isActive ? 'font-bold' : 'font-medium opacity-90'), children: item.label })), activeIndicatorStyle === 'dot' && isActive && (jsx("span", { className: buildClassName('size-1.5 rounded-full mt-1 transition-all duration-200', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') }))] }, item.id));
         }) }));
 }
 BottomNavigation.displayName = 'BottomNavigation';
@@ -2343,77 +2394,165 @@ function PinInput({ length = 4, value: externalValue, onChange, onComplete, mask
 }
 PinInput.displayName = 'PinInput';
 
-function PullArrowIcon({ progress }) {
-    const rotation = Math.min(180, progress * 180);
-    return (jsx("svg", { className: "size-4 text-blue-600 dark:text-blue-400 transition-transform duration-150", style: { transform: `rotate(${rotation}deg)` }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }));
+// Resistance applied to the finger's travel, so the pull feels elastic.
+const RESISTANCE = 0.45;
+// Finger travel (px) before deciding whether a gesture is a pull or a sideways swipe.
+const AXIS_LOCK_SLOP = 8;
+// Overlay badge size and the gap it rests at below the container's top edge.
+const BADGE_SIZE = 40;
+const BADGE_TOP_GAP = 10;
+function PullArrowIcon({ progress, className }) {
+    return (jsx("svg", { className: className, style: { transform: `rotate(${Math.min(180, progress * 180)}deg)` }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }));
 }
-function PullToRefresh({ onRefresh, pullThreshold = 70, maxPullDistance = 120, disabled = false, refreshing: externalRefreshing, pullingContent, refreshingContent, children, className = '', contentClass = '', }) {
+function PullToRefresh({ onRefresh, onError, variant = 'push', pullThreshold = 70, maxPullDistance = 120, disabled = false, refreshing: externalRefreshing, pullingContent, refreshingContent, pullLabel = 'Pull down to refresh', releaseLabel = 'Release to refresh', refreshingLabel = 'Refreshing...', refreshedLabel = 'Content refreshed', children, className = '', contentClass = '', }) {
     const containerRef = useRef(null);
-    const startYRef = useRef(0);
-    const isPullingRef = useRef(false);
     const [pullDistance, setPullDistance] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
     const [internalRefreshing, setInternalRefreshing] = useState(false);
+    const [announcement, setAnnouncement] = useState('');
     const isRefreshing = externalRefreshing !== undefined ? externalRefreshing : internalRefreshing;
-    const handleTouchStart = useCallback((e) => {
-        if (disabled || isRefreshing)
-            return;
-        const container = containerRef.current;
-        if (container && container.scrollTop === 0) {
-            startYRef.current = e.touches[0].clientY;
-            isPullingRef.current = true;
-        }
-    }, [disabled, isRefreshing]);
-    const handleTouchMove = useCallback((e) => {
-        if (!isPullingRef.current || disabled || isRefreshing)
-            return;
+    // The touch listeners are attached once, natively (see below), so they read
+    // the latest props and state through this ref instead of stale closures.
+    const latest = useRef({
+        disabled,
+        isRefreshing,
+        pullThreshold,
+        maxPullDistance,
+        onRefresh,
+        onError,
+        refreshedLabel,
+    });
+    useLayoutEffect(() => {
+        latest.current = {
+            disabled,
+            isRefreshing,
+            pullThreshold,
+            maxPullDistance,
+            onRefresh,
+            onError,
+            refreshedLabel,
+        };
+    });
+    useEffect(() => {
         const container = containerRef.current;
-        if (!container || container.scrollTop > 0)
-            return;
-        const currentY = e.touches[0].clientY;
-        const rawDistance = currentY - startYRef.current;
-        if (rawDistance > 0) {
-            // Rubber-band resistance formula
-            const dampened = Math.min(maxPullDistance, rawDistance * 0.45);
-            setPullDistance(dampened);
-            if (e.cancelable) {
-                e.preventDefault();
-            }
-        }
-        else {
-            setPullDistance(0);
-        }
-    }, [disabled, isRefreshing, maxPullDistance]);
-    const handleTouchEnd = useCallback(async () => {
-        if (!isPullingRef.current || disabled || isRefreshing)
+        if (!container)
             return;
-        isPullingRef.current = false;
-        if (pullDistance >= pullThreshold) {
-            setPullDistance(pullThreshold);
+        let mounted = true;
+        let pulling = false;
+        let axis = 'pending';
+        let startX = 0;
+        let startY = 0;
+        let distance = 0;
+        const setDistance = (next) => {
+            distance = next;
+            setPullDistance(next);
+        };
+        // Ends a gesture without refreshing: a cancelled touch, a sideways swipe,
+        // or content that scrolled away from the top.
+        const reset = () => {
+            pulling = false;
+            setIsDragging(false);
+            setDistance(0);
+        };
+        const refresh = async () => {
+            const { pullThreshold: threshold, onRefresh: run, onError: report } = latest.current;
+            setDistance(threshold);
             setInternalRefreshing(true);
             try {
-                await onRefresh();
+                await run();
+                if (mounted)
+                    setAnnouncement(latest.current.refreshedLabel);
+            }
+            catch (error) {
+                report === null || report === void 0 ? void 0 : report(error);
             }
             finally {
-                setInternalRefreshing(false);
-                setPullDistance(0);
+                if (mounted) {
+                    setInternalRefreshing(false);
+                    setDistance(0);
+                }
             }
-        }
-        else {
-            setPullDistance(0);
-        }
-    }, [disabled, isRefreshing, onRefresh, pullDistance, pullThreshold]);
+        };
+        const handleTouchStart = (e) => {
+            var _a, _b;
+            const { disabled: isDisabled, isRefreshing: busy } = latest.current;
+            if (isDisabled || busy || container.scrollTop > 0 || e.touches.length !== 1)
+                return;
+            startX = (_a = e.touches[0].clientX) !== null && _a !== void 0 ? _a : 0;
+            startY = (_b = e.touches[0].clientY) !== null && _b !== void 0 ? _b : 0;
+            axis = 'pending';
+            pulling = true;
+            setAnnouncement('');
+            setIsDragging(true);
+            setDistance(0);
+        };
+        const handleTouchMove = (e) => {
+            var _a, _b, _c, _d;
+            if (!pulling)
+                return;
+            if (latest.current.disabled || latest.current.isRefreshing || container.scrollTop > 0) {
+                reset();
+                return;
+            }
+            const dx = ((_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0) - startX;
+            const dy = ((_d = (_c = e.touches[0]) === null || _c === void 0 ? void 0 : _c.clientY) !== null && _d !== void 0 ? _d : 0) - startY;
+            if (axis === 'pending') {
+                if (Math.abs(dx) < AXIS_LOCK_SLOP && Math.abs(dy) < AXIS_LOCK_SLOP)
+                    return;
+                axis = dy > 0 && Math.abs(dy) > Math.abs(dx) ? 'vertical' : 'horizontal';
+                // A sideways swipe or an upward scroll belongs to the content, not to us.
+                if (axis === 'horizontal') {
+                    reset();
+                    return;
+                }
+            }
+            const next = Math.min(latest.current.maxPullDistance, Math.max(0, dy) * RESISTANCE);
+            setDistance(next);
+            // Needs the non-passive listener: stops the browser's own pull-to-refresh/overscroll.
+            if (next > 0 && e.cancelable)
+                e.preventDefault();
+        };
+        const handleTouchEnd = () => {
+            if (!pulling)
+                return;
+            pulling = false;
+            setIsDragging(false);
+            if (distance >= latest.current.pullThreshold)
+                void refresh();
+            else
+                setDistance(0);
+        };
+        // React registers touch listeners as passive, where preventDefault() is
+        // ignored, so these are attached natively with touchmove non-passive.
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd);
+        container.addEventListener('touchcancel', reset);
+        return () => {
+            mounted = false;
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', reset);
+        };
+    }, []);
     const progress = Math.min(1, pullDistance / pullThreshold);
     const isReady = pullDistance >= pullThreshold;
-    return (jsxs("div", { ref: containerRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: buildClassName('relative overflow-y-auto overscroll-none', className), "data-testid": "pull-to-refresh-container", children: [jsx("div", { className: "left-0 right-0 top-0 flex items-center justify-center pointer-events-none transition-all duration-150 z-20", style: {
-                    height: isRefreshing ? `${pullThreshold}px` : `${pullDistance}px`,
-                    opacity: pullDistance > 0 || isRefreshing ? 1 : 0,
-                }, "data-testid": "pull-to-refresh-indicator", children: jsx("div", { className: "flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-gray-800 border border-[var(--ui-border)] shadow-md text-xs font-semibold text-gray-700 dark:text-gray-200", children: isRefreshing ? (refreshingContent || (jsxs(Fragment, { children: [jsx(Loader, { size: "sm" }), jsx("span", { children: "Refreshing..." })] }))) : pullingContent ? (pullingContent) : (jsxs(Fragment, { children: [jsx(PullArrowIcon, { progress: progress }), jsx("span", { children: isReady ? 'Release to refresh' : 'Pull down to refresh' })] })) }) }), jsx("div", { className: buildClassName('transition-transform duration-150', contentClass), style: {
-                    transform: isRefreshing
-                        ? `translateY(${pullThreshold}px)`
-                        : pullDistance > 0
-                            ? `translateY(${pullDistance}px)`
-                            : 'translateY(0px)',
-                }, "data-testid": "pull-to-refresh-content", children: children })] }));
+    const offset = isRefreshing ? pullThreshold : pullDistance;
+    // Follow the finger exactly while dragging; animate only the settle afterwards.
+    const motionClass = isDragging
+        ? 'transition-none'
+        : 'transition-transform duration-200 ease-out motion-reduce:transition-none';
+    return (jsxs("div", { ref: containerRef, className: buildClassName('relative overflow-y-auto overscroll-none', className), "data-testid": "pull-to-refresh-container", children: [jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: isRefreshing ? refreshingLabel : announcement }), variant === 'overlay' ? (jsx("div", { className: buildClassName('pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center', motionClass), style: {
+                    transform: `translateY(${offset - BADGE_SIZE + BADGE_TOP_GAP}px)`,
+                    opacity: offset > 0 ? 1 : 0,
+                }, "aria-hidden": "true", "data-testid": "pull-to-refresh-indicator", children: jsx("div", { className: "grid size-10 place-items-center rounded-full bg-[var(--ui-primary)] text-white shadow-lg", children: isRefreshing
+                        ? (refreshingContent !== null && refreshingContent !== void 0 ? refreshingContent : jsx(Loader, { size: "xs", className: "text-white" }))
+                        : (pullingContent !== null && pullingContent !== void 0 ? pullingContent : jsx(PullArrowIcon, { progress: progress, className: "size-4" })) }) })) : (
+            // Absolutely positioned, so the content's own translate is the only shift.
+            jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 flex items-center justify-center overflow-hidden", style: { height: `${offset}px`, opacity: offset > 0 ? 1 : 0 }, "aria-hidden": "true", "data-testid": "pull-to-refresh-indicator", children: jsx("div", { className: "flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-gray-800 border border-[var(--ui-border)] shadow-md text-xs font-semibold text-gray-700 dark:text-gray-200", children: isRefreshing
+                        ? (refreshingContent !== null && refreshingContent !== void 0 ? refreshingContent : (jsxs(Fragment, { children: [jsx(Loader, { size: "sm" }), jsx("span", { children: refreshingLabel })] })))
+                        : (pullingContent !== null && pullingContent !== void 0 ? pullingContent : (jsxs(Fragment, { children: [jsx(PullArrowIcon, { progress: progress, className: "size-4 text-[var(--ui-primary)] dark:text-blue-400" }), jsx("span", { children: isReady ? releaseLabel : pullLabel })] }))) }) })), jsx("div", { className: buildClassName(variant === 'push' && motionClass, contentClass), style: variant === 'push' ? { transform: `translateY(${offset}px)` } : undefined, "data-testid": "pull-to-refresh-content", children: children })] }));
 }
 PullToRefresh.displayName = 'PullToRefresh';
 
@@ -3326,12 +3465,23 @@ function ChevronLeftIcon$1() {
 function SearchIcon$1() {
     return (jsx("svg", { className: "size-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
 }
+function MoreIcon() {
+    return (jsxs("svg", { className: "size-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "5", r: "1.75" }), jsx("circle", { cx: "12", cy: "12", r: "1.75" }), jsx("circle", { cx: "12", cy: "19", r: "1.75" })] }));
+}
 function ClearIcon() {
     return (jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
 }
-function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabel = 'Back', leading, actions, searchable = false, searchValue: externalSearchValue, onSearchChange, searchPlaceholder = 'Search...', sticky = true, transparent = false, bottomSlot, className = '', }) {
+function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabel = 'Back', leading, actions, maxVisibleActions, overflowLabel = 'More actions', trailing, searchable = false, searchValue: externalSearchValue, onSearchChange, searchPlaceholder = 'Search...', sticky = true, transparent = false, bottomSlot, className = '', }) {
     const [isSearchActive, setIsSearchActive] = useState(false);
     const [internalSearchValue, setInternalSearchValue] = useState('');
+    const [isOverflowOpen, setIsOverflowOpen] = useState(false);
+    // The overflow button takes one of the visible slots.
+    const allActions = actions !== null && actions !== void 0 ? actions : [];
+    const shouldOverflow = maxVisibleActions !== undefined && allActions.length > maxVisibleActions;
+    const visibleActions = shouldOverflow
+        ? allActions.slice(0, Math.max(maxVisibleActions - 1, 0))
+        : allActions;
+    const overflowActions = shouldOverflow ? allActions.slice(visibleActions.length) : [];
     const searchValue = externalSearchValue !== undefined ? externalSearchValue : internalSearchValue;
     const handleSearchInput = (e) => {
         const val = e.target.value;
@@ -3346,14 +3496,20 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
             ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'
             : 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs', 'pt-[env(safe-area-inset-top,0px)]', className), "data-testid": "mobile-header", children: [jsx("div", { className: "h-14 px-3.5 flex items-center justify-between gap-3 relative", children: searchable && isSearchActive ? (jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxs("div", { className: "relative flex-1 flex items-center", children: [jsx("span", { className: "absolute left-3 pointer-events-none", children: jsx(SearchIcon$1, {}) }), jsx("input", { type: "text", value: searchValue, onChange: handleSearchInput, placeholder: searchPlaceholder, autoFocus: true, className: "w-full pl-9 pr-8 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-transparent focus:border-blue-500 focus:outline-hidden transition-all", "data-testid": "mobile-header-search-input" }), searchValue && (jsx("button", { type: "button", onClick: handleClearSearch, "aria-label": "Clear search", className: "absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer", children: jsx(ClearIcon, {}) }))] }), jsx("button", { type: "button", onClick: () => setIsSearchActive(false), className: "text-xs font-semibold text-blue-600 dark:text-blue-400 px-2 py-1.5 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-950/40 cursor-pointer", children: "Cancel" })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 z-10", children: onBack ? (jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, className: "flex items-center gap-0.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 p-1 -ml-1 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-back-btn", children: [jsx(ChevronLeftIcon$1, {}), jsx("span", { className: "text-xs font-semibold hidden sm:inline", children: backLabel })] })) : (leading) }), jsxs("div", { className: buildClassName('flex-1 min-w-0 px-2', titleAlign === 'center'
                                 ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'
-                                : 'text-left'), children: [title && (jsx("div", { className: "text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsx("div", { className: "text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsx("button", { type: "button", onClick: () => setIsSearchActive(true), "aria-label": "Search", className: "p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-search-toggle", children: jsx(SearchIcon$1, {}) })), actions === null || actions === void 0 ? void 0 : actions.map((action) => {
+                                : 'text-left'), children: [title && (jsx("div", { className: "text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsx("div", { className: "text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsx("button", { type: "button", onClick: () => setIsSearchActive(true), "aria-label": "Search", className: "p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-search-toggle", children: jsx(SearchIcon$1, {}) })), visibleActions.map((action) => {
                                     const badgeColor = {
                                         danger: 'bg-red-500 text-white',
                                         info: 'bg-blue-500 text-white',
                                         success: 'bg-emerald-500 text-white',
                                     }[action.badgeVariant || 'danger'];
                                     return (jsxs("button", { type: "button", disabled: action.disabled, onClick: action.onClick, "aria-label": action.label, className: buildClassName('p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors relative cursor-pointer', action.disabled && 'opacity-40 cursor-not-allowed pointer-events-none'), "data-testid": `mobile-header-action-${action.id}`, children: [jsx("span", { className: "text-base", children: action.icon }), action.badge !== undefined && action.badge !== null && (jsx("span", { className: buildClassName('absolute top-1 right-1 min-w-[14px] h-3.5 px-0.5 rounded-full text-[9px] font-bold flex items-center justify-center shadow-xs', badgeColor), "data-testid": `mobile-header-badge-${action.id}`, children: action.badge }))] }, action.id));
-                                })] })] })) }), bottomSlot && (jsx("div", { className: "px-3 py-2 border-t border-[var(--ui-border-muted)]", "data-testid": "mobile-header-bottom-slot", children: bottomSlot }))] }));
+                                }), overflowActions.length > 0 && (jsx("button", { type: "button", onClick: () => setIsOverflowOpen(true), "aria-label": overflowLabel, "aria-haspopup": "dialog", "aria-expanded": isOverflowOpen, className: "p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-overflow", children: jsx(MoreIcon, {}) })), trailing] })] })) }), overflowActions.length > 0 && (jsx(ActionSheet, { isOpen: isOverflowOpen, onClose: () => setIsOverflowOpen(false), actions: overflowActions.map((action) => ({
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                    disabled: action.disabled,
+                    onClick: action.onClick,
+                })) })), bottomSlot && (jsx("div", { className: "px-3 py-2 border-t border-[var(--ui-border-muted)]", "data-testid": "mobile-header-bottom-slot", children: bottomSlot }))] }));
 }
 MobileHeader.displayName = 'MobileHeader';
 
@@ -4329,14 +4485,14 @@ StatusPill.displayName = 'StatusPill';
 
 const ChevronUpIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsx("polyline", { points: "18 15 12 9 6 15" }) }));
 const StickyActionBar = forwardRef((props, ref) => {
-    const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', className, ...restProps } = props;
+    const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', safeArea = true, bottomOffset, className, style, ...restProps } = props;
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const positionClass = position === 'fixed'
         ? 'fixed bottom-0 left-0 right-0 z-30'
         : position === 'sticky'
             ? 'sticky bottom-0 z-30'
             : 'relative z-10';
-    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', safeArea && 'pb-[calc(0.875rem+env(safe-area-inset-bottom,0px))]', className), style: bottomOffset && position !== 'relative' ? { bottom: bottomOffset, ...style } : style, "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
 });
 StickyActionBar.displayName = 'StickyActionBar';
 
@@ -4929,5 +5085,5 @@ const useIsTabletOrMobile = () => {
     return isMobile || isTablet;
 };
 
-export { Accordion, ActionSheet, Alert, Badge, Banner, BodyText, BottomNavigation, Breadcrumb, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, DOTS, DataList, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, Flex, FlexItem, FloatingActionButton, Grid, GridCol, HeadingText, Input, Label, Loader, MobileHeader, MobilePicker, MobileStepper, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, PinInput, PullToRefresh, QuantityStepper, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SegmentedControl, SelectBox, Skeleton, SortIconMap, StatusPill, StickyActionBar, SwipeableRow, SwipeableTabs, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, WheelPicker, buildClassName, buildInputClass, evaluatePasswordStrength, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useRowSelection, useToast };
+export { Accordion, ActionSheet, Alert, BREAKPOINT_QUERIES, Badge, Banner, BodyText, BottomNavigation, Breadcrumb, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, Checkbox, CheckboxGroup, DOTS, DataList, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, Flex, FlexItem, FloatingActionButton, Grid, GridCol, HeadingText, Input, Label, Loader, MobileHeader, MobilePicker, MobileStepper, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, PinInput, PullToRefresh, QuantityStepper, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SegmentedControl, SelectBox, Skeleton, SortIconMap, StatusPill, StickyActionBar, SwipeableRow, SwipeableTabs, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, WheelPicker, buildClassName, buildInputClass, evaluatePasswordStrength, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useBreakpoint, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, useMediaQuery, usePagination, useResponsiveValue, useRowSelection, useToast };
 //# sourceMappingURL=react-tailwind.es.js.map