@bug-on/m3-expressive 1.2.3 → 1.2.5

package/dist/buttons.mjs

@@ -1078,6 +1078,7 @@ function TouchTarget() {
 }
 var BUTTON_SHAPE_MORPH_SPRING = FAST_SPATIAL_SPRING;
 var BUTTON_RADIUS_SPRING = FAST_EFFECTS_SPRING;
+var ROUND_SHAPE_RADIUS = 9999;
 var BUTTON_SIZE_TOKENS = {
   xs: {
     height: "2rem",
@@ -1096,7 +1097,7 @@ var BUTTON_SIZE_TOKENS = {
     // 12dp
     pressedShapeRadius: cornerRadius.small,
     // 8dp
-    roundShapeRadius: 16
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   sm: {
     height: "2.5rem",
@@ -1115,7 +1116,7 @@ var BUTTON_SIZE_TOKENS = {
     // 12dp
     pressedShapeRadius: cornerRadius.small,
     // 8dp
-    roundShapeRadius: 20
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   md: {
     height: "3.5rem",
@@ -1134,7 +1135,7 @@ var BUTTON_SIZE_TOKENS = {
     // 16dp
     pressedShapeRadius: cornerRadius.medium,
     // 12dp
-    roundShapeRadius: 28
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   lg: {
     height: "6rem",
@@ -1153,7 +1154,7 @@ var BUTTON_SIZE_TOKENS = {
     // 28dp
     pressedShapeRadius: cornerRadius.large,
     // 16dp
-    roundShapeRadius: 48
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   xl: {
     height: "8.5rem",
@@ -1172,7 +1173,7 @@ var BUTTON_SIZE_TOKENS = {
     // 28dp
     pressedShapeRadius: cornerRadius.large,
     // 16dp
-    roundShapeRadius: 68
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   }
 };
 var BUTTON_TYPOGRAPHY_TOKENS = {
@@ -1309,6 +1310,7 @@ var ButtonComponent = React16.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       asChild = false,
+      fullWidth = false,
       outlineWidth,
       children,
       onClick,
@@ -1331,6 +1333,7 @@ var ButtonComponent = React16.forwardRef(
       "loading",
       "loadingVariant",
       "asChild",
+      "fullWidth",
       "outlineWidth",
       "children",
       "onClick",
@@ -1410,7 +1413,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",
@@ -1521,7 +1525,6 @@ var ButtonComponent = React16.forwardRef(
       m.button,
       __spreadProps(__spreadValues({
         ref,
-        layout: true,
         type: "button",
         "aria-pressed": isToggle ? isSelected : void 0,
         "aria-label": computedAriaLabel,
@@ -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), {