@bug-on/m3-expressive 1.2.3 → 1.2.4

package/dist/buttons.mjs

@@ -1309,6 +1309,7 @@ var ButtonComponent = React16.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       asChild = false,
+      fullWidth = false,
       outlineWidth,
       children,
       onClick,
@@ -1331,6 +1332,7 @@ var ButtonComponent = React16.forwardRef(
       "loading",
       "loadingVariant",
       "asChild",
+      "fullWidth",
       "outlineWidth",
       "children",
       "onClick",
@@ -1410,7 +1412,8 @@ var ButtonComponent = React16.forwardRef(
       [loading, onClick, onKeyDown]
     );
     const buttonClassName = cn(
-      "relative w-fit shrink-0 inline-flex flex-row items-center justify-center",
+      "relative inline-flex flex-row items-center justify-center",
+      fullWidth ? "w-full" : "w-fit shrink-0",
       "whitespace-nowrap select-none cursor-pointer",
       "transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
@@ -2685,7 +2688,9 @@ var FABComponent = React16.forwardRef(
       asChild = false,
       onClick,
       onKeyDown,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      layout,
+      layoutId
     } = _b, restProps = __objRest(_b, [
       "className",
       "style",
@@ -2701,7 +2706,9 @@ var FABComponent = React16.forwardRef(
       "asChild",
       "onClick",
       "onKeyDown",
-      "aria-label"
+      "aria-label",
+      "layout",
+      "layoutId"
     ]);
     var _a2, _b2, _c, _d;
     const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
@@ -2742,7 +2749,9 @@ var FABComponent = React16.forwardRef(
       /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
       /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
         m.span,
-        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+        __spreadProps(__spreadValues({
+          layout: "position"
+        }, ICON_SPAN_VARIANTS), {
           transition: SPRING_TRANSITION,
           className: cn(
             "flex items-center justify-center shrink-0",
@@ -2769,7 +2778,9 @@ var FABComponent = React16.forwardRef(
         "loading"
       ) : /* @__PURE__ */ jsx(
         m.span,
-        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+        __spreadProps(__spreadValues({
+          layout: "position"
+        }, ICON_SPAN_VARIANTS), {
           transition: SPRING_TRANSITION,
           "aria-hidden": "true",
           className: cn(
@@ -2783,10 +2794,15 @@ var FABComponent = React16.forwardRef(
       /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && labelContent && /* @__PURE__ */ jsx(
         m.span,
         {
+          layout: "position",
           initial: { width: 0, opacity: 0 },
           animate: { width: "auto", opacity: 1 },
           exit: { width: 0, opacity: 0 },
-          transition: SPRING_TRANSITION,
+          transition: {
+            opacity: { duration: 0.15, ease: "linear" },
+            width: SPRING_TRANSITION,
+            layout: SPRING_TRANSITION
+          },
           className: "overflow-hidden whitespace-nowrap ml-3",
           children: labelContent
         },
@@ -2803,7 +2819,7 @@ var FABComponent = React16.forwardRef(
       colors.text,
       lowered ? "shadow-sm" : colors.shadow,
       (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-      extended && "w-auto px-6",
+      extended && "w-auto pl-4 pr-6",
       SIZE_TEXT_CLASS[size],
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
@@ -2834,6 +2850,8 @@ var FABComponent = React16.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        layout: layout !== void 0 ? layout : true,
+        layoutId,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
@@ -2852,7 +2870,8 @@ var FABComponent = React16.forwardRef(
         transition: {
           borderRadius: SPRING_TRANSITION_FAST,
           scale: SPRING_TRANSITION,
-          opacity: { duration: 0.25, ease: "easeOut" }
+          opacity: { duration: 0.25, ease: "easeOut" },
+          layout: SPRING_TRANSITION
         },
         className: containerClassName
       }, restProps), {