@bug-on/md3-react 2.0.1 → 2.0.3

package/dist/ui/app-bar/app-bar-column.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file app-bar-column.tsx
+ * MD3 Expressive App Bar Column DSL.
+ *
+ * Displays App Bar action items in a vertical column.
+ * Overflow items collapse into a dropdown menu.
+ *
+ * @see docs/m3/app-bars/AppBarColumn.kt
+ */
+import type { AppBarColumnProps } from "./app-bar.types";
+/**
+ * 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 },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function AppBarColumn({ items, maxItemCount, className, }: AppBarColumnProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/app-bar/app-bar-item-button.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file app-bar-item-button.tsx
+ * Shared icon button renderer for AppBarRow and AppBarColumn items.
+ *
+ * Extracted from duplicate RowItem/ColumnItem implementations.
+ */
+import type { AppBarItem } from "./app-bar.types";
+interface AppBarItemButtonProps {
+    item: AppBarItem;
+}
+/**
+ * Renders a single App Bar action item as an icon button.
+ * Handles clickable, toggleable, and custom item types.
+ */
+export declare function AppBarItemButton({ item }: AppBarItemButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/app-bar/app-bar-overflow-indicator.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file app-bar-overflow-indicator.tsx
+ * MD3 Expressive App Bar Overflow Indicator.
+ *
+ * Renders a "More" (more_vert) icon button that opens a Radix UI
+ * DropdownMenu containing overflow App Bar items.
+ *
+ * Used internally by <AppBarRow> and <AppBarColumn> when items exceed
+ * the visible count.
+ */
+import type { AppBarOverflowIndicatorProps } from "./app-bar.types";
+/**
+ * MD3 App Bar Overflow Indicator.
+ *
+ * Renders a "more_vert" button that opens a dropdown menu
+ * with overflow action items.
+ */
+export declare function AppBarOverflowIndicator({ items, className, }: AppBarOverflowIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/app-bar/app-bar-row.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file app-bar-row.tsx
+ * MD3 Expressive App Bar Row DSL.
+ *
+ * Displays App Bar action items in a horizontal row.
+ * Items that exceed `maxItemCount` or available width collapse into a
+ * dropdown menu via <AppBarOverflowIndicator>.
+ *
+ * Translated from OverflowMeasurePolicy / AppBarRow.kt in Jetpack Compose M3.
+ *
+ * @see docs/m3/app-bars/AppBarRow.kt
+ */
+import type { AppBarRowProps } from "./app-bar.types";
+/**
+ * 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 },
+ *       ]}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+export declare function AppBarRow({ items, maxItemCount, className }: AppBarRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/app-bar/app-bar.tokens.d.ts

@@ -0,0 +1,184 @@
+/**
+ * @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.
+ */
+export 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.
+ */
+export 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
+ */
+export 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.
+ */
+export 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.
+ */
+export declare const APP_BAR_ENTER_ALWAYS_SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 380;
+    readonly damping: 40;
+    readonly mass: 1;
+};
+/**
+ * Spring animation for Bottom App Bar hide/show.
+ * Slightly looser feel for bottom navigation.
+ */
+export declare const APP_BAR_BOTTOM_SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 300;
+    readonly damping: 30;
+};
+/**
+ * SearchView appearance/disappearance transition.
+ * Uses spring for natural feel of expanding overlay.
+ */
+export declare const SEARCH_VIEW_SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 400;
+    readonly damping: 35;
+};
+/**
+ * Title crossfade transition for flexible App Bars.
+ * Short duration keeps the collapse feeling snappy.
+ */
+export declare const APP_BAR_TITLE_FADE: {
+    readonly duration: 0.15;
+    readonly ease: "easeInOut";
+};

package/dist/ui/app-bar/app-bar.types.d.ts

@@ -0,0 +1,392 @@
+/**
+ * @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.
+ */
+import type * as React from "react";
+/**
+ * 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.
+ */
+export type AppBarScrollBehavior = "pinned" | "enterAlways" | "exitUntilCollapsed";
+/** Horizontal alignment of the title (and subtitle) text. */
+export 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.
+ */
+export 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.
+ */
+export interface BaseAppBarProps {
+    /**
+     * Navigation icon slot (typically IconButton with back arrow or hamburger).
+     * Should have `aria-label` for accessibility.
+     */
+    navigationIcon?: React.ReactNode;
+    /**
+     * Action icon slots rendered at the trailing end.
+     * Typically `<IconButton>` components. Use `<AppBarRow>` for overflow support.
+     */
+    actions?: React.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.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).
+ */
+export interface SmallAppBarProps extends BaseAppBarProps {
+    /** The main title content. */
+    title: React.ReactNode;
+    /**
+     * Optional subtitle displayed below the title.
+     * Font: LabelMedium (12sp).
+     */
+    subtitle?: React.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.
+ */
+export interface FlexibleAppBarProps extends BaseAppBarProps {
+    /** The main title content (rendered in both expanded and collapsed states). */
+    title: React.ReactNode;
+    /**
+     * Optional subtitle displayed in the expanded title row.
+     * Affects expanded height (adds extra rows).
+     */
+    subtitle?: React.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.ReactNode;
+}
+/** Visual variant of the search bar. */
+export 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 />}
+ * />
+ * ```
+ */
+export 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.ReactNode;
+    /**
+     * Action icons rendered at the trailing edge of the search bar (inside the pill).
+     * Common examples: mic, camera, QR code.
+     */
+    trailingSearchActions?: React.ReactNode;
+    /**
+     * Action icons rendered outside the search bar (at the trailing edge of the bar).
+     * Common example: profile avatar button.
+     */
+    externalActions?: React.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.
+ */
+export interface BottomAppBarProps {
+    /**
+     * Action icon buttons rendered at the leading end.
+     * Typically 3-4 `<IconButton>` components.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Floating Action Button rendered at the trailing end.
+     * Consumer provides a `<FAB>` or `<FABPosition>` component.
+     */
+    floatingActionButton?: React.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.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.
+ */
+export interface DockedToolbarProps {
+    /** Toolbar content (chips, segmented buttons, filter actions, etc.) */
+    children: React.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. */
+export type AppBarItemType = "clickable" | "toggleable" | "custom";
+/**
+ * State passed to custom overflow menu content renderers.
+ */
+export 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.
+ */
+export interface AppBarItem {
+    /** Type determines which props are required. */
+    type: AppBarItemType;
+    /** Icon displayed in the App Bar (always shown). */
+    icon: React.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.ReactNode;
+    /** Custom content rendered in the overflow dropdown menu. */
+    menuContent?: (state: AppBarMenuState) => React.ReactNode;
+}
+/**
+ * Props for `<AppBarRow>`.
+ *
+ * Displays App Bar items in a horizontal row.
+ * Items that overflow the available width collapse into a dropdown menu.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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>
+ * ```
+ */
+export 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.ReactNode;
+    /** Navigation icon (back arrow) rendered at the leading edge. */
+    leadingIcon?: React.ReactNode;
+    /** Trailing action in the search input (e.g., clear button). */
+    trailingAction?: React.ReactNode;
+    /** Additional CSS class applied to the overlay container. */
+    className?: string;
+}
+/**
+ * Return type for `useAppBarScroll`.
+ * @internal
+ */
+export 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;
+}