@bug-on/m3-expressive 1.2.1 → 1.2.2

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 }
@@ -2661,7 +2664,11 @@ var NavigationBarItemComponent = React36.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, itemLayout, itemClassName: contextItemClassName } = React36.useContext(NavigationBarContext);
+    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({
@@ -2865,7 +2872,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,
           {
@@ -4629,12 +4641,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 +4774,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 +4792,10 @@ var IconButtonComponent = React36.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
@@ -4762,7 +4805,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 +4836,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 +4900,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 +4908,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 +4919,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 +4937,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 })
@@ -6340,7 +6388,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,