@bug-on/m3-expressive 1.3.3 → 1.3.5

package/dist/buttons.mjs

@@ -2178,7 +2178,7 @@ var IconComponent = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -2682,6 +2682,7 @@ var ExtendedFABComponent = React16.forwardRef(
       onClick,
       onKeyDown,
       layoutId,
+      layout,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -2703,6 +2704,7 @@ var ExtendedFABComponent = React16.forwardRef(
       "onClick",
       "onKeyDown",
       "layoutId",
+      "layout",
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
@@ -2727,6 +2729,13 @@ var ExtendedFABComponent = React16.forwardRef(
     const colors = (_a2 = COLOR_CLASSES[colorStyle]) != null ? _a2 : COLOR_CLASSES.primary;
     const radiusConfig = (_b2 = MORPH_RADIUS[size]) != null ? _b2 : MORPH_RADIUS.sm;
     const sizeIcon = (_c = SIZE_ICON[size]) != null ? _c : SIZE_ICON.sm;
+    const motionRadius = useMotionValue(radiusConfig.default);
+    React16.useEffect(() => {
+      const controls = animate(motionRadius, radiusConfig.default, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
+        type: "spring"
+      }));
+      return () => controls.stop();
+    }, [radiusConfig.default, motionRadius]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
@@ -2821,13 +2830,25 @@ var ExtendedFABComponent = React16.forwardRef(
         {
           layout: "position",
           initial: { opacity: 0, width: 0 },
-          animate: { opacity: 1, width: "auto" },
-          exit: { opacity: 0, width: 0 },
-          transition: {
-            opacity: { duration: 0.15, ease: "linear" },
-            width: SPRING_TRANSITION
+          animate: {
+            opacity: 1,
+            width: "auto",
+            transition: {
+              width: SPRING_TRANSITION,
+              opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
+              layout: SPRING_TRANSITION
+            }
           },
-          className: "overflow-hidden whitespace-nowrap",
+          exit: {
+            opacity: 0,
+            width: 0,
+            transition: {
+              opacity: { duration: 0.1, ease: "linear" },
+              width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              layout: SPRING_TRANSITION
+            }
+          },
+          className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
           children: label
         },
         "label"
@@ -2858,7 +2879,7 @@ var ExtendedFABComponent = React16.forwardRef(
       __spreadProps(__spreadValues({
         ref: localRef,
         type: "button",
-        layout: true,
+        layout: layout !== void 0 ? layout : "position",
         layoutId,
         "aria-label": ariaLabel || label,
         "aria-busy": loading || void 0,
@@ -2866,21 +2887,23 @@ var ExtendedFABComponent = React16.forwardRef(
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
-        style,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: motionRadius
+        }),
         initial: {
           scale: 0.6,
-          opacity: 0,
-          borderRadius: radiusConfig.default
+          opacity: 0
         },
         animate: {
           scale: 1,
-          opacity: 1,
-          borderRadius: radiusConfig.default
+          opacity: 1
         },
         exit: { scale: 0.6, opacity: 0 },
-        whileTap: { borderRadius: radiusConfig.pressed },
+        whileTap: {
+          borderRadius: radiusConfig.pressed,
+          transition: { borderRadius: SPRING_TRANSITION_FAST }
+        },
         transition: {
-          borderRadius: { type: "spring", stiffness: 500, damping: 30 },
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.2, ease: "linear" },
           layout: SPRING_TRANSITION
@@ -2912,6 +2935,18 @@ var SIZE_TEXT_CLASS = {
   lg: "text-xl  font-semibold",
   xl: "text-2xl font-semibold"
 };
+var SIZE_PADDING_COLLAPSED = {
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-8",
+  xl: "px-12"
+};
+var SIZE_PADDING_EXTENDED = {
+  sm: "pl-2 pr-4",
+  md: "pl-4 pr-6",
+  lg: "pl-8 pr-8",
+  xl: "pl-12 pr-10"
+};
 var MORPH_RADIUS2 = {
   sm: { default: 12, pressed: 8, extended: 12, extended_pressed: 8 },
   md: { default: 16, pressed: 10, extended: 16, extended_pressed: 10 },
@@ -3003,7 +3038,7 @@ var FABComponent = React16.forwardRef(
       "layout",
       "layoutId"
     ]);
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c, _d, _e, _f;
     const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
     const radiusConfig = (_b2 = MORPH_RADIUS2[size]) != null ? _b2 : MORPH_RADIUS2.md;
     const animateRadius = extended ? radiusConfig.extended : radiusConfig.default;
@@ -3088,22 +3123,37 @@ var FABComponent = React16.forwardRef(
         m.span,
         {
           layout: "position",
-          initial: { width: 0, opacity: 0 },
-          animate: { width: "auto", opacity: 1 },
-          exit: { width: 0, opacity: 0 },
-          transition: {
-            opacity: { duration: 0.15, ease: "linear" },
-            width: SPRING_TRANSITION,
-            layout: SPRING_TRANSITION
+          initial: { width: 0, opacity: 0, marginLeft: 0 },
+          animate: {
+            width: "auto",
+            opacity: 1,
+            marginLeft: 12,
+            transition: {
+              width: SPRING_TRANSITION,
+              marginLeft: SPRING_TRANSITION,
+              opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
+              layout: SPRING_TRANSITION
+            }
+          },
+          exit: {
+            width: 0,
+            opacity: 0,
+            marginLeft: 0,
+            transition: {
+              opacity: { duration: 0.1, ease: "linear" },
+              width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              marginLeft: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              layout: SPRING_TRANSITION
+            }
           },
-          className: "overflow-hidden whitespace-nowrap ml-3",
+          className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
           children: labelContent
         },
         "label"
       ) })
     ] });
     const containerClassName = cn(
-      "relative shrink-0 inline-flex items-center justify-center",
+      "relative shrink-0 inline-flex items-center justify-start",
       "select-none cursor-pointer overflow-hidden",
       "transition-[box-shadow,opacity,filter] duration-200",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
@@ -3112,21 +3162,62 @@ var FABComponent = React16.forwardRef(
       colors.text,
       lowered ? "shadow-sm" : colors.shadow,
       (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-      extended && "w-auto pl-4 pr-6",
+      extended ? cn("w-auto", (_e = SIZE_PADDING_EXTENDED[size]) != null ? _e : "pl-4 pr-6") : (_f = SIZE_PADDING_COLLAPSED[size]) != null ? _f : "px-4",
       SIZE_TEXT_CLASS[size],
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
+    const motionRadius = useMotionValue(animateRadius);
+    const asChildRef = React16.useRef(null);
+    const mergedRef = React16.useCallback(
+      (node) => {
+        asChildRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    React16.useEffect(() => {
+      if (!asChild) return;
+      return motionRadius.on("change", (v) => {
+        if (asChildRef.current)
+          asChildRef.current.style.borderRadius = `${v}px`;
+      });
+    }, [motionRadius, asChild]);
+    React16.useEffect(() => {
+      const controls = animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
+        type: "spring"
+      }));
+      return () => controls.stop();
+    }, [animateRadius, motionRadius]);
+    const handleAsChildPointerDown = React16.useCallback(
+      (e) => {
+        onPointerDown(e);
+        animate(motionRadius, pressedRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
+          type: "spring"
+        }));
+      },
+      [onPointerDown, motionRadius, pressedRadius]
+    );
+    const handleAsChildPointerUp = React16.useCallback(() => {
+      animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
+        type: "spring"
+      }));
+    }, [motionRadius, animateRadius]);
     const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsx(
       Slot,
       __spreadProps(__spreadValues({
-        ref,
+        ref: mergedRef,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
         onClick: handleClick,
-        onPointerDown,
+        onPointerDown: handleAsChildPointerDown,
+        onPointerUp: handleAsChildPointerUp,
+        onPointerLeave: handleAsChildPointerUp,
+        onPointerCancel: handleAsChildPointerUp,
         onKeyDown: handleKeyDown,
         style: __spreadProps(__spreadValues({}, style), {
           borderRadius: `${animateRadius}px`
@@ -3143,7 +3234,7 @@ var FABComponent = React16.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        layout: layout !== void 0 ? layout : true,
+        layout: layout !== void 0 ? layout : "position",
         layoutId,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
@@ -3151,17 +3242,20 @@ var FABComponent = React16.forwardRef(
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
-        style,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: motionRadius
+        }),
         initial: {
           scale: 0.5,
-          opacity: 0,
-          borderRadius: animateRadius
+          opacity: 0
         },
-        animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
+        animate: { scale: 1, opacity: 1 },
         exit: { scale: 0.5, opacity: 0 },
-        whileTap: { borderRadius: pressedRadius },
+        whileTap: {
+          borderRadius: pressedRadius,
+          transition: { borderRadius: SPRING_TRANSITION_FAST }
+        },
         transition: {
-          borderRadius: SPRING_TRANSITION_FAST,
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.25, ease: "easeOut" },
           layout: SPRING_TRANSITION