@bug-on/m3-expressive 1.0.0

package/dist/navigation.d.mts

@@ -0,0 +1,2766 @@
+import * as motion from 'motion';
+import * as React$1 from 'react';
+import { RefObject } from 'react';
+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 } from 'motion/react';
+import { B as BaseIconButtonProps } from './icon-button-D-gs0gfj.mjs';
+
+/**
+ * @file app-bar.tokens.ts
+ * MD3 Expressive App Bar — Design tokens ported from:
+ *   - AppBarTokens.kt (shared tokens)
+ *   - AppBarSmallTokens.kt
+ *   - AppBarMediumFlexibleTokens.kt
+ *   - AppBarLargeFlexibleTokens.kt
+ *   - BottomAppBarTokens.kt
+ *   - DockedToolbarTokens.kt
+ *   - FabSecondaryContainerTokens.kt
+ *
+ * All dimensional values are in px (dp equivalents for web at 1dp = 1px).
+ * Colors reference CSS custom properties — do NOT hardcode hex.
+ * @see docs/m3/app-bars/
+ */
+/**
+ * Height and spacing tokens for all App Bar variants.
+ * Maps directly from MD3 Kotlin token files.
+ */
+declare const AppBarTokens: {
+    readonly heights: {
+        /** SmallAppBar height. AppBarSmallTokens.ContainerHeight = 64dp */
+        readonly small: 64;
+        /** Collapsed height for flexible variants. = SmallAppBar height. */
+        readonly flexibleCollapsed: 64;
+        /** MediumFlexibleAppBar expanded height (without subtitle). AppBarMediumFlexibleTokens */
+        readonly mediumFlexExpanded: 112;
+        /** MediumFlexibleAppBar expanded height (with subtitle). */
+        readonly mediumFlexWithSubtitleExpanded: 136;
+        /** LargeFlexibleAppBar expanded height (without subtitle). AppBarLargeFlexibleTokens */
+        readonly largeFlexExpanded: 120;
+        /** LargeFlexibleAppBar expanded height (with subtitle). */
+        readonly largeFlexWithSubtitleExpanded: 152;
+        /** BottomAppBar height. BottomAppBarTokens.ContainerHeight = 80dp */
+        readonly bottom: 80;
+        /** DockedToolbar height. DockedToolbarTokens.ContainerHeight = 64dp */
+        readonly dockedToolbar: 64;
+    };
+    /** AppBarTokens.IconSize = 24dp */
+    readonly iconSize: 24;
+    /** AppBarTokens.AvatarSize = 32dp */
+    readonly avatarSize: 32;
+    /** AppBarTokens.LeadingSpace = 4dp */
+    readonly leadingSpace: 4;
+    /** AppBarTokens.TrailingSpace = 4dp */
+    readonly trailingSpace: 4;
+    /** AppBarTokens.IconButtonSpace = 0dp (no gap between icon buttons) */
+    readonly iconButtonSpace: 0;
+    readonly dockedToolbar: {
+        /** DockedToolbarTokens.ContainerLeadingSpace = 16dp */
+        readonly leadingSpace: 16;
+        /** DockedToolbarTokens.ContainerTrailingSpace = 16dp */
+        readonly trailingSpace: 16;
+        /** DockedToolbarTokens.ContainerMinSpacing = 4dp */
+        readonly minSpacing: 4;
+        /** DockedToolbarTokens.ContainerMaxSpacing = 32dp */
+        readonly maxSpacing: 32;
+    };
+    /** Minimum 48px touch target for icon buttons per MD3 accessibility spec. */
+    readonly iconButtonTouchTarget: 48;
+};
+/**
+ * MD3 type scale values mapped to Tailwind CSS class strings.
+ * Used across App Bar variants for consistent typography.
+ *
+ * Values derived from MD3 Material Type Scale specification.
+ */
+declare const appBarTypography: {
+    /**
+     * SmallAppBar title (collapsed state for flexible variants).
+     * AppBarSmallTokens.TitleFont = TitleLarge
+     * Spec: 22sp / 28sp line-height / medium weight
+     */
+    readonly titleLarge: "text-[22px] leading-[28px] font-medium tracking-[0px]";
+    /**
+     * SmallAppBar subtitle.
+     * AppBarSmallTokens.SubtitleFont = LabelMedium
+     * Spec: 12sp / 16sp line-height / medium weight / 0.5px tracking
+     */
+    readonly labelMedium: "text-[12px] leading-[16px] font-medium tracking-[0.5px]";
+    /**
+     * MediumFlexibleAppBar expanded title.
+     * AppBarMediumFlexibleTokens.TitleFont = HeadlineMedium
+     * Spec: 28sp / 36sp line-height / normal weight
+     */
+    readonly headlineMedium: "text-[28px] leading-[36px] font-normal tracking-[0px]";
+    /**
+     * MediumFlexibleAppBar subtitle.
+     * AppBarMediumFlexibleTokens.SubtitleFont = LabelLarge
+     * Spec: 14sp / 20sp line-height / medium weight / 0.1px tracking
+     */
+    readonly labelLarge: "text-[14px] leading-[20px] font-medium tracking-[0.1px]";
+    /**
+     * LargeFlexibleAppBar expanded title.
+     * AppBarLargeFlexibleTokens.TitleFont = DisplaySmall
+     * Spec: 36sp / 44sp line-height / normal weight / -0.25px tracking
+     */
+    readonly displaySmall: "text-[36px] leading-[44px] font-normal tracking-[-0.25px]";
+    /**
+     * LargeFlexibleAppBar subtitle.
+     * AppBarLargeFlexibleTokens.SubtitleFont = TitleMedium
+     * Spec: 16sp / 24sp line-height / medium weight / 0.15px tracking
+     */
+    readonly titleMedium: "text-[16px] leading-6 font-medium tracking-[0.15px]";
+};
+/**
+ * CSS custom property references for App Bar colors.
+ * Maps to --md-sys-color-* tokens in the MD3 theme system.
+ *
+ * IMPORTANT: Never hardcode hex/rgba values here — these references
+ * automatically adapt to light/dark theme via the MD3ThemeProvider.
+ *
+ * AppBarTokens.kt spec:
+ * - ContainerColor → md-sys-color-surface
+ * - OnScrollContainerColor → md-sys-color-surface-container
+ */
+declare const APP_BAR_COLORS: {
+    /** Default background. AppBarTokens.ContainerColor → surface */
+    readonly container: "var(--md-sys-color-surface)";
+    /** Background when content is scrolled. AppBarTokens.OnScrollContainerColor → surface-container */
+    readonly scrolledContainer: "var(--md-sys-color-surface-container)";
+    /** Title color. AppBarTokens.TitleColor → on-surface */
+    readonly title: "var(--md-sys-color-on-surface)";
+    /** Subtitle color. AppBarTokens.SubtitleColor → on-surface-variant */
+    readonly subtitle: "var(--md-sys-color-on-surface-variant)";
+    /** Navigation icon color. AppBarTokens.LeadingIconColor → on-surface */
+    readonly navigationIcon: "var(--md-sys-color-on-surface)";
+    /** Action icon color. AppBarTokens.TrailingIconColor → on-surface-variant */
+    readonly actionIcon: "var(--md-sys-color-on-surface-variant)";
+    /** Search bar pill background. → surface-container-high */
+    readonly searchBarBg: "var(--md-sys-color-surface-container-high)";
+    /** Search bar text/icon color. */
+    readonly searchBarContent: "var(--md-sys-color-on-surface-variant)";
+    /** BottomAppBarTokens.ContainerColor → surface-container */
+    readonly bottomContainer: "var(--md-sys-color-surface-container)";
+    /** FabSecondaryContainerTokens.ContainerColor → secondary-container */
+    readonly fabContainer: "var(--md-sys-color-secondary-container)";
+    /** FabSecondaryContainerTokens.IconColor → on-secondary-container */
+    readonly fabIcon: "var(--md-sys-color-on-secondary-container)";
+};
+/**
+ * Color transition when App Bar background changes on scroll.
+ * MD3 Standard easing: cubic-bezier(0.2, 0, 0, 1), 200ms.
+ */
+declare const APP_BAR_COLOR_TRANSITION: {
+    readonly duration: 0.2;
+    readonly ease: [number, number, number, number];
+};
+/**
+ * Spring animation for enterAlways behavior (hide/show on scroll direction).
+ * Equivalent to MD3 FastSpatial motion scheme.
+ */
+declare const APP_BAR_ENTER_ALWAYS_SPRING: motion.Transition;
+declare const APP_BAR_BOTTOM_SPRING: motion.Transition;
+declare const SEARCH_VIEW_SPRING: motion.Transition;
+/**
+ * Title crossfade transition for flexible App Bars.
+ * Short duration keeps the collapse feeling snappy.
+ */
+declare const APP_BAR_TITLE_FADE: {
+    readonly duration: 0.15;
+    readonly ease: "easeInOut";
+};
+
+/**
+ * @file app-bar.types.ts
+ * MD3 Expressive App Bar — TypeScript prop definitions.
+ * Spec: https://m3.material.io/components/app-bars/overview
+ * Reference: docs/m3/app-bars/AppBar.kt (MD3 Expressive, May 2025)
+ *
+ * Note: Component name is "App Bar" (not "Top App Bar") per MD3 Expressive May 2025 rename.
+ */
+
+/**
+ * Controls how the App Bar responds to scroll events.
+ *
+ * - `pinned`: Always visible. Changes background color when scrolled.
+ * - `enterAlways`: Hides when scrolling down, reveals when scrolling up.
+ * - `exitUntilCollapsed`: Collapses from expandedHeight → collapsedHeight as user scrolls.
+ */
+type AppBarScrollBehavior = "pinned" | "enterAlways" | "exitUntilCollapsed";
+/** Horizontal alignment of the title (and subtitle) text. */
+type TitleAlignment = "start" | "center";
+/**
+ * Optional color overrides for the App Bar.
+ * All values should be CSS color strings (var(--md-sys-color-*) or hex).
+ *
+ * By default, App Bars use MD3 system color tokens automatically.
+ */
+interface AppBarColors {
+    /** Background when not scrolled. Default: `var(--md-sys-color-surface)` */
+    containerColor?: string;
+    /** Background when content has scrolled past top. Default: `var(--md-sys-color-surface-container)` */
+    scrolledContainerColor?: string;
+    /** Title text color. Default: `var(--md-sys-color-on-surface)` */
+    titleColor?: string;
+    /** Subtitle text color. Default: `var(--md-sys-color-on-surface-variant)` */
+    subtitleColor?: string;
+    /** Navigation icon color. Default: `var(--md-sys-color-on-surface)` */
+    navigationIconColor?: string;
+    /** Action icon color. Default: `var(--md-sys-color-on-surface-variant)` */
+    actionIconColor?: string;
+}
+/**
+ * Shared props for all top App Bar variants.
+ */
+interface BaseAppBarProps {
+    /**
+     * Navigation icon slot (typically IconButton with back arrow or hamburger).
+     * Should have `aria-label` for accessibility.
+     */
+    navigationIcon?: React$1.ReactNode;
+    /**
+     * Action icon slots rendered at the trailing end.
+     * Typically `<IconButton>` components. Use `<AppBarRow>` for overflow support.
+     */
+    actions?: React$1.ReactNode;
+    /** Optional color overrides. Defaults use MD3 system color tokens. */
+    colors?: AppBarColors;
+    /**
+     * Scroll behavior that controls how the App Bar reacts to scroll events.
+     * @default "pinned"
+     */
+    scrollBehavior?: AppBarScrollBehavior;
+    /**
+     * Ref to the scrollable element to observe.
+     * If not provided, listens to `window` scroll events.
+     */
+    scrollElement?: React$1.RefObject<HTMLElement | null>;
+    /** Additional CSS class applied to the root header element. */
+    className?: string;
+}
+/**
+ * Props for `<SmallAppBar>`.
+ *
+ * Single-row layout with navigation icon, title, and action buttons.
+ * Height: 64px. Title font: TitleLarge (22sp).
+ */
+interface SmallAppBarProps extends BaseAppBarProps {
+    /** The main title content. */
+    title: React$1.ReactNode;
+    /**
+     * Optional subtitle displayed below the title.
+     * Font: LabelMedium (12sp).
+     */
+    subtitle?: React$1.ReactNode;
+    /**
+     * Horizontal alignment of the title and subtitle.
+     * When `center`: title is centered, nav icon and actions balance both sides.
+     * @default "start"
+     */
+    titleAlignment?: TitleAlignment;
+}
+/**
+ * Props for `<MediumFlexibleAppBar>` and `<LargeFlexibleAppBar>`.
+ *
+ * Two-row layout in expanded state (nav row + title row).
+ * Collapses to single row when scrolled.
+ * Only supports `exitUntilCollapsed` scroll behavior.
+ */
+interface FlexibleAppBarProps extends BaseAppBarProps {
+    /** The main title content (rendered in both expanded and collapsed states). */
+    title: React$1.ReactNode;
+    /**
+     * Optional subtitle displayed in the expanded title row.
+     * Affects expanded height (adds extra rows).
+     */
+    subtitle?: React$1.ReactNode;
+    /**
+     * Horizontal alignment of the title and subtitle.
+     * @default "start"
+     */
+    titleAlignment?: TitleAlignment;
+    /**
+     * Collapsed height in px. The App Bar settles to this height after full scroll.
+     * @default 64
+     */
+    collapsedHeight?: number;
+    /**
+     * Expanded (initial) height in px.
+     * Defaults depend on variant and subtitle presence.
+     */
+    expandedHeight?: number;
+    /**
+     * Additional content rendered in the expanded title area.
+     * Supports images, circular avatars (32dp), Filled Buttons, or custom elements.
+     * Hidden when collapsed.
+     */
+    headerContent?: React$1.ReactNode;
+}
+/** Visual variant of the search bar. */
+type SearchBarVariant = "filled" | "outlined";
+/**
+ * Props for `<SearchAppBar>`.
+ *
+ * Replaces the title with a pill-shaped search input bar.
+ * New variant in MD3 Expressive (May 2025).
+ *
+ * @example
+ * ```tsx
+ * <SearchAppBar
+ *   searchPlaceholder="Search..."
+ *   onSearchFocus={() => setSearchViewOpen(true)}
+ *   trailingSearchActions={<IconButton aria-label="Voice search">...</IconButton>}
+ *   externalActions={<Avatar />}
+ * />
+ * ```
+ */
+interface SearchAppBarProps extends BaseAppBarProps {
+    /** Placeholder text in the search bar. @default "Search" */
+    searchPlaceholder?: string;
+    /** Controlled search value. */
+    searchValue?: string;
+    /** Called when search input changes (inside the SearchView). */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Called when the search bar is focused/clicked.
+     * Consumers should open a `<SearchView>` in response.
+     */
+    onSearchFocus?: () => void;
+    /** Called when the search view is closed/blurred. */
+    onSearchBlur?: () => void;
+    /**
+     * Icon rendered at the leading edge of the search bar (inside the pill).
+     * Defaults to a search icon.
+     */
+    leadingSearchIcon?: React$1.ReactNode;
+    /**
+     * Action icons rendered at the trailing edge of the search bar (inside the pill).
+     * Common examples: mic, camera, QR code.
+     */
+    trailingSearchActions?: React$1.ReactNode;
+    /**
+     * Action icons rendered outside the search bar (at the trailing edge of the bar).
+     * Common example: profile avatar button.
+     */
+    externalActions?: React$1.ReactNode;
+    /**
+     * Horizontal alignment of the search bar.
+     * @default "start"
+     */
+    titleAlignment?: TitleAlignment;
+    /**
+     * Visual style of the search bar.
+     * @default "filled"
+     */
+    searchBarVariant?: SearchBarVariant;
+    /**
+     * Unique identifier for the search bar — used as the Framer Motion `layoutId`
+     * to enable shared element transitions with `<SearchView>`.
+     * Must be unique if multiple SearchAppBars are on the page.
+     * @default "search-bar"
+     */
+    searchBarId?: string;
+}
+/**
+ * Props for `<BottomAppBar>`.
+ *
+ * Fixed to the bottom of the screen. Contains navigation actions and optional FAB.
+ * Height: 80px. Background: `surface-container`. Elevation: Level2.
+ */
+interface BottomAppBarProps {
+    /**
+     * Action icon buttons rendered at the leading end.
+     * Typically 3-4 `<IconButton>` components.
+     */
+    actions?: React$1.ReactNode;
+    /**
+     * Floating Action Button rendered at the trailing end.
+     * Consumer provides a `<FAB>` or `<FABPosition>` component.
+     */
+    floatingActionButton?: React$1.ReactNode;
+    /**
+     * Scroll behavior.
+     * - `visible`: Always visible.
+     * - `hidden`: Slides down when scrolling down, appears when scrolling up.
+     * @default "visible"
+     */
+    scrollBehavior?: "visible" | "hidden";
+    /**
+     * Ref to the scrollable element to observe.
+     * If not provided, listens to `window` scroll events.
+     */
+    scrollElement?: React$1.RefObject<HTMLElement | null>;
+    /** Additional CSS class applied to the root nav element. */
+    className?: string;
+}
+/**
+ * Props for `<DockedToolbar>`.
+ *
+ * Secondary navigation bar. Not an App Bar — typically appears below the main App Bar.
+ * Height: 64px. Background: `surface-container`.
+ * Contains chips, segmented buttons, or filter actions.
+ */
+interface DockedToolbarProps {
+    /** Toolbar content (chips, segmented buttons, filter actions, etc.) */
+    children: React$1.ReactNode;
+    /**
+     * Accessible label for the toolbar (required for accessibility).
+     * e.g., "Filter options" or "Content navigation"
+     */
+    "aria-label": string;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+}
+/** Type of item in an App Bar Row/Column. */
+type AppBarItemType = "clickable" | "toggleable" | "custom";
+/**
+ * State passed to custom overflow menu content renderers.
+ */
+interface AppBarMenuState {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+}
+/**
+ * Defines a single action item for use in `<AppBarRow>` or `<AppBarColumn>`.
+ * Translated from `AppBarItem` sealed interface in Kotlin DSL.
+ */
+interface AppBarItem {
+    /** Type determines which props are required. */
+    type: AppBarItemType;
+    /** Icon displayed in the App Bar (always shown). */
+    icon: React$1.ReactNode;
+    /** Accessible label for the icon button. Also shown in overflow menu. */
+    label: string;
+    /** Whether the item is interactive. @default true */
+    enabled?: boolean;
+    /** Called when the item is pressed (required for `type: "clickable"`). */
+    onClick?: () => void;
+    /** Current checked state (for `type: "toggleable"`). */
+    checked?: boolean;
+    /** Called when checked state changes (for `type: "toggleable"`). */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Custom content rendered in the App Bar (for `type: "custom"`). */
+    appBarContent?: React$1.ReactNode;
+    /** Custom content rendered in the overflow dropdown menu. */
+    menuContent?: (state: AppBarMenuState) => React$1.ReactNode;
+}
+/**
+ * Props for `<AppBarRow>`.
+ *
+ * Displays App Bar items in a horizontal row.
+ * Items that overflow the available width collapse into a dropdown menu.
+ */
+interface AppBarRowProps {
+    /** App Bar action items to display. */
+    items: AppBarItem[];
+    /**
+     * Maximum number of items to display before collapsing to overflow.
+     * If not set, uses available container width to determine count.
+     */
+    maxItemCount?: number;
+    /** Additional CSS class applied to the row container. */
+    className?: string;
+}
+/**
+ * Props for `<AppBarColumn>`.
+ *
+ * Displays App Bar items in a vertical column.
+ * Items that overflow collapse into a dropdown menu.
+ */
+interface AppBarColumnProps {
+    /** App Bar action items to display. */
+    items: AppBarItem[];
+    /**
+     * Maximum number of items to display before collapsing to overflow.
+     */
+    maxItemCount?: number;
+    /** Additional CSS class applied to the column container. */
+    className?: string;
+}
+/**
+ * Props for `<AppBarOverflowIndicator>`.
+ *
+ * Renders a "More" (MoreVert) icon button that opens a dropdown menu
+ * containing overflow App Bar items.
+ */
+interface AppBarOverflowIndicatorProps {
+    /** Items that did not fit in the row/column and should appear in the dropdown. */
+    items: AppBarItem[];
+    /** Additional CSS class applied to the trigger button. */
+    className?: string;
+}
+/**
+ * Props for `<SearchView>`.
+ *
+ * Full-screen overlay shown when the search bar is activated.
+ * Designed to share a Framer Motion `layoutId` with the `<SearchAppBar>`
+ * search bar for smooth shared element transitions.
+ *
+ * Integration with SearchAppBar:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <SearchAppBar
+ *   searchBarId="main-search"
+ *   onSearchFocus={() => setIsOpen(true)}
+ * />
+ * <AnimatePresence>
+ *   {isOpen && (
+ *     <SearchView
+ *       searchBarId="main-search"
+ *       onClose={() => setIsOpen(false)}
+ *     />
+ *   )}
+ * </AnimatePresence>
+ * ```
+ */
+interface SearchViewProps {
+    /**
+     * Must match the `searchBarId` of the triggering `<SearchAppBar>`.
+     * Used as the Framer Motion `layoutId` for shared element transition.
+     * @default "search-bar"
+     */
+    searchBarId?: string;
+    /** Current search value. */
+    value?: string;
+    /** Called when search value changes. */
+    onChange?: (value: string) => void;
+    /** Called when the view is closed (Escape key or back navigation). */
+    onClose: () => void;
+    /** Placeholder text in the search input. @default "Search" */
+    placeholder?: string;
+    /**
+     * Content rendered below the search input (suggestions, history, results).
+     */
+    children?: React$1.ReactNode;
+    /** Navigation icon (back arrow) rendered at the leading edge. */
+    leadingIcon?: React$1.ReactNode;
+    /** Trailing action in the search input (e.g., clear button). */
+    trailingAction?: React$1.ReactNode;
+    /** Additional CSS class applied to the overlay container. */
+    className?: string;
+}
+/**
+ * Return type for `useAppBarScroll`.
+ * @internal
+ */
+interface UseAppBarScrollReturn {
+    /**
+     * True when the scroll position is greater than 0.
+     * Used by `pinned` behavior to change background color.
+     */
+    isScrolled: boolean;
+    /**
+     * Fraction from 0 (fully expanded) to 1 (fully collapsed).
+     * Used by `exitUntilCollapsed` to drive collapse animations.
+     */
+    collapsedFraction: number;
+    /**
+     * True when the App Bar should be visually hidden.
+     * Only relevant for `enterAlways` behavior.
+     */
+    isHidden: boolean;
+}
+
+/**
+ * MD3 Expressive App Bar Column.
+ *
+ * Renders action items in a vertical column. Commonly used in
+ * side navigation or rail-style App Bars.
+ *
+ * @example
+ * ```tsx
+ * <AppBarColumn
+ *   maxItemCount={3}
+ *   items={[
+ *     { type: 'clickable', icon: <Icon>edit</Icon>, label: 'Edit', onClick: handleEdit },
+ *     { type: 'clickable', icon: <Icon>delete</Icon>, label: 'Delete', onClick: handleDelete },
+ *   ]}
+ * />
+ * ```
+ */
+declare function AppBarColumn({ items, maxItemCount, className, }: AppBarColumnProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 App Bar Overflow Indicator.
+ *
+ * Renders a "more_vert" button that opens a dropdown menu
+ * with overflow action items.
+ */
+declare function AppBarOverflowIndicator({ items, className, }: AppBarOverflowIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * MD3 Expressive App Bar Row.
+ *
+ * Renders action items in a row. Compatible with the `actions` prop of any App Bar.
+ *
+ * @example
+ * ```tsx
+ * <SmallAppBar
+ *   title="Messages"
+ *   actions={
+ *     <AppBarRow
+ *       maxItemCount={2}
+ *       items={[
+ *         { type: 'clickable', icon: <Icon>search</Icon>, label: 'Search', onClick: handleSearch },
+ *         { type: 'clickable', icon: <Icon>bookmark</Icon>, label: 'Bookmarks', onClick: handleBookmark },
+ *         { type: 'clickable', icon: <Icon>settings</Icon>, label: 'Settings', onClick: handleSettings },
+ *       ]}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+declare function AppBarRow({ items, maxItemCount, className }: AppBarRowProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 Expressive Bottom App Bar.
+ *
+ * @example
+ * ```tsx
+ * // With FAB
+ * <BottomAppBar
+ *   actions={
+ *     <>
+ *       <IconButton aria-label="Check"><Icon>check_box</Icon></IconButton>
+ *       <IconButton aria-label="Brush"><Icon>brush</Icon></IconButton>
+ *     </>
+ *   }
+ *   floatingActionButton={<FAB aria-label="Compose">...</FAB>}
+ * />
+ *
+ * // Auto-hide on scroll
+ * <BottomAppBar scrollBehavior="hidden" actions={...} />
+ * ```
+ */
+declare function BottomAppBar({ actions, floatingActionButton, scrollBehavior, scrollElement, className, }: BottomAppBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 Expressive Docked Toolbar.
+ *
+ * @example
+ * ```tsx
+ * <DockedToolbar aria-label="Filter options">
+ *   <Chip label="All" selected onClick={() => setFilter('all')} />
+ *   <Chip label="Unread" onClick={() => setFilter('unread')} />
+ *   <Chip label="Starred" onClick={() => setFilter('starred')} />
+ * </DockedToolbar>
+ * ```
+ */
+declare function DockedToolbar({ children, "aria-label": ariaLabel, className, }: DockedToolbarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file use-app-bar-scroll.ts
+ * MD3 Expressive App Bar — Scroll behavior hook.
+ *
+ * Tracks scroll state for App Bar behaviors:
+ * - `pinned`: background color change only
+ * - `enterAlways`: hide/show based on scroll direction
+ * - `exitUntilCollapsed`: drives collapse fraction (0 = expanded, 1 = collapsed)
+ */
+
+interface UseAppBarScrollOptions {
+    /** Ref to the scrollable container. Defaults to `window`. */
+    scrollElement?: React$1.RefObject<HTMLElement | null>;
+    /** Scroll behavior mode. @default "pinned" */
+    behavior?: AppBarScrollBehavior;
+    /** Collapsed height in px — used for `exitUntilCollapsed`. @default 64 */
+    collapsedHeight?: number;
+    /** Expanded height in px — used for `exitUntilCollapsed`. @default 112 */
+    expandedHeight?: number;
+}
+/**
+ * Tracks scroll position and derives App Bar state for all three behaviors.
+ *
+ * @example
+ * ```tsx
+ * // pinned (color change only)
+ * const { isScrolled } = useAppBarScroll({ behavior: 'pinned' });
+ *
+ * // enterAlways (hide/show)
+ * const { isHidden } = useAppBarScroll({ behavior: 'enterAlways' });
+ *
+ * // exitUntilCollapsed (collapse animation)
+ * const { collapsedFraction } = useAppBarScroll({
+ *   behavior: 'exitUntilCollapsed',
+ *   collapsedHeight: 64,
+ *   expandedHeight: 112,
+ * });
+ * ```
+ */
+declare function useAppBarScroll({ scrollElement, behavior, collapsedHeight, expandedHeight, }?: UseAppBarScrollOptions): UseAppBarScrollReturn;
+
+/**
+ * MD3 Expressive Large Flexible App Bar.
+ *
+ * @example
+ * ```tsx
+ * <LargeFlexibleAppBar
+ *   title="Discover"
+ *   subtitle="Trending today"
+ *   navigationIcon={<IconButton aria-label="Open menu"><Icon>menu</Icon></IconButton>}
+ *   headerContent={<img src="/banner.jpg" alt="" className="rounded-xl h-20 w-full object-cover" />}
+ * />
+ * ```
+ */
+declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 Expressive Medium Flexible App Bar.
+ *
+ * @example
+ * ```tsx
+ * <MediumFlexibleAppBar
+ *   title="Settings"
+ *   subtitle="Manage your preferences"
+ *   navigationIcon={<IconButton aria-label="Go back"><Icon>arrow_back</Icon></IconButton>}
+ *   actions={<IconButton aria-label="More options"><Icon>more_vert</Icon></IconButton>}
+ * />
+ * ```
+ */
+declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 Expressive Search App Bar.
+ *
+ * When the search bar is clicked, callers should open a `<SearchView>` overlay.
+ * Uses Framer Motion `layoutId` (via `searchBarId`) for a smooth shared-element
+ * transition between this bar and the search view.
+ *
+ * @example
+ * ```tsx
+ * const [searchOpen, setSearchOpen] = useState(false);
+ *
+ * <SearchAppBar
+ *   searchBarId="main-search"
+ *   searchPlaceholder="Search messages..."
+ *   onSearchFocus={() => setSearchOpen(true)}
+ *   trailingSearchActions={
+ *     <IconButton aria-label="Voice search"><Icon>mic</Icon></IconButton>
+ *   }
+ *   externalActions={<Avatar src={user.avatar} />}
+ * />
+ *
+ * <AnimatePresence>
+ *   {searchOpen && (
+ *     <SearchView
+ *       searchBarId="main-search"
+ *       onClose={() => setSearchOpen(false)}
+ *     />
+ *   )}
+ * </AnimatePresence>
+ * ```
+ */
+declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, className, }: SearchAppBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 Expressive Search View.
+ *
+ * Renders a full-screen search overlay with a shared element transition
+ * from the triggering `<SearchAppBar>` search bar.
+ *
+ * Mount/unmount this component via `<AnimatePresence>` in the consumer.
+ */
+declare function SearchView({ searchBarId, value, onChange, onClose, placeholder, children, leadingIcon, trailingAction, className, }: SearchViewProps): react_jsx_runtime.JSX.Element;
+/**
+ * Convenience wrapper that handles the AnimatePresence + open state.
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   isOpen={searchOpen}
+ *   onClose={() => setSearchOpen(false)}
+ *   searchBarId="main-search"
+ * >
+ *   <SearchResultsList results={results} />
+ * </SearchBar>
+ * ```
+ */
+declare function SearchViewContainer({ isOpen, ...props }: SearchViewProps & {
+    isOpen: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * MD3 Expressive Small App Bar.
+ *
+ * @example
+ * ```tsx
+ * // Left-aligned (default)
+ * <SmallAppBar
+ *   title="Inbox"
+ *   navigationIcon={<IconButton aria-label="Go back"><Icon>arrow_back</Icon></IconButton>}
+ *   actions={<IconButton aria-label="Search"><Icon>search</Icon></IconButton>}
+ *   scrollBehavior="pinned"
+ * />
+ *
+ * // Center-aligned with subtitle
+ * <SmallAppBar
+ *   title="Profile"
+ *   subtitle="@username"
+ *   titleAlignment="center"
+ *   scrollBehavior="enterAlways"
+ * />
+ * ```
+ */
+declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, }: SmallAppBarProps): react_jsx_runtime.JSX.Element;
+
+/** Color variant of the menu — standard (surface-based) or vibrant (tertiary-based). */
+type MenuColorVariant = "standard" | "vibrant";
+/** Visual variant of the menu. */
+type MenuVariant = "baseline" | "expressive";
+/**
+ * Which Radix primitive family drives this menu:
+ * - `dropdown` → @radix-ui/react-dropdown-menu (button, text field, icon trigger)
+ * - `context`  → @radix-ui/react-context-menu (right-click / long-press trigger)
+ * - `static`   → plain HTML via Slot (VerticalMenu — always-visible)
+ */
+type MenuPrimitive = "dropdown" | "context" | "static";
+/**
+ * Position of a MenuItem within its group or menu.
+ * Controls the shape morphing (border-radius) applied to each item.
+ *
+ * - `leading`    → first item: top corners rounded more (CornerMedium top, CornerExtraSmall bottom)
+ * - `middle`     → middle items: CornerExtraSmall all corners
+ * - `trailing`   → last item: bottom corners rounded more (CornerExtraSmall top, CornerMedium bottom)
+ * - `standalone` → only item in group: CornerExtraSmall (same as middle, but semantically distinct)
+ */
+type MenuItemPosition = "standalone" | "leading" | "middle" | "trailing";
+/**
+ * Position of a MenuGroup within the popup container.
+ * Controls the container's border-radius shape morphing.
+ */
+type MenuGroupPosition = "standalone" | "leading" | "middle" | "trailing";
+interface MenuProps {
+    /** Menu items and groups */
+    children: React$1.ReactNode;
+    /**
+     * Color variant of the menu.
+     * Only applies when `variant="expressive"`. Baseline menus always use baseline colors.
+     * - `standard`: surface-container-low background
+     * - `vibrant`: tertiary-container background (use sparingly, high emphasis)
+     */
+    colorVariant?: MenuColorVariant;
+    /**
+     * Visual variant of the menu.
+     * - `baseline`: original M3 specs (4dp corners, no shape morphing)
+     * - `expressive`: M3 Expressive specs (shape morphing, rounded groups)
+     * @default "baseline"
+     */
+    variant?: MenuVariant;
+    /**
+     * @deprecated Use `variant` instead. Will be removed in next major version.
+     */
+    menuVariant?: MenuVariant;
+    /**
+     * Controlled open state. When provided, the menu acts as a controlled component.
+     * Pair with `onOpenChange` to manage state externally.
+     */
+    open?: boolean;
+    /**
+     * Called when the menu's open state changes (both controlled and uncontrolled).
+     * Required when using `open` for controlled mode.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the root element */
+    className?: string;
+}
+interface MenuTriggerProps {
+    children: React$1.ReactNode;
+    /** If true, merges props with the child element instead of wrapping */
+    asChild?: boolean;
+    className?: string;
+}
+interface MenuContentProps {
+    children: React$1.ReactNode;
+    /** Gap between menu and anchor in pixels. Default: 6 */
+    sideOffset?: number;
+    /** Preferred side of the anchor to render the menu. */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Preferred alignment relative to the anchor. */
+    align?: "start" | "center" | "end";
+    /**
+     * When true, disables overflow-hidden on the container so nested SubMenus
+     * can escape the bounds. Required when using SubMenu.
+     */
+    hasOverflow?: boolean;
+    /** Override colorVariant from MenuContext (only for expressive variant) */
+    colorVariant?: MenuColorVariant;
+    /**
+     * Separation style between groups (only applies when variant="expressive").
+     * - `gap`     → 2dp visual gap, transparent container
+     * - `divider` → solid container, no gap
+     * Default: "gap"
+     */
+    separatorStyle?: VerticalMenuSeparatorStyle;
+    className?: string;
+}
+interface MenuItemProps {
+    /** Primary label text of the item */
+    children: React$1.ReactNode;
+    /** Callback when the item is clicked */
+    onClick?: React$1.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Optional leading icon (20dp).
+     * For unselected state in selectable items; replaced by check icon when selected.
+     */
+    leadingIcon?: React$1.ReactNode;
+    /** Optional trailing icon (20dp) or chevron for submenus */
+    trailingIcon?: React$1.ReactNode;
+    /** Supporting text below the primary label (body-medium) */
+    supportingText?: React$1.ReactNode;
+    /** Trailing keyboard shortcut text e.g. "Ctrl+C", "⌘C" */
+    trailingText?: string;
+    /**
+     * Whether this item is selected/checked.
+     * When true: shows check icon (leading slot) and applies selected container color.
+     * Overrides itemPosition shape with `rounded-m3-md`.
+     */
+    selected?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /**
+     * Controls shape morphing based on position within its group.
+     * Automatically injected by MenuGroup via React.cloneElement when grouping is used.
+     */
+    itemPosition?: MenuItemPosition;
+    /** Override colorVariant from MenuContext */
+    colorVariant?: MenuColorVariant;
+    /** If true, keeps the menu open after clicking (e.g. for multi-select items) */
+    keepOpen?: boolean;
+    className?: string;
+    /** Optional value for radio items. Required when role='menuitemradio'. */
+    value?: string;
+    /** Internal flag used by SubMenu to render this item as a SubTrigger primitive. */
+    isSubTrigger?: boolean;
+    /** ARIA role override. Defaults to 'menuitem', 'menuitemcheckbox', or 'menuitemradio' based on selected prop. */
+    role?: string;
+}
+interface MenuGroupProps {
+    /** MenuItem children — itemPosition is auto-injected */
+    children: React$1.ReactNode;
+    /**
+     * Optional label displayed at the top of the group.
+     * Uses labelLarge typography with 12dp horizontal padding.
+     */
+    label?: string;
+    /**
+     * Zero-based index of this group in the parent menu.
+     * Used to determine shape (leading/middle/trailing/standalone).
+     * Auto-provided when using MenuContent's grouping utilities.
+     */
+    index?: number;
+    /**
+     * Total number of groups in the parent menu.
+     * Used together with index to determine shape.
+     */
+    count?: number;
+    /** Override colorVariant from MenuContext */
+    colorVariant?: MenuColorVariant;
+    /** Internal flag: true if rendered inside a gap-variant vertical menu (to adjust padding) */
+    isGapVariant?: boolean;
+    /** Optionally injected when nested inside another MenuGroup */
+    itemPosition?: MenuItemPosition;
+    className?: string;
+}
+interface MenuDividerProps {
+    className?: string;
+}
+interface SubMenuProps {
+    /** The SubMenu children (another MenuContent) */
+    children: React$1.ReactNode;
+    /** The trigger element (typically a MenuItem with trailing chevron) */
+    trigger: React$1.ReactNode;
+    /** Preferred side to open the submenu. Default: 'right' */
+    side?: "left" | "right";
+    /** Override colorVariant from MenuContext */
+    colorVariant?: MenuColorVariant;
+    /** Delay in ms before submenu opens on hover. Default: 200 */
+    hoverOpenDelay?: number;
+    /** Delay in ms before submenu closes on pointer-leave. Default: 300 */
+    hoverCloseDelay?: number;
+}
+/**
+ * How groups within a VerticalMenuContent are separated.
+ * - `gap`     → 2dp gap between groups (SegmentedMenuTokens.SegmentedGap)
+ * - `divider` → outline-variant horizontal rule between groups (MenuDefaults.HorizontalDividerPadding)
+ */
+type VerticalMenuSeparatorStyle = "gap" | "divider";
+/**
+ * Root of an always-visible vertical menu (no trigger, no popup).
+ * Provides `MenuContext` with `colorVariant` to all descendants.
+ */
+interface VerticalMenuProps {
+    children: React$1.ReactNode;
+    /**
+     * Color variant of the menu.
+     * - `standard`: surface-container-low background (default)
+     * - `vibrant`: tertiary-container background
+     */
+    colorVariant?: MenuColorVariant;
+    className?: string;
+}
+/**
+ * Container that renders VerticalMenuGroup children in a vertical list.
+ * Handles separator injection (gap or divider) and auto-injects `index`/`count` into groups.
+ */
+interface VerticalMenuContentProps {
+    children: React$1.ReactNode;
+    /**
+     * Separation style between groups.
+     * - `gap`     → 2dp visual gap (default, matches MD3 Expressive spec image 1 left)
+     * - `divider` → horizontal `outline-variant` rule (matches MD3 Expressive spec image 1 right)
+     */
+    separatorStyle?: VerticalMenuSeparatorStyle;
+    /** Override colorVariant from VerticalMenu root */
+    colorVariant?: MenuColorVariant;
+    className?: string;
+}
+/** A group within a VerticalMenu. Alias of MenuGroupProps. */
+interface VerticalMenuGroupProps extends MenuGroupProps {
+}
+/** A plain horizontal divider for use between groups in a VerticalMenuContent with `separatorStyle="divider"`. */
+interface VerticalMenuDividerProps {
+    className?: string;
+    /** Optionally injected by VerticalMenuContent */
+    index?: number;
+    /** Optionally injected by VerticalMenuContent */
+    count?: number;
+    /** Optionally injected by VerticalMenuContent */
+    isGapVariant?: boolean;
+}
+/**
+ * Root of a context menu (right-click / long-press triggered popup).
+ *
+ * Wraps @radix-ui/react-context-menu Root and provides MenuContext with
+ * `menuPrimitive="context"` so MenuItem automatically uses ContextMenu primitives.
+ */
+interface ContextMenuProps {
+    children: React$1.ReactNode;
+    /**
+     * Visual variant of the context menu.
+     * - `baseline`: original M3 specs (4dp corners, no shape morphing)
+     * - `expressive`: M3 Expressive specs (shape morphing, rounded groups)
+     * @default "baseline"
+     */
+    variant?: MenuVariant;
+    /** Color variant. Only applies when `variant="expressive"`. */
+    colorVariant?: MenuColorVariant;
+    /** Additional className */
+    className?: string;
+}
+interface ContextMenuTriggerProps {
+    children: React$1.ReactNode;
+    /** If true, merges props with the child element instead of wrapping */
+    asChild?: boolean;
+    className?: string;
+}
+interface ContextMenuContentProps {
+    children: React$1.ReactNode;
+    /** Override colorVariant from ContextMenuContext */
+    colorVariant?: MenuColorVariant;
+    /**
+     * When true, disables overflow-hidden so nested SubMenus can escape bounds.
+     * Required when using SubMenu inside ContextMenu.
+     */
+    hasOverflow?: boolean;
+    /**
+     * Separation style between groups (only applies when variant="expressive").
+     * - `gap`     → 2dp visual gap, transparent container
+     * - `divider` → solid container, no gap
+     * Default: "gap"
+     */
+    separatorStyle?: VerticalMenuSeparatorStyle;
+    className?: string;
+}
+
+/**
+ * Root of a context menu (right-click / long-press triggered popup).
+ *
+ * Wraps `@radix-ui/react-context-menu` Root and provides `MenuContext` with
+ * `menuPrimitive="context"` so nested `MenuItem` components automatically use
+ * ContextMenu Radix primitives for correct accessibility and keyboard navigation.
+ *
+ * @example
+ * // Baseline context menu
+ * <ContextMenu variant="baseline">
+ *   <ContextMenuTrigger asChild>
+ *     <div>Right-click me</div>
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <MenuItem>Copy</MenuItem>
+ *     <MenuItem>Paste</MenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ *
+ * @example
+ * // Expressive context menu with groups
+ * <ContextMenu variant="expressive">
+ *   <ContextMenuTrigger asChild><canvas /></ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <MenuGroup>
+ *       <MenuItem>Cut</MenuItem>
+ *       <MenuItem>Copy</MenuItem>
+ *     </MenuGroup>
+ *     <MenuGroup>
+ *       <MenuItem>Paste</MenuItem>
+ *     </MenuGroup>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ */
+declare function ContextMenu({ children, variant, colorVariant, }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextMenu {
+    var displayName: string;
+}
+/**
+ * The trigger area for a ContextMenu. Right-click (or long-press on touch)
+ * within this area opens the context menu.
+ *
+ * Use `asChild` to apply trigger behavior to your own element without an
+ * extra wrapper `<span>`.
+ */
+declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuTriggerProps & Omit<RxContextMenu.ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * The popup container for the context menu's contents.
+ *
+ * Renders into a portal via Radix. Uses Framer Motion `AnimatePresence` for
+ * smooth enter/exit animations. Transform-origin is automatically set by
+ * Radix via `--radix-context-menu-content-transform-origin`.
+ *
+ * Visual styling follows `variant` from `ContextMenuContext`:
+ * - `baseline`   → CornerExtraSmall (4px), standard M3 styling
+ * - `expressive` → rounded-2xl, shape-morphing groups, elevation-2
+ *
+ * @param hasOverflow - Set true when using SubMenu to prevent clipping
+ */
+declare const ContextMenuContent: React$1.ForwardRefExoticComponent<ContextMenuContentProps & Omit<Omit<RxContextMenu.ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * MD3 Expressive Menu root component.
+ *
+ * Wraps Radix `DropdownMenu.Root` and provides `MenuContext` with `colorVariant`
+ * and `open` state to all descendant MenuItem and MenuGroup components.
+ *
+ * @example
+ * <Menu colorVariant="standard">
+ *   <MenuTrigger asChild>
+ *     <IconButton name="more_vert" />
+ *   </MenuTrigger>
+ *   <MenuContent>
+ *     <MenuGroup index={0} count={2}>
+ *       <MenuItem>Cut</MenuItem>
+ *       <MenuItem>Copy</MenuItem>
+ *     </MenuGroup>
+ *     <MenuGroup index={1} count={2}>
+ *       <MenuItem>Paste</MenuItem>
+ *     </MenuGroup>
+ *   </MenuContent>
+ * </Menu>
+ */
+declare function Menu({ children, variant, menuVariant, colorVariant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, ...props }: MenuProps & Omit<React$1.ComponentPropsWithoutRef<typeof DropdownMenu.Root>, "children">): react_jsx_runtime.JSX.Element;
+declare namespace Menu {
+    var displayName: string;
+}
+/**
+ * The trigger element that opens/closes the Menu.
+ *
+ * Use `asChild` to merge trigger behavior with your own element (e.g. a Button or IconButton).
+ */
+declare const MenuTrigger: React$1.ForwardRefExoticComponent<MenuTriggerProps & Omit<DropdownMenu.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * The popup container for the menu's contents.
+ *
+ * Renders into a portal. Uses Radix `forceMount` + Framer Motion `AnimatePresence`
+ * so the exit animation (scale + opacity via FastEffects) plays before the portal
+ * unmounts. The `open` state is read from `MenuContext`.
+ *
+ * Transform-origin is automatically set via the Radix CSS variable
+ * `--radix-dropdown-menu-content-transform-origin`.
+ *
+ * @param hasOverflow - Set true when using SubMenu to prevent clipping
+ */
+declare const MenuContent: React$1.ForwardRefExoticComponent<MenuContentProps & Omit<Omit<DropdownMenu.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file ui/shared/motion-tokens.ts
+ *
+ * Framer Motion spring presets derived from the official MD3 Expressive
+ * motion physics system (May 2025).
+ *
+ * Usage hierarchy:
+ *   1. Import a named preset (e.g. `FAST_SPATIAL_SPRING`) for convenience.
+ *   2. Call `getMotionSpring(speed, type)` when you need to pick dynamically.
+ *   3. Call `getMotionTransitionCSS(speed, type, scheme?)` for pure-CSS contexts.
+ *
+ * @see https://m3.material.io/styles/motion/overview/how-it-works
+ * @see https://m3.material.io/styles/motion/overview/specs
+ */
+
+/**
+ * MD3 Expressive — Fast Spatial Spring
+ * `md.sys.motion.spring.fast.spatial` (dampingRatio: 0.6, stiffness: 800)
+ *
+ * Use for: small components (buttons, switches, chips).
+ * Has notable bounce/overshoot — feels snappy and expressive.
+ */
+declare const FAST_SPATIAL_SPRING: Transition;
+
+/** FastEffects CSS-fallback transition — used for opacity/exit animations */
+declare const FAST_EFFECTS_TRANSITION: {
+    readonly duration: 0.15;
+    readonly ease: [number, number, number, number];
+};
+/**
+ * Enter/exit animation for the menu popup container.
+ * Scale from 0.8→1.0 with FastSpatial spring.
+ * Transform-origin is driven by the Radix CSS variable
+ * `--radix-dropdown-menu-content-transform-origin`.
+ */
+declare const MENU_CONTAINER_VARIANTS: Variants;
+/** Size of the check icon in px (20dp per SegmentedMenuTokens.ItemLeadingIconSize) */
+declare const MENU_CHECK_ICON_SIZE = 20;
+/**
+ * Expand/collapse animation for the check icon that appears when a MenuItem is
+ * selected. Uses horizontal expansion (width + marginInlineEnd) with FastSpatial.
+ *
+ * ONLY used for the animated check ↔ selectedIcon swap in selectable items.
+ * Regular (static) leading icons should NOT use these variants.
+ */
+declare const CHECK_ICON_VARIANTS: Variants;
+/** SubMenu popup uses the same FastSpatial/FastEffects pattern as root menu */
+declare const SUBMENU_CONTAINER_VARIANTS: Variants;
+
+interface MenuContextValue {
+    /** Visual variant: baseline (M3 standard) or expressive (shape-morphing) */
+    variant: MenuVariant;
+    /** Color variant inherited by all children unless overridden */
+    colorVariant: MenuColorVariant;
+    /**
+     * Which Radix primitive family drives this menu:
+     * - "dropdown" → @radix-ui/react-dropdown-menu (button/field trigger)
+     * - "context"  → @radix-ui/react-context-menu (right-click trigger)
+     * - "static"   → plain HTML via Slot (VerticalMenu, always-visible)
+     */
+    menuPrimitive: MenuPrimitive;
+    /**
+     * Whether the menu popup is currently open.
+     * Used by MenuContent to drive AnimatePresence for exit animations.
+     */
+    open: boolean;
+    /** Setter forwarded from Menu root — kept in sync with Radix Root open state */
+    onOpenChange: (open: boolean) => void;
+}
+interface MenuProviderProps {
+    variant?: MenuVariant;
+    colorVariant?: MenuColorVariant;
+    menuPrimitive?: MenuPrimitive;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React$1.ReactNode;
+}
+declare function MenuProvider({ variant, colorVariant, menuPrimitive, open, onOpenChange, children, }: MenuProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Returns the nearest MenuContext value.
+ * Safe to use outside a MenuProvider (returns default: baseline, dropdown, closed).
+ *
+ * Includes backward-compat shims:
+ * - `menuVariant` → alias for `variant` (deprecated, will be removed)
+ * - `isStatic`    → `menuPrimitive === "static"`
+ */
+declare function useMenuContext(): MenuContextValue & {
+    isStatic: boolean;
+    menuVariant: MenuVariant;
+};
+
+/**
+ * A horizontal divider for use between MenuItems or MenuGroups.
+ *
+ * Uses traditional line-based separation (as opposed to the gap-based
+ * separation in MenuGroup, which is the Expressive default).
+ *
+ * Spec: horizontal=12dp padding, vertical=2dp padding, `outline-variant` color.
+ *
+ * @example
+ * <MenuContent>
+ *   <MenuItem>Cut</MenuItem>
+ *   <MenuDivider />
+ *   <MenuItem>Paste</MenuItem>
+ * </MenuContent>
+ */
+declare const MenuDivider: React$1.ForwardRefExoticComponent<MenuDividerProps & React$1.RefAttributes<HTMLHRElement>>;
+
+/**
+ * A container that groups MenuItem elements with gap-based visual separation —
+ * the defining feature of MD3 Expressive menus.
+ *
+ * Shape morphing: on hover, the container's border-radius transitions from the
+ * "inactive" small shape to the "active" large shape via a FastSpatial spring.
+ * The shape depends on the group's position (leading/middle/trailing/standalone).
+ *
+ * MenuItem children automatically receive `itemPosition` props based on their
+ * index within the group.
+ *
+ * @example
+ * <MenuContent>
+ *   <MenuGroup>
+ *     <MenuItem>Cut</MenuItem>
+ *     <MenuItem>Copy</MenuItem>
+ *     <MenuItem>Paste</MenuItem>
+ *   </MenuGroup>
+ *   <MenuGroup>
+ *     <MenuItem>Select All</MenuItem>
+ *   </MenuGroup>
+ * </MenuContent>
+ */
+declare const MenuGroup: React$1.ForwardRefExoticComponent<MenuGroupProps & {
+    [key: `data-${string}`]: string | undefined;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * An interactive item within a Menu or MenuGroup.
+ *
+ * ### Shape morphing
+ * `itemPosition` (auto-set by MenuGroup) controls border-radius. When `selected=true`,
+ * shape overrides to `CornerMedium (12px)` with a CSS transition.
+ *
+ * ### Leading icon animation
+ * - **Selectable items** (`selected` prop defined): `AnimatePresence` swaps between
+ *   a check icon and the user `leadingIcon` using FastSpatial expand + FastEffects fade.
+ * - **Static items** (`selected` prop undefined): `leadingIcon` renders at fixed width
+ *   with no enter/exit animation (matches Android's static rendering).
+ *
+ * ### Selected state
+ * Container color transitions with `transition-colors duration-150` (maps to
+ * Android's `animateColorAsState` with `FastEffects` spec).
+ */
+declare const MenuItem: React$1.ForwardRefExoticComponent<MenuItemProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/** Min height for selectable items: 44dp (SegmentedMenuTokens.Item) */
+declare const MENU_ITEM_MIN_HEIGHT = "min-h-11";
+/** Min width of menu container: 112dp (DropdownMenuItemDefaultMinWidth) */
+declare const MENU_MIN_WIDTH = "min-w-28";
+/** Max width of menu container: 280dp (DropdownMenuItemDefaultMaxWidth) */
+declare const MENU_MAX_WIDTH = "max-w-70";
+/** Gap between MenuGroup segments: 2dp (SegmentedMenuTokens.SegmentedGap) */
+declare const MENU_GROUP_GAP = "gap-0.5";
+/** Leading icon size: 20dp (SegmentedMenuTokens.ItemLeadingIconSize) */
+declare const MENU_ICON_SIZE = 20;
+/**
+ * Shape values for MenuGroup container (borderRadius CSS shorthand string).
+ * Format: "topLeft topRight bottomRight bottomLeft"
+ *
+ * Source: MenuDefaults.kt groupShape() + SegmentedMenuTokens/ShapeTokens
+ * - ContainerShape (standalone) = CornerLarge (16px) all corners
+ * - InactiveContainerShape = CornerSmall (8px) all corners
+ * - Leading group: topStart=CornerLarge, topEnd=CornerLarge, bottomStart=CornerSmall, bottomEnd=CornerSmall
+ * - Middle group: GroupShape = CornerSmall (8px)
+ * - Trailing group: topStart=CornerSmall, topEnd=CornerSmall, bottomStart=CornerLarge, bottomEnd=CornerLarge
+ */
+declare const GROUP_SHAPES: {
+    /** Active standalone group shape: CornerLarge all corners (16px) */
+    readonly standaloneActive: "16px";
+    /**
+     * Active leading group shape: top=CornerLarge(16px), bottom=CornerSmall(8px)
+     * Source: SegmentedMenuTokens — LeadingContainerShape:
+     * topStart=CornerLarge, topEnd=CornerLarge, bottomStart=CornerSmall, bottomEnd=CornerSmall
+     */
+    readonly leadingActive: "16px 16px 8px 8px";
+    /** Active middle group shape: CornerExtraSmall all corners (4px) */
+    readonly middleActive: "4px";
+    /**
+     * Active trailing group shape: top=CornerSmall(8px), bottom=CornerLarge(16px)
+     * Source: SegmentedMenuTokens — TrailingContainerShape:
+     * topStart=CornerSmall, topEnd=CornerSmall, bottomStart=CornerLarge, bottomEnd=CornerLarge
+     */
+    readonly trailingActive: "8px 8px 16px 16px";
+    /** Inactive (default, pre-hover) shape for all groups: CornerExtraSmall (4px) */
+    readonly inactive: "4px";
+};
+/**
+ * Shape values for MenuItem (borderRadius CSS shorthand string).
+ * Used as Tailwind classes via arbitrary values for static rendering.
+ * Animated shape (selected ↔ unselected) is handled via `transition-[border-radius]`.
+ *
+ * Source: MenuDefaults.kt itemShape() + SegmentedMenuTokens/ShapeTokens
+ * - leading item: topStart/topEnd=CornerMedium(12px), bottomStart/bottomEnd=CornerExtraSmall(4px)
+ * - middle item: CornerExtraSmall all (ItemShape = 4px)
+ * - trailing item: topStart/topEnd=CornerExtraSmall(4px), bottomStart/bottomEnd=CornerMedium(12px)
+ * - standalone item: same as middle (ItemShape = 4px)
+ * - selected (all positions): CornerMedium all (ItemSelectedShape = 12px)
+ */
+declare const ITEM_SHAPE_CLASSES: {
+    readonly leading: "rounded-t-[12px] rounded-b-[4px]";
+    readonly middle: "rounded-[4px]";
+    readonly trailing: "rounded-t-[4px] rounded-b-[12px]";
+    readonly standalone: "rounded-[4px]";
+    readonly selected: "rounded-[12px]";
+};
+/**
+ * Standard color variant tokens (SurfaceContainerLow-based).
+ * Source: StandardMenuTokens.kt
+ *
+ * Container: SurfaceContainerLow
+ * Text: OnSurface
+ * Icons: OnSurfaceVariant
+ * Selected container: TertiaryContainer
+ * Selected text/icons: OnTertiaryContainer
+ */
+declare const STANDARD_COLORS: {
+    /** Group/popup container background (StandardMenuTokens.ContainerColor) */
+    readonly containerBg: "bg-m3-surface-container-low";
+    /** Label text color (StandardMenuTokens.ItemLabelTextColor) */
+    readonly labelText: "text-m3-on-surface";
+    /** Leading/trailing icon color (StandardMenuTokens.ItemLeadingIconColor) */
+    readonly iconColor: "text-m3-on-surface-variant";
+    /** Supporting text below label (StandardMenuTokens.ItemSupportingTextColor) */
+    readonly supportingTextColor: "text-m3-on-surface-variant";
+    /** Trailing supporting text (StandardMenuTokens.ItemTrailingSupportingTextColor) */
+    readonly trailingSupportingTextColor: "text-m3-on-surface-variant";
+    /** Trailing icon color (StandardMenuTokens.ItemTrailingIconColor) */
+    readonly trailingIconColor: "text-m3-on-surface-variant";
+    /** Hover state layer (OnSurface @ 8% opacity) */
+    readonly hoverLayer: "hover:bg-m3-on-surface/8";
+    /** Focus state layer (OnSurface @ 12% opacity) */
+    readonly focusLayer: "focus:bg-m3-on-surface/12";
+    /** Selected item background (StandardMenuTokens.ItemSelectedContainerColor) */
+    readonly selectedBg: "bg-m3-tertiary-container";
+    /** Selected item text (StandardMenuTokens.ItemSelectedLabelTextColor) */
+    readonly selectedText: "text-m3-on-tertiary-container";
+    /** Selected item icon (StandardMenuTokens.ItemSelectedLeadingIconColor) */
+    readonly selectedIcon: "text-m3-on-tertiary-container";
+    /** Disabled opacity: 38% (StandardMenuTokens.ItemDisabledLabelTextOpacity) */
+    readonly disabledOpacity: "data-disabled:opacity-[0.38]";
+};
+/**
+ * Vibrant color variant tokens (TertiaryContainer-based).
+ * Source: VibrantMenuTokens.kt
+ *
+ * Container: TertiaryContainer
+ * Text: OnTertiaryContainer
+ * Icons: OnTertiaryContainer
+ * Selected container: Tertiary
+ * Selected text/icons: OnTertiary
+ */
+declare const VIBRANT_COLORS: {
+    /** Group/popup container background (VibrantMenuTokens.ContainerColor) */
+    readonly containerBg: "bg-m3-tertiary-container";
+    /** Label text color (VibrantMenuTokens.ItemLabelTextColor) */
+    readonly labelText: "text-m3-on-tertiary-container";
+    /** Leading/trailing icon color (VibrantMenuTokens.ItemLeadingIconColor) */
+    readonly iconColor: "text-m3-on-tertiary-container";
+    /** Supporting text below label (VibrantMenuTokens.ItemSupportingTextColor) */
+    readonly supportingTextColor: "text-m3-on-tertiary-container";
+    /** Trailing supporting text (VibrantMenuTokens.ItemTrailingSupportingTextColor) */
+    readonly trailingSupportingTextColor: "text-m3-on-tertiary-container";
+    /** Trailing icon color (VibrantMenuTokens.ItemTrailingIconColor) */
+    readonly trailingIconColor: "text-m3-on-tertiary-container";
+    /** Hover state layer (OnTertiaryContainer @ 8% opacity) */
+    readonly hoverLayer: "hover:bg-m3-on-tertiary-container/8";
+    /** Focus state layer (OnTertiaryContainer @ 12% opacity) */
+    readonly focusLayer: "focus:bg-m3-on-tertiary-container/12";
+    /** Selected item background (VibrantMenuTokens.ItemSelectedContainerColor = Tertiary) */
+    readonly selectedBg: "bg-m3-tertiary";
+    /** Selected item text (VibrantMenuTokens.ItemSelectedLabelTextColor = OnTertiary) */
+    readonly selectedText: "text-m3-on-tertiary";
+    /** Selected item icon (VibrantMenuTokens.ItemSelectedLeadingIconColor = OnTertiary) */
+    readonly selectedIcon: "text-m3-on-tertiary";
+    /** Disabled opacity: 38% (VibrantMenuTokens.ItemDisabledLabelTextOpacity) */
+    readonly disabledOpacity: "data-disabled:opacity-[0.38]";
+};
+/**
+ * HorizontalDivider padding: horizontal=12dp, vertical=2dp.
+ * Source: MenuDefaults.HorizontalDividerPadding
+ */
+declare const DIVIDER_PADDING = "mx-3 my-0.5";
+declare const DIVIDER_COLOR = "bg-m3-outline-variant";
+
+/**
+ * A nested SubMenu that opens from a trigger MenuItem.
+ *
+ * Keyboard: ArrowRight opens, ArrowLeft/Escape closes (handled by Radix).
+ * The parent MenuContent should set `hasOverflow={true}` when SubMenus are used.
+ *
+ * ### Hover delays
+ * `hoverOpenDelay` (default: 200ms) — time before the submenu opens on hover.
+ * `hoverCloseDelay` (default: 300ms) — time before the submenu closes after pointer-leave.
+ * These delays allow the user to safely move diagonally from trigger to submenu content
+ * without accidental close (safe polygon behavior from Radix still applies).
+ *
+ * @example
+ * <MenuContent hasOverflow>
+ *   <SubMenu
+ *     trigger={
+ *       <MenuItem trailingIcon={<Icon name="chevron_right" size={20} />}>
+ *         Share
+ *       </MenuItem>
+ *     }
+ *   >
+ *     <MenuItem>Via Email</MenuItem>
+ *     <MenuItem>Via Link</MenuItem>
+ *   </SubMenu>
+ * </MenuContent>
+ */
+declare function SubMenu({ children, trigger, side, colorVariant: propColorVariant, hoverOpenDelay, hoverCloseDelay, }: SubMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace SubMenu {
+    var displayName: string;
+}
+
+/**
+ * A plain horizontal divider for use between groups in a VerticalMenuContent
+ * with `separatorStyle="divider"`.
+ *
+ * Uses the same visual spec as MenuDivider (outline-variant color, 12dp
+ * horizontal padding, 2dp vertical padding) but is a plain `<hr>` — no Radix
+ * dependency, safe inside static (non-popup) contexts.
+ *
+ * @example
+ * <VerticalMenuContent separatorStyle="divider">
+ *   <VerticalMenuGroup>...</VerticalMenuGroup>
+ *   <VerticalMenuDivider />
+ *   <VerticalMenuGroup>...</VerticalMenuGroup>
+ * </VerticalMenuContent>
+ */
+declare const VerticalMenuDivider: React$1.ForwardRefExoticComponent<VerticalMenuDividerProps & React$1.HTMLAttributes<HTMLHRElement> & React$1.RefAttributes<HTMLHRElement>>;
+/**
+ * A group within a VerticalMenu.
+ *
+ * Functionally identical to `MenuGroup` — shape morphing on hover, auto-injected
+ * `itemPosition` into MenuItem children, `colorVariant` from context.
+ *
+ * This component is a named re-export of `MenuGroup` so consumers of Vertical
+ * Menu have a semantically clear API without any code duplication.
+ */
+declare const VerticalMenuGroup: React$1.ForwardRefExoticComponent<MenuGroupProps & {
+    [key: `data-${string}`]: string | undefined;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders a vertical list of VerticalMenuGroup children.
+ *
+ * Handles two separation styles:
+ * - `gap`     → 2dp (`gap-0.5`) visual gap between groups (default)
+ * - `divider` → auto-inserts a `VerticalMenuDivider` between each pair of groups
+ *
+ * Auto-injects `index` and `count` props into VerticalMenuGroup children so
+ * that position-based shape morphing (leading/middle/trailing) works correctly.
+ *
+ * @example
+ * // Gap variant (default)
+ * <VerticalMenuContent separatorStyle="gap">
+ *   <VerticalMenuGroup>...</VerticalMenuGroup>
+ *   <VerticalMenuGroup>...</VerticalMenuGroup>
+ * </VerticalMenuContent>
+ *
+ * @example
+ * // Divider variant
+ * <VerticalMenuContent separatorStyle="divider">
+ *   <VerticalMenuGroup>...</VerticalMenuGroup>
+ *   <VerticalMenuGroup>...</VerticalMenuGroup>
+ * </VerticalMenuContent>
+ */
+declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMenuContentProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Root of an always-visible vertical menu.
+ *
+ * Wraps children in `MenuProvider` (always `open={true}`) so MenuItem and
+ * MenuGroup components receive the correct `colorVariant` from context.
+ *
+ * Unlike the popup `Menu` component, there is no Radix DropdownMenu, no portal,
+ * and no enter/exit animation — the list is statically rendered at all times.
+ *
+ * ### Shape morphing
+ * For the **gap variant**, the outer container has NO `overflow-hidden` — this is
+ * intentional! Each `VerticalMenuGroup` manages its own shape via Framer Motion's
+ * `animate.borderRadius`. `overflow-hidden` on the parent would clip these
+ * morphing corners. The 2dp transparent gap lets page background show through.
+ *
+ * For the **divider variant**, the outer container applies `overflow-hidden` +
+ * `rounded-2xl` + background — groups sit flush inside without morphing.
+ *
+ * @example
+ * // Vertical Menu with Gap (floating segments)
+ * <VerticalMenu colorVariant="standard">
+ *   <VerticalMenuContent separatorStyle="gap">
+ *     <VerticalMenuGroup>
+ *       <MenuItem leadingIcon={<Icon name="visibility" size={20} />}>Item 1</MenuItem>
+ *       <MenuItem leadingIcon={<Icon name="content_copy" size={20} />} trailingText="⌘C">Item 2</MenuItem>
+ *       <MenuItem selected leadingIcon={<Icon name="edit" size={20} />}>Item 3</MenuItem>
+ *     </VerticalMenuGroup>
+ *     <VerticalMenuGroup>
+ *       <MenuItem trailingIcon={<Icon name="chevron_right" size={20} />}>Item 4</MenuItem>
+ *     </VerticalMenuGroup>
+ *   </VerticalMenuContent>
+ * </VerticalMenu>
+ *
+ * @example
+ * // Vertical Menu with Divider
+ * <VerticalMenu colorVariant="standard">
+ *   <VerticalMenuContent separatorStyle="divider">
+ *     <VerticalMenuGroup>...</VerticalMenuGroup>
+ *     <VerticalMenuGroup>...</VerticalMenuGroup>
+ *   </VerticalMenuContent>
+ * </VerticalMenu>
+ */
+declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Layout styling for navigation bar items.
+ * - vertical: Icon above label (default for mobile)
+ * - horizontal: Icon beside label (forced)
+ */
+type NavigationBarItemLayout = "vertical" | "horizontal";
+/**
+ * Visual variant of the Navigation Bar.
+ * - flexible: Default MD3 behavior (h-16), becomes horizontal on desktop.
+ * - baseline: Taller MD3 behavior (h-20), always vertical.
+ * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
+ */
+type NavigationBarVariant = "flexible" | "baseline" | "xr";
+interface NavigationBarItemProps {
+    selected: boolean;
+    icon: React$1.ReactNode;
+    label: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    badge?: React$1.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+}
+interface NavigationBarProps {
+    /** Visual variant of the Navigation Bar */
+    variant?: NavigationBarVariant;
+    /** Forces a specific item layout (horizontal/vertical) */
+    itemLayout?: NavigationBarItemLayout;
+    /** Whether the bar should hide when scrolling down */
+    hideOnScroll?: boolean;
+    /** Whether the bar should have an elevation shadow */
+    elevated?: boolean;
+    /** Whether the bar is fixed to the viewport (default) or absolute */
+    fixed?: boolean;
+    /** Container ref to track scrolling for hideOnScroll */
+    scrollContainerRef?: React$1.RefObject<HTMLElement | null>;
+    /** Transition for the active indicator pill */
+    activeIndicatorTransition?: Transition;
+    /** Navigation items */
+    children: React$1.ReactNode;
+    /** Optional additional classes */
+    className?: string;
+    /** Optional inline styles */
+    style?: React$1.CSSProperties;
+}
+declare const NavigationBarItem: React$1.NamedExoticComponent<NavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationBarComponent: React$1.ForwardRefExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+
+type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
+type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
+interface NavigationRailItemProps {
+    selected: boolean;
+    icon: React$1.ReactNode;
+    label?: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    badge?: React$1.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+}
+interface NavigationRailProps {
+    variant?: NavigationRailVariant;
+    labelVisibility?: NavigationRailLabelVisibility;
+    header?: React$1.ReactNode;
+    fab?: React$1.ReactNode;
+    fabPlacement?: "contained" | "spatialized";
+    footer?: React$1.ReactNode;
+    narrow?: boolean;
+    open?: boolean;
+    onClose?: () => void;
+    activeIndicatorTransition?: Transition;
+    children: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+declare const NavigationRailItem: React$1.NamedExoticComponent<NavigationRailItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationRail: React$1.NamedExoticComponent<NavigationRailProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * @file search.types.ts
+ * MD3 Expressive Search — TypeScript prop definitions.
+ * Spec: https://m3.material.io/components/search/overview
+ * Reference: docs/m3/search/SearchBar.kt (MD3 Expressive)
+ */
+
+/**
+ * Display variant for the expanded SearchView.
+ *
+ * - `docked`: Popup dropdown below the SearchBar. For medium/large screens.
+ * - `fullscreen`: Full-screen dialog overlay. For compact/mobile screens.
+ */
+type SearchVariant = "docked" | "fullscreen";
+/**
+ * Visual style type for the SearchView.
+ *
+ * - `contained`: No divider between the input area and results.
+ *   The container background is preserved continuously (recommended).
+ * - `divided`: A HorizontalDivider separates the input area from results.
+ */
+type SearchStyleType = "contained" | "divided";
+/**
+ * Internal props shared between SearchBar and SearchView sub-components.
+ * Not part of the public API.
+ * @internal
+ */
+interface SearchInternalProps {
+    /** Unique ID generated by useId(), used as Framer Motion layoutId. */
+    searchId: string;
+    /** Unique ID for the results listbox, used for aria-controls. */
+    listboxId: string;
+}
+/**
+ * Props for the `<Search>` component (orchestrator).
+ *
+ * @example
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const [active, setActive] = useState(false);
+ *
+ * <Search
+ *   query={query}
+ *   onQueryChange={setQuery}
+ *   onSearch={(q) => console.log("search:", q)}
+ *   active={active}
+ *   onActiveChange={setActive}
+ *   variant="docked"
+ *   styleType="contained"
+ * >
+ *   <SearchResultsList />
+ * </Search>
+ * ```
+ */
+interface SearchProps {
+    /** Current search query value (controlled). */
+    query: string;
+    /** Called when user types in the search input. */
+    onQueryChange: (query: string) => void;
+    /** Called when user submits search (Enter key or suggestion click). */
+    onSearch: (query: string) => void;
+    /** Whether the SearchView is expanded/open (controlled). */
+    active: boolean;
+    /** Called when the Search open/close state should change. */
+    onActiveChange: (active: boolean) => void;
+    /**
+     * Display variant for the expanded state.
+     * @default "docked"
+     */
+    variant?: SearchVariant;
+    /**
+     * Visual style for the SearchView container.
+     * @default "contained"
+     */
+    styleType?: SearchStyleType;
+    /**
+     * Whether to add a 2dp gap between the input header and the results list.
+     * Only applies when `variant="docked"`.
+     * @default false
+     */
+    hasGap?: boolean;
+    /**
+     * Icon rendered at the leading edge of the search input.
+     * Defaults to a built-in search icon.
+     */
+    leadingIcon?: React$1.ReactNode;
+    /**
+     * Icon or action rendered at the trailing edge of the search input.
+     * Common examples: mic, camera, QR code.
+     */
+    trailingIcon?: React$1.ReactNode;
+    /** Placeholder text shown when the input is empty. @default "Search" */
+    placeholder?: string;
+    /**
+     * Align the placeholder text to left, center, or right.
+     * Typed text will always remain left-aligned.
+     * @default "left"
+     */
+    textAlign?: "left" | "center" | "right";
+    /**
+     * Search results or suggestions rendered inside the SearchView.
+     * Use `role="option"` on each item for accessibility.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Override the auto-generated input element ID.
+     * Auto-generated via React.useId() if not provided.
+     */
+    id?: string;
+    /**
+     * Accessible label for the search landmark.
+     * @default "Search"
+     */
+    "aria-label"?: string;
+    /** Additional CSS classes for the SearchBar root element. */
+    className?: string;
+    /** Additional CSS classes for the SearchView container. */
+    viewClassName?: string;
+}
+/**
+ * Return type for `useSearchKeyboard`.
+ * @internal
+ */
+interface UseSearchKeyboardReturn {
+    /** Currently highlighted suggestion index. -1 = none. */
+    activeIndex: number;
+    /** KeyDown handler — attach to the search input. */
+    handleKeyDown: (e: React$1.KeyboardEvent) => void;
+    /** Reset activeIndex (e.g., when query changes). */
+    resetActiveIndex: () => void;
+}
+
+/**
+ * @file use-search-keyboard.ts
+ * Keyboard navigation hook for the MD3 Search component.
+ *
+ * Handles:
+ * - ArrowDown / ArrowUp → navigate through suggestions (role="option")
+ * - Enter → submit search or select active suggestion
+ * - Escape → close the SearchView
+ */
+
+interface UseSearchKeyboardOptions {
+    /** Whether the SearchView is currently open. */
+    active: boolean;
+    /** Callback to close the SearchView. */
+    onActiveChange: (active: boolean) => void;
+    /** Callback for search submission. */
+    onSearch: (query: string) => void;
+    /** Current search query. */
+    query: string;
+    /** Total number of suggestion items in the listbox. */
+    itemCount: number;
+    /** Called when user selects a specific suggestion by index. */
+    onSelectSuggestion?: (index: number) => void;
+}
+/**
+ * Manages keyboard navigation for the Search component.
+ *
+ * Complies with WAI-ARIA Combobox pattern:
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ */
+declare function useSearchKeyboard({ active, onActiveChange, onSearch, query, itemCount, onSelectSuggestion, }: UseSearchKeyboardOptions): UseSearchKeyboardReturn;
+
+/**
+ * MD3 Expressive Search Context
+ * Shared state for the Search orchestrator and its children.
+ */
+interface SearchContextValue {
+    /** Unique ID for the results listbox, used for aria-controls. */
+    listboxId: string;
+    /** Currently highlighted suggestion index. -1 = none. */
+    activeIndex: number;
+}
+/**
+ * Hook to access Search state from children (e.g., search items).
+ */
+declare function useSearch(): SearchContextValue;
+
+/**
+ * MD3 Expressive Search — Orchestrator component.
+ *
+ * Renders a SearchBar (collapsed pill) and the appropriate SearchView
+ * (docked popup or fullscreen overlay) based on `variant`.
+ *
+ * The component is fully controlled:
+ * - `active` / `onActiveChange` manage open/close state.
+ * - `query` / `onQueryChange` manage input value.
+ *
+ * Shared `searchId` (React.useId) links SearchBar and SearchView via
+ * Framer Motion `layoutId` for seamless animated transitions.
+ */
+declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, leadingIcon, trailingIcon, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): react_jsx_runtime.JSX.Element;
+/** MD3 Expressive Search component with `Search.useSearch` context accessor. */
+declare const Search: typeof SearchComponent & {
+    useSearch: typeof useSearch;
+};
+
+/**
+ * Height and shape tokens for Search variants.
+ * Maps directly from MD3 Kotlin token files.
+ */
+declare const SearchTokens: {
+    readonly heights: {
+        /** SearchBarTokens.ContainerHeight = 56dp */
+        readonly bar: 56;
+        /** SearchViewTokens.DockedHeaderContainerHeight = 56dp */
+        readonly dockedHeader: 56;
+        /** SearchViewTokens.FullScreenHeaderContainerHeight = 72dp */
+        readonly fullScreenHeader: 72;
+    };
+    /** SearchBarTokens.AvatarSize = 30dp */
+    readonly avatarSize: 30;
+    /** Standard icon size for leading/trailing icons. */
+    readonly iconSize: 20;
+    /** Touch target for interactive icons per MD3 a11y spec. */
+    readonly iconTouchTarget: 48;
+    /** Gap between SearchBar and results list when hasGap=true. */
+    readonly dropdownGap: 2;
+};
+/**
+ * CSS custom property references for Search colors.
+ * Maps to --md-sys-color-* tokens in the MD3 theme system.
+ *
+ * SearchBarTokens.kt:
+ * - ContainerColor → SurfaceContainerHigh
+ * - LeadingIconColor → OnSurface
+ * - TrailingIconColor → OnSurfaceVariant
+ * - InputTextColor → OnSurface
+ * - SupportingTextColor → OnSurfaceVariant (placeholder)
+ *
+ * SearchViewTokens.kt:
+ * - ContainerColor → SurfaceContainerHigh
+ * - DividerColor → Outline
+ */
+declare const SEARCH_COLORS: {
+    /** SearchBarTokens.ContainerColor → surface-container-high */
+    readonly container: "var(--md-sys-color-surface-container-high)";
+    /** SearchBarTokens.LeadingIconColor → on-surface */
+    readonly leadingIcon: "var(--md-sys-color-on-surface)";
+    /** SearchBarTokens.TrailingIconColor → on-surface-variant */
+    readonly trailingIcon: "var(--md-sys-color-on-surface-variant)";
+    /** SearchBarTokens.InputTextColor → on-surface */
+    readonly inputText: "var(--md-sys-color-on-surface)";
+    /** SearchBarTokens.SupportingTextColor → on-surface-variant (placeholder) */
+    readonly supportingText: "var(--md-sys-color-on-surface-variant)";
+    /** SearchViewTokens.DividerColor → outline */
+    readonly divider: "var(--md-sys-color-outline)";
+    /** Focus indicator → secondary */
+    readonly focusIndicator: "var(--md-sys-color-secondary)";
+};
+/**
+ * SearchBarTokens.InputTextFont = BodyLarge (16sp / 24sp line-height).
+ * SearchBarTokens.SupportingTextFont = BodyLarge.
+ */
+declare const SEARCH_TYPOGRAPHY: {
+    /** BodyLarge — used for input text and placeholder. */
+    readonly bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]";
+};
+declare const SEARCH_BAR_EXPAND_SPRING: motion.Transition;
+declare const SEARCH_DOCKED_REVEAL_SPRING: motion.Transition;
+declare const SEARCH_FULLSCREEN_SPRING: motion.Transition;
+declare const SEARCH_BAR_EXIT_SPRING: motion.Transition;
+
+type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
+    /** KeyDown handler from useSearchKeyboard. */
+    onKeyDown: (e: React$1.KeyboardEvent) => void;
+    /** Currently highlighted suggestion index (-1 = none). */
+    activeIndex: number;
+};
+/**
+ * SearchBar — collapsed state of the MD3 Search component.
+ *
+ * Uses Framer Motion `layout` + shared `layoutId` to morph into
+ * SearchView when active. Wrapped in AnimatePresence with mode="popLayout"
+ * so it exits (fades/scales out) before SearchView claims the layoutId.
+ */
+declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
+    onKeyDown: (e: React$1.KeyboardEvent) => void;
+    activeIndex: number;
+};
+declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file search-view-fullscreen.tsx
+ * MD3 Expressive SearchView — FullScreen variant.
+ *
+ * Renders a full-screen overlay via React Portal.
+ * Using Portal avoids z-index stacking context issues and ensures
+ * the overlay always covers the entire viewport correctly.
+ *
+ * Animation (Option B — MD3 morphing):
+ * - Shares `layoutId` with SearchBar. After SearchBar exits via its own
+ *   AnimatePresence (mode="popLayout"), this view claims the layoutId and
+ *   Framer Motion morphs the pill shape → full-screen rect (CornerFull → CornerNone).
+ * - mode="popLayout" on this AnimatePresence enables SearchBar to re-enter
+ *   after this view exits.
+ * - Focus: double-rAF pattern syncs focus with layout animation frame.
+ *
+ * Header height: 72dp per SearchViewTokens.FullScreenHeaderContainerHeight.
+ * ESC key closes the view (handled by useSearchKeyboard).
+ */
+
+type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
+    onKeyDown: (e: React$1.KeyboardEvent) => void;
+    activeIndex: number;
+};
+/**
+ * SearchView FullScreen — full-screen overlay via React Portal.
+ *
+ * The `layoutId` shared with SearchBar enables Framer Motion to animate
+ * the shape morphing from the pill (rounded-full) to a full-screen rect.
+ *
+ * Contained style: no divider, background preserved.
+ * Divided style: HorizontalDivider between header and results.
+ */
+declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React$1.ReactPortal | null;
+
+/**
+ * @file tabs.types.ts
+ * MD3 Expressive Tabs — TypeScript prop definitions.
+ * Spec: https://m3.material.io/components/tabs/overview
+ */
+
+/** Visual variant: primary (content-width indicator) or secondary (full-width indicator + divider). */
+type TabsVariant = "primary" | "secondary";
+/**
+ * Props for the `<Tabs>` root component.
+ *
+ * Supports both controlled (`value` + `onValueChange`) and
+ * uncontrolled (`defaultValue`) usage patterns.
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
+ *
+ * // Uncontrolled
+ * <Tabs defaultValue="flights">...</Tabs>
+ *
+ * // Auto-activate (focus = select)
+ * <Tabs defaultValue="flights" autoActivate>...</Tabs>
+ * ```
+ */
+interface TabsProps {
+    /** Controlled selected value. Use with `onValueChange`. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called when the selected tab changes. */
+    onValueChange?: (value: string) => void;
+    /**
+     * When true, ArrowKey navigation also selects the focused tab immediately.
+     * Mirrors Google's `auto-activate` attribute on `<md-tabs>`.
+     * @default false
+     */
+    autoActivate?: boolean;
+    /** Tab compound components as children. */
+    children: React$1.ReactNode;
+    /** Additional CSS class names for the root wrapper. */
+    className?: string;
+}
+/**
+ * Props for the `<TabsList>` container component.
+ *
+ * @example
+ * ```tsx
+ * <TabsList variant="primary" scrollable={false}>
+ *   <Tab value="tab1">Tab 1</Tab>
+ * </TabsList>
+ * ```
+ */
+interface TabsListProps {
+    /** Visual style variant. @required */
+    variant: TabsVariant;
+    /**
+     * When true, tabs scroll horizontally with 52px edge padding (MD3 spec).
+     * When false, tabs divide the available width equally (flex-1).
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Background color override for the tab bar.
+     * @default "var(--md-sys-color-surface)"
+     */
+    backgroundColor?: string;
+    /** Tab components as children. */
+    children: React$1.ReactNode;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Forwarded aria-label for the tablist. */
+    "aria-label"?: string;
+}
+/**
+ * Props for an individual `<Tab>` component.
+ *
+ * @example
+ * ```tsx
+ * <Tab value="flights" icon={<Icon name="flight" />}>Flights</Tab>
+ * <Tab value="trips" disabled>Trips</Tab>
+ * <Tab value="hotels" icon={<Icon name="hotel" />} inlineIcon>Hotels</Tab>
+ * ```
+ */
+interface TabProps {
+    /** Unique value identifying this tab. Must match a `<TabsContent value>`. */
+    value: string;
+    /**
+     * Optional icon rendered with the label text.
+     * - Default (stacked): icon above label, height increases to 64dp.
+     * - With `inlineIcon`: icon beside label (same row), height stays 48dp.
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * When true, icon is placed inline (same row) with the label text.
+     * Container height stays at 48dp (does NOT increase to 64dp).
+     * Mirrors the `inline-icon` attribute on `<md-primary-tab>`.
+     * @default false
+     */
+    inlineIcon?: boolean;
+    /**
+     * When true, disables interaction.
+     * Disabled tabs are skipped entirely in keyboard navigation (ArrowKey).
+     */
+    disabled?: boolean;
+    /** Additional CSS class names. */
+    className?: string;
+    /**
+     * Optional badge element overlaid on the tab content.
+     * Handled via `BadgedBox`:
+     * - Stacked icon: Overlaps icon's top-trailing corner.
+     * - Inline/Text-only: Placed next to the text.
+     */
+    badge?: React$1.ReactNode;
+    /** Label text rendered inside the tab. */
+    children: React$1.ReactNode;
+}
+/**
+ * Props for the `<TabsContent>` panel component.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="flights">Flight content here</TabsContent>
+ * ```
+ */
+interface TabsContentProps {
+    /** Must match the `value` of a sibling `<Tab>`. */
+    value: string;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Panel content. */
+    children: React$1.ReactNode;
+}
+
+/**
+ * @file tab.tsx
+ * MD3 Expressive Tab — Individual tab button with Framer Motion indicator.
+ *
+ * Design decisions:
+ * 1. PRIMARY indicator nested inside content wrapper → width = content width (not full button).
+ * 2. SECONDARY indicator outside content wrapper → `inset-x-0` = full button width.
+ * 3. ROVING TABINDEX (WAI-ARIA): only focused tab has tabIndex=0; ArrowKey moves focus, Enter/Space selects.
+ * 4. DISABLED tabs are skipped in ArrowKey navigation.
+ * 5. RTL: ArrowLeft/Right directions are swapped when `direction: rtl` is detected.
+ * 6. INLINE ICON: icon beside label, height stays 48dp (stacked = 64dp).
+ * 7. AUTO-ACTIVATE: when parent `<Tabs autoActivate>`, ArrowKey also selects.
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+
+/**
+ * MD3 Expressive Tab component — individual tab button.
+ *
+ * Must be a direct child of `<TabsList>`. Implements WAI-ARIA Tabs pattern
+ * with roving tabindex keyboard navigation.
+ *
+ * - **Primary variant**: indicator width = content (text + icon) width.
+ * - **Secondary variant**: indicator width = full button hit area.
+ * - **Disabled**: Skipped entirely in ArrowKey navigation (cannot be focused).
+ * - **inlineIcon**: Icon beside (not above) label; height stays 48dp.
+ * - Framer Motion `layoutId` animates indicator with spring physics.
+ * - ArrowLeft/Right respect RTL direction automatically.
+ *
+ * @example
+ * ```tsx
+ * <Tab value="flights" icon={<Icon name="flight" />}>Flights</Tab>
+ * <Tab value="trips">Trips</Tab>
+ * <Tab value="explore" disabled>Explore</Tab>
+ * <Tab value="hotels" icon={<Icon name="hotel" />} inlineIcon>Hotels</Tab>
+ * ```
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+declare const Tab: React$1.NamedExoticComponent<TabProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * @file tabs.tsx
+ * MD3 Expressive Tabs — Root context provider and state manager.
+ * Implements compound component pattern (similar to Radix UI).
+ * Spec: https://m3.material.io/components/tabs/overview
+ */
+
+/**
+ * MD3 Expressive Tabs root component.
+ *
+ * Manages tab selection state and provides context to all
+ * compound sub-components. Supports both controlled and
+ * uncontrolled usage.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Tabs defaultValue="flights">
+ *   <TabsList variant="primary">
+ *     <Tab value="flights">Flights</Tab>
+ *     <Tab value="trips">Trips</Tab>
+ *   </TabsList>
+ *   <TabsContent value="flights">Flight content</TabsContent>
+ *   <TabsContent value="trips">Trip content</TabsContent>
+ * </Tabs>
+ *
+ * // Controlled
+ * const [tab, setTab] = useState("flights");
+ * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
+ *
+ * // Auto-activate mode (focus = select)
+ * <Tabs defaultValue="flights" autoActivate>...</Tabs>
+ * ```
+ *
+ * @see https://m3.material.io/components/tabs/overview
+ */
+declare const Tabs: React$1.NamedExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file tabs.tokens.ts
+ * MD3 Expressive Tabs — Design tokens ported from:
+ *   - PrimaryNavigationTabTokens.kt (v0_162)
+ *   - SecondaryNavigationTabTokens.kt (v0_162)
+ *
+ * All dimensional values are in px (dp equivalent for web).
+ * @see docs/m3/tabs/PrimaryNavigationTabTokens.kt
+ * @see docs/m3/tabs/SecondaryNavigationTabTokens.kt
+ */
+/**
+ * Dimensional design tokens for the MD3 Tabs component.
+ *
+ * Maps directly from the `.kt` token files to CSS/JS values.
+ * Use as the single source of truth for sizing.
+ */
+declare const TabsTokens: {
+    /** ContainerHeight = 48dp (text-only tab) */
+    readonly containerHeight: 48;
+    /** IconAndLabelTextContainerHeight = 64dp (tab with icon + label stacked) */
+    readonly containerHeightWithIcon: 64;
+    /** ActiveIndicatorHeight (Primary) = 3dp */
+    readonly primaryIndicatorHeight: 3;
+    /** ActiveIndicatorHeight (Secondary) = 2dp */
+    readonly secondaryIndicatorHeight: 2;
+    /**
+     * ActiveIndicatorShape = 3dp top-left and top-right (per MD3 token, not a full pill).
+     * Google reference: `var(--_active-indicator-shape)` resolves to `3px 3px 0 0` effectively.
+     */
+    readonly indicatorBorderRadius: "3px 3px 0 0";
+    /** IconSize = 24dp */
+    readonly iconSize: 24;
+    /**
+     * Edge start/end padding for scrollable mode = 52px.
+     * Per MD3 spec: tabs have padding on both leading and trailing edges.
+     */
+    readonly scrollableEdgePadding: 52;
+    /** Minimum tab width in scrollable mode = 90px. */
+    readonly scrollableMinTabWidth: 90;
+    /** DividerHeight = 1dp */
+    readonly dividerHeight: 1;
+    /**
+     * Focus ring border-radius = 8px.
+     * Google reference: `focus-ring.theme({ shape: 8px })` in _tab.scss.
+     */
+    readonly focusRingBorderRadius: 8;
+};
+/**
+ * CSS custom property references for Tabs colors.
+ * Maps to `--md-sys-color-*` tokens in the MD3 theme system.
+ *
+ * DO NOT hardcode hex values — use these references for automatic
+ * light/dark theme adaptation.
+ */
+declare const TabsColors: {
+    /** Primary: ActiveLabelTextColor / ActiveIconColor = Primary */
+    readonly primaryActiveText: "var(--md-sys-color-primary)";
+    /** Primary: InactiveLabelTextColor / InactiveIconColor = OnSurfaceVariant */
+    readonly primaryInactiveText: "var(--md-sys-color-on-surface-variant)";
+    /** Primary: ActiveIndicatorColor = Primary */
+    readonly primaryIndicator: "var(--md-sys-color-primary)";
+    /** Secondary: ActiveLabelTextColor / ActiveIconColor = OnSurface */
+    readonly secondaryActiveText: "var(--md-sys-color-on-surface)";
+    /** Secondary: InactiveLabelTextColor / InactiveIconColor = OnSurfaceVariant */
+    readonly secondaryInactiveText: "var(--md-sys-color-on-surface-variant)";
+    /** Secondary: Indicator color = Primary (same as primary variant) */
+    readonly secondaryIndicator: "var(--md-sys-color-primary)";
+    /** Secondary: DividerColor = SurfaceVariant */
+    readonly divider: "var(--md-sys-color-surface-variant)";
+    /** ContainerColor = Surface */
+    readonly container: "var(--md-sys-color-surface)";
+    /** Focus ring indicator = Secondary */
+    readonly focusIndicator: "var(--md-sys-color-secondary)";
+    /** Hover state layer (primary active) */
+    readonly primaryActiveHover: "var(--md-sys-color-primary)";
+    /** Hover state layer (inactive, both variants) */
+    readonly inactiveHover: "var(--md-sys-color-on-surface)";
+};
+
+/**
+ * @file tabs-content.tsx
+ * MD3 Expressive TabsContent — Animated panel component.
+ *
+ * Implements WAI-ARIA tabpanel role with:
+ * - AnimatePresence for fade transition on tab switch
+ * - Proper aria-labelledby pointing to the associated <Tab>
+ * - tabIndex=0 so keyboard users can Tab from the tablist into the panel
+ * - Hidden panels are removed from the DOM (not just visually hidden)
+ *   to prevent screen readers from reading inactive content
+ */
+
+/**
+ * MD3 Expressive TabsContent panel component.
+ *
+ * Each panel corresponds to a `<Tab>` with the same `value`.
+ * Only the active panel is rendered in the DOM — inactive panels
+ * are fully unmounted (not `display: none`) to prevent screen readers
+ * from reading hidden content.
+ *
+ * Fade animation is applied on both enter and exit via Framer Motion
+ * `AnimatePresence`. We use `mode="popLayout"` to prevent height layout shifting
+ * during tab transitions. Animation is automatically disabled when the user
+ * has enabled `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="flights">
+ *   <p>Available flights...</p>
+ * </TabsContent>
+ * ```
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+declare const TabsContent: React$1.NamedExoticComponent<TabsContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file tabs-list.tsx
+ * MD3 Expressive TabsList — Container component for tab buttons.
+ *
+ * Responsibilities:
+ * - Applies variant (primary/secondary) layout and styling
+ * - Manages horizontal scroll for scrollable mode (52px edge padding per MD3)
+ * - Renders the bottom divider for secondary variant
+ * - Scopes Framer Motion LayoutGroup so indicators animate correctly
+ *   when multiple <Tabs> instances are on the same page
+ * - Restores focus to activeTab when keyboard focus leaves the tablist
+ *   (matches Google's `focusout` handler on <md-tabs>)
+ */
+
+/**
+ * MD3 Expressive TabsList container component.
+ *
+ * Renders a horizontal row of `<Tab>` components with MD3-compliant
+ * layout (fixed or scrollable) and variant styling (primary or secondary).
+ *
+ * - **Primary**: Tabs divide available width equally, indicator width = content width.
+ * - **Secondary**: Tabs divide equally + full-width indicator + bottom divider line.
+ * - **Scrollable**: Tabs have min-width (90px), scroll horizontally with 52px edge padding.
+ * - **Focusout**: When focus leaves the tablist, roving focus resets to the active tab.
+ *
+ * @example
+ * ```tsx
+ * <TabsList variant="primary" scrollable={false}>
+ *   <Tab value="tab1">Tab 1</Tab>
+ *   <Tab value="tab2">Tab 2</Tab>
+ * </TabsList>
+ *
+ * <TabsList variant="secondary" scrollable={true} aria-label="Content sections">
+ *   <Tab value="a">Alpha</Tab>
+ *   <Tab value="b">Beta</Tab>
+ * </TabsList>
+ * ```
+ */
+declare const TabsList: React$1.NamedExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Color configuration types and standard values for the FloatingToolbar component.
+ * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS.
+ */
+interface FloatingToolbarColors {
+    /** The background color of the toolbar container */
+    toolbarContainerColor?: string;
+    /** The color of the content (icons, text) inside the toolbar */
+    toolbarContentColor?: string;
+    /** The background color of the FAB container */
+    fabContainerColor?: string;
+    /** The color of the content inside the FAB */
+    fabContentColor?: string;
+}
+/**
+ * Standard color configuration for the floating toolbar.
+ * Uses surface container for the toolbar and secondary container for the FAB.
+ */
+declare const standardFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Vibrant color configuration for the floating toolbar.
+ * Uses primary container for the toolbar and tertiary container for the FAB.
+ */
+declare const vibrantFloatingToolbarColors: FloatingToolbarColors;
+
+interface BottomDockedToolbarProps {
+    /** Color variant: standard or vibrant */
+    variant?: "standard" | "vibrant";
+    /** Custom colors override */
+    colors?: FloatingToolbarColors;
+    /** Whether to hide on scroll */
+    hideOnScroll?: boolean;
+    /** Scroll container ref for scroll behavior (if empty, uses window scroll) */
+    scrollContainerRef?: React$1.RefObject<HTMLElement | null>;
+    /** Start content (left-aligned) */
+    startContent?: React$1.ReactNode;
+    /** End content (right-aligned) */
+    endContent?: React$1.ReactNode;
+    /** Center content */
+    children?: React$1.ReactNode;
+    /**
+     * Horizontal padding (px) applied to the toolbar container.
+     * MD3 spec requires a minimum of 16dp on leading and trailing edges.
+     * @default 16
+     */
+    paddingX?: number;
+    /**
+     * Layout distribution of toolbar content.
+     * - `"between"` – leading/center/trailing spread across full width (default, compact screens).
+     * - `"center"` – all content centered; ideal for medium+ screen widths.
+     * - `"end-weighted"` – key action is centered while others are pushed to the edges.
+     * @default "between"
+     */
+    justify?: "between" | "center" | "end-weighted";
+    /**
+     * Container shape.
+     * - `"none"` – straight corners (MD3 default for mobile docked toolbars).
+     * - `"large"` – large rounded corners (recommended for web / large screens).
+     * - `"full"` – fully pill-shaped.
+     *
+     * MD3 guideline: *"On web and large screens, the docked toolbar can be rounded."*
+     * @default "none"
+     */
+    shape?: "none" | "large" | "full";
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * A full-width docked toolbar typically fixed at the bottom of the screen.
+ * Replaces the deprecated Bottom App Bar in MD3 Expressive.
+ *
+ * @example
+ * ```tsx
+ * <BottomDockedToolbar hideOnScroll startContent={<IconButton aria-label="Menu"><Icon name="menu" /></IconButton>}>
+ *   <div className="flex gap-2">
+ *     <IconButton aria-label="Search"><Icon name="search" /></IconButton>
+ *     <IconButton aria-label="Edit"><Icon name="edit" /></IconButton>
+ *   </div>
+ * </BottomDockedToolbar>
+ * ```
+ */
+declare const BottomDockedToolbar: React$1.ForwardRefExoticComponent<BottomDockedToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Configuration options for the `useFloatingToolbarScrollBehavior` hook.
+ */
+interface UseFloatingToolbarScrollBehaviorOptions {
+    /** Direction toolbar exits: 'top' | 'bottom' | 'start' | 'end'. Defaults to 'bottom'. */
+    exitDirection?: "top" | "bottom" | "start" | "end";
+    /** Scroll distance threshold to trigger collapse (in px). Defaults to 10. */
+    collapseThreshold?: number;
+    /** Scroll distance threshold to trigger expand (in px). Defaults to 10. */
+    expandThreshold?: number;
+    /** Optional ref to a scrollable container. If not provided, it listens to window scroll. */
+    scrollContainerRef?: RefObject<HTMLElement | null>;
+}
+/**
+ * The resulting behavior object returned by `useFloatingToolbarScrollBehavior`.
+ */
+interface FloatingToolbarScrollBehavior {
+    /** Current offset. 0 is fully visible, -1 is fully hidden. */
+    offset: number;
+    /** Whether the toolbar is currently expanded. */
+    isExpanded: boolean;
+    /** Optional scroll handler to bind to a React scrollable container (legacy fallback). */
+    onScroll?: (event: React.UIEvent<HTMLElement>) => void;
+    /** Manually update the expanded state of the toolbar. */
+    setExpanded: (expanded: boolean) => void;
+    /** The configured exit direction. */
+    exitDirection: "top" | "bottom" | "start" | "end";
+}
+/**
+ * A hook that provides scroll behavior for floating toolbars, allowing them to
+ * collapse (exit) when scrolling down and expand (enter) when scrolling up.
+ * Leverages Framer Motion's useScroll internally for optimized performance.
+ *
+ * @param options Configuration options for scroll behavior.
+ * @returns An object containing the current scroll state and handlers.
+ *
+ * @example
+ * ```tsx
+ * const scrollBehavior = useFloatingToolbarScrollBehavior({
+ *   exitDirection: 'bottom',
+ *   collapseThreshold: 20
+ * });
+ *
+ * <HorizontalFloatingToolbar scrollBehavior={scrollBehavior}>
+ *   <IconButton icon="bold" />
+ * </HorizontalFloatingToolbar>
+ * ```
+ */
+declare function useFloatingToolbarScrollBehavior(options?: UseFloatingToolbarScrollBehaviorOptions): FloatingToolbarScrollBehavior;
+
+interface FloatingToolbarProps {
+    /** Whether the toolbar is expanded, showing startContent and endContent */
+    expanded: boolean;
+    /** Orientation of the toolbar */
+    orientation?: "horizontal" | "vertical";
+    /** Color configuration */
+    colors?: FloatingToolbarColors;
+    /** Shape variant: full = pill shape (default), large = large rounded */
+    shape?: "full" | "large";
+    /** Padding inside toolbar container */
+    contentPadding?: React$1.CSSProperties | string;
+    /** Scroll behavior hook result */
+    scrollBehavior?: FloatingToolbarScrollBehavior;
+    /** Start content (shown when expanded, usually on the left/top) */
+    startContent?: React$1.ReactNode;
+    /** End content (shown when expanded, usually on the right/bottom) */
+    endContent?: React$1.ReactNode;
+    /** Main toolbar content (always visible) */
+    children: React$1.ReactNode;
+    /** Whether to disable the internal scroll translation (useful when parent handles it) */
+    disableScrollTranslation?: boolean;
+    /** Whether to disable layout animation (useful when nested inside FloatingToolbarWithFab) */
+    disableLayoutAnimation?: boolean;
+    /**
+     * Gap (px) between items in the center children slot.
+     * Corresponds to MD3 `ContainerBetweenSpace` token (4dp default).
+     * @default 4
+     */
+    itemGap?: number;
+    /** Alignment (justify-content) of the center children slot */
+    childrenAlignment?: "start" | "center" | "end";
+    /** Custom CSS class applied to each child item in the toolbar slots */
+    itemClassName?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    "aria-label"?: string;
+}
+/**
+ * A horizontal floating toolbar that displays navigation and key actions.
+ * It can be positioned anywhere on the screen and floats over the rest of the content.
+ *
+ * @example
+ * ```tsx
+ * const [expanded, setExpanded] = useState(true);
+ * const scrollBehavior = useFloatingToolbarScrollBehavior({ exitDirection: 'bottom' });
+ *
+ * <HorizontalFloatingToolbar
+ *   expanded={expanded}
+ *   scrollBehavior={scrollBehavior}
+ *   startContent={<IconButton icon="undo" />}
+ *   endContent={<IconButton icon="redo" />}
+ * >
+ *   <IconButton icon="bold" />
+ *   <IconButton icon="italic" />
+ * </HorizontalFloatingToolbar>
+ * ```
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines
+ */
+declare const HorizontalFloatingToolbar: React$1.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "orientation"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A vertical floating toolbar that displays navigation and key actions.
+ * It floats over the rest of the content.
+ *
+ * @example
+ * ```tsx
+ * <VerticalFloatingToolbar expanded={true}>
+ *   <IconButton icon="bold" />
+ * </VerticalFloatingToolbar>
+ * ```
+ */
+declare const VerticalFloatingToolbar: React$1.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "orientation"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface FloatingToolbarWithFabProps extends FloatingToolbarProps {
+    /** FAB element (use FAB component or custom node) */
+    floatingActionButton: React$1.ReactNode;
+    /** FAB position for horizontal: 'start' | 'end'. For vertical: 'top' | 'bottom' */
+    fabPosition?: "start" | "end" | "top" | "bottom";
+    /** Animation duration override */
+    animationDuration?: number;
+    /** Start content (explicitly declared to resolve type issues) */
+    startContent?: React$1.ReactNode;
+    /** End content (explicitly declared to resolve type issues) */
+    endContent?: React$1.ReactNode;
+    /**
+     * Size of the FAB container.
+     * - `"default"` → 56×56px (`FabBaselineTokens.ContainerHeight`)
+     * - `"medium"` → 80×80px (`FabBaselineTokens.MediumContainerHeight`)
+     *
+     * MD3: pair a medium FAB with the toolbar to give it greater visual prominence.
+     * @default "default"
+     */
+    fabSize?: "default" | "medium";
+}
+/**
+ * A horizontal floating toolbar paired with a FAB.
+ */
+declare const HorizontalFloatingToolbarWithFab: React$1.ForwardRefExoticComponent<FloatingToolbarWithFabProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A vertical floating toolbar paired with a FAB.
+ */
+declare const VerticalFloatingToolbarWithFab: React$1.ForwardRefExoticComponent<FloatingToolbarWithFabProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file toolbar-divider.tsx
+ *
+ * A decorative divider for use inside MD3 Toolbar components.
+ * Renders as a thin line that visually separates groups of toolbar actions.
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots)
+ */
+
+interface ToolbarDividerProps {
+    /**
+     * The toolbar's orientation context.
+     * - `"horizontal"` toolbar → renders a **vertical** divider line.
+     * - `"vertical"` toolbar → renders a **horizontal** divider line.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+/**
+ * A thin decorative separator for grouping actions inside a Toolbar.
+ *
+ * Inherits its color from the toolbar's `--toolbar-color` CSS variable via
+ * `currentColor`, so it automatically adapts to both standard and vibrant
+ * color configurations.
+ *
+ * @example
+ * ```tsx
+ * <HorizontalFloatingToolbar expanded={true}>
+ *   <IconButton aria-label="Bold"><BoldIcon /></IconButton>
+ *   <IconButton aria-label="Italic"><ItalicIcon /></IconButton>
+ *   <ToolbarDivider />
+ *   <IconButton aria-label="Align left"><AlignLeftIcon /></IconButton>
+ * </HorizontalFloatingToolbar>
+ * ```
+ */
+declare const ToolbarDivider: React$1.FC<ToolbarDividerProps>;
+
+/**
+ * @file toolbar-icon-button.tsx
+ *
+ * A thin wrapper around the MD3 `IconButton` component, pre-configured
+ * for use inside Toolbar slots.
+ *
+ * Supports the three emphasis variants described in the MD3 Flexibility & slots
+ * spec, plus narrow/wide sizing for asymmetric visual hierarchy.
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots)
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+
+interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle" | "size" | "shape"> {
+    /**
+     * Visual emphasis variant.
+     *
+     * ⚠️ Avoid emphasising more than one action at a time.
+     * @default "standard"
+     */
+    emphasis?: ToolbarIconButtonVariant;
+    /**
+     * Button width sizing.
+     *
+     * Height is always `48px` to meet MD3 touch-target requirements.
+     * @default "default"
+     */
+    toolbarSize?: ToolbarIconButtonSize;
+    /** Icon content — typically a single SVG icon component. */
+    children: React$1.ReactNode;
+    /**
+     * Accessible label — **REQUIRED** because icon buttons have no visible text.
+     */
+    "aria-label": string;
+}
+/**
+ * Width sizing for a toolbar icon button.
+ *
+ * MD3 guideline: *"Use wide and narrow icon buttons"* to create visual hierarchy.
+ * Touch-target height is always 48dp regardless of width.
+ *
+ * - `narrow` → 40px wide (secondary, de-emphasised)
+ * - `default` → 48px wide (standard square touch target)
+ * - `wide` → 64px wide (primary emphasis, draws eye)
+ */
+type ToolbarIconButtonSize = "narrow" | "default" | "wide";
+/**
+ * Visual emphasis variant for a toolbar icon button.
+ *
+ * MD3 guideline: *"Use different icon button color styles, such as filled,
+ * tonal, and standard."*
+ *
+ * ⚠️ **Avoid emphasising more than one action at a time.**
+ * Use `"filled"` or `"tonal"` for the single highest-priority action and
+ * keep all other buttons as `"standard"`.
+ */
+type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
+/**
+ * An MD3 icon button optimised for use inside Toolbar slots.
+ *
+ * Wraps the project's `IconButton` and adds:
+ * - Three emphasis styles (`standard`, `tonal`, `filled`) via `emphasis` prop.
+ * - Three width sizes (`narrow`, `default`, `wide`) for visual hierarchy.
+ * - Always `rounded-full` shape (required for floating toolbars per MD3 spec).
+ * - Always 48dp height to meet MD3 accessibility touch-target requirements.
+ *
+ * @example
+ * ```tsx
+ * // Standard (default) — use for most actions
+ * <ToolbarIconButton aria-label="Share">
+ *   <ShareIcon />
+ * </ToolbarIconButton>
+ *
+ * // Filled + wide — use for the single highest-priority action
+ * <ToolbarIconButton emphasis="filled" toolbarSize="wide" aria-label="Add">
+ *   <PlusIcon />
+ * </ToolbarIconButton>
+ * ```
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines
+ */
+declare const ToolbarIconButton: React$1.ForwardRefExoticComponent<Omit<ToolbarIconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Design tokens for the ToolbarDivider component.
+ * The divider is a decorative separator used to group toolbar actions.
+ */
+declare const ToolbarDividerTokens: {
+    /** Divider line thickness in px */
+    readonly Thickness: 1;
+    /** Divider size as a fraction of the toolbar container dimension */
+    readonly HeightRatio: 0.5;
+};
+/**
+ * Design tokens for the ToolbarIconButton component.
+ * Sizes follow MD3 Expressive touch-target minimums (48dp height always).
+ * - narrow: de-emphasised secondary actions
+ * - default: standard icon button
+ * - wide: primary action emphasis inside the toolbar
+ */
+declare const ToolbarIconButtonTokens: {
+    readonly NarrowWidth: 40;
+    readonly DefaultWidth: 48;
+    readonly WideWidth: 64;
+    /** Minimum touch-target height per MD3 accessibility guidelines */
+    readonly Height: 48;
+    /** Icon size in dp — larger than standard 24dp to fill the 48dp button properly */
+    readonly IconSize: 28;
+};
+
+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, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, standardFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors };