@bug-on/m3-expressive 1.2.1 → 1.2.2

package/dist/{split-button-trailing-uncheckable-BcPD_7uK.d.ts → split-button-trailing-uncheckable-C-qQlyZx.d.ts}

@@ -37,6 +37,10 @@ interface BaseButtonProps extends MotionButtonProps$3 {
      * An optional icon to display alongside the label.
      */
     icon?: React.ReactNode;
+    /**
+     * An optional icon to display when the button is in a selected toggle state (`variant="toggle"` and `selected={true}`).
+     */
+    selectedIcon?: React.ReactNode;
     /**
      * Position of the icon relative to the label.
      * @default "leading"
@@ -200,6 +204,75 @@ declare const BUTTON_COLOR_TOKENS: {
     };
 };
 
+type DistributeMode = "fixed" | "dynamic" | "mixed";
+interface ButtonDistributeProps extends React$1.HTMLAttributes<HTMLFieldSetElement> {
+    /**
+     * Distribution mode:
+     * - `fixed`: Buttons maintain fixed base size, morph and compress neighbors on press/interaction.
+     * - `dynamic`: Group fills 100% container width, expanding active button and shrinking neighbors proportionally.
+     * - `mixed`: Leading/trailing buttons remain fixed size, center button(s) flex: 1.
+     * @default "dynamic"
+     */
+    mode?: DistributeMode;
+    /**
+     * Custom weight ratios for children in `dynamic` mode (e.g. `[1, 2, 1]` for Prev:Play:Next).
+     * If omitted, defaults to `[1, 2, 1]` for 3 children, or equal weights `[1, 1, ..., 1]`.
+     */
+    weights?: number[];
+    /**
+     * Expansion factor added to active item weight in `dynamic` mode.
+     * @default 0.3
+     */
+    expandRatio?: number;
+    /**
+     * Controls whether hover state triggers button expansion in `dynamic` mode.
+     * Focus and Active/Press always trigger expansion regardless of this prop.
+     * @default false
+     */
+    expandOnHover?: boolean;
+    /**
+     * Fixed size (width in px or CSS string) for leading/trailing buttons in `mixed` mode,
+     * or base size override in `fixed` mode.
+     * @default 48
+     */
+    fixedSize?: number | string;
+    /**
+     * Explicit fixed size for leading button in `mixed` mode. Overrides `fixedSize` if set.
+     */
+    leadingSize?: number | string;
+    /**
+     * Explicit fixed size for trailing button in `mixed` mode. Overrides `fixedSize` if set.
+     */
+    trailingSize?: number | string;
+    /**
+     * Gap spacing between buttons in group.
+     * @default "0.5rem" (8px)
+     */
+    gap?: string | number;
+    /**
+     * Applied size token to all child buttons in group if not specified on child.
+     * @default "sm"
+     */
+    size?: MD3Size;
+    /**
+     * Custom CSS class applied to button wrappers inside the group.
+     */
+    itemClassName?: string;
+    /**
+     * Child button elements (Button, IconButton, etc.).
+     */
+    children: React$1.ReactNode;
+}
+
+/**
+ * @file button-distribute.tsx
+ *
+ * MD3 Expressive ButtonDistribute component.
+ * Flexible Button Group with Expressive Motion & Size Distribution (Fixed, Dynamic, Mixed).
+ */
+
+declare const ButtonDistribute: React$1.ForwardRefExoticComponent<ButtonDistributeProps & React$1.RefAttributes<HTMLFieldSetElement>>;
+
 type ButtonGroupVariant = "standard" | "connected";
 type ButtonGroupOrientation = "horizontal" | "vertical";
 /**
@@ -227,17 +300,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * Applies unified `size` to all child buttons in group (overrides individual button sizes).
      */
     size?: MD3Size;
-    /**
-     * Toggles width expansion/padding animation (Morphing Width) when buttons are pressed (`standard` group).
-     * @default true
-     */
-    morphingWidth?: boolean;
-    /**
-     * Expansion ratio for button width on press (`standard` horizontal group).
-     * Per MD3 Spec, default is 0.15 (15%).
-     * @default 0.15
-     */
-    expandedRatio?: number;
     /**
      * Automatically displays Check icon when a child button has `selected={true}`.
      * @default false
@@ -257,13 +319,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * - `none`: Hide all labels.
      */
     labelBehavior?: "selected" | "all" | "none";
-    /**
-     * Enable Active Morphing mode (selection-based).
-     * When `true`, buttons automatically expand/contract based on selection state,
-     * creating smooth size transitions.
-     * When `false` or `undefined`, Group responds to `isPressed` by default.
-     */
-    activeMorphing?: boolean;
     /**
      * Custom CSS class applied to individual child buttons in group.
      * Useful for customizing padding, min-width, or other layout properties.
@@ -783,4 +838,4 @@ declare const TonalSplitButtonTrailingUncheckable: React$1.ForwardRefExoticCompo
 declare const ElevatedSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const OutlinedSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-export { SplitButtonLeading as A, BUTTON_COLOR_TOKENS as B, type SplitButtonLeadingProps as C, type SplitButtonSize as D, ElevatedSplitButtonLeading as E, FAB as F, SplitButtonTrailing as G, type SplitButtonTrailingProps as H, SplitButtonTrailingUncheckable as I, type SplitButtonTrailingUncheckableProps as J, type SplitButtonVariant as K, type ToggleFABProps as L, TonalSplitButtonLeading as M, TonalSplitButtonTrailing as N, OutlinedSplitButtonLeading as O, TonalSplitButtonTrailingUncheckable as P, type SplitButtonSizeTokens as Q, SplitButtonLayout as S, ToggleFAB as T, BUTTON_SIZE_TOKENS as a, type BaseButtonProps as b, Button as c, ButtonGroup as d, type ButtonGroupOrientation as e, type ButtonGroupProps as f, type ButtonGroupVariant as g, type ButtonProps as h, ElevatedSplitButtonTrailing as i, ElevatedSplitButtonTrailingUncheckable as j, ExtendedFAB as k, type ExtendedFABProps as l, FABMenu as m, FABMenuItem as n, type FABMenuItemData as o, type FABMenuItemProps as p, type FABMenuProps as q, FABPosition as r, type FABPositionProps as s, type FABProps as t, FilledSplitButtonLeading as u, FilledSplitButtonTrailing as v, FilledSplitButtonTrailingUncheckable as w, OutlinedSplitButtonTrailing as x, OutlinedSplitButtonTrailingUncheckable as y, type SplitButtonLayoutProps as z };
+export { OutlinedSplitButtonTrailingUncheckable as A, BUTTON_COLOR_TOKENS as B, type SplitButtonLayoutProps as C, type DistributeMode as D, ElevatedSplitButtonLeading as E, FAB as F, SplitButtonLeading as G, type SplitButtonLeadingProps as H, type SplitButtonSize as I, SplitButtonTrailing as J, type SplitButtonTrailingProps as K, SplitButtonTrailingUncheckable as L, type SplitButtonTrailingUncheckableProps as M, type SplitButtonVariant as N, OutlinedSplitButtonLeading as O, type ToggleFABProps as P, TonalSplitButtonLeading as Q, TonalSplitButtonTrailing as R, SplitButtonLayout as S, ToggleFAB as T, TonalSplitButtonTrailingUncheckable as U, type SplitButtonSizeTokens as V, BUTTON_SIZE_TOKENS as a, type BaseButtonProps as b, Button as c, ButtonDistribute as d, type ButtonDistributeProps as e, ButtonGroup as f, type ButtonGroupOrientation as g, type ButtonGroupProps as h, type ButtonGroupVariant as i, type ButtonProps as j, ElevatedSplitButtonTrailing as k, ElevatedSplitButtonTrailingUncheckable as l, ExtendedFAB as m, type ExtendedFABProps as n, FABMenu as o, FABMenuItem as p, type FABMenuItemData as q, type FABMenuItemProps as r, type FABMenuProps as s, FABPosition as t, type FABPositionProps as u, type FABProps as v, FilledSplitButtonLeading as w, FilledSplitButtonTrailing as x, FilledSplitButtonTrailingUncheckable as y, OutlinedSplitButtonTrailing as z };

package/dist/{split-button-trailing-uncheckable-DtFJkTFr.d.mts → split-button-trailing-uncheckable-DHJqNeq_.d.mts}

@@ -37,6 +37,10 @@ interface BaseButtonProps extends MotionButtonProps$3 {
      * An optional icon to display alongside the label.
      */
     icon?: React.ReactNode;
+    /**
+     * An optional icon to display when the button is in a selected toggle state (`variant="toggle"` and `selected={true}`).
+     */
+    selectedIcon?: React.ReactNode;
     /**
      * Position of the icon relative to the label.
      * @default "leading"
@@ -200,6 +204,75 @@ declare const BUTTON_COLOR_TOKENS: {
     };
 };
 
+type DistributeMode = "fixed" | "dynamic" | "mixed";
+interface ButtonDistributeProps extends React$1.HTMLAttributes<HTMLFieldSetElement> {
+    /**
+     * Distribution mode:
+     * - `fixed`: Buttons maintain fixed base size, morph and compress neighbors on press/interaction.
+     * - `dynamic`: Group fills 100% container width, expanding active button and shrinking neighbors proportionally.
+     * - `mixed`: Leading/trailing buttons remain fixed size, center button(s) flex: 1.
+     * @default "dynamic"
+     */
+    mode?: DistributeMode;
+    /**
+     * Custom weight ratios for children in `dynamic` mode (e.g. `[1, 2, 1]` for Prev:Play:Next).
+     * If omitted, defaults to `[1, 2, 1]` for 3 children, or equal weights `[1, 1, ..., 1]`.
+     */
+    weights?: number[];
+    /**
+     * Expansion factor added to active item weight in `dynamic` mode.
+     * @default 0.3
+     */
+    expandRatio?: number;
+    /**
+     * Controls whether hover state triggers button expansion in `dynamic` mode.
+     * Focus and Active/Press always trigger expansion regardless of this prop.
+     * @default false
+     */
+    expandOnHover?: boolean;
+    /**
+     * Fixed size (width in px or CSS string) for leading/trailing buttons in `mixed` mode,
+     * or base size override in `fixed` mode.
+     * @default 48
+     */
+    fixedSize?: number | string;
+    /**
+     * Explicit fixed size for leading button in `mixed` mode. Overrides `fixedSize` if set.
+     */
+    leadingSize?: number | string;
+    /**
+     * Explicit fixed size for trailing button in `mixed` mode. Overrides `fixedSize` if set.
+     */
+    trailingSize?: number | string;
+    /**
+     * Gap spacing between buttons in group.
+     * @default "0.5rem" (8px)
+     */
+    gap?: string | number;
+    /**
+     * Applied size token to all child buttons in group if not specified on child.
+     * @default "sm"
+     */
+    size?: MD3Size;
+    /**
+     * Custom CSS class applied to button wrappers inside the group.
+     */
+    itemClassName?: string;
+    /**
+     * Child button elements (Button, IconButton, etc.).
+     */
+    children: React$1.ReactNode;
+}
+
+/**
+ * @file button-distribute.tsx
+ *
+ * MD3 Expressive ButtonDistribute component.
+ * Flexible Button Group with Expressive Motion & Size Distribution (Fixed, Dynamic, Mixed).
+ */
+
+declare const ButtonDistribute: React$1.ForwardRefExoticComponent<ButtonDistributeProps & React$1.RefAttributes<HTMLFieldSetElement>>;
+
 type ButtonGroupVariant = "standard" | "connected";
 type ButtonGroupOrientation = "horizontal" | "vertical";
 /**
@@ -227,17 +300,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * Applies unified `size` to all child buttons in group (overrides individual button sizes).
      */
     size?: MD3Size;
-    /**
-     * Toggles width expansion/padding animation (Morphing Width) when buttons are pressed (`standard` group).
-     * @default true
-     */
-    morphingWidth?: boolean;
-    /**
-     * Expansion ratio for button width on press (`standard` horizontal group).
-     * Per MD3 Spec, default is 0.15 (15%).
-     * @default 0.15
-     */
-    expandedRatio?: number;
     /**
      * Automatically displays Check icon when a child button has `selected={true}`.
      * @default false
@@ -257,13 +319,6 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * - `none`: Hide all labels.
      */
     labelBehavior?: "selected" | "all" | "none";
-    /**
-     * Enable Active Morphing mode (selection-based).
-     * When `true`, buttons automatically expand/contract based on selection state,
-     * creating smooth size transitions.
-     * When `false` or `undefined`, Group responds to `isPressed` by default.
-     */
-    activeMorphing?: boolean;
     /**
      * Custom CSS class applied to individual child buttons in group.
      * Useful for customizing padding, min-width, or other layout properties.
@@ -783,4 +838,4 @@ declare const TonalSplitButtonTrailingUncheckable: React$1.ForwardRefExoticCompo
 declare const ElevatedSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const OutlinedSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-export { SplitButtonLeading as A, BUTTON_COLOR_TOKENS as B, type SplitButtonLeadingProps as C, type SplitButtonSize as D, ElevatedSplitButtonLeading as E, FAB as F, SplitButtonTrailing as G, type SplitButtonTrailingProps as H, SplitButtonTrailingUncheckable as I, type SplitButtonTrailingUncheckableProps as J, type SplitButtonVariant as K, type ToggleFABProps as L, TonalSplitButtonLeading as M, TonalSplitButtonTrailing as N, OutlinedSplitButtonLeading as O, TonalSplitButtonTrailingUncheckable as P, type SplitButtonSizeTokens as Q, SplitButtonLayout as S, ToggleFAB as T, BUTTON_SIZE_TOKENS as a, type BaseButtonProps as b, Button as c, ButtonGroup as d, type ButtonGroupOrientation as e, type ButtonGroupProps as f, type ButtonGroupVariant as g, type ButtonProps as h, ElevatedSplitButtonTrailing as i, ElevatedSplitButtonTrailingUncheckable as j, ExtendedFAB as k, type ExtendedFABProps as l, FABMenu as m, FABMenuItem as n, type FABMenuItemData as o, type FABMenuItemProps as p, type FABMenuProps as q, FABPosition as r, type FABPositionProps as s, type FABProps as t, FilledSplitButtonLeading as u, FilledSplitButtonTrailing as v, FilledSplitButtonTrailingUncheckable as w, OutlinedSplitButtonTrailing as x, OutlinedSplitButtonTrailingUncheckable as y, type SplitButtonLayoutProps as z };
+export { OutlinedSplitButtonTrailingUncheckable as A, BUTTON_COLOR_TOKENS as B, type SplitButtonLayoutProps as C, type DistributeMode as D, ElevatedSplitButtonLeading as E, FAB as F, SplitButtonLeading as G, type SplitButtonLeadingProps as H, type SplitButtonSize as I, SplitButtonTrailing as J, type SplitButtonTrailingProps as K, SplitButtonTrailingUncheckable as L, type SplitButtonTrailingUncheckableProps as M, type SplitButtonVariant as N, OutlinedSplitButtonLeading as O, type ToggleFABProps as P, TonalSplitButtonLeading as Q, TonalSplitButtonTrailing as R, SplitButtonLayout as S, ToggleFAB as T, TonalSplitButtonTrailingUncheckable as U, type SplitButtonSizeTokens as V, BUTTON_SIZE_TOKENS as a, type BaseButtonProps as b, Button as c, ButtonDistribute as d, type ButtonDistributeProps as e, ButtonGroup as f, type ButtonGroupOrientation as g, type ButtonGroupProps as h, type ButtonGroupVariant as i, type ButtonProps as j, ElevatedSplitButtonTrailing as k, ElevatedSplitButtonTrailingUncheckable as l, ExtendedFAB as m, type ExtendedFABProps as n, FABMenu as o, FABMenuItem as p, type FABMenuItemData as q, type FABMenuItemProps as r, type FABMenuProps as s, FABPosition as t, type FABPositionProps as u, type FABProps as v, FilledSplitButtonLeading as w, FilledSplitButtonTrailing as x, FilledSplitButtonTrailingUncheckable as y, OutlinedSplitButtonTrailing as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",
@@ -179,8 +179,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/m3-tailwind": "1.2.0",
-    "@bug-on/m3-tokens": "1.2.0"
+    "@bug-on/m3-tokens": "1.2.0",
+    "@bug-on/m3-tailwind": "1.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",