@pk-design/react-tailwind 1.11.0 → 1.12.0

package/dist/cjs/components/BottomNavigation/BottomNavigation.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var buildClassname = require('../../utils/build-classname.js');
 
-function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, }) {
+function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, rounded = false, }) {
     const handleTabClick = (item) => {
         var _a;
         if (item.disabled)
@@ -19,7 +19,7 @@ function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels
         dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
         primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
     }[theme];
-    return (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: buildClassname.buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
+    return (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: buildClassname.buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, rounded && 'rounded-t-2xl border-x', containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
             const isActive = item.id === activeId;
             const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
             const activeItemColor = {

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

@@ -1 +1 @@
-{"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","buildClassName","_jsxs"],"mappings":";;;;;AAIM,SAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,IAAI,EACZ,UAAU,GAAG,QAAQ,EACrB,KAAK,GAAG,OAAO,EACf,oBAAoB,GAAG,MAAM,EAC7B,cAAc,GAAG,EAAE,EACnB,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,GAAG,EACZ,YAAY,GAAG,MAAM,EACrB,SAAS,GAAG,mBAAmB,EAC/B,MAAM,GAAG,KAAK,GACQ,EAAA;AACtB,IAAA,MAAM,cAAc,GAAG,CAAC,IAA0B,KAAI;;QACpD,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;QAChB,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,IAAI,CAAC,EAAE,CAAC;AACrB,IAAA,CAAC;;AAGD,IAAA,IAAI,MAAM;AAAE,QAAA,OAAO,IAAI;AAEvB,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,KAAK,EACH,+FAA+F;AACjG,QAAA,IAAI,EAAE,oDAAoD;AAC1D,QAAA,OAAO,EAAE,oDAAoD;KAC9D,CAAC,KAAK,CAAC;AAER,IAAA,QACEA,cAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EACc,SAAS,EACrB,SAAS,EAAEC,6BAAc,CACvB,0FAA0F,EAC1F,KAAK,IAAI,oCAAoC,EAC7C,2CAA2C,EAC3C,WAAW,EACX,cAAc,CACf,EAAA,aAAA,EACW,mBAAmB,EAAA,QAAA,EAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AAClB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,QAAQ;AACrC,YAAA,MAAM,aAAa,GAAG,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,QAAQ,IAAI,QAAQ,CAAC;AAEtF,YAAA,MAAM,eAAe,GAAG;AACtB,gBAAA,KAAK,EAAE,4CAA4C;AACnD,gBAAA,IAAI,EAAE,sBAAsB;AAC5B,gBAAA,OAAO,EAAE,sBAAsB;aAChC,CAAC,KAAK,CAAC;AAER,YAAA,MAAM,iBAAiB,GAAG;AACxB,gBAAA,KAAK,EACH,2FAA2F;AAC7F,gBAAA,IAAI,EAAE,+CAA+C;AACrD,gBAAA,OAAO,EAAE,4CAA4C;aACtD,CAAC,KAAK,CAAC;AAER,YAAA,MAAM,gBAAgB,GAAG;AACvB,gBAAA,KAAK,EACH,sFAAsF;AACxF,gBAAA,IAAI,EAAE,iEAAiE;AACvE,gBAAA,OAAO,EAAE,4CAA4C;aACtD,CAAC,KAAK,CAAC;AAER,YAAA,MAAM,UAAU,GAAG;AACjB,gBAAA,MAAM,EAAE,uBAAuB;AAC/B,gBAAA,IAAI,EAAE,wBAAwB;AAC9B,gBAAA,OAAO,EAAE,2BAA2B;AACrC,aAAA,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ,CAAC;;AAGhC,YAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;YACnD,MAAM,WAAW,GAAgB,MAAM,GAAG,MAAM,GAAG,QAAQ;YAC3D,MAAM,YAAY,GAAG;kBACjB,EAAE,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;AAC7B,kBAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;YAE/C,QACEC,eAAA,CAAC,WAAW,EAAA,EAAA,GAEN,YAAY,EAChB,OAAO,EAAE,MAAM,cAAc,CAAC,IAAI,CAAC,EACnC,SAAS,EAAED,6BAAc,CACvB,6HAA6H,EAC7H,IAAI,CAAC,QAAQ,IAAI,mDAAmD,EACpE,QAAQ,GAAG,eAAe,GAAG,iBAAiB,EAC9C,SAAS,CACV,EAAA,aAAA,EACY,CAAA,gBAAA,EAAmB,IAAI,CAAC,EAAE,CAAA,CAAE,EAAA,cAAA,EAC3B,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,YAAA,EAE/B,CAAC,aAAa,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EAAA,QAAA,EAAA,CAGpF,oBAAoB,KAAK,MAAM,IAAI,QAAQ,KAC1CD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CACvB,8EAA8E,EAC9E,KAAK,KAAK,SAAS,GAAG,UAAU,GAAG,8BAA8B,CAClE,EAAA,CACD,CACH,EAGDC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAED,6BAAc,CACvB,8EAA8E,EAC9E,oBAAoB,KAAK;AACvB,8BAAEA,6BAAc,CACZ,wBAAwB,EACxB;AACE,kCAAE;kCACA,4DAA4D;AAEpE,8BAAE,aAAa,CAClB,EAAA,QAAA,EAAA,CAEDD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,iEAAiE,EAAA,aAAA,EAC/D,MAAM,EAAA,QAAA,EAEjB,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,EAAA,CACrD,EAGN,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,KAC9CA,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CACvB,mIAAmI,EACnI,UAAU,CACX,EAAA,aAAA,EACY,CAAA,iBAAA,EAAoB,IAAI,CAAC,EAAE,CAAA,CAAE,EAAA,QAAA,EAEzC,IAAI,CAAC,KAAK,EAAA,CACN,CACR,CAAA,EAAA,CACG,EAGL,aAAa,KACZD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CACvB,mFAAmF,EACnF,QAAQ,GAAG,WAAW,GAAG,wBAAwB,CAClD,EAAA,QAAA,EAEA,IAAI,CAAC,KAAK,EAAA,CACN,CACR,EAGA,oBAAoB,KAAK,KAAK,IAAI,QAAQ,KACzCD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CACvB,wDAAwD,EACxD,KAAK,KAAK,SAAS,GAAG,UAAU,GAAG,8BAA8B,CAClE,EAAA,CACD,CACH,CAAA,EAAA,EA/EI,IAAI,CAAC,EAAE,CAgFA;QAElB,CAAC,CAAC,EAAA,CACE;AAEV;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
+{"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  rounded = 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        rounded && 'rounded-t-2xl border-x',\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","buildClassName","_jsxs"],"mappings":"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"}

package/dist/cjs/components/MobileHeader/MobileHeader.js

@@ -41,7 +41,9 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
     };
     return (jsxRuntime.jsxs("header", { className: buildClassname.buildClassName('w-full transition-colors select-none z-30', sticky && 'sticky top-0', transparent
             ? '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: [jsxRuntime.jsx("div", { className: "h-14 px-4 flex items-center justify-between gap-2 relative", children: searchable && isSearchActive ? (jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxRuntime.jsxs("div", { className: "relative flex-1 flex items-center", children: [jsxRuntime.jsx("span", { className: "absolute left-3 pointer-events-none", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.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 && (jsxRuntime.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: jsxRuntime.jsx(ClearIcon, {}) }))] }), jsxRuntime.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" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLeadingSlot && (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('flex items-center gap-1 shrink-0 z-10', 
+            : '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: [jsxRuntime.jsx("div", { className: "h-16 px-4 flex items-center justify-between gap-2 relative", children: searchable && isSearchActive ? (jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxRuntime.jsxs("div", { className: "relative flex-1 flex items-center", children: [jsxRuntime.jsx("span", { className: "absolute left-3 pointer-events-none", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.jsx("input", { type: "text", value: searchValue, onChange: handleSearchInput, placeholder: searchPlaceholder, autoFocus: true, 
+                                    // 16px text: iOS zooms the page into any field with smaller text.
+                                    className: "w-full pl-9 pr-8 py-2 text-base 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 && (jsxRuntime.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: jsxRuntime.jsx(ClearIcon, {}) }))] }), jsxRuntime.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" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLeadingSlot && (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('flex items-center gap-1 shrink-0 z-10', 
                             // A Back button is its own 40px target; reserve the width only for other content.
                             !onBack && 'min-w-[40px]'), "data-testid": "mobile-header-leading", children: onBack ? (jsxRuntime.jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, 
                                 // 40px-tall touch target hanging into the row padding: the chevron
@@ -52,7 +54,7 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
                             // a centred title keeps even padding.
                             titleAlign === 'center' ? 'px-2' : 'pr-2', titleAlign === 'center'
                                 ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'
-                                : 'text-left'), children: [title && (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsxRuntime.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: jsxRuntime.jsx(SearchIcon, {}) })), visibleActions.map((action) => {
+                                : 'text-left'), children: [title && (jsxRuntime.jsx("div", { className: "text-lg leading-6 font-semibold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsxRuntime.jsx("div", { className: "text-[13px] leading-5 text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsxRuntime.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: jsxRuntime.jsx(SearchIcon, {}) })), visibleActions.map((action) => {
                                     const badgeColor = {
                                         danger: 'bg-red-500 text-white',
                                         info: 'bg-blue-500 text-white',

package/dist/cjs/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'\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  const hasLeadingSlot = Boolean(onBack || leading) || titleAlign === 'center'\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-4 flex items-center justify-between gap-2 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. Omitted for a left-aligned title with nothing\n                before it, so the title lines up with the page content; kept for a centred\n                title, where the empty slot balances the actions. */}\n            {hasLeadingSlot && (\n              <div\n                className={buildClassName(\n                  'flex items-center gap-1 shrink-0 z-10',\n                  // A Back button is its own 40px target; reserve the width only for other content.\n                  !onBack && 'min-w-[40px]',\n                )}\n                data-testid=\"mobile-header-leading\"\n              >\n                {onBack ? (\n                  <button\n                    type=\"button\"\n                    onClick={onBack}\n                    aria-label={backLabel}\n                    // 40px-tall touch target hanging into the row padding: the chevron\n                    // sits on the content edge, with no right padding, so the title\n                    // follows ~10px after it.\n                    className=\"flex min-h-10 min-w-8 items-center justify-start gap-0.5 pl-2.5 pr-0 sm:pr-2 -ml-2.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 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\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0',\n                // The row's gap already separates a left title from a leading element;\n                // a centred title keeps even padding.\n                titleAlign === 'center' ? 'px-2' : 'pr-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","useState","buildClassName","_Fragment","ActionSheet"],"mappings":"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"}
+{"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  const hasLeadingSlot = Boolean(onBack || leading) || titleAlign === 'center'\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: 64px, the height of a standard phone top bar, so a\n          title and a subtitle line both have room. */}\n      <div className=\"h-16 px-4 flex items-center justify-between gap-2 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                // 16px text: iOS zooms the page into any field with smaller text.\n                className=\"w-full pl-9 pr-8 py-2 text-base 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. Omitted for a left-aligned title with nothing\n                before it, so the title lines up with the page content; kept for a centred\n                title, where the empty slot balances the actions. */}\n            {hasLeadingSlot && (\n              <div\n                className={buildClassName(\n                  'flex items-center gap-1 shrink-0 z-10',\n                  // A Back button is its own 40px target; reserve the width only for other content.\n                  !onBack && 'min-w-[40px]',\n                )}\n                data-testid=\"mobile-header-leading\"\n              >\n                {onBack ? (\n                  <button\n                    type=\"button\"\n                    onClick={onBack}\n                    aria-label={backLabel}\n                    // 40px-tall touch target hanging into the row padding: the chevron\n                    // sits on the content edge, with no right padding, so the title\n                    // follows ~10px after it.\n                    className=\"flex min-h-10 min-w-8 items-center justify-start gap-0.5 pl-2.5 pr-0 sm:pr-2 -ml-2.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 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\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0',\n                // The row's gap already separates a left title from a leading element;\n                // a centred title keeps even padding.\n                titleAlign === 'center' ? 'px-2' : 'pr-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-lg leading-6 font-semibold 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-[13px] leading-5 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","useState","buildClassName","_Fragment","ActionSheet"],"mappings":"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"}

package/dist/cjs/components/SegmentedControl/SegmentedControl.js

@@ -53,9 +53,13 @@ const SegmentedControl = React.forwardRef((props, ref) => {
                     if (!isOptionDisabled) {
                         onChange(option.value);
                     }
-                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassname.buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassname.buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], 
+                // Full width splits the row equally, so the width comes from the
+                // row, not padding; tight side padding keeps labels on one line
+                // on narrow screens.
+                fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
                     ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { children: option.label })] }, option.value));
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
         }) }));
 });
 SegmentedControl.displayName = 'SegmentedControl';

package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n  sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n  md: 'p-1 gap-1 rounded-xl text-sm',\n  lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n  sm: 'px-2 py-1 text-xs font-medium rounded-md',\n  md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n  lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n  sm: 'size-3.5',\n  md: 'size-4',\n  lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n  const {\n    options,\n    value,\n    onChange,\n    disabled = false,\n    size = 'md',\n    fullWidth = false,\n    className,\n    ...restProps\n  } = props\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n    const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n    if (enabledOptions.length === 0) return\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const nextPos = (currentPos + 1) % enabledOptions.length\n      onChange(enabledOptions[nextPos].value)\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n      onChange(enabledOptions[prevPos].value)\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      onChange(enabledOptions[0].value)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      onChange(enabledOptions[enabledOptions.length - 1].value)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      className={buildClassName(\n        'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n        SIZE_CONTAINER_CLASS[size],\n        fullWidth ? 'w-full flex' : '',\n        disabled ? 'opacity-60 cursor-not-allowed' : '',\n        className,\n      )}\n      data-testid=\"segmented-control\"\n      {...restProps}\n    >\n      {options.map((option, index) => {\n        const isSelected = value === option.value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            aria-disabled={isOptionDisabled}\n            tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n            disabled={isOptionDisabled}\n            title={option.title}\n            onClick={() => {\n              if (!isOptionDisabled) {\n                onChange(option.value)\n              }\n            }}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            className={buildClassName(\n              'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n              SIZE_OPTION_CLASS[size],\n              fullWidth ? 'flex-1' : '',\n              isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              isSelected\n                ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n            )}\n            data-testid={`segmented-option-${option.value}`}\n          >\n            {option.icon && (\n              <span\n                className={buildClassName(\n                  'shrink-0 inline-flex items-center justify-center',\n                  SIZE_ICON_CLASS[size],\n                )}\n              >\n                {option.icon}\n              </span>\n            )}\n            <span>{option.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["forwardRef","_jsx","buildClassName","_jsxs"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n  sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n  md: 'p-1 gap-1 rounded-xl text-sm',\n  lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n  sm: 'px-2 py-1 text-xs font-medium rounded-md',\n  md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n  lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n  sm: 'size-3.5',\n  md: 'size-4',\n  lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n  const {\n    options,\n    value,\n    onChange,\n    disabled = false,\n    size = 'md',\n    fullWidth = false,\n    className,\n    ...restProps\n  } = props\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n    const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n    if (enabledOptions.length === 0) return\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const nextPos = (currentPos + 1) % enabledOptions.length\n      onChange(enabledOptions[nextPos].value)\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n      onChange(enabledOptions[prevPos].value)\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      onChange(enabledOptions[0].value)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      onChange(enabledOptions[enabledOptions.length - 1].value)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      className={buildClassName(\n        'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n        SIZE_CONTAINER_CLASS[size],\n        fullWidth ? 'w-full flex' : '',\n        disabled ? 'opacity-60 cursor-not-allowed' : '',\n        className,\n      )}\n      data-testid=\"segmented-control\"\n      {...restProps}\n    >\n      {options.map((option, index) => {\n        const isSelected = value === option.value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            aria-disabled={isOptionDisabled}\n            tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n            disabled={isOptionDisabled}\n            title={option.title}\n            onClick={() => {\n              if (!isOptionDisabled) {\n                onChange(option.value)\n              }\n            }}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            className={buildClassName(\n              'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n              SIZE_OPTION_CLASS[size],\n              // Full width splits the row equally, so the width comes from the\n              // row, not padding; tight side padding keeps labels on one line\n              // on narrow screens.\n              fullWidth ? 'min-w-0 flex-1 px-1.5' : '',\n              isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              isSelected\n                ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n            )}\n            data-testid={`segmented-option-${option.value}`}\n          >\n            {option.icon && (\n              <span\n                className={buildClassName(\n                  'shrink-0 inline-flex items-center justify-center',\n                  SIZE_ICON_CLASS[size],\n                )}\n              >\n                {option.icon}\n              </span>\n            )}\n            {/* A label never wraps; if there's truly no room it's cut off. */}\n            <span className=\"min-w-0 truncate\">{option.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["forwardRef","_jsx","buildClassName","_jsxs"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { buildClassName } from '../../utils/build-classname.js';
 
-function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, }) {
+function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, rounded = false, }) {
     const handleTabClick = (item) => {
         var _a;
         if (item.disabled)
@@ -17,7 +17,7 @@ function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels
         dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
         primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
     }[theme];
-    return (jsx("nav", { "aria-label": ariaLabel, className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
+    return (jsx("nav", { "aria-label": ariaLabel, className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, rounded && 'rounded-t-2xl border-x', containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
             const isActive = item.id === activeId;
             const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
             const activeItemColor = {

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

@@ -1 +1 @@
-{"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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"}
+{"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  rounded = 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        rounded && 'rounded-t-2xl border-x',\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/MobileHeader/MobileHeader.js

@@ -39,7 +39,9 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
     };
     return (jsxs("header", { className: buildClassName('w-full transition-colors select-none z-30', sticky && 'sticky top-0', transparent
             ? '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-4 flex items-center justify-between gap-2 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: [hasLeadingSlot && (jsx("div", { className: buildClassName('flex items-center gap-1 shrink-0 z-10', 
+            : '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-16 px-4 flex items-center justify-between gap-2 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, 
+                                    // 16px text: iOS zooms the page into any field with smaller text.
+                                    className: "w-full pl-9 pr-8 py-2 text-base 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: [hasLeadingSlot && (jsx("div", { className: buildClassName('flex items-center gap-1 shrink-0 z-10', 
                             // A Back button is its own 40px target; reserve the width only for other content.
                             !onBack && 'min-w-[40px]'), "data-testid": "mobile-header-leading", children: onBack ? (jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, 
                                 // 40px-tall touch target hanging into the row padding: the chevron
@@ -50,7 +52,7 @@ function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabe
                             // a centred title keeps even padding.
                             titleAlign === 'center' ? 'px-2' : 'pr-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, {}) })), visibleActions.map((action) => {
+                                : 'text-left'), children: [title && (jsx("div", { className: "text-lg leading-6 font-semibold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsx("div", { className: "text-[13px] leading-5 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',

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'\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  const hasLeadingSlot = Boolean(onBack || leading) || titleAlign === 'center'\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-4 flex items-center justify-between gap-2 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. Omitted for a left-aligned title with nothing\n                before it, so the title lines up with the page content; kept for a centred\n                title, where the empty slot balances the actions. */}\n            {hasLeadingSlot && (\n              <div\n                className={buildClassName(\n                  'flex items-center gap-1 shrink-0 z-10',\n                  // A Back button is its own 40px target; reserve the width only for other content.\n                  !onBack && 'min-w-[40px]',\n                )}\n                data-testid=\"mobile-header-leading\"\n              >\n                {onBack ? (\n                  <button\n                    type=\"button\"\n                    onClick={onBack}\n                    aria-label={backLabel}\n                    // 40px-tall touch target hanging into the row padding: the chevron\n                    // sits on the content edge, with no right padding, so the title\n                    // follows ~10px after it.\n                    className=\"flex min-h-10 min-w-8 items-center justify-start gap-0.5 pl-2.5 pr-0 sm:pr-2 -ml-2.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 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\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0',\n                // The row's gap already separates a left title from a leading element;\n                // a centred title keeps even padding.\n                titleAlign === 'center' ? 'px-2' : 'pr-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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"}
+{"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  const hasLeadingSlot = Boolean(onBack || leading) || titleAlign === 'center'\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: 64px, the height of a standard phone top bar, so a\n          title and a subtitle line both have room. */}\n      <div className=\"h-16 px-4 flex items-center justify-between gap-2 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                // 16px text: iOS zooms the page into any field with smaller text.\n                className=\"w-full pl-9 pr-8 py-2 text-base 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. Omitted for a left-aligned title with nothing\n                before it, so the title lines up with the page content; kept for a centred\n                title, where the empty slot balances the actions. */}\n            {hasLeadingSlot && (\n              <div\n                className={buildClassName(\n                  'flex items-center gap-1 shrink-0 z-10',\n                  // A Back button is its own 40px target; reserve the width only for other content.\n                  !onBack && 'min-w-[40px]',\n                )}\n                data-testid=\"mobile-header-leading\"\n              >\n                {onBack ? (\n                  <button\n                    type=\"button\"\n                    onClick={onBack}\n                    aria-label={backLabel}\n                    // 40px-tall touch target hanging into the row padding: the chevron\n                    // sits on the content edge, with no right padding, so the title\n                    // follows ~10px after it.\n                    className=\"flex min-h-10 min-w-8 items-center justify-start gap-0.5 pl-2.5 pr-0 sm:pr-2 -ml-2.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 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\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0',\n                // The row's gap already separates a left title from a leading element;\n                // a centred title keeps even padding.\n                titleAlign === 'center' ? 'px-2' : 'pr-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-lg leading-6 font-semibold 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-[13px] leading-5 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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"}

package/dist/es/components/SegmentedControl/SegmentedControl.js

@@ -51,9 +51,13 @@ const SegmentedControl = forwardRef((props, ref) => {
                     if (!isOptionDisabled) {
                         onChange(option.value);
                     }
-                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], 
+                // Full width splits the row equally, so the width comes from the
+                // row, not padding; tight side padding keeps labels on one line
+                // on narrow screens.
+                fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
                     ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { children: option.label })] }, option.value));
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
         }) }));
 });
 SegmentedControl.displayName = 'SegmentedControl';

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n  sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n  md: 'p-1 gap-1 rounded-xl text-sm',\n  lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n  sm: 'px-2 py-1 text-xs font-medium rounded-md',\n  md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n  lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n  sm: 'size-3.5',\n  md: 'size-4',\n  lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n  const {\n    options,\n    value,\n    onChange,\n    disabled = false,\n    size = 'md',\n    fullWidth = false,\n    className,\n    ...restProps\n  } = props\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n    const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n    if (enabledOptions.length === 0) return\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const nextPos = (currentPos + 1) % enabledOptions.length\n      onChange(enabledOptions[nextPos].value)\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n      onChange(enabledOptions[prevPos].value)\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      onChange(enabledOptions[0].value)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      onChange(enabledOptions[enabledOptions.length - 1].value)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      className={buildClassName(\n        'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n        SIZE_CONTAINER_CLASS[size],\n        fullWidth ? 'w-full flex' : '',\n        disabled ? 'opacity-60 cursor-not-allowed' : '',\n        className,\n      )}\n      data-testid=\"segmented-control\"\n      {...restProps}\n    >\n      {options.map((option, index) => {\n        const isSelected = value === option.value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            aria-disabled={isOptionDisabled}\n            tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n            disabled={isOptionDisabled}\n            title={option.title}\n            onClick={() => {\n              if (!isOptionDisabled) {\n                onChange(option.value)\n              }\n            }}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            className={buildClassName(\n              'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n              SIZE_OPTION_CLASS[size],\n              fullWidth ? 'flex-1' : '',\n              isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              isSelected\n                ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n            )}\n            data-testid={`segmented-option-${option.value}`}\n          >\n            {option.icon && (\n              <span\n                className={buildClassName(\n                  'shrink-0 inline-flex items-center justify-center',\n                  SIZE_ICON_CLASS[size],\n                )}\n              >\n                {option.icon}\n              </span>\n            )}\n            <span>{option.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n  sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n  md: 'p-1 gap-1 rounded-xl text-sm',\n  lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n  sm: 'px-2 py-1 text-xs font-medium rounded-md',\n  md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n  lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n  sm: 'size-3.5',\n  md: 'size-4',\n  lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n  const {\n    options,\n    value,\n    onChange,\n    disabled = false,\n    size = 'md',\n    fullWidth = false,\n    className,\n    ...restProps\n  } = props\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n    const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n    if (enabledOptions.length === 0) return\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const nextPos = (currentPos + 1) % enabledOptions.length\n      onChange(enabledOptions[nextPos].value)\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      const currentPos = enabledOptions.findIndex(\n        (opt) => opt.value === options[currentIndex].value,\n      )\n      const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n      onChange(enabledOptions[prevPos].value)\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      onChange(enabledOptions[0].value)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      onChange(enabledOptions[enabledOptions.length - 1].value)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation=\"horizontal\"\n      className={buildClassName(\n        'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n        SIZE_CONTAINER_CLASS[size],\n        fullWidth ? 'w-full flex' : '',\n        disabled ? 'opacity-60 cursor-not-allowed' : '',\n        className,\n      )}\n      data-testid=\"segmented-control\"\n      {...restProps}\n    >\n      {options.map((option, index) => {\n        const isSelected = value === option.value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isSelected}\n            aria-disabled={isOptionDisabled}\n            tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n            disabled={isOptionDisabled}\n            title={option.title}\n            onClick={() => {\n              if (!isOptionDisabled) {\n                onChange(option.value)\n              }\n            }}\n            onKeyDown={(e) => handleKeyDown(e, index)}\n            className={buildClassName(\n              'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n              SIZE_OPTION_CLASS[size],\n              // Full width splits the row equally, so the width comes from the\n              // row, not padding; tight side padding keeps labels on one line\n              // on narrow screens.\n              fullWidth ? 'min-w-0 flex-1 px-1.5' : '',\n              isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n              isSelected\n                ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n            )}\n            data-testid={`segmented-option-${option.value}`}\n          >\n            {option.icon && (\n              <span\n                className={buildClassName(\n                  'shrink-0 inline-flex items-center justify-center',\n                  SIZE_ICON_CLASS[size],\n                )}\n              >\n                {option.icon}\n              </span>\n            )}\n            {/* A label never wraps; if there's truly no room it's cut off. */}\n            <span className=\"min-w-0 truncate\">{option.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}