@bug-on/m3-expressive 1.2.1 → 1.2.3

package/dist/navigation.mjs

@@ -2578,7 +2578,10 @@ function useRippleState(options = {}) {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      const rippleSize = Math.max(
+        Math.hypot(rect.width, rect.height) * 2.5,
+        320
+      );
       setRipples((prev) => [
         ...prev,
         { id: Date.now(), x, y, size: rippleSize }
@@ -2659,9 +2662,16 @@ var NavigationBarItemComponent = React36.forwardRef(
     disabled = false,
     badge,
     className,
-    "aria-label": ariaLabelProp
+    "aria-label": ariaLabelProp,
+    asChild = false,
+    children
   }, ref) => {
-    const { variant, itemLayout, itemClassName: contextItemClassName } = React36.useContext(NavigationBarContext);
+    var _a;
+    const {
+      variant,
+      itemLayout,
+      itemClassName: contextItemClassName
+    } = React36.useContext(NavigationBarContext);
     const isForcedHorizontal = itemLayout === "horizontal";
     const isResponsiveHorizontal = (variant === "flexible" || variant === "xr") && itemLayout === void 0;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
@@ -2684,6 +2694,101 @@ var NavigationBarItemComponent = React36.forwardRef(
       [disabled, selected, onClick]
     );
     const filledIcon = cloneIconWithFill(icon, selected);
+    const itemClassName = cn(
+      "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none h-full items-center justify-center min-w-0",
+      variant === "xr" ? isResponsiveHorizontal ? "flex-1 min-[600px]:flex-initial min-[600px]:w-auto" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1",
+      disabled && "pointer-events-none opacity-[0.38]",
+      contextItemClassName,
+      className
+    );
+    if (asChild && children) {
+      const child = React36.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex items-center justify-center flex-col gap-y-1 w-full px-1 py-1.5",
+              isResponsiveHorizontal && "min-[600px]:flex-row min-[600px]:gap-y-0 min-[600px]:gap-x-1.5 min-[600px]:h-10 min-[600px]:px-4 min-[600px]:py-0 min-[600px]:rounded-full min-[600px]:w-auto",
+              isForcedHorizontal && "flex-row gap-y-0 gap-x-1.5 h-10 px-4 py-0 rounded-full w-auto"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-0 z-0 hidden",
+                    isResponsiveHorizontal && "min-[600px]:block",
+                    isForcedHorizontal && "block!"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill, {}) }),
+                    /* @__PURE__ */ jsx(HoverStateLayer, {}),
+                    /* @__PURE__ */ jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative flex items-center justify-center shrink-0 z-10",
+                    "h-8 w-16 mx-auto rounded-full",
+                    isResponsiveHorizontal && "min-[600px]:size-6 min-[600px]:w-auto min-[600px]:h-auto",
+                    isForcedHorizontal && "size-6 w-auto h-auto"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute inset-0 z-0",
+                          isResponsiveHorizontal && "min-[600px]:hidden",
+                          isForcedHorizontal && "hidden"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill, {}) }),
+                          /* @__PURE__ */ jsx(HoverStateLayer, {}),
+                          /* @__PURE__ */ jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-6 items-center justify-center text-current", children: /* @__PURE__ */ jsx(IconContainer, { selected, badge, children: filledIcon }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "z-10 transition-all duration-200 truncate px-1",
+                    selected ? "text-m3-on-surface" : "text-m3-on-surface-variant",
+                    "font-medium text-[12px] leading-4 tracking-[0.5px]"
+                  ),
+                  children: (_a = child.props.children) != null ? _a : label
+                },
+                "nav-label"
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(TouchTarget, {})
+      ] });
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          role: "menuitem",
+          "aria-current": selected ? "page" : void 0,
+          "aria-disabled": disabled ? true : void 0,
+          "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
+          onClick: handleClick,
+          onPointerDown,
+          className: itemClassName,
+          children: React36.cloneElement(child, { children: innerContent })
+        }
+      );
+    }
     return /* @__PURE__ */ jsxs(
       m.button,
       {
@@ -2695,13 +2800,7 @@ var NavigationBarItemComponent = React36.forwardRef(
         "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
         onClick: handleClick,
         onPointerDown,
-        className: cn(
-          "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none h-full items-center justify-center min-w-0",
-          variant === "xr" ? isResponsiveHorizontal ? "flex-1 min-[600px]:flex-initial min-[600px]:w-auto" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1",
-          disabled && "pointer-events-none opacity-[0.38]",
-          contextItemClassName,
-          className
-        ),
+        className: itemClassName,
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -2865,7 +2964,12 @@ var NavigationBarComponent = React36.forwardRef(
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
       NavigationBarContext.Provider,
       {
-        value: { variant, itemLayout, activeIndicatorTransition, itemClassName },
+        value: {
+          variant,
+          itemLayout,
+          activeIndicatorTransition,
+          itemClassName
+        },
         children: /* @__PURE__ */ jsx(
           m.nav,
           {
@@ -3001,8 +3105,11 @@ var NavigationRailItemComponent = React36.forwardRef(
     disabled = false,
     badge,
     className,
-    "aria-label": ariaLabelProp
+    "aria-label": ariaLabelProp,
+    asChild = false,
+    children
   }, ref) => {
+    var _a;
     const { variant, labelVisibility } = React36.useContext(
       NavigationRailContext
     );
@@ -3026,6 +3133,96 @@ var NavigationRailItemComponent = React36.forwardRef(
     );
     const filledIcon = cloneIconWithFill2(icon, selected);
     const labelInitial = isModal ? false : { opacity: 0, x: isExpanded ? -12 : 0, y: isExpanded ? 0 : -8 };
+    const itemClassName = cn(
+      "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none",
+      "focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2 rounded-full",
+      disabled && "pointer-events-none opacity-[0.38]",
+      isExpanded ? "w-full flex-row items-center px-3 h-14" : "w-full flex-col justify-center h-14",
+      className
+    );
+    if (asChild && children) {
+      const child = React36.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            layout: enableLayout,
+            className: cn(
+              "relative flex z-10",
+              isExpanded ? "flex-row items-center w-fit h-14 px-4 gap-x-3 rounded-full" : "flex-col items-center justify-center w-full gap-y-1 rounded-full"
+            ),
+            children: [
+              isExpanded && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                ActivePill2,
+                {
+                  layoutId: activePillId,
+                  disableInitial: isModal
+                }
+              ) }),
+              isExpanded && /* @__PURE__ */ jsx(HoverStateLayer2, {}),
+              isExpanded && /* @__PURE__ */ jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
+              /* @__PURE__ */ jsxs(
+                m.div,
+                {
+                  layout: enableLayout,
+                  className: cn(
+                    "relative flex items-center justify-center shrink-0 z-10",
+                    isExpanded ? "size-6" : "h-8 w-14 mx-auto"
+                  ),
+                  style: { borderRadius: 9999 },
+                  children: [
+                    !isExpanded && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill2, { layoutId: activePillId }) }),
+                    !isExpanded && /* @__PURE__ */ jsx(HoverStateLayer2, {}),
+                    !isExpanded && /* @__PURE__ */ jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
+                    /* @__PURE__ */ jsx(
+                      m.div,
+                      {
+                        layout: enableLayout ? "position" : false,
+                        className: "relative z-10 flex size-6 items-center justify-center text-current",
+                        children: /* @__PURE__ */ jsx(IconContainer2, { selected, badge, children: filledIcon })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: showLabel && (label || child.props.children) && /* @__PURE__ */ jsx(
+                m.span,
+                {
+                  layout: enableLayout ? "position" : false,
+                  initial: labelInitial,
+                  animate: { opacity: 1, x: 0, y: 0 },
+                  exit: { opacity: 0, transition: { duration: 0.1 } },
+                  transition: SPRING_TRANSITION,
+                  className: cn(
+                    "z-10 transition-colors duration-200 whitespace-nowrap",
+                    selected ? "text-m3-on-surface" : "text-m3-on-surface-variant",
+                    isExpanded ? "text-sm font-medium tracking-wide text-left" : "text-xs font-medium tracking-wide"
+                  ),
+                  children: (_a = child.props.children) != null ? _a : label
+                },
+                "rail-label"
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(TouchTarget, {})
+      ] });
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          role: "menuitem",
+          "aria-current": selected ? "page" : void 0,
+          "aria-disabled": disabled ? true : void 0,
+          "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
+          onClick: handleClick,
+          onPointerDown,
+          className: itemClassName,
+          tabIndex: -1,
+          children: React36.cloneElement(child, { children: innerContent })
+        }
+      ) });
+    }
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       m.button,
       {
@@ -3038,13 +3235,7 @@ var NavigationRailItemComponent = React36.forwardRef(
         "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
         onClick: handleClick,
         onPointerDown,
-        className: cn(
-          "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none",
-          "focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2 rounded-full",
-          disabled && "pointer-events-none opacity-[0.38]",
-          isExpanded ? "w-full flex-row items-center px-3 h-14" : "w-full flex-col justify-center h-14",
-          className
-        ),
+        className: itemClassName,
         tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxs(
@@ -4629,12 +4820,39 @@ var ProgressIndicator = React36.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var SIZE_STYLES = {
-  xs: "h-8 w-8",
-  sm: "h-10 w-10",
-  md: "h-14 w-14",
-  lg: "h-24 w-24",
-  xl: "h-[8.5rem] w-[8.5rem]"
+var SIZE_HEIGHT_STYLES = {
+  xs: "h-8",
+  sm: "h-10",
+  md: "h-14",
+  lg: "h-24",
+  xl: "h-[8.5rem]"
+};
+var WIDTH_SIZE_STYLES = {
+  xs: {
+    default: "w-8",
+    narrow: "w-8",
+    wide: "w-12"
+  },
+  sm: {
+    default: "w-10",
+    narrow: "w-12",
+    wide: "w-[3.25rem]"
+  },
+  md: {
+    default: "w-14",
+    narrow: "w-12",
+    wide: "w-[4.5rem]"
+  },
+  lg: {
+    default: "w-24",
+    narrow: "w-16",
+    wide: "w-32"
+  },
+  xl: {
+    default: "w-[8.5rem]",
+    narrow: "w-[6.5rem]",
+    wide: "w-[11.5rem]"
+  }
 };
 var SIZE_ICON = {
   xs: { cls: "size-5", px: 20 },
@@ -4735,8 +4953,10 @@ var IconButtonComponent = React36.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
@@ -4751,8 +4971,10 @@ var IconButtonComponent = React36.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
@@ -4762,7 +4984,7 @@ var IconButtonComponent = React36.forwardRef(
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
     const resolvedColorClass = React36.useMemo(
@@ -4793,6 +5015,8 @@ var IconButtonComponent = React36.forwardRef(
     const defaultIconPx = sizeIcon.px;
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
@@ -4855,7 +5079,7 @@ var IconButtonComponent = React36.forwardRef(
           transition: SPRING_TRANSITION,
           "aria-hidden": "true",
           className: cn(
-            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]",
             iconSize != null ? void 0 : iconClass
           ),
           style: {
@@ -4863,9 +5087,9 @@ var IconButtonComponent = React36.forwardRef(
             width: isCustomSize ? `${iconSize}px` : void 0,
             height: isCustomSize ? `${iconSize}px` : void 0
           },
-          children: asChild ? React36.Children.only(children).props.children : children
+          children: isSelected && selectedIcon ? selectedIcon : asChild ? React36.Children.only(children).props.children : children
         }),
-        "content"
+        isSelected && selectedIcon ? "selected-content" : "content"
       ) })
     ] });
     const containerClassName = cn(
@@ -4874,7 +5098,8 @@ var IconButtonComponent = React36.forwardRef(
       outlineWidthClass,
       disabledBgClass,
       "overflow-hidden",
-      SIZE_STYLES[size],
+      heightClass,
+      widthClass,
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
@@ -4891,7 +5116,9 @@ var IconButtonComponent = React36.forwardRef(
           onClick: handleClick,
           onPointerDown,
           onKeyDown: handleKeyDown,
-          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          style: __spreadProps(__spreadValues({}, style), {
+            borderRadius: `${animateRadius}px`
+          }),
           className: containerClassName
         }, restProps), {
           children: React36.cloneElement(child, { children: innerContent })
@@ -6146,6 +6373,12 @@ var BottomDockedToolbar = React36.forwardRef(
 BottomDockedToolbar.displayName = "BottomDockedToolbar";
 
 // src/ui/toolbar/toolbar-tokens.ts
+var TOOLBAR_SPRING_TRANSITION = {
+  type: "spring",
+  stiffness: 300,
+  damping: 30,
+  mass: 0.8
+};
 var FloatingToolbarTokens = {
   ContainerBetweenSpace: 4,
   ContainerHeight: 64};
@@ -6340,7 +6573,9 @@ var FloatingToolbarBase = React36.forwardRef(
                       isHorizontal ? "flex-row h-full" : "flex-col w-full",
                       isStringPadding ? contentPadding : isHorizontal ? "px-2" : "py-2"
                     ),
-                    style: __spreadValues({ gap: itemGap }, isStringPadding ? {} : contentPadding),
+                    style: __spreadValues({
+                      gap: itemGap
+                    }, isStringPadding ? {} : contentPadding),
                     children: [
                       /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded && startContent && /* @__PURE__ */ jsx(
                         m.div,
@@ -6575,13 +6810,17 @@ var ToolbarIconButton = React36.forwardRef(
       toolbarSize = "default",
       selected,
       asChild,
-      className
+      className,
+      transition,
+      whileTap
     } = _b, props = __objRest(_b, [
       "emphasis",
       "toolbarSize",
       "selected",
       "asChild",
-      "className"
+      "className",
+      "transition",
+      "whileTap"
     ]);
     const context = useToolbarContext();
     const widthClass = TOOLBAR_ICON_BUTTON_WIDTH[toolbarSize];
@@ -6592,16 +6831,20 @@ var ToolbarIconButton = React36.forwardRef(
     } : {
       variant: "default"
     };
+    const motionProps = asChild ? __spreadValues(__spreadValues({}, transition !== void 0 && { transition }), whileTap !== void 0 && { whileTap }) : {
+      transition: transition != null ? transition : TOOLBAR_SPRING_TRANSITION,
+      whileTap: whileTap != null ? whileTap : { scale: 0.95 }
+    };
     return /* @__PURE__ */ jsx(
       IconButton,
-      __spreadValues(__spreadProps(__spreadValues({
+      __spreadValues(__spreadProps(__spreadValues(__spreadValues({
         ref,
         asChild,
         colorStyle,
         size: "md",
         shape: "round",
         iconSize: ToolbarIconButtonTokens.IconSize
-      }, iconButtonProps), {
+      }, motionProps), iconButtonProps), {
         className: cn(
           "h-[48px]",
           widthClass,
@@ -6777,8 +7020,8 @@ var ToolbarToggleButton = React36.forwardRef(
       [pressScale, pressBounceOffset]
     );
     const transitionConfig = React36.useMemo(
-      () => ({
-        scale: FAST_SPATIAL_SPRING,
+      () => __spreadProps(__spreadValues({}, TOOLBAR_SPRING_TRANSITION), {
+        scale: TOOLBAR_SPRING_TRANSITION,
         x: {
           duration: 0.35,
           ease: "easeInOut"