@bug-on/m3-expressive 1.2.3 → 1.2.4

package/dist/navigation.d.ts

@@ -5,6 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Transition, Variants, HTMLMotionProps } from 'motion/react';
+import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.js';
 import { B as BaseIconButtonProps } from './icon-button-CSsDmuQC.js';
 
 /**
@@ -1609,6 +1610,18 @@ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMen
  */
 declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+type NavigationItemShape = "pill" | MD3ShapeName;
+/**
+ * Returns inline style for a navigation item shape.
+ * If shape is 'pill' or 'circle', returns undefined (handled via rounded-full CSS).
+ * For custom MD3 shapes (e.g. 'sunny', 'flower', 'star'), returns { clipPath: "path(...)" }.
+ */
+declare function getNavigationShapeStyle(shape: NavigationItemShape | undefined, width?: number, height?: number): React.CSSProperties | undefined;
+/**
+ * Checks if a shape is a 1:1 ratio shape (circle or custom MD3 shape).
+ */
+declare function isSquareShape(shape: NavigationItemShape | undefined): boolean;
+
 /**
  * Layout styling for navigation bar items.
  * - vertical: Icon above label (default for mobile)
@@ -1622,13 +1635,20 @@ type NavigationBarItemLayout = "vertical" | "horizontal";
  * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
  */
 type NavigationBarVariant = "flexible" | "baseline" | "xr";
+type NavigationBarLabelVisibility = "labeled" | "auto" | "unlabeled";
 interface NavigationBarItemProps {
     selected: boolean;
     icon: React$1.ReactNode;
-    label: React$1.ReactNode;
+    label?: React$1.ReactNode;
     onClick?: () => void;
     disabled?: boolean;
     badge?: React$1.ReactNode;
+    /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */
+    shapeSize?: number;
+    /** Hide the label below the icon. Overrides container-level labelVisibility. */
+    hideLabel?: boolean;
     "aria-label"?: string;
     className?: string;
     asChild?: boolean;
@@ -1639,6 +1659,17 @@ interface NavigationBarProps {
     variant?: NavigationBarVariant;
     /** Forces a specific item layout (horizontal/vertical) */
     itemLayout?: NavigationBarItemLayout;
+    /** Default shape of navigation items (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /**
+     * Label visibility for all items.
+     * - "labeled" (default): always show label
+     * - "auto": show label only for the selected item
+     * - "unlabeled": never show label (icon-only mode)
+     */
+    labelVisibility?: NavigationBarLabelVisibility;
+    /** Default size (width & height) for square shape containers in px. Default: 56 */
+    shapeSize?: number;
     /** Whether the bar should hide when scrolling down */
     hideOnScroll?: boolean;
     /** Whether the bar should have an elevation shadow */
@@ -1664,6 +1695,7 @@ declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & R
 
 type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
 type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
+type NavigationRailActiveIndicatorWidth = "hug" | "fill";
 interface NavigationRailItemProps {
     selected: boolean;
     icon: React$1.ReactNode;
@@ -1671,6 +1703,16 @@ interface NavigationRailItemProps {
     onClick?: () => void;
     disabled?: boolean;
     badge?: React$1.ReactNode;
+    /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */
+    shapeSize?: number;
+    /**
+     * Width behavior of the active indicator when expanded with pill shape.
+     * - "hug" (default): hugs the icon + label contents (MD3 Expressive style)
+     * - "fill": fills the full width of the container (baseline navigation drawer style)
+     */
+    activeIndicatorWidth?: NavigationRailActiveIndicatorWidth;
     "aria-label"?: string;
     className?: string;
     asChild?: boolean;
@@ -1679,6 +1721,16 @@ interface NavigationRailItemProps {
 interface NavigationRailProps {
     variant?: NavigationRailVariant;
     labelVisibility?: NavigationRailLabelVisibility;
+    /** Default shape of navigation rail items (pill, circle, sunny, flower, etc.) */
+    shape?: NavigationItemShape;
+    /** Default size (width & height) for square shape containers in px. Default: 56 */
+    shapeSize?: number;
+    /**
+     * Default width behavior of the active indicator when expanded with pill shape.
+     * - "hug" (default): hugs the icon + label contents (MD3 Expressive style)
+     * - "fill": fills the full width of the container (baseline navigation drawer style)
+     */
+    activeIndicatorWidth?: NavigationRailActiveIndicatorWidth;
     header?: React$1.ReactNode;
     fab?: React$1.ReactNode;
     fabPlacement?: "contained" | "spatialized";
@@ -2811,18 +2863,17 @@ interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "chil
      */
     children?: React$1.ReactNode;
     /**
-     * Scale compression factor when pressed/clicked.
-     * MD3 Expressive default: 0.95.
-     * @default 0.95
+     * Enable symmetric spring expand on press.
+     * The button expands equally to the left and right — matching ButtonDistribute behavior.
+     * @default true
      */
-    pressScale?: number;
+    pressExpand?: boolean;
     /**
-     * Horizontal spring bounce offset (in px) when pressed/clicked.
-     * Oscillates left and right then contracts back to center.
-     * Set to 0 to disable horizontal bounce.
-     * @default 6
+     * Fraction of the button width added symmetrically on press.
+     * e.g. 0.06 → scaleX goes from 1.0 to 1.06 (3% each side).
+     * @default 0.06
      */
-    pressBounceOffset?: number;
+    pressExpandRatio?: number;
     /**
      * Enable MD3 state layer ripple effect on click.
      * @default true
@@ -2838,8 +2889,10 @@ interface ToolbarToggleButtonProps extends Omit<HTMLMotionProps<"button">, "chil
  * An MD3 pill-shaped toggle button with optional leading icon and text label.
  *
  * Meets MD3 Expressive touch-target requirements (48dp height minimum, ~95dp width).
- * Features Material Design 3 Expressive spring press animation (`FAST_SPATIAL_SPRING`),
- * horizontal spring bounce oscillation (left-right bounce), and configurable ripple state layer.
+ * Features Material Design 3 Expressive spring press animation:
+ * - Symmetric horizontal expand (scaleX) with `FAST_SPATIAL_SPRING` (has bounce)
+ * - Border-radius morphing via `BUTTON_RADIUS_SPRING` (fast.effects, no overshoot)
+ * - Configurable ripple state layer
  *
  * @example
  * ```tsx
@@ -2894,4 +2947,4 @@ declare const ToolbarToggleButtonTokens: {
     readonly Gap: 8;
 };
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type 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, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, 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, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, type SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, getToolbarColors, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type 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, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, 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, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, SmallAppBar, type SmallAppBarProps, SubMenu, type SubMenuProps, Tab, type TabProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, type TitleAlignment, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };