@bug-on/m3-expressive 1.2.1 → 1.2.2

package/dist/{icon-button-sSt6PPLg.d.mts → icon-button-CSsDmuQC.d.mts}

@@ -32,6 +32,14 @@ interface BaseIconButtonProps extends MotionButtonProps {
      * @default "sm"
      */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Container width variant following MD3 Expressive specification.
+     * - `default`: 1:1 aspect ratio square/round container.
+     * - `narrow`: compressed width.
+     * - `wide`: extended width.
+     * @default "default"
+     */
+    widthVariant?: "default" | "narrow" | "wide";
     /**
      * Container shape controlling border-radius morphing.
      * - `round`: fully circular (CornerFull).
@@ -39,6 +47,11 @@ interface BaseIconButtonProps extends MotionButtonProps {
      * @default "round"
      */
     shape?: "round" | "square";
+    /**
+     * An optional icon to display when the icon button is in a selected toggle state (`variant="toggle"` and `selected={true}`).
+     * If omitted, falls back to `children`.
+     */
+    selectedIcon?: React.ReactNode;
     /**
      * When `true`, replaces the icon with an animated loading indicator.
      * Interaction is blocked and `aria-busy` is set.

package/dist/{icon-button-sSt6PPLg.d.ts → icon-button-CSsDmuQC.d.ts}

@@ -32,6 +32,14 @@ interface BaseIconButtonProps extends MotionButtonProps {
      * @default "sm"
      */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Container width variant following MD3 Expressive specification.
+     * - `default`: 1:1 aspect ratio square/round container.
+     * - `narrow`: compressed width.
+     * - `wide`: extended width.
+     * @default "default"
+     */
+    widthVariant?: "default" | "narrow" | "wide";
     /**
      * Container shape controlling border-radius morphing.
      * - `round`: fully circular (CornerFull).
@@ -39,6 +47,11 @@ interface BaseIconButtonProps extends MotionButtonProps {
      * @default "round"
      */
     shape?: "round" | "square";
+    /**
+     * An optional icon to display when the icon button is in a selected toggle state (`variant="toggle"` and `selected={true}`).
+     * If omitted, falls back to `children`.
+     */
+    selectedIcon?: React.ReactNode;
     /**
      * When `true`, replaces the icon with an animated loading indicator.
      * Interaction is blocked and `aria-busy` is set.

package/dist/index.d.mts

@@ -4,8 +4,8 @@ export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic, CubicPair, DISTANC
 export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.mjs';
 export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarProps, NavigationBarVariant, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, SubMenuProps, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonSize, ToolbarIconButtonTokens, ToolbarIconButtonVariant, ToolbarToggleButton, ToolbarToggleButtonProps, ToolbarToggleButtonTokens, ToolbarVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors } from './navigation.mjs';
 export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.mjs';
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DtFJkTFr.mjs';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-sSt6PPLg.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, 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 BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.mjs';
 export { Card, CardProps, CodeBlock, CodeBlockProps, Divider, DividerProps, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, getExpressiveShape, getListItemHeight, shouldTopAlign, useListContext } from './layout.mjs';
 export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-T4Rg-9Bw.mjs';
 export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DateLocale, DatePicker, DatePickerDialog, DatePickerDialogProps, DatePickerInput, DatePickerInputProps, DatePickerProps, DatePickerState, DateRange, DateRangePicker, DateRangePickerProps, DateRangePickerState, DisplayMode, SelectableDates, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, TimeInputProps, TimePicker, TimePickerDialog, TimePickerDialogProps, TimePickerLayout, TimePickerProps, TimePickerSelectionMode, TimePickerState, UseDatePickerStateOptions, UseDateRangePickerStateOptions, UseTimePickerStateOptions, useDatePickerState, useDateRangePickerState, useTimePickerState } from './pickers.mjs';

package/dist/index.d.ts

@@ -4,8 +4,8 @@ export { ANGLE_EPSILON, CornerFeature, CornerRounding, Cubic, CubicPair, DISTANC
 export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-Dty-Qcad.js';
 export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColors, AppBarColumn, AppBarColumnProps, AppBarItem, AppBarItemType, AppBarMenuState, AppBarOverflowIndicator, AppBarOverflowIndicatorProps, AppBarRow, AppBarRowProps, AppBarScrollBehavior, AppBarTokens, BaseAppBarProps, BottomAppBar, BottomAppBarProps, BottomDockedToolbar, BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FlexibleAppBarProps, FloatingToolbarColors, FloatingToolbarProps, FloatingToolbarScrollBehavior, FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupPosition, MenuGroupProps, MenuItem, MenuItemPosition, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarItem, NavigationBarItemLayout, NavigationBarItemProps, NavigationBarProps, NavigationBarVariant, NavigationRail, NavigationRailItem, NavigationRailItemProps, NavigationRailLabelVisibility, NavigationRailProps, NavigationRailVariant, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchAppBarProps, SearchBar, SearchBarVariant, SearchProps, SearchStyleType, SearchTokens, SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SearchViewProps, SmallAppBar, SmallAppBarProps, SubMenu, SubMenuProps, Tab, TabProps, Tabs, TabsColors, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTokens, TabsVariant, TitleAlignment, ToolbarDivider, ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonProps, ToolbarIconButtonSize, ToolbarIconButtonTokens, ToolbarIconButtonVariant, ToolbarToggleButton, ToolbarToggleButtonProps, ToolbarToggleButtonTokens, ToolbarVariant, UseAppBarScrollReturn, UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuGroupProps, VerticalMenuProps, VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors } from './navigation.js';
 export { Badge, BadgeProps, BadgedBox, BadgedBoxProps, CaretConfig, CircularProgressProps, LinearProgressProps, LoadingIndicator, LoadingIndicatorProps, PlainTooltip, PlainTooltipProps, ProgressIndicator, ProgressIndicatorProps, RichTooltip, RichTooltipProps, Snackbar, SnackbarData, SnackbarDuration, SnackbarHost, SnackbarHostProps, SnackbarProps, SnackbarProvider, SnackbarResult, SnackbarVisuals, TooltipBox, TooltipBoxProps, TooltipCaretShape, TooltipPlacement, TooltipState, TooltipStateConfig, TooltipTokens, TooltipTrigger, UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState } from './feedback.js';
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-BcPD_7uK.js';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-sSt6PPLg.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, 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 BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.js';
 export { Card, CardProps, CodeBlock, CodeBlockProps, Divider, DividerProps, LIST_TOKENS, List, ListContext, ListDivider, ListDividerProps, ListItem, ListItemLeadingType, ListItemProps, ListItemTrailingType, ListProps, ListSelectionMode, ListStyle, ListVariant, TableOfContents, TableOfContentsProps, Text, TextProps, ToCItem, TypeScaleTokens, TypeScaleTokensType, buildWavePath, getExpressiveShape, getListItemHeight, shouldTopAlign, useListContext } from './layout.js';
 export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-T4Rg-9Bw.js';
 export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DateLocale, DatePicker, DatePickerDialog, DatePickerDialogProps, DatePickerInput, DatePickerInputProps, DatePickerProps, DatePickerState, DateRange, DateRangePicker, DateRangePickerProps, DateRangePickerState, DisplayMode, SelectableDates, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, TimeInputProps, TimePicker, TimePickerDialog, TimePickerDialogProps, TimePickerLayout, TimePickerProps, TimePickerSelectionMode, TimePickerState, UseDatePickerStateOptions, UseDateRangePickerStateOptions, UseTimePickerStateOptions, useDatePickerState, useDateRangePickerState, useTimePickerState } from './pickers.js';