import * as react_jsx_runtime from 'react/jsx-runtime'; import * as React$1 from 'react'; import { RefObject } from 'react'; import * as motion from 'motion'; import * as RxContextMenu from '@radix-ui/react-context-menu'; import { a as ContextMenuProps, C as ContextMenuContentProps, b as ContextMenuTriggerProps, j as MenuProps, c as MenuContentProps, k as MenuTriggerProps, l as MenuVariant, M as MenuColorVariant, q as MenuDensity, i as MenuPrimitive, d as MenuDividerProps, f as MenuGroupProps, h as MenuItemProps, S as SubMenuProps, o as VerticalMenuProps, V as VerticalMenuContentProps, m as VerticalMenuDividerProps } from './menu-types-rZNQFO7Y.mjs'; export { e as MenuGroupPosition, g as MenuItemPosition, n as VerticalMenuGroupProps, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { Transition, Variants, HTMLMotionProps } from 'motion/react'; import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.mjs'; import { d as MD3SlotWidth } from './md3-BQhRygSi.mjs'; import { B as BaseIconButtonProps } from './icon-button-CxyJv7UV.mjs'; /** * @file fading-blur-mask.types.ts * Fading Edge & Backdrop Blur Mask — TypeScript interfaces. */ /** Gradient fade direction for the blur mask. */ type FadingBlurDirection = "top" | "bottom" | "both"; /** * Props for the primitive `` component. */ interface FadingBlurMaskProps { /** * Gradient fade direction. * - `top`: Fades from opaque at top to transparent downward (for Top App Bars). * - `bottom`: Fades from opaque at bottom to transparent upward (for Bottom App Bars). * - `both`: Fades at both top and bottom edges. * @default "top" */ direction?: FadingBlurDirection; /** * Backdrop blur radius in pixels. * @default 12 */ blurIntensity?: number; /** * Height/length of the fade mask container or gradient zone. * Can be a CSS string (e.g., "100%", "64px") or pixel number. * @default "100%" */ blurHeight?: number | string; /** * Tint or background color overlay mixed into the blur. * Defaults to MD3 surface token `var(--md-sys-color-surface)`. */ color?: string; /** Additional CSS class names for styling. */ className?: string; /** Custom inline styles. */ style?: React$1.CSSProperties; /** Children components rendered inside the blur mask container if needed. */ children?: React$1.ReactNode; } /** * Mixin interface for components that integrate Fading Blur functionality (e.g. AppBars). */ interface FadingBlurProps { /** * Enables smooth fading edge and backdrop blur effect. * @default false */ enableFadingBlur?: boolean; /** * Custom blur intensity in pixels when `enableFadingBlur` is active. * @default 12 */ blurIntensity?: number; /** * Custom blur height when `enableFadingBlur` is active. * Defaults to container height. */ blurHeight?: number | string; } /** * `` component renders a smooth gradient fading backdrop blur overlay. * * @example * ```tsx * * ``` */ declare function FadingBlurMask({ direction, blurIntensity, blurHeight, color, className, style, children, }: FadingBlurMaskProps): react_jsx_runtime.JSX.Element; /** * @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 extends FadingBlurProps { /** * 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 `` components. Use `` 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; /** Additional CSS class applied to the root header element. */ className?: string; } /** * Props for ``. * * 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 `` and ``. * * 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 ``. * * Replaces the title with a pill-shaped search input bar. * New variant in MD3 Expressive (May 2025). * * @example * ```tsx * setSearchViewOpen(true)} * trailingSearchActions={...} * externalActions={} * /> * ``` */ 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 `` 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 ``. * Must be unique if multiple SearchAppBars are on the page. * @default "search-bar" */ searchBarId?: string; /** * Height of the search bar pill in px. * MD3 spec: 56dp. Override for compact layouts. * @default 56 */ searchBarHeight?: number; } /** * Props for ``. * * Fixed to the bottom of the screen. Contains navigation actions and optional FAB. * Height: 80px. Background: `surface-container`. Elevation: Level2. */ interface BottomAppBarProps extends FadingBlurProps { /** * Action icon buttons rendered at the leading end. * Typically 3-4 `` components. */ actions?: React$1.ReactNode; /** * Floating Action Button rendered at the trailing end. * Consumer provides a `` or `` 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; /** Additional CSS class applied to the root nav element. */ className?: string; } /** * Props for ``. * * 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 `` or ``. * 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 ``. * * 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 ``. * * 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 ``. * * 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 ``. * * Full-screen overlay shown when the search bar is activated. * Designed to share a Framer Motion `layoutId` with the `` * search bar for smooth shared element transitions. * * Integration with SearchAppBar: * ```tsx * const [isOpen, setIsOpen] = useState(false); * * setIsOpen(true)} * /> * * {isOpen && ( * setIsOpen(false)} * /> * )} * * ``` */ interface SearchViewProps { /** * Must match the `searchBarId` of the triggering ``. * 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 * edit, label: 'Edit', onClick: handleEdit }, * { type: 'clickable', icon: delete, 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 * search, label: 'Search', onClick: handleSearch }, * { type: 'clickable', icon: bookmark, label: 'Bookmarks', onClick: handleBookmark }, * { type: 'clickable', icon: settings, 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 * * check_box * brush * * } * floatingActionButton={...} * /> * * // Auto-hide on scroll * * ``` */ declare function BottomAppBar({ actions, floatingActionButton, scrollBehavior, scrollElement, className, enableFadingBlur, blurIntensity, blurHeight, }: BottomAppBarProps): react_jsx_runtime.JSX.Element; /** * MD3 Expressive Docked Toolbar. * * @example * ```tsx * * setFilter('all')} /> * setFilter('unread')} /> * setFilter('starred')} /> * * ``` */ 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; /** 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 * menu} * headerContent={} * /> * ``` */ declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element; /** * MD3 Expressive Medium Flexible App Bar. * * @example * ```tsx * arrow_back} * actions={more_vert} * /> * ``` */ declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: FlexibleAppBarProps): react_jsx_runtime.JSX.Element; /** * MD3 Expressive Search App Bar. * * When the search bar is clicked, callers should open a `` 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); * * setSearchOpen(true)} * trailingSearchActions={ * mic * } * externalActions={} * /> * * * {searchOpen && ( * setSearchOpen(false)} * /> * )} * * ``` */ declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, searchBarVariant, searchBarHeight, className, enableFadingBlur, blurIntensity, blurHeight, }: SearchAppBarProps): react_jsx_runtime.JSX.Element; /** * MD3 Expressive Search View. * * Renders a full-screen search overlay with a shared element transition * from the triggering `` search bar. * * Mount/unmount this component via `` 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 * setSearchOpen(false)} * searchBarId="main-search" * > * * * ``` */ declare function SearchViewContainer({ isOpen, ...props }: SearchViewProps & { isOpen: boolean; }): react_jsx_runtime.JSX.Element; /** * MD3 Expressive Small App Bar. * * @example * ```tsx * // Left-aligned (default) * arrow_back} * actions={search} * scrollBehavior="pinned" * /> * * // Center-aligned with subtitle * * ``` */ declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, enableFadingBlur, blurIntensity, blurHeight, }: SmallAppBarProps): react_jsx_runtime.JSX.Element; /** * 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 * * *
Right-click me
* * * Copy * Paste * * * * @example * // Expressive context menu with groups * * * * * Cut * Copy * * * Paste * * * */ 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 ``. */ declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent, "ref"> & React$1.RefAttributes>; /** * 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, "ref">, "asChild"> & React$1.RefAttributes>; /** * 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 * * * * * * * Cut * Copy * * * Paste * * * */ declare function Menu({ children, variant, menuVariant, colorVariant, density, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, ...props }: MenuProps & Omit, "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, "ref"> & React$1.RefAttributes>; /** * 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, "ref">, "asChild"> & React$1.RefAttributes>; /** * @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; /** Density of menu items: 0, -2, -4 */ density: MenuDensity; /** * 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; density?: MenuDensity; menuPrimitive?: MenuPrimitive; open: boolean; onOpenChange: (open: boolean) => void; children: React$1.ReactNode; } declare function MenuProvider({ variant, colorVariant, density, 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 * * Cut * * Paste * */ declare const MenuDivider: React$1.ForwardRefExoticComponent>; /** * 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 * * * Cut * Copy * Paste * * * Select All * * */ declare const MenuGroup: React$1.ForwardRefExoticComponent>; /** * 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>; /** 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-[12px]"; 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 data-[highlighted]:bg-m3-on-surface/8"; /** Focus state layer (OnSurface @ 12% opacity) */ readonly focusLayer: "focus:bg-m3-on-surface/12 data-[highlighted]:bg-m3-on-surface/8"; /** 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 data-[highlighted]:bg-m3-on-tertiary-container/8"; /** Focus state layer (OnTertiaryContainer @ 12% opacity) */ readonly focusLayer: "focus:bg-m3-on-tertiary-container/12 data-[highlighted]:bg-m3-on-tertiary-container/8"; /** 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 * * }> * Share * * } * > * Via Email * Via Link * * */ 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 `
` — no Radix * dependency, safe inside static (non-popup) contexts. * * @example * * ... * * ... * */ declare const VerticalMenuDivider: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; /** * 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>; /** * 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) * * ... * ... * * * @example * // Divider variant * * ... * ... * */ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; /** * 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) * * * * }>Item 1 * } trailingText="⌘C">Item 2 * }>Item 3 * * * }>Item 4 * * * * * @example * // Vertical Menu with Divider * * * ... * ... * * */ declare const VerticalMenu: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; type NavigationItemShape = "pill" | MD3ShapeName; /** * Returns inline style for a navigation item shape. * If shape is 'pill' or 'circle', returns undefined (handled via rounded-full CSS). * For custom MD3 shapes (e.g. 'sunny', 'flower', 'star'), returns { clipPath: "path(...)" }. */ declare function getNavigationShapeStyle(shape: NavigationItemShape | undefined, width?: number, height?: number): React.CSSProperties | undefined; /** * Checks if a shape is a 1:1 ratio shape (circle or custom MD3 shape). */ declare function isSquareShape(shape: NavigationItemShape | undefined): boolean; /** * Layout styling for navigation bar items. * - vertical: Icon above label (default for mobile) * - 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"; type NavigationBarLabelVisibility = "labeled" | "auto" | "unlabeled"; interface NavigationBarItemProps { selected: boolean; icon: React$1.ReactNode; label?: React$1.ReactNode; onClick?: () => void; disabled?: boolean; badge?: React$1.ReactNode; /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */ shape?: NavigationItemShape; /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */ shapeSize?: number; /** Hide the label below the icon. Overrides container-level labelVisibility. */ hideLabel?: boolean; "aria-label"?: string; className?: string; asChild?: boolean; children?: React$1.ReactNode; } interface NavigationBarProps { /** Visual variant of the Navigation Bar */ variant?: NavigationBarVariant; /** Forces a specific item layout (horizontal/vertical) */ itemLayout?: NavigationBarItemLayout; /** Default shape of navigation items (pill, circle, sunny, flower, etc.) */ shape?: NavigationItemShape; /** * Label visibility for all items. * - "labeled" (default): always show label * - "auto": show label only for the selected item * - "unlabeled": never show label (icon-only mode) */ labelVisibility?: NavigationBarLabelVisibility; /** Default size (width & height) for square shape containers in px. Default: 56 */ shapeSize?: number; /** Whether the bar should hide when scrolling down */ hideOnScroll?: boolean; /** Whether the bar should have an elevation shadow */ 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; /** Transition for the active indicator pill */ activeIndicatorTransition?: Transition; /** Navigation items */ children: React$1.ReactNode; /** Optional additional classes for individual navigation items */ itemClassName?: string; /** Optional additional classes */ className?: string; /** Optional inline styles */ style?: React$1.CSSProperties; } declare const NavigationBarItem: React$1.NamedExoticComponent>; declare const NavigationBarComponent: React$1.ForwardRefExoticComponent>; declare const NavigationBar: React$1.NamedExoticComponent>; type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr"; type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled"; type NavigationRailActiveIndicatorWidth = "hug" | "fill"; interface NavigationRailItemProps { selected: boolean; icon: React$1.ReactNode; label?: React$1.ReactNode; onClick?: () => void; disabled?: boolean; badge?: React$1.ReactNode; /** Shape of the item active indicator / icon container (pill, circle, sunny, flower, etc.) */ shape?: NavigationItemShape; /** Override size (width & height) of the shape container in px. Default: 56 for square shapes, 32h×56w for pill */ shapeSize?: number; /** * Width behavior of the active indicator when expanded with pill shape. * - "hug" (default): hugs the icon + label contents (MD3 Expressive style) * - "fill": fills the full width of the container (baseline navigation drawer style) */ activeIndicatorWidth?: NavigationRailActiveIndicatorWidth; "aria-label"?: string; className?: string; asChild?: boolean; children?: React$1.ReactNode; } interface NavigationRailProps { variant?: NavigationRailVariant; labelVisibility?: NavigationRailLabelVisibility; /** Default shape of navigation rail items (pill, circle, sunny, flower, etc.) */ shape?: NavigationItemShape; /** Default size (width & height) for square shape containers in px. Default: 56 */ shapeSize?: number; /** * Default width behavior of the active indicator when expanded with pill shape. * - "hug" (default): hugs the icon + label contents (MD3 Expressive style) * - "fill": fills the full width of the container (baseline navigation drawer style) */ activeIndicatorWidth?: NavigationRailActiveIndicatorWidth; header?: React$1.ReactNode; fab?: React$1.ReactNode; fabPlacement?: "contained" | "spatialized"; 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>; declare const NavigationRail: React$1.NamedExoticComponent>; /** * @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 `` component (orchestrator). * * @example * ```tsx * const [query, setQuery] = useState(""); * const [active, setActive] = useState(false); * * console.log("search:", q)} * active={active} * onActiveChange={setActive} * variant="docked" * styleType="contained" * > * * * ``` */ 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; /** * Profile avatar rendered at the trailing edge of the search bar (30dp circle). * Follows MD3 `SearchBarTokens.AvatarSize = 30dp`. * Can be used alongside or instead of `trailingIcon`. */ avatar?: 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, avatar, 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)"; /** State layer overlay for interactive hover/press */ readonly stateLayer: "var(--md-sys-color-on-surface)"; }; /** * Elevation utility classes for Search containers. * SearchBarTokens.ContainerElevation = Level3 * SearchViewTokens.ContainerElevation = Level3 */ declare const SEARCH_ELEVATION: { readonly level3: "elevation-3"; }; /** * 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 & 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, avatar, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): react_jsx_runtime.JSX.Element; type SearchViewDockedProps = Pick & SearchInternalProps & { onKeyDown: (e: React$1.KeyboardEvent) => void; activeIndex: number; }; declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, avatar, 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 & 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, avatar, 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 `` root component. * * Supports both controlled (`value` + `onValueChange`) and * uncontrolled (`defaultValue`) usage patterns. * * @example * ```tsx * // Controlled * ... * * // Uncontrolled * ... * * // Auto-activate (focus = select) * ... * ``` */ 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 ``. * @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 `` container component. * * @example * ```tsx * * Tab 1 * * ``` */ 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 `` component. * * @example * ```tsx * }>Flights * Trips * } inlineIcon>Hotels * ``` */ interface TabProps { /** Unique value identifying this tab. Must match a ``. */ 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 ``. * @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 `` panel component. * * @example * ```tsx * Flight content here * ``` */ interface TabsContentProps { /** Must match the `value` of a sibling ``. */ 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 ``, 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 ``. 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 * }>Flights * Trips * Explore * } inlineIcon>Hotels * ``` * * @see https://m3.material.io/components/tabs/overview * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ */ declare const Tab: React$1.NamedExoticComponent>; /** * @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 * * * Flights * Trips * * Flight content * Trip content * * * // Controlled * const [tab, setTab] = useState("flights"); * ... * * // Auto-activate mode (focus = select) * ... * ``` * * @see https://m3.material.io/components/tabs/overview */ declare const Tabs: React$1.NamedExoticComponent>; /** * @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 * - 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 `` 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 * *

Available flights...

* * ``` * * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ */ declare const TabsContent: React$1.NamedExoticComponent>; /** * @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 instances are on the same page * - Restores focus to activeTab when keyboard focus leaves the tablist * (matches Google's `focusout` handler on ) */ /** * MD3 Expressive TabsList container component. * * Renders a horizontal row of `` 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 * * Tab 1 * Tab 2 * * * * Alpha * Beta * * ``` */ declare const TabsList: React$1.NamedExoticComponent>; /** * Color configuration types and standard values for the FloatingToolbar component. * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS. */ /** * Color configuration types and standard values for the FloatingToolbar component. * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS. */ type ToolbarVariant = "standard" | "vibrant" | "surface-high" | "surface-highest" | "tertiary" | "xr"; 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; /** * Surface Container High color configuration for the toolbar (XR / Elevated). */ declare const surfaceContainerHighFloatingToolbarColors: FloatingToolbarColors; /** * Surface Container Highest color configuration for the toolbar (XR / Elevated). */ declare const surfaceContainerHighestFloatingToolbarColors: FloatingToolbarColors; /** * Tertiary Container color configuration for the toolbar. */ declare const tertiaryContainerFloatingToolbarColors: FloatingToolbarColors; /** * XR Glassmorphic color configuration for the toolbar. * Uses semi-transparent surface container high with backdrop blur. */ declare const xrFloatingToolbarColors: FloatingToolbarColors; /** * Helper function to resolve FloatingToolbarColors based on variant prop or custom override. */ declare function getToolbarColors(variant?: ToolbarVariant, customColors?: FloatingToolbarColors): FloatingToolbarColors; interface BottomDockedToolbarProps { /** Color variant: standard, vibrant, surface-high, surface-highest, tertiary, or xr */ variant?: ToolbarVariant; /** 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; /** 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 * }> *
* * *
* * ``` */ declare const BottomDockedToolbar: React$1.ForwardRefExoticComponent>; /** * 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; } /** * 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) => 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 * }); * * * * * ``` */ 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 variant: standard, vibrant, surface-high, surface-highest, tertiary, or xr */ variant?: ToolbarVariant; /** Color configuration override */ 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' }); * * } * endContent={} * > * * * * ``` * * @see https://m3.material.io/components/toolbars/guidelines */ declare const HorizontalFloatingToolbar: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; /** * A vertical floating toolbar that displays navigation and key actions. * It floats over the rest of the content. * * @example * ```tsx * * * * ``` */ declare const VerticalFloatingToolbar: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; 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; /** * FAB size embedded in the floating toolbar. * - `"sm"` – standard FAB: 56×56dp (MD3 default). * - `"md"` – medium FAB: 80×80dp (`FabBaselineTokens.MediumContainerHeight`). * Corresponds to MD3 Toolbar Floating FAB token sizes. * @default "sm" */ fabSize?: "sm" | "md"; } /** * A horizontal floating toolbar paired with a FAB. */ declare const HorizontalFloatingToolbarWithFab: React$1.ForwardRefExoticComponent>; /** * A vertical floating toolbar paired with a FAB. */ declare const VerticalFloatingToolbarWithFab: React$1.ForwardRefExoticComponent>; /** * @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 * * * * * * * ``` */ declare const ToolbarDivider: React$1.FC; /** * @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 { /** * Visual emphasis variant. * * ⚠️ Avoid emphasising more than one action at a time. * @default "standard" */ emphasis?: ToolbarIconButtonVariant; /** * Slot width of the toolbar icon button per MD3 Expressive specification. * Controls how much horizontal space the button occupies in the toolbar. * - `"narrow"` – minimum width slot (40px), for compact actions. * - `"default"` – standard square slot (48px). * - `"wide"` – extended slot (64px), for primary emphasis actions. * @default "default" */ width?: MD3SlotWidth; /** * Whether the icon button is in a selected/active toggle state. */ selected?: boolean; /** * Change the default rendered element to the one passed as a child, merging their props and behavior. */ asChild?: boolean; /** 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; } /** * 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. * - Support for `selected` state (Toggleable Icon Button per MD3 spec). * - Support for `asChild` slot delegation. * - Always `rounded-full` shape (required for floating toolbars per MD3 spec). * - Always 48dp height to meet MD3 accessibility touch-target requirements. * - Material Design 3 Expressive spring motion physics (`TOOLBAR_SPRING_TRANSITION`) * synchronized with `ButtonDistribute` for responsive press scale and width expansion. * * @example * ```tsx * // Standard (default) — use for most actions * * * * * // Toggleable state * setIsSelected(!isSelected)}> * * * ``` * * @see https://m3.material.io/components/toolbars/guidelines */ declare const ToolbarIconButton: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; /** * @file toolbar-toggle-button.tsx * * An MD3 Expressive toggle button with icon and text label for Toolbar slots. * Implements the 'Button toggleable' building block from MD3 Toolbar guidelines. * * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots) */ interface ToolbarToggleButtonProps extends Omit, "children"> { /** * Visual emphasis variant. * @default "standard" */ emphasis?: "standard" | "tonal" | "filled"; /** * Whether the button is in a selected/active state. * @default false */ selected?: boolean; /** * Leading icon component or node. */ icon?: React$1.ReactNode; /** * Button text label / content. */ children?: React$1.ReactNode; /** * Enable symmetric spring expand on press. * The button expands equally to the left and right — matching ButtonDistribute behavior. * @default true */ pressExpand?: boolean; /** * Fraction of the button width added symmetrically on press. * e.g. 0.06 → scaleX goes from 1.0 to 1.06 (3% each side). * @default 0.06 */ pressExpandRatio?: number; /** * Enable MD3 state layer ripple effect on click. * @default true */ ripple?: boolean; /** * Delegation prop to merge props onto a child element (Radix Slot). */ asChild?: boolean; className?: string; } /** * An MD3 pill-shaped toggle button with optional leading icon and text label. * * Meets MD3 Expressive touch-target requirements (48dp height minimum, ~95dp width). * Features Material Design 3 Expressive spring press animation: * - Symmetric horizontal expand (scaleX) with `FAST_SPATIAL_SPRING` (has bounce) * - Border-radius morphing via `BUTTON_RADIUS_SPRING` (fast.effects, no overshoot) * - Configurable ripple state layer * * @example * ```tsx * const [selected, setSelected] = useState(false); * * setSelected(!selected)} * icon={} * > * Edit * * ``` */ declare const ToolbarToggleButton: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; /** * 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; }; /** * Design tokens for the ToolbarToggleButton component. * Follows MD3 Expressive 'Button toggleable' building block specifications. */ declare const ToolbarToggleButtonTokens: { readonly Height: 48; readonly MinWidth: 95; readonly IconSize: 24; readonly PaddingX: 16; readonly Gap: 8; }; export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, type AppBarColors, AppBarColumn, type AppBarColumnProps, type AppBarItem, type AppBarItemType, type AppBarMenuState, AppBarOverflowIndicator, type AppBarOverflowIndicatorProps, AppBarRow, type AppBarRowProps, type AppBarScrollBehavior, AppBarTokens, type BaseAppBarProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuProps, ContextMenuTrigger, ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, type DockedToolbarProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FadingBlurDirection, FadingBlurMask, type FadingBlurMaskProps, type FadingBlurProps, 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, MenuColorVariant, MenuContent, MenuContentProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuPrimitive, MenuProps, MenuProvider, MenuTrigger, MenuTriggerProps, MenuVariant, NavigationBar, NavigationBarComponent, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarLabelVisibility, type NavigationBarProps, type NavigationBarVariant, type NavigationItemShape, NavigationRail, type NavigationRailActiveIndicatorWidth, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_ELEVATION, 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, 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, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, ToolbarToggleButton, type ToolbarToggleButtonProps, ToolbarToggleButtonTokens, type ToolbarVariant, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuContentProps, VerticalMenuDivider, VerticalMenuDividerProps, VerticalMenuGroup, VerticalMenuProps, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };