@bug-on/m3-expressive 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bug-on/m3-expressive
 
+## 1.2.3
+
+### Patch Changes
+
+- 3d03619: Added asChild for navigation item
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/index.js

@@ -15841,8 +15841,11 @@ var NavigationBarItemComponent = React61__namespace.forwardRef(
     disabled = false,
     badge,
     className,
-    "aria-label": ariaLabelProp
+    "aria-label": ariaLabelProp,
+    asChild = false,
+    children
   }, ref) => {
+    var _a;
     const {
       variant,
       itemLayout,
@@ -15870,6 +15873,101 @@ var NavigationBarItemComponent = React61__namespace.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 = React61__namespace.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-0 z-0 hidden",
+                    isResponsiveHorizontal && "min-[600px]:block",
+                    isForcedHorizontal && "block!"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill, {}) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute inset-0 z-0",
+                          isResponsiveHorizontal && "min-[600px]:hidden",
+                          isForcedHorizontal && "hidden"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill, {}) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer, {}),
+                          /* @__PURE__ */ jsxRuntime.jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex size-6 items-center justify-center text-current", children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { selected, badge, children: filledIcon }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TouchTarget, {})
+      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.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: React61__namespace.cloneElement(child, { children: innerContent })
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       react.m.button,
       {
@@ -15881,13 +15979,7 @@ var NavigationBarItemComponent = React61__namespace.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__ */ jsxRuntime.jsxs(
             "div",
@@ -16192,8 +16284,11 @@ var NavigationRailItemComponent = React61__namespace.forwardRef(
     disabled = false,
     badge,
     className,
-    "aria-label": ariaLabelProp
+    "aria-label": ariaLabelProp,
+    asChild = false,
+    children
   }, ref) => {
+    var _a;
     const { variant, labelVisibility } = React61__namespace.useContext(
       NavigationRailContext
     );
@@ -16217,6 +16312,96 @@ var NavigationRailItemComponent = React61__namespace.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 = React61__namespace.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          react.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__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(
+                ActivePill2,
+                {
+                  layoutId: activePillId,
+                  disableInitial: isModal
+                }
+              ) }),
+              isExpanded && /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer2, {}),
+              isExpanded && /* @__PURE__ */ jsxRuntime.jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                react.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__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsxRuntime.jsx(ActivePill2, { layoutId: activePillId }) }),
+                    !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(HoverStateLayer2, {}),
+                    !isExpanded && /* @__PURE__ */ jsxRuntime.jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      react.m.div,
+                      {
+                        layout: enableLayout ? "position" : false,
+                        className: "relative z-10 flex size-6 items-center justify-center text-current",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { selected, badge, children: filledIcon })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "popLayout", children: showLabel && (label || child.props.children) && /* @__PURE__ */ jsxRuntime.jsx(
+                react.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__ */ jsxRuntime.jsx(TouchTarget, {})
+      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.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: React61__namespace.cloneElement(child, { children: innerContent })
+        }
+      ) });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       react.m.button,
       {
@@ -16229,13 +16414,7 @@ var NavigationRailItemComponent = React61__namespace.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__ */ jsxRuntime.jsxs(
@@ -23211,6 +23390,12 @@ var BottomDockedToolbar = React61__namespace.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};
@@ -23642,13 +23827,17 @@ var ToolbarIconButton = React61__namespace.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];
@@ -23659,16 +23848,20 @@ var ToolbarIconButton = React61__namespace.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__ */ jsxRuntime.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,
@@ -23844,8 +24037,8 @@ var ToolbarToggleButton = React61__namespace.forwardRef(
       [pressScale, pressBounceOffset]
     );
     const transitionConfig = React61__namespace.useMemo(
-      () => ({
-        scale: FAST_SPATIAL_SPRING,
+      () => __spreadProps(__spreadValues({}, TOOLBAR_SPRING_TRANSITION), {
+        scale: TOOLBAR_SPRING_TRANSITION,
         x: {
           duration: 0.35,
           ease: "easeInOut"