@bug-on/m3-expressive 1.2.2 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bug-on/m3-expressive
 
+## 1.2.4
+
+### Patch Changes
+
+- 3aab9b2: Improve Navigation components, fix some issues
+
+## 1.2.3
+
+### Patch Changes
+
+- 3d03619: Added asChild for navigation item
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/buttons.d.mts

@@ -1,4 +1,4 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DHJqNeq_.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-BTWfIN2k.mjs';
 import { Transition } from 'motion/react';
 import { b as MD3Size } from './md3-Dty-Qcad.mjs';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.mjs';

package/dist/buttons.d.ts

@@ -1,4 +1,4 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-C-qQlyZx.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DtxrcLxH.js';
 import { Transition } from 'motion/react';
 import { b as MD3Size } from './md3-Dty-Qcad.js';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.js';

package/dist/buttons.js

@@ -1331,6 +1331,7 @@ var ButtonComponent = React16__namespace.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       asChild = false,
+      fullWidth = false,
       outlineWidth,
       children,
       onClick,
@@ -1353,6 +1354,7 @@ var ButtonComponent = React16__namespace.forwardRef(
       "loading",
       "loadingVariant",
       "asChild",
+      "fullWidth",
       "outlineWidth",
       "children",
       "onClick",
@@ -1432,7 +1434,8 @@ var ButtonComponent = React16__namespace.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",
@@ -2707,7 +2710,9 @@ var FABComponent = React16__namespace.forwardRef(
       asChild = false,
       onClick,
       onKeyDown,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      layout,
+      layoutId
     } = _b, restProps = __objRest(_b, [
       "className",
       "style",
@@ -2723,7 +2728,9 @@ var FABComponent = React16__namespace.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;
@@ -2764,7 +2771,9 @@ var FABComponent = React16__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
       /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
         react.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",
@@ -2791,7 +2800,9 @@ var FABComponent = React16__namespace.forwardRef(
         "loading"
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         react.m.span,
-        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+        __spreadProps(__spreadValues({
+          layout: "position"
+        }, ICON_SPAN_VARIANTS), {
           transition: SPRING_TRANSITION,
           "aria-hidden": "true",
           className: cn(
@@ -2805,10 +2816,15 @@ var FABComponent = React16__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: extended && labelContent && /* @__PURE__ */ jsxRuntime.jsx(
         react.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
         },
@@ -2825,7 +2841,7 @@ var FABComponent = React16__namespace.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
@@ -2856,6 +2872,8 @@ var FABComponent = React16__namespace.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,
@@ -2874,7 +2892,8 @@ var FABComponent = React16__namespace.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), {