@pk-design/react-tailwind 1.8.1 → 1.10.0

package/dist/es/components/BottomNavigation/BottomNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigation.js","sources":["../../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import React from 'react'\nimport type { BottomNavigationProps, BottomNavigationItem } from './BottomNavigation.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function BottomNavigation({\n  items,\n  activeId,\n  onChange,\n  fixed = true,\n  showLabels = 'always',\n  theme = 'light',\n  activeIndicatorStyle = 'line',\n  containerClass = '',\n  itemClass = '',\n}: BottomNavigationProps) {\n  const handleTabClick = (item: BottomNavigationItem) => {\n    if (item.disabled) return\n    item.onClick?.()\n    onChange(item.id)\n  }\n\n  const themeStyles = {\n    light:\n      'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',\n    dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',\n    primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',\n  }[theme]\n\n  return (\n    <nav\n      aria-label=\"Bottom Navigation\"\n      className={buildClassName(\n        'w-full flex items-center justify-around select-none shadow-lg transition-colors relative',\n        fixed && 'fixed bottom-0 left-0 right-0 z-40',\n        'pb-[env(safe-area-inset-bottom,6px)] px-2',\n        themeStyles,\n        containerClass,\n      )}\n      data-testid=\"bottom-navigation\"\n    >\n      {items.map((item) => {\n        const isActive = item.id === activeId\n        const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive)\n\n        const activeItemColor = {\n          light: 'text-blue-600 dark:text-blue-400 font-bold',\n          dark: 'text-white font-bold',\n          primary: 'text-white font-bold',\n        }[theme]\n\n        const inactiveItemColor = {\n          light:\n            'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium',\n          dark: 'text-gray-400 hover:text-gray-200 font-medium',\n          primary: 'text-blue-200 hover:text-white font-medium',\n        }[theme]\n\n        const pillActiveStyles = {\n          light:\n            'bg-blue-100 dark:bg-blue-950/80 text-blue-600 dark:text-blue-400 shadow-xs scale-105',\n          dark: 'bg-gray-800 text-white ring-1 ring-gray-700 shadow-xs scale-105',\n          primary: 'bg-white/25 text-white shadow-xs scale-105',\n        }[theme]\n\n        const badgeColor = {\n          danger: 'bg-red-500 text-white',\n          info: 'bg-blue-500 text-white',\n          success: 'bg-emerald-500 text-white',\n        }[item.badgeVariant || 'danger']\n\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            disabled={item.disabled}\n            onClick={() => handleTabClick(item)}\n            className={buildClassName(\n              'flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group',\n              item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n              isActive ? activeItemColor : inactiveItemColor,\n              itemClass,\n            )}\n            data-testid={`bottom-nav-item-${item.id}`}\n            aria-selected={isActive}\n          >\n            {/* Active Indicator Bar on Top Border */}\n            {activeIndicatorStyle === 'line' && isActive && (\n              <span\n                className={buildClassName(\n                  'absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10',\n                  theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400',\n                )}\n              />\n            )}\n\n            {/* Icon & Badge Container */}\n            <div\n              className={buildClassName(\n                'relative inline-flex items-center justify-center transition-all duration-200',\n                activeIndicatorStyle === 'pill'\n                  ? buildClassName(\n                      'px-4 py-1 rounded-full',\n                      isActive\n                        ? pillActiveStyles\n                        : 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40',\n                    )\n                  : 'px-1 py-0.5',\n              )}\n            >\n              <span className=\"text-xl transition-transform duration-150 group-active:scale-95\">\n                {isActive && item.activeIcon ? item.activeIcon : item.icon}\n              </span>\n\n              {/* Notification Badge */}\n              {item.badge !== undefined && item.badge !== null && (\n                <span\n                  className={buildClassName(\n                    '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',\n                    badgeColor,\n                  )}\n                  data-testid={`bottom-nav-badge-${item.id}`}\n                >\n                  {item.badge}\n                </span>\n              )}\n            </div>\n\n            {/* Label */}\n            {showLabelText && (\n              <span\n                className={buildClassName(\n                  'text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150',\n                  isActive ? 'font-bold' : 'font-medium opacity-90',\n                )}\n              >\n                {item.label}\n              </span>\n            )}\n\n            {/* Active Dot Indicator */}\n            {activeIndicatorStyle === 'dot' && isActive && (\n              <span\n                className={buildClassName(\n                  'size-1.5 rounded-full mt-1 transition-all duration-200',\n                  theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400',\n                )}\n              />\n            )}\n          </button>\n        )\n      })}\n    </nav>\n  )\n}\n\nBottomNavigation.displayName = 'BottomNavigation'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"BottomNavigation.js","sources":["../../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import React, { type ElementType } from 'react'\nimport type { BottomNavigationProps, BottomNavigationItem } from './BottomNavigation.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function BottomNavigation({\n  items,\n  activeId,\n  onChange,\n  fixed = true,\n  showLabels = 'always',\n  theme = 'light',\n  activeIndicatorStyle = 'line',\n  containerClass = '',\n  itemClass = '',\n  linkAs = 'a',\n  linkHrefProp = 'href',\n  ariaLabel = 'Bottom Navigation',\n  hidden = false,\n}: BottomNavigationProps) {\n  const handleTabClick = (item: BottomNavigationItem) => {\n    if (item.disabled) return\n    item.onClick?.()\n    onChange?.(item.id)\n  }\n\n  // Removed from the tree, not just covered, so hidden tabs can't take focus.\n  if (hidden) return null\n\n  const themeStyles = {\n    light:\n      'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',\n    dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',\n    primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',\n  }[theme]\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={buildClassName(\n        'w-full flex items-center justify-around select-none shadow-lg transition-colors relative',\n        fixed && 'fixed bottom-0 left-0 right-0 z-40',\n        'pb-[env(safe-area-inset-bottom,6px)] px-2',\n        themeStyles,\n        containerClass,\n      )}\n      data-testid=\"bottom-navigation\"\n    >\n      {items.map((item) => {\n        const isActive = item.id === activeId\n        const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive)\n\n        const activeItemColor = {\n          light: 'text-blue-600 dark:text-blue-400 font-bold',\n          dark: 'text-white font-bold',\n          primary: 'text-white font-bold',\n        }[theme]\n\n        const inactiveItemColor = {\n          light:\n            'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium',\n          dark: 'text-gray-400 hover:text-gray-200 font-medium',\n          primary: 'text-blue-200 hover:text-white font-medium',\n        }[theme]\n\n        const pillActiveStyles = {\n          light:\n            'bg-blue-100 dark:bg-blue-950/80 text-blue-600 dark:text-blue-400 shadow-xs scale-105',\n          dark: 'bg-gray-800 text-white ring-1 ring-gray-700 shadow-xs scale-105',\n          primary: 'bg-white/25 text-white shadow-xs scale-105',\n        }[theme]\n\n        const badgeColor = {\n          danger: 'bg-red-500 text-white',\n          info: 'bg-blue-500 text-white',\n          success: 'bg-emerald-500 text-white',\n        }[item.badgeVariant || 'danger']\n\n        // A disabled item stays a button: a link can't be disabled.\n        const isLink = Boolean(item.href) && !item.disabled\n        const ItemElement: ElementType = isLink ? linkAs : 'button'\n        const elementProps = isLink\n          ? { [linkHrefProp]: item.href }\n          : { type: 'button', disabled: item.disabled }\n\n        return (\n          <ItemElement\n            key={item.id}\n            {...elementProps}\n            onClick={() => handleTabClick(item)}\n            className={buildClassName(\n              'flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group',\n              item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n              isActive ? activeItemColor : inactiveItemColor,\n              itemClass,\n            )}\n            data-testid={`bottom-nav-item-${item.id}`}\n            aria-current={isActive ? 'page' : undefined}\n            // With its label hidden, the item still needs a name; the icon is decorative.\n            aria-label={!showLabelText && typeof item.label === 'string' ? item.label : undefined}\n          >\n            {/* Active Indicator Bar on Top Border */}\n            {activeIndicatorStyle === 'line' && isActive && (\n              <span\n                className={buildClassName(\n                  'absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10',\n                  theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400',\n                )}\n              />\n            )}\n\n            {/* Icon & Badge Container */}\n            <div\n              className={buildClassName(\n                'relative inline-flex items-center justify-center transition-all duration-200',\n                activeIndicatorStyle === 'pill'\n                  ? buildClassName(\n                      'px-4 py-1 rounded-full',\n                      isActive\n                        ? pillActiveStyles\n                        : 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40',\n                    )\n                  : 'px-1 py-0.5',\n              )}\n            >\n              <span\n                className=\"text-xl transition-transform duration-150 group-active:scale-95\"\n                aria-hidden=\"true\"\n              >\n                {isActive && item.activeIcon ? item.activeIcon : item.icon}\n              </span>\n\n              {/* Notification Badge */}\n              {item.badge !== undefined && item.badge !== null && (\n                <span\n                  className={buildClassName(\n                    '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',\n                    badgeColor,\n                  )}\n                  data-testid={`bottom-nav-badge-${item.id}`}\n                >\n                  {item.badge}\n                </span>\n              )}\n            </div>\n\n            {/* Label */}\n            {showLabelText && (\n              <span\n                className={buildClassName(\n                  'text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150',\n                  isActive ? 'font-bold' : 'font-medium opacity-90',\n                )}\n              >\n                {item.label}\n              </span>\n            )}\n\n            {/* Active Dot Indicator */}\n            {activeIndicatorStyle === 'dot' && isActive && (\n              <span\n                className={buildClassName(\n                  'size-1.5 rounded-full mt-1 transition-all duration-200',\n                  theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400',\n                )}\n              />\n            )}\n          </ItemElement>\n        )\n      })}\n    </nav>\n  )\n}\n\nBottomNavigation.displayName = 'BottomNavigation'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/es/components/Button/Button.js

@@ -1,64 +1,40 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
 import { buildClassName } from '../../utils/build-classname.js';
 import { Loader } from '../Loader/index.js';
 import { TextContent } from '../TextContent/TextContent.js';
 
 /**
  * Tailwind CSS classes for theme + variant combinations.
+ *
+ * Only colours live here. Focus outline width/offset and disabled styling are
+ * applied uniformly in the component so they can be toggled in one place.
  */
 const THEMED_BTN_CLASS = {
     primary: {
-        default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
-        outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
-        plain: 'text-[var(--ui-primary-text)] hover:bg-blue-50/80 dark:hover:bg-blue-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
+        default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:outline-[var(--ui-primary-ring)]',
+        outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary-ring)]',
+        plain: 'text-[var(--ui-primary-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-primary-ring)]',
     },
     danger: {
-        default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
-        outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
-        plain: 'text-[var(--ui-danger-text)] hover:bg-red-50/80 dark:hover:bg-red-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
+        default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:outline-[var(--ui-danger-ring)]',
+        outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:outline-[var(--ui-danger-ring)]',
+        plain: 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',
     },
     secondary: {
-        default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
-        outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',
-        plain: 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',
+        default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',
+        outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
+        plain: 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',
     },
     success: {
-        default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',
-        outlined: 'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',
-        plain: 'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',
+        default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',
+        outlined: 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
+        plain: 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',
     },
     warning: {
-        default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',
-        outlined: 'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',
-        plain: 'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',
-    },
-};
-const LOADER_TEXT_CLASS = {
-    primary: {
-        default: 'text-white',
-        outlined: 'text-[var(--ui-primary-text)]',
-        plain: 'text-[var(--ui-primary-text)]',
-    },
-    danger: {
-        default: 'text-white',
-        outlined: 'text-[var(--ui-danger-text)]',
-        plain: 'text-[var(--ui-danger-text)]',
-    },
-    secondary: {
-        default: 'text-gray-700 dark:text-white',
-        outlined: 'text-gray-700 dark:text-gray-200',
-        plain: 'text-gray-700 dark:text-gray-200',
-    },
-    success: {
-        default: 'text-white',
-        outlined: 'text-emerald-600 dark:text-emerald-400',
-        plain: 'text-emerald-600 dark:text-emerald-400',
-    },
-    warning: {
-        default: 'text-white',
-        outlined: 'text-amber-600 dark:text-amber-400',
-        plain: 'text-amber-600 dark:text-amber-400',
+        default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',
+        outlined: 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
+        plain: 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',
     },
 };
 const SIZE_CLASSES = {
@@ -78,22 +54,32 @@ const LOADER_SIZE = {
 };
 /**
  * Base shared tailwind classes.
+ *
+ * Disabled styling is keyed off both the native `disabled` attribute and
+ * `aria-disabled`, so non-button elements rendered via `as` look disabled too.
  */
 const BASE_BTN_CLASS = 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +
-    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +
-    'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none';
+    'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +
+    'active:scale-[0.98] focus:outline-none ' +
+    'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +
+    'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none';
 const Button = forwardRef(({ as, type, ...props }, ref) => {
-    var _a, _b, _c, _d;
     const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, active, onClick, ...restProps } = props;
     const Component = as || 'button';
     const isNativeButton = Component === 'button';
+    // Clean invalid props when not rendering a real button
+    const { type: _ignoreType, disabled: _ignoreDisabled, role, tabIndex, onKeyDown, onKeyUp, ...domProps } = restProps;
+    const ariaLabel = domProps['aria-label'];
+    const ariaLabelledBy = domProps['aria-labelledby'];
     // Accessibility guard for icon-only buttons
-    if (iconOnly && !restProps['aria-label']) {
-        console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.');
-    }
+    useEffect(() => {
+        if (iconOnly && !ariaLabel && !ariaLabelledBy) {
+            console.warn('[ui] <Button iconOnly> requires aria-label or aria-labelledby for accessibility.');
+        }
+    }, [iconOnly, ariaLabel, ariaLabelledBy]);
     const resolvedDisabled = Boolean(disabled || loading);
-    // Clean invalid props when not rendering a real button
-    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps;
+    // Links (`href`, or `to` for router Link components) keep their native semantics.
+    const isLink = !isNativeButton && (domProps.href != null || domProps.to != null);
     const handleClick = (e) => {
         if (resolvedDisabled) {
             e.preventDefault();
@@ -102,31 +88,73 @@ const Button = forwardRef(({ as, type, ...props }, ref) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
+    // Mirror native <button> keyboard activation for non-button elements:
+    // Enter activates on keydown, Space on keyup (and must not scroll the page).
+    const handleKeyDown = (e) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        if (e.defaultPrevented || e.target !== e.currentTarget)
+            return;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+        else if (e.key === ' ') {
+            e.preventDefault();
+        }
+    };
+    const handleKeyUp = (e) => {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(e);
+        if (e.defaultPrevented || e.target !== e.currentTarget)
+            return;
+        if (e.key === ' ') {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+    };
     const elementProps = isNativeButton
         ? {
             type: type !== null && type !== void 0 ? type : 'button',
             disabled: resolvedDisabled,
+            role,
+            tabIndex,
             onClick: handleClick,
+            onKeyDown,
+            onKeyUp,
         }
-        : {
-            role: (_a = cleanRest.role) !== null && _a !== void 0 ? _a : 'button',
-            tabIndex: resolvedDisabled ? -1 : ((_b = cleanRest.tabIndex) !== null && _b !== void 0 ? _b : 0),
-            'aria-disabled': resolvedDisabled ? true : undefined,
-            onClick: handleClick,
-        };
+        : isLink
+            ? {
+                role,
+                tabIndex: resolvedDisabled ? -1 : tabIndex,
+                'aria-disabled': resolvedDisabled ? true : undefined,
+                onClick: handleClick,
+                onKeyDown,
+                onKeyUp,
+            }
+            : {
+                role: role !== null && role !== void 0 ? role : 'button',
+                tabIndex: resolvedDisabled ? -1 : (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0),
+                'aria-disabled': resolvedDisabled ? true : undefined,
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+                onKeyUp: handleKeyUp,
+            };
     const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md;
     const classes = useMemo(() => {
         var _a;
-        return buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal, !noOutlineOnFocus && 'focus-visible:ring-2 focus-visible:ring-offset-2', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', active && 'ring-2 ring-offset-2 ring-current', className);
+        return buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal, 
+        // An outline (not a ring) so the offset gap stays transparent on any surface/mode.
+        !noOutlineOnFocus &&
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
     }, [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className]);
-    const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: buildClassName((_c = LOADER_TEXT_CLASS[theme]) === null || _c === void 0 ? void 0 : _c[variant]) }));
+    // The spinner and loading text inherit the button's text colour.
+    const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: "text-current" }));
     /**
      * SPECIAL CASE: iconOnly + loading → show spinner only
      */
     if (loading && iconOnly) {
-        return (jsx(Component, { ref: ref, className: classes, "aria-busy": "true", "aria-pressed": active !== undefined ? active : undefined, ...elementProps, ...cleanRest, children: loaderIcon }));
+        return (jsx(Component, { ref: ref, className: classes, "aria-busy": "true", "aria-pressed": active !== undefined ? active : undefined, ...domProps, ...elementProps, children: loaderIcon }));
     }
-    return (jsx(Component, { ref: ref, className: classes, "aria-busy": loading ? 'true' : undefined, "aria-pressed": active !== undefined ? active : undefined, ...elementProps, ...cleanRest, children: loading ? (jsxs("span", { className: "inline-flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, loadingText ? (jsx(TextContent, { className: buildClassName((_d = LOADER_TEXT_CLASS[theme]) === null || _d === void 0 ? void 0 : _d[variant]), children: loadingText })) : (children)] })) : (jsxs(Fragment, { children: [leftIcon && jsx("span", { className: "shrink-0 inline-flex items-center", children: leftIcon }), children, rightIcon && jsx("span", { className: "shrink-0 inline-flex items-center", children: rightIcon })] })) }));
+    return (jsx(Component, { ref: ref, className: classes, "aria-busy": loading ? 'true' : undefined, "aria-pressed": active !== undefined ? active : undefined, ...domProps, ...elementProps, children: loading ? (jsxs("span", { className: "inline-flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, loadingText ? (jsx(TextContent, { className: "text-current", children: loadingText })) : (children)] })) : (jsxs(Fragment, { children: [leftIcon && jsx("span", { className: "shrink-0 inline-flex items-center", children: leftIcon }), children, rightIcon && jsx("span", { className: "shrink-0 inline-flex items-center", children: rightIcon })] })) }));
 });
 Button.displayName = 'Button';
 

package/dist/es/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n  primary: {\n    default:\n      'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',\n    outlined:\n      'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',\n    plain:\n      'text-[var(--ui-primary-text)] hover:bg-blue-50/80 dark:hover:bg-blue-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',\n  },\n  danger: {\n    default:\n      'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',\n    outlined:\n      'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',\n    plain:\n      'text-[var(--ui-danger-text)] hover:bg-red-50/80 dark:hover:bg-red-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',\n  },\n  secondary: {\n    default:\n      'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',\n    outlined:\n      'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',\n    plain:\n      'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',\n  },\n  success: {\n    default:\n      'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',\n    outlined:\n      'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n    plain:\n      'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n  },\n  warning: {\n    default:\n      'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',\n    outlined:\n      'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n    plain:\n      'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n  },\n}\n\nconst LOADER_TEXT_CLASS: ThemedButtonClass = {\n  primary: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-primary-text)]',\n    plain: 'text-[var(--ui-primary-text)]',\n  },\n  danger: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-danger-text)]',\n    plain: 'text-[var(--ui-danger-text)]',\n  },\n  secondary: {\n    default: 'text-gray-700 dark:text-white',\n    outlined: 'text-gray-700 dark:text-gray-200',\n    plain: 'text-gray-700 dark:text-gray-200',\n  },\n  success: {\n    default: 'text-white',\n    outlined: 'text-emerald-600 dark:text-emerald-400',\n    plain: 'text-emerald-600 dark:text-emerald-400',\n  },\n  warning: {\n    default: 'text-white',\n    outlined: 'text-amber-600 dark:text-amber-400',\n    plain: 'text-amber-600 dark:text-amber-400',\n  },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n  xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },\n  sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },\n  md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },\n  lg: {\n    normal: 'h-10 px-5 rounded-lg gap-2 text-base',\n    iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n  },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n */\nconst BASE_BTN_CLASS =\n  'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +\n  'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +\n  'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none'\n\nexport const Button = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, type, ...props }: ButtonProps<C>,\n    ref: PolymorphicRef<C>,\n  ) => {\n    const {\n      className = '',\n      children,\n      theme = 'primary',\n      variant = 'default',\n      size = 'md',\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      loading = false,\n      loadingText = '',\n      rounded = false,\n      disabled,\n      iconOnly = false,\n      noOutlineOnFocus = false,\n      active,\n      onClick,\n      ...restProps\n    } = props\n\n    const Component = as || 'button'\n    const isNativeButton = Component === 'button'\n\n    // Accessibility guard for icon-only buttons\n    if (iconOnly && !(restProps as Record<string, unknown>)['aria-label']) {\n      console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.')\n    }\n\n    const resolvedDisabled = Boolean(disabled || loading)\n\n    // Clean invalid props when not rendering a real button\n    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps\n\n    const handleClick = (e: React.MouseEvent<any>) => {\n      if (resolvedDisabled) {\n        e.preventDefault()\n        e.stopPropagation()\n        return\n      }\n      onClick?.(e)\n    }\n\n    const elementProps = isNativeButton\n      ? {\n          type: type ?? 'button',\n          disabled: resolvedDisabled,\n          onClick: handleClick,\n        }\n      : {\n          role: cleanRest.role ?? 'button',\n          tabIndex: resolvedDisabled ? -1 : (cleanRest.tabIndex ?? 0),\n          'aria-disabled': resolvedDisabled ? true : undefined,\n          onClick: handleClick,\n        }\n\n    const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n    const classes = useMemo(\n      () =>\n        buildClassName(\n          BASE_BTN_CLASS,\n          THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n          iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n          !noOutlineOnFocus && 'focus-visible:ring-2 focus-visible:ring-offset-2',\n          rounded && 'rounded-full',\n          fullWidth && 'w-full',\n          variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none',\n          active && 'ring-2 ring-offset-2 ring-current',\n          className,\n        ),\n      [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n    )\n\n    const loaderIcon = (\n      <Loader\n        data-testid=\"btn-loader-icon\"\n        size={LOADER_SIZE[size] || 'xs'}\n        className={buildClassName(LOADER_TEXT_CLASS[theme]?.[variant])}\n      />\n    )\n\n    /**\n     * SPECIAL CASE: iconOnly + loading → show spinner only\n     */\n    if (loading && iconOnly) {\n      return (\n        <Component\n          ref={ref}\n          className={classes}\n          aria-busy=\"true\"\n          aria-pressed={active !== undefined ? active : undefined}\n          {...elementProps}\n          {...cleanRest}\n        >\n          {loaderIcon}\n        </Component>\n      )\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={classes}\n        aria-busy={loading ? 'true' : undefined}\n        aria-pressed={active !== undefined ? active : undefined}\n        {...elementProps}\n        {...cleanRest}\n      >\n        {loading ? (\n          <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            {loadingText ? (\n              <TextContent className={buildClassName(LOADER_TEXT_CLASS[theme]?.[variant])}>\n                {loadingText}\n              </TextContent>\n            ) : (\n              children\n            )}\n          </span>\n        ) : (\n          <>\n            {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n          </>\n        )}\n      </Component>\n    )\n  },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n *\n * Only colours live here. Focus outline width/offset and disabled styling are\n * applied uniformly in the component so they can be toggled in one place.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n  primary: {\n    default:\n      'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:outline-[var(--ui-primary-ring)]',\n    outlined:\n      'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary-ring)]',\n    plain:\n      'text-[var(--ui-primary-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-primary-ring)]',\n  },\n  danger: {\n    default:\n      'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:outline-[var(--ui-danger-ring)]',\n    outlined:\n      'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:outline-[var(--ui-danger-ring)]',\n    plain:\n      'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',\n  },\n  secondary: {\n    default:\n      'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',\n    outlined:\n      'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',\n    plain:\n      'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',\n  },\n  success: {\n    default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',\n    outlined:\n      'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',\n    plain:\n      'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',\n  },\n  warning: {\n    default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',\n    outlined:\n      'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',\n    plain:\n      'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',\n  },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n  xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },\n  sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },\n  md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },\n  lg: {\n    normal: 'h-10 px-5 rounded-lg gap-2 text-base',\n    iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n  },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n *\n * Disabled styling is keyed off both the native `disabled` attribute and\n * `aria-disabled`, so non-button elements rendered via `as` look disabled too.\n */\nconst BASE_BTN_CLASS =\n  'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +\n  'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +\n  'active:scale-[0.98] focus:outline-none ' +\n  'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +\n  'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none'\n\nexport const Button = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, type, ...props }: ButtonProps<C>,\n    ref: PolymorphicRef<C>,\n  ) => {\n    const {\n      className = '',\n      children,\n      theme = 'primary',\n      variant = 'default',\n      size = 'md',\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      loading = false,\n      loadingText = '',\n      rounded = false,\n      disabled,\n      iconOnly = false,\n      noOutlineOnFocus = false,\n      active,\n      onClick,\n      ...restProps\n    } = props\n\n    const Component = as || 'button'\n    const isNativeButton = Component === 'button'\n\n    // Clean invalid props when not rendering a real button\n    const {\n      type: _ignoreType,\n      disabled: _ignoreDisabled,\n      role,\n      tabIndex,\n      onKeyDown,\n      onKeyUp,\n      ...domProps\n    } = restProps as Record<string, any>\n\n    const ariaLabel = domProps['aria-label']\n    const ariaLabelledBy = domProps['aria-labelledby']\n\n    // Accessibility guard for icon-only buttons\n    useEffect(() => {\n      if (iconOnly && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          '[ui] <Button iconOnly> requires aria-label or aria-labelledby for accessibility.',\n        )\n      }\n    }, [iconOnly, ariaLabel, ariaLabelledBy])\n\n    const resolvedDisabled = Boolean(disabled || loading)\n\n    // Links (`href`, or `to` for router Link components) keep their native semantics.\n    const isLink = !isNativeButton && (domProps.href != null || domProps.to != null)\n\n    const handleClick = (e: React.MouseEvent<any>) => {\n      if (resolvedDisabled) {\n        e.preventDefault()\n        e.stopPropagation()\n        return\n      }\n      onClick?.(e)\n    }\n\n    // Mirror native <button> keyboard activation for non-button elements:\n    // Enter activates on keydown, Space on keyup (and must not scroll the page).\n    const handleKeyDown = (e: React.KeyboardEvent<any>) => {\n      onKeyDown?.(e)\n      if (e.defaultPrevented || e.target !== e.currentTarget) return\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        e.currentTarget.click()\n      } else if (e.key === ' ') {\n        e.preventDefault()\n      }\n    }\n\n    const handleKeyUp = (e: React.KeyboardEvent<any>) => {\n      onKeyUp?.(e)\n      if (e.defaultPrevented || e.target !== e.currentTarget) return\n      if (e.key === ' ') {\n        e.preventDefault()\n        e.currentTarget.click()\n      }\n    }\n\n    const elementProps = isNativeButton\n      ? {\n          type: type ?? 'button',\n          disabled: resolvedDisabled,\n          role,\n          tabIndex,\n          onClick: handleClick,\n          onKeyDown,\n          onKeyUp,\n        }\n      : isLink\n        ? {\n            role,\n            tabIndex: resolvedDisabled ? -1 : tabIndex,\n            'aria-disabled': resolvedDisabled ? true : undefined,\n            onClick: handleClick,\n            onKeyDown,\n            onKeyUp,\n          }\n        : {\n            role: role ?? 'button',\n            tabIndex: resolvedDisabled ? -1 : (tabIndex ?? 0),\n            'aria-disabled': resolvedDisabled ? true : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onKeyUp: handleKeyUp,\n          }\n\n    const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n    const classes = useMemo(\n      () =>\n        buildClassName(\n          BASE_BTN_CLASS,\n          THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n          iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n          // An outline (not a ring) so the offset gap stays transparent on any surface/mode.\n          !noOutlineOnFocus &&\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid',\n          rounded && 'rounded-full',\n          fullWidth && 'w-full',\n          variant === 'default' && 'shadow-xs hover:shadow-none',\n          active && 'ring-2 ring-current',\n          className,\n        ),\n      [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n    )\n\n    // The spinner and loading text inherit the button's text colour.\n    const loaderIcon = (\n      <Loader\n        data-testid=\"btn-loader-icon\"\n        size={LOADER_SIZE[size] || 'xs'}\n        className=\"text-current\"\n      />\n    )\n\n    /**\n     * SPECIAL CASE: iconOnly + loading → show spinner only\n     */\n    if (loading && iconOnly) {\n      return (\n        <Component\n          ref={ref}\n          className={classes}\n          aria-busy=\"true\"\n          aria-pressed={active !== undefined ? active : undefined}\n          {...domProps}\n          {...elementProps}\n        >\n          {loaderIcon}\n        </Component>\n      )\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={classes}\n        aria-busy={loading ? 'true' : undefined}\n        aria-pressed={active !== undefined ? active : undefined}\n        {...domProps}\n        {...elementProps}\n      >\n        {loading ? (\n          <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            {loadingText ? (\n              <TextContent className=\"text-current\">{loadingText}</TextContent>\n            ) : (\n              children\n            )}\n          </span>\n        ) : (\n          <>\n            {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n          </>\n        )}\n      </Component>\n    )\n  },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/es/components/Drawer/Drawer.js

@@ -5,6 +5,7 @@ import { buildClassName } from '../../utils/build-classname.js';
 import { Button } from '../Button/Button.js';
 import SvgChevronLeft from '../Icons/ChevronLeft.svg.js';
 import SvgX from '../Icons/X.svg.js';
+import { useResponsiveValue } from '../../hooks/use-breakpoint.js';
 
 const alignmentMap = {
     center: 'items-center justify-center h-full',
@@ -18,7 +19,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',
@@ -29,7 +31,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);

package/dist/es/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react'\nimport { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport ChevronLeftIcon from '../Icons/ChevronLeft.svg'\nimport XIcon from '../Icons/X.svg'\nimport type { AlignmentMap, DrawerProps, SizeMap } from './Drawer.types'\n\nconst alignmentMap: AlignmentMap = {\n  center: 'items-center justify-center h-full',\n  start: 'justify-start h-full',\n  end: 'justify-end h-full',\n  top: 'items-start justify-center w-full',\n  bottom: 'items-end justify-center h-full',\n}\n\nconst panelAlignmentMap: AlignmentMap = {\n  center: 'data-[closed]:scale-95 rounded-2xl',\n  start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',\n  end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',\n  top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',\n  bottom:\n    'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',\n}\n\nconst panelSizeMap: SizeMap = {\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-2xl',\n  full: 'w-full',\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  isOpen,\n  onClose = () => {},\n  closeOnOutsideClick = true,\n  align = 'end',\n  size = 'md',\n  backdrop = true,\n  title,\n  description,\n  children,\n  footer,\n  footerSticky = false,\n  panelClass = '',\n  contentClass = '',\n  titleClass = '',\n  descriptionClass = '',\n  titleSticky = false,\n  showBackButton = false,\n  showCloseButton = true,\n  dragHandle,\n}) => {\n  const showTitleSection = Boolean(title || description || showBackButton || showCloseButton)\n  const shouldShowDragHandle = dragHandle ?? align === 'bottom'\n  const [viewportHeight, setViewportHeight] = React.useState<number | null>(null)\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setViewportHeight(null)\n      return\n    }\n\n    const updateHeight = () => {\n      if (typeof window !== 'undefined' && window.visualViewport) {\n        setViewportHeight(window.visualViewport.height)\n      }\n    }\n\n    updateHeight()\n    const vv = typeof window !== 'undefined' ? window.visualViewport : null\n    vv?.addEventListener('resize', updateHeight)\n    vv?.addEventListener('scroll', updateHeight)\n\n    return () => {\n      vv?.removeEventListener('resize', updateHeight)\n      vv?.removeEventListener('scroll', updateHeight)\n    }\n  }, [isOpen])\n\n  const handleDialogClose = () => {\n    if (closeOnOutsideClick) {\n      onClose?.()\n    }\n  }\n\n  return (\n    <Dialog\n      open={isOpen}\n      as=\"div\"\n      className=\"relative z-50 focus:outline-none\"\n      onClose={handleDialogClose}\n      transition\n    >\n      {backdrop && (\n        <DialogBackdrop className=\"fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200\" />\n      )}\n\n      <div\n        className=\"fixed left-0 top-0 w-full\"\n        style={{ height: viewportHeight ? `${viewportHeight}px` : '100dvh' }}\n      >\n        <div className={buildClassName('flex', alignmentMap[align])}>\n          <DialogPanel\n            transition\n            className={buildClassName(\n              'w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0',\n              'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0',\n              panelAlignmentMap[align],\n              panelSizeMap[size],\n              panelClass,\n            )}\n          >\n            {/* Top drag handle indicator for mobile bottom sheet */}\n            {shouldShowDragHandle && (\n              <div\n                className=\"w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab\"\n                data-testid=\"drawer-drag-handle\"\n              />\n            )}\n\n            {/* Header Section */}\n            {showTitleSection && (\n              <div\n                className={buildClassName(\n                  'space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0',\n                  titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10',\n                )}\n              >\n                <div className=\"flex items-center justify-between gap-3 min-w-0\">\n                  <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n                    {showBackButton && (\n                      <Button\n                        iconOnly\n                        aria-label=\"Back\"\n                        variant=\"plain\"\n                        theme=\"secondary\"\n                        size=\"xs\"\n                        onClick={onClose}\n                      >\n                        <ChevronLeftIcon className=\"size-4\" />\n                      </Button>\n                    )}\n                    {title && (\n                      <DialogTitle\n                        as=\"h3\"\n                        className={buildClassName(\n                          'text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0',\n                          titleClass,\n                        )}\n                      >\n                        {title}\n                      </DialogTitle>\n                    )}\n                  </div>\n\n                  {showCloseButton && (\n                    <Button\n                      iconOnly\n                      aria-label=\"Close drawer\"\n                      variant=\"plain\"\n                      theme=\"secondary\"\n                      size=\"xs\"\n                      onClick={onClose}\n                      className=\"rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0\"\n                    >\n                      <XIcon className=\"size-4\" />\n                    </Button>\n                  )}\n                </div>\n\n                {description && (\n                  <p\n                    className={buildClassName(\n                      'text-sm text-gray-500 dark:text-gray-400 font-normal truncate',\n                      descriptionClass,\n                    )}\n                  >\n                    {description}\n                  </p>\n                )}\n              </div>\n            )}\n\n            {/* Content Body */}\n            <div className={buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass)}>\n              {children}\n            </div>\n\n            {/* Footer Section */}\n            {footer && (\n              <div\n                className={buildClassName(\n                  'p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0',\n                  footerSticky && 'sticky bottom-0 z-10',\n                )}\n              >\n                {footer}\n              </div>\n            )}\n          </DialogPanel>\n        </div>\n      </div>\n    </Dialog>\n  )\n}\n\nDrawer.displayName = 'Drawer'\n"],"names":["React","_jsxs","_jsx","ChevronLeftIcon","XIcon"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react'\nimport { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport ChevronLeftIcon from '../Icons/ChevronLeft.svg'\nimport XIcon from '../Icons/X.svg'\nimport { useResponsiveValue } from '../../hooks/use-breakpoint'\nimport type { AlignmentMap, DrawerProps, SizeMap } from './Drawer.types'\n\nconst alignmentMap: AlignmentMap = {\n  center: 'items-center justify-center h-full',\n  start: 'justify-start h-full',\n  end: 'justify-end h-full',\n  top: 'items-start justify-center w-full',\n  bottom: 'items-end justify-center h-full',\n}\n\nconst panelAlignmentMap: AlignmentMap = {\n  center: 'data-[closed]:scale-95 rounded-2xl',\n  start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',\n  end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',\n  top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',\n  // Bottom sheets clear the home indicator on notched phones (0 elsewhere).\n  bottom:\n    '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)]',\n}\n\nconst panelSizeMap: SizeMap = {\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-2xl',\n  full: 'w-full',\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  isOpen,\n  onClose = () => {},\n  closeOnOutsideClick = true,\n  align: alignProp = 'end',\n  size: sizeProp = 'md',\n  backdrop = true,\n  title,\n  description,\n  children,\n  footer,\n  footerSticky = false,\n  panelClass = '',\n  contentClass = '',\n  titleClass = '',\n  descriptionClass = '',\n  titleSticky = false,\n  showBackButton = false,\n  showCloseButton = true,\n  dragHandle,\n}) => {\n  const align = useResponsiveValue(alignProp)\n  const size = useResponsiveValue(sizeProp)\n  const showTitleSection = Boolean(title || description || showBackButton || showCloseButton)\n  const shouldShowDragHandle = dragHandle ?? align === 'bottom'\n  const [viewportHeight, setViewportHeight] = React.useState<number | null>(null)\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setViewportHeight(null)\n      return\n    }\n\n    const updateHeight = () => {\n      if (typeof window !== 'undefined' && window.visualViewport) {\n        setViewportHeight(window.visualViewport.height)\n      }\n    }\n\n    updateHeight()\n    const vv = typeof window !== 'undefined' ? window.visualViewport : null\n    vv?.addEventListener('resize', updateHeight)\n    vv?.addEventListener('scroll', updateHeight)\n\n    return () => {\n      vv?.removeEventListener('resize', updateHeight)\n      vv?.removeEventListener('scroll', updateHeight)\n    }\n  }, [isOpen])\n\n  const handleDialogClose = () => {\n    if (closeOnOutsideClick) {\n      onClose?.()\n    }\n  }\n\n  return (\n    <Dialog\n      open={isOpen}\n      as=\"div\"\n      className=\"relative z-50 focus:outline-none\"\n      onClose={handleDialogClose}\n      transition\n    >\n      {backdrop && (\n        <DialogBackdrop className=\"fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200\" />\n      )}\n\n      <div\n        className=\"fixed left-0 top-0 w-full\"\n        style={{ height: viewportHeight ? `${viewportHeight}px` : '100dvh' }}\n      >\n        <div className={buildClassName('flex', alignmentMap[align])}>\n          <DialogPanel\n            transition\n            className={buildClassName(\n              'w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0',\n              'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0',\n              panelAlignmentMap[align],\n              panelSizeMap[size],\n              panelClass,\n            )}\n          >\n            {/* Top drag handle indicator for mobile bottom sheet */}\n            {shouldShowDragHandle && (\n              <div\n                className=\"w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab\"\n                data-testid=\"drawer-drag-handle\"\n              />\n            )}\n\n            {/* Header Section */}\n            {showTitleSection && (\n              <div\n                className={buildClassName(\n                  'space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0',\n                  titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10',\n                )}\n              >\n                <div className=\"flex items-center justify-between gap-3 min-w-0\">\n                  <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n                    {showBackButton && (\n                      <Button\n                        iconOnly\n                        aria-label=\"Back\"\n                        variant=\"plain\"\n                        theme=\"secondary\"\n                        size=\"xs\"\n                        onClick={onClose}\n                      >\n                        <ChevronLeftIcon className=\"size-4\" />\n                      </Button>\n                    )}\n                    {title && (\n                      <DialogTitle\n                        as=\"h3\"\n                        className={buildClassName(\n                          'text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0',\n                          titleClass,\n                        )}\n                      >\n                        {title}\n                      </DialogTitle>\n                    )}\n                  </div>\n\n                  {showCloseButton && (\n                    <Button\n                      iconOnly\n                      aria-label=\"Close drawer\"\n                      variant=\"plain\"\n                      theme=\"secondary\"\n                      size=\"xs\"\n                      onClick={onClose}\n                      className=\"rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0\"\n                    >\n                      <XIcon className=\"size-4\" />\n                    </Button>\n                  )}\n                </div>\n\n                {description && (\n                  <p\n                    className={buildClassName(\n                      'text-sm text-gray-500 dark:text-gray-400 font-normal truncate',\n                      descriptionClass,\n                    )}\n                  >\n                    {description}\n                  </p>\n                )}\n              </div>\n            )}\n\n            {/* Content Body */}\n            <div className={buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass)}>\n              {children}\n            </div>\n\n            {/* Footer Section */}\n            {footer && (\n              <div\n                className={buildClassName(\n                  'p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0',\n                  footerSticky && 'sticky bottom-0 z-10',\n                )}\n              >\n                {footer}\n              </div>\n            )}\n          </DialogPanel>\n        </div>\n      </div>\n    </Dialog>\n  )\n}\n\nDrawer.displayName = 'Drawer'\n"],"names":["React","_jsxs","_jsx","ChevronLeftIcon","XIcon"],"mappings":"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"}

package/dist/es/components/MobileHeader/MobileHeader.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { buildClassName } from '../../utils/build-classname.js';
+import { ActionSheet } from '../ActionSheet/ActionSheet.js';
 
 function ChevronLeftIcon() {
     return (jsx("svg", { className: "size-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }));
@@ -8,12 +9,23 @@ function ChevronLeftIcon() {
 function SearchIcon() {
     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;
@@ -28,14 +40,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, {}) }), 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, {}), 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, {}) })), 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, {}) })), 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';
 

package/dist/es/components/MobileHeader/MobileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport type { MobileHeaderProps, MobileHeaderAction } from './MobileHeader.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nfunction ChevronLeftIcon() {\n  return (\n    <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2.5} d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  )\n}\n\nfunction SearchIcon() {\n  return (\n    <svg className=\"size-4 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n      />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n  )\n}\n\nexport function MobileHeader({\n  title,\n  subtitle,\n  titleAlign = 'center',\n  onBack,\n  backLabel = 'Back',\n  leading,\n  actions,\n  searchable = false,\n  searchValue: externalSearchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  sticky = true,\n  transparent = false,\n  bottomSlot,\n  className = '',\n}: MobileHeaderProps) {\n  const [isSearchActive, setIsSearchActive] = useState(false)\n  const [internalSearchValue, setInternalSearchValue] = useState('')\n\n  const searchValue = externalSearchValue !== undefined ? externalSearchValue : internalSearchValue\n\n  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value\n    setInternalSearchValue(val)\n    onSearchChange?.(val)\n  }\n\n  const handleClearSearch = () => {\n    setInternalSearchValue('')\n    onSearchChange?.('')\n  }\n\n  return (\n    <header\n      className={buildClassName(\n        'w-full transition-colors select-none z-30',\n        sticky && 'sticky top-0',\n        transparent\n          ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'\n          : 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs',\n        'pt-[env(safe-area-inset-top,0px)]',\n        className,\n      )}\n      data-testid=\"mobile-header\"\n    >\n      {/* Main Header Row */}\n      <div className=\"h-14 px-3.5 flex items-center justify-between gap-3 relative\">\n        {/* Search Mode Header View */}\n        {searchable && isSearchActive ? (\n          <div\n            className=\"flex-1 flex items-center gap-2\"\n            data-testid=\"mobile-header-search-container\"\n          >\n            <div className=\"relative flex-1 flex items-center\">\n              <span className=\"absolute left-3 pointer-events-none\">\n                <SearchIcon />\n              </span>\n              <input\n                type=\"text\"\n                value={searchValue}\n                onChange={handleSearchInput}\n                placeholder={searchPlaceholder}\n                autoFocus\n                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\"\n                data-testid=\"mobile-header-search-input\"\n              />\n              {searchValue && (\n                <button\n                  type=\"button\"\n                  onClick={handleClearSearch}\n                  aria-label=\"Clear search\"\n                  className=\"absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer\"\n                >\n                  <ClearIcon />\n                </button>\n              )}\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => setIsSearchActive(false)}\n              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\"\n            >\n              Cancel\n            </button>\n          </div>\n        ) : (\n          <>\n            {/* Left Leading / Back Section */}\n            <div className=\"flex items-center gap-1 min-w-[40px] shrink-0 z-10\">\n              {onBack ? (\n                <button\n                  type=\"button\"\n                  onClick={onBack}\n                  aria-label={backLabel}\n                  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\"\n                  data-testid=\"mobile-header-back-btn\"\n                >\n                  <ChevronLeftIcon />\n                  <span className=\"text-xs font-semibold hidden sm:inline\">{backLabel}</span>\n                </button>\n              ) : (\n                leading\n              )}\n            </div>\n\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0 px-2',\n                titleAlign === 'center'\n                  ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'\n                  : 'text-left',\n              )}\n            >\n              {title && (\n                <div\n                  className=\"text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto\"\n                  data-testid=\"mobile-header-title\"\n                >\n                  {title}\n                </div>\n              )}\n              {subtitle && (\n                <div\n                  className=\"text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto\"\n                  data-testid=\"mobile-header-subtitle\"\n                >\n                  {subtitle}\n                </div>\n              )}\n            </div>\n\n            {/* Right Actions Section */}\n            <div className=\"flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10\">\n              {searchable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsSearchActive(true)}\n                  aria-label=\"Search\"\n                  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\"\n                  data-testid=\"mobile-header-search-toggle\"\n                >\n                  <SearchIcon />\n                </button>\n              )}\n\n              {actions?.map((action: MobileHeaderAction) => {\n                const badgeColor = {\n                  danger: 'bg-red-500 text-white',\n                  info: 'bg-blue-500 text-white',\n                  success: 'bg-emerald-500 text-white',\n                }[action.badgeVariant || 'danger']\n\n                return (\n                  <button\n                    key={action.id}\n                    type=\"button\"\n                    disabled={action.disabled}\n                    onClick={action.onClick}\n                    aria-label={action.label}\n                    className={buildClassName(\n                      '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',\n                      action.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                    )}\n                    data-testid={`mobile-header-action-${action.id}`}\n                  >\n                    <span className=\"text-base\">{action.icon}</span>\n                    {action.badge !== undefined && action.badge !== null && (\n                      <span\n                        className={buildClassName(\n                          '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',\n                          badgeColor,\n                        )}\n                        data-testid={`mobile-header-badge-${action.id}`}\n                      >\n                        {action.badge}\n                      </span>\n                    )}\n                  </button>\n                )\n              })}\n            </div>\n          </>\n        )}\n      </div>\n\n      {/* Optional Bottom Sub-Header Slot (e.g. Category tabs or filter bar) */}\n      {bottomSlot && (\n        <div\n          className=\"px-3 py-2 border-t border-[var(--ui-border-muted)]\"\n          data-testid=\"mobile-header-bottom-slot\"\n        >\n          {bottomSlot}\n        </div>\n      )}\n    </header>\n  )\n}\n\nMobileHeader.displayName = 'MobileHeader'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;AAIA,SAAS,eAAe,GAAA;AACtB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,QAAA,EAC3EA,GAAA,CAAA,MAAA,EAAA,EAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,GAAG,EAAE,CAAC,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACvF;AAEV;AAEA,SAAS,UAAU,GAAA;AACjB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,QAAA,EACzFA,GAAA,CAAA,MAAA,EAAA,EACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,6CAA6C,EAAA,CAC/C,EAAA,CACE;AAEV;AAEA,SAAS,SAAS,GAAA;AAChB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,QAAA,EAC3EA,GAAA,CAAA,MAAA,EAAA,EAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,sBAAsB,EAAA,CAAG,EAAA,CAC1F;AAEV;AAEM,SAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,QAAQ,EACrB,MAAM,EACN,SAAS,GAAG,MAAM,EAClB,OAAO,EACP,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,EAAE,mBAAmB,EAChC,cAAc,EACd,iBAAiB,GAAG,WAAW,EAC/B,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,SAAS,GAAG,EAAE,GACI,EAAA;IAClB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC3D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAElE,IAAA,MAAM,WAAW,GAAG,mBAAmB,KAAK,SAAS,GAAG,mBAAmB,GAAG,mBAAmB;AAEjG,IAAA,MAAM,iBAAiB,GAAG,CAAC,CAAsC,KAAI;AACnE,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC1B,sBAAsB,CAAC,GAAG,CAAC;AAC3B,QAAA,cAAc,aAAd,cAAc,KAAA,MAAA,GAAA,MAAA,GAAd,cAAc,CAAG,GAAG,CAAC;AACvB,IAAA,CAAC;IAED,MAAM,iBAAiB,GAAG,MAAK;QAC7B,sBAAsB,CAAC,EAAE,CAAC;AAC1B,QAAA,cAAc,aAAd,cAAc,KAAA,MAAA,GAAA,MAAA,GAAd,cAAc,CAAG,EAAE,CAAC;AACtB,IAAA,CAAC;AAED,IAAA,QACEC,IAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,2CAA2C,EAC3C,MAAM,IAAI,cAAc,EACxB;AACE,cAAE;AACF,cAAE,wEAAwE,EAC5E,mCAAmC,EACnC,SAAS,CACV,EAAA,aAAA,EACW,eAAe,EAAA,QAAA,EAAA,CAG3BD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,YAE1E,UAAU,IAAI,cAAc,IAC3BC,cACE,SAAS,EAAC,gCAAgC,EAAA,aAAA,EAC9B,gCAAgC,aAE5CA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDD,cAAM,SAAS,EAAC,qCAAqC,EAAA,QAAA,EACnDA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EAAA,CACT,EACPA,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAA,IAAA,EACT,SAAS,EAAC,6LAA6L,EAAA,aAAA,EAC3L,4BAA4B,GACxC,EACD,WAAW,KACVA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB,EAAA,YAAA,EACf,cAAc,EACzB,SAAS,EAAC,oGAAoG,EAAA,QAAA,EAE9GA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,GACN,CACV,CAAA,EAAA,CACG,EACNA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,iBAAiB,CAAC,KAAK,CAAC,EACvC,SAAS,EAAC,yIAAyI,uBAG5I,CAAA,EAAA,CACL,KAENC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEEF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oDAAoD,YAChE,MAAM,IACLC,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,gBACH,SAAS,EACrB,SAAS,EAAC,sIAAsI,iBACpI,wBAAwB,EAAA,QAAA,EAAA,CAEpCD,IAAC,eAAe,EAAA,EAAA,CAAG,EACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAE,SAAS,EAAA,CAAQ,IACpE,KAET,OAAO,CACR,EAAA,CACG,EAGNC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,qBAAqB,EACrB,UAAU,KAAK;AACb,kCAAE;AACF,kCAAE,WAAW,CAChB,EAAA,QAAA,EAAA,CAEA,KAAK,KACJD,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,8EAA8E,EAAA,aAAA,EAC5E,qBAAqB,YAEhC,KAAK,EAAA,CACF,CACP,EACA,QAAQ,KACPA,aACE,SAAS,EAAC,2EAA2E,EAAA,aAAA,EACzE,wBAAwB,EAAA,QAAA,EAEnC,QAAQ,EAAA,CACL,CACP,IACG,EAGNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gEAAgE,aAC5E,UAAU,KACTD,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,iBAAiB,CAAC,IAAI,CAAC,gBAC3B,QAAQ,EACnB,SAAS,EAAC,2HAA2H,EAAA,aAAA,EACzH,6BAA6B,YAEzCA,GAAA,CAAC,UAAU,KAAG,EAAA,CACP,CACV,EAEA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAA0B,KAAI;AAC3C,oCAAA,MAAM,UAAU,GAAG;AACjB,wCAAA,MAAM,EAAE,uBAAuB;AAC/B,wCAAA,IAAI,EAAE,wBAAwB;AAC9B,wCAAA,OAAO,EAAE,2BAA2B;AACrC,qCAAA,CAAC,MAAM,CAAC,YAAY,IAAI,QAAQ,CAAC;AAElC,oCAAA,QACEC,IAAA,CAAA,QAAA,EAAA,EAEE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,YAAA,EACX,MAAM,CAAC,KAAK,EACxB,SAAS,EAAE,cAAc,CACvB,oIAAoI,EACpI,MAAM,CAAC,QAAQ,IAAI,mDAAmD,CACvE,EAAA,aAAA,EACY,CAAA,qBAAA,EAAwB,MAAM,CAAC,EAAE,EAAE,EAAA,QAAA,EAAA,CAEhDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,WAAW,YAAE,MAAM,CAAC,IAAI,EAAA,CAAQ,EAC/C,MAAM,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,KAClDA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,+HAA+H,EAC/H,UAAU,CACX,EAAA,aAAA,EACY,CAAA,oBAAA,EAAuB,MAAM,CAAC,EAAE,EAAE,EAAA,QAAA,EAE9C,MAAM,CAAC,KAAK,EAAA,CACR,CACR,CAAA,EAAA,EAtBI,MAAM,CAAC,EAAE,CAuBP;gCAEb,CAAC,CAAC,IACE,CAAA,EAAA,CACL,CACJ,GACG,EAGL,UAAU,KACTA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,oDAAoD,iBAClD,2BAA2B,EAAA,QAAA,EAEtC,UAAU,EAAA,CACP,CACP,CAAA,EAAA,CACM;AAEb;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport type { MobileHeaderProps, MobileHeaderAction } from './MobileHeader.types'\nimport { buildClassName } from '../../utils/build-classname'\nimport { ActionSheet } from '../ActionSheet'\n\nfunction ChevronLeftIcon() {\n  return (\n    <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2.5} d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  )\n}\n\nfunction SearchIcon() {\n  return (\n    <svg className=\"size-4 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n      />\n    </svg>\n  )\n}\n\nfunction MoreIcon() {\n  return (\n    <svg className=\"size-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"5\" r=\"1.75\" />\n      <circle cx=\"12\" cy=\"12\" r=\"1.75\" />\n      <circle cx=\"12\" cy=\"19\" r=\"1.75\" />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n  )\n}\n\nexport function MobileHeader({\n  title,\n  subtitle,\n  titleAlign = 'center',\n  onBack,\n  backLabel = 'Back',\n  leading,\n  actions,\n  maxVisibleActions,\n  overflowLabel = 'More actions',\n  trailing,\n  searchable = false,\n  searchValue: externalSearchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  sticky = true,\n  transparent = false,\n  bottomSlot,\n  className = '',\n}: MobileHeaderProps) {\n  const [isSearchActive, setIsSearchActive] = useState(false)\n  const [internalSearchValue, setInternalSearchValue] = useState('')\n  const [isOverflowOpen, setIsOverflowOpen] = useState(false)\n\n  // The overflow button takes one of the visible slots.\n  const allActions = actions ?? []\n  const shouldOverflow = maxVisibleActions !== undefined && allActions.length > maxVisibleActions\n  const visibleActions = shouldOverflow\n    ? allActions.slice(0, Math.max(maxVisibleActions - 1, 0))\n    : allActions\n  const overflowActions = shouldOverflow ? allActions.slice(visibleActions.length) : []\n\n  const searchValue = externalSearchValue !== undefined ? externalSearchValue : internalSearchValue\n\n  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value\n    setInternalSearchValue(val)\n    onSearchChange?.(val)\n  }\n\n  const handleClearSearch = () => {\n    setInternalSearchValue('')\n    onSearchChange?.('')\n  }\n\n  return (\n    <header\n      className={buildClassName(\n        'w-full transition-colors select-none z-30',\n        sticky && 'sticky top-0',\n        transparent\n          ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'\n          : 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs',\n        'pt-[env(safe-area-inset-top,0px)]',\n        className,\n      )}\n      data-testid=\"mobile-header\"\n    >\n      {/* Main Header Row */}\n      <div className=\"h-14 px-3.5 flex items-center justify-between gap-3 relative\">\n        {/* Search Mode Header View */}\n        {searchable && isSearchActive ? (\n          <div\n            className=\"flex-1 flex items-center gap-2\"\n            data-testid=\"mobile-header-search-container\"\n          >\n            <div className=\"relative flex-1 flex items-center\">\n              <span className=\"absolute left-3 pointer-events-none\">\n                <SearchIcon />\n              </span>\n              <input\n                type=\"text\"\n                value={searchValue}\n                onChange={handleSearchInput}\n                placeholder={searchPlaceholder}\n                autoFocus\n                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\"\n                data-testid=\"mobile-header-search-input\"\n              />\n              {searchValue && (\n                <button\n                  type=\"button\"\n                  onClick={handleClearSearch}\n                  aria-label=\"Clear search\"\n                  className=\"absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer\"\n                >\n                  <ClearIcon />\n                </button>\n              )}\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => setIsSearchActive(false)}\n              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\"\n            >\n              Cancel\n            </button>\n          </div>\n        ) : (\n          <>\n            {/* Left Leading / Back Section */}\n            <div className=\"flex items-center gap-1 min-w-[40px] shrink-0 z-10\">\n              {onBack ? (\n                <button\n                  type=\"button\"\n                  onClick={onBack}\n                  aria-label={backLabel}\n                  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\"\n                  data-testid=\"mobile-header-back-btn\"\n                >\n                  <ChevronLeftIcon />\n                  <span className=\"text-xs font-semibold hidden sm:inline\">{backLabel}</span>\n                </button>\n              ) : (\n                leading\n              )}\n            </div>\n\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0 px-2',\n                titleAlign === 'center'\n                  ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'\n                  : 'text-left',\n              )}\n            >\n              {title && (\n                <div\n                  className=\"text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto\"\n                  data-testid=\"mobile-header-title\"\n                >\n                  {title}\n                </div>\n              )}\n              {subtitle && (\n                <div\n                  className=\"text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto\"\n                  data-testid=\"mobile-header-subtitle\"\n                >\n                  {subtitle}\n                </div>\n              )}\n            </div>\n\n            {/* Right Actions Section */}\n            <div className=\"flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10\">\n              {searchable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsSearchActive(true)}\n                  aria-label=\"Search\"\n                  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\"\n                  data-testid=\"mobile-header-search-toggle\"\n                >\n                  <SearchIcon />\n                </button>\n              )}\n\n              {visibleActions.map((action: MobileHeaderAction) => {\n                const badgeColor = {\n                  danger: 'bg-red-500 text-white',\n                  info: 'bg-blue-500 text-white',\n                  success: 'bg-emerald-500 text-white',\n                }[action.badgeVariant || 'danger']\n\n                return (\n                  <button\n                    key={action.id}\n                    type=\"button\"\n                    disabled={action.disabled}\n                    onClick={action.onClick}\n                    aria-label={action.label}\n                    className={buildClassName(\n                      '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',\n                      action.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                    )}\n                    data-testid={`mobile-header-action-${action.id}`}\n                  >\n                    <span className=\"text-base\">{action.icon}</span>\n                    {action.badge !== undefined && action.badge !== null && (\n                      <span\n                        className={buildClassName(\n                          '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',\n                          badgeColor,\n                        )}\n                        data-testid={`mobile-header-badge-${action.id}`}\n                      >\n                        {action.badge}\n                      </span>\n                    )}\n                  </button>\n                )\n              })}\n\n              {overflowActions.length > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsOverflowOpen(true)}\n                  aria-label={overflowLabel}\n                  aria-haspopup=\"dialog\"\n                  aria-expanded={isOverflowOpen}\n                  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\"\n                  data-testid=\"mobile-header-overflow\"\n                >\n                  <MoreIcon />\n                </button>\n              )}\n\n              {trailing}\n            </div>\n          </>\n        )}\n      </div>\n\n      {overflowActions.length > 0 && (\n        <ActionSheet\n          isOpen={isOverflowOpen}\n          onClose={() => setIsOverflowOpen(false)}\n          actions={overflowActions.map((action) => ({\n            id: action.id,\n            label: action.label,\n            icon: action.icon,\n            disabled: action.disabled,\n            onClick: action.onClick,\n          }))}\n        />\n      )}\n\n      {/* Optional Bottom Sub-Header Slot (e.g. Category tabs or filter bar) */}\n      {bottomSlot && (\n        <div\n          className=\"px-3 py-2 border-t border-[var(--ui-border-muted)]\"\n          data-testid=\"mobile-header-bottom-slot\"\n        >\n          {bottomSlot}\n        </div>\n      )}\n    </header>\n  )\n}\n\nMobileHeader.displayName = 'MobileHeader'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}