react-material-expressive 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2068 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, MouseEventHandler, ComponentProps, MouseEvent } from 'react';
+
+/**
+ * Structural type of a statically imported image (matches the object shape
+ * produced by bundlers such as Next.js without depending on them).
+ */
+interface StaticImageData {
+    src: string;
+    height: number;
+    width: number;
+    blurDataURL?: string;
+    blurWidth?: number;
+    blurHeight?: number;
+}
+/** Accepted source for image-like components. */
+type ImageSrc = string | StaticImageData;
+
+type ObjectFit = "fill" | "contain" | "cover" | "none" | "scale-down";
+/** Context handed to a `render` prop so custom media (e.g. a framework
+ * image component) can reuse the resolved src and layout classes. */
+interface MediaRenderContext {
+    alt: string;
+    className: string;
+    src?: string;
+    style: CSSProperties;
+}
+/** Shared injection props for image-like components.
+ * Priority: render > image > children > native <img>. */
+interface MediaInjectionProps {
+    /** Fallback media node (lowest injection priority). */
+    children?: ReactNode;
+    /** Pre-built media node, e.g. `<Image .../>` from a framework. */
+    image?: ReactNode;
+    /** Full-control render prop; receives the resolved src and classes. */
+    render?: (media: MediaRenderContext) => ReactNode;
+}
+
+interface AvatarProps extends MediaInjectionProps {
+    alt?: string;
+    /** Show a large badge (top-right). */
+    badge?: boolean;
+    /** Class override for the badge (e.g. a different container color). */
+    badgeColor?: string;
+    badgeIcon?: ReactNode;
+    badgeText?: string;
+    className?: string;
+    /** Show a small dot badge (top-right). */
+    dotBadge?: boolean;
+    height?: number;
+    /** Initials (or any short text) shown when there is no image. */
+    name?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** Fallback node when there is no image nor name. */
+    placeholder?: ReactNode;
+    radius?: number;
+    /** Animated decorative ring (token-based gradient). */
+    ring?: boolean;
+    size?: number;
+    /** Show a count badge overlapping the avatar. */
+    smallBadge?: boolean;
+    src?: ImageSrc;
+    style?: CSSProperties;
+    width?: number;
+}
+/**
+ * Avatar with optional badges and decorative ring. Media is injectable
+ * (render > image > children) with a native <img> fallback; initials or a
+ * placeholder icon show when there is no image.
+ */
+declare function Avatar({ alt, badge, badgeColor, badgeIcon, badgeText, children, className, dotBadge, height, image, name, onClick, placeholder, radius, render, ring, size, smallBadge, src, style, width, }: AvatarProps): react.JSX.Element;
+
+interface AvatarStackItem {
+    alt?: string;
+    height?: number;
+    id: string;
+    initials?: string;
+    src?: ImageSrc;
+    width?: number;
+}
+interface AvatarStackProps {
+    avatars: AvatarStackItem[];
+    className?: string;
+    size?: number;
+}
+/** Overlapping avatar row with a surface ring and hover raise. */
+declare function AvatarStack({ avatars, className, size }: AvatarStackProps): react.JSX.Element;
+
+interface BadgeProps extends ComponentProps<"div"> {
+    icon?: ReactNode;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    /** Content fallback when no children are passed. */
+    text?: ReactNode;
+}
+/** M3 large badge: shape full, error container, label-small, min 16px. */
+declare function Badge({ children, className, icon, iconLeft, iconRight, text, ...props }: BadgeProps): react.JSX.Element;
+
+type DotBadgeProps = ComponentProps<"div">;
+/** M3 small badge: 6px dot, error container. */
+declare function DotBadge({ className, ...props }: DotBadgeProps): react.JSX.Element;
+
+interface OnIconBadgeProps extends ComponentProps<"div"> {
+    /** Count fallback when no children are passed. */
+    count?: ReactNode;
+}
+/**
+ * Count badge anchored to the top-right corner of an icon. Place it inside
+ * a relatively-positioned wrapper around the icon.
+ */
+declare function OnIconBadge({ children, className, count, ...props }: OnIconBadgeProps): react.JSX.Element;
+
+interface BlobProps {
+    children?: ReactNode;
+    className?: string;
+    /** Background class (token-based), e.g. "bg-tertiary/10". */
+    color?: string;
+    /** Phase offset into the morph loop, in ms (stagger multiple blobs). */
+    delay?: number;
+    height?: number;
+    /** Position classes; defaults to centered. */
+    position?: string;
+    width?: number;
+}
+/**
+ * Decorative blurred blob with organic border-radius morphing. Position it
+ * inside a relatively-positioned container.
+ */
+declare function Blob({ children, className, color, delay, height, position, width, }: BlobProps): react.JSX.Element;
+
+type ButtonVariant = "filled" | "tonal" | "outlined" | "elevated" | "text";
+/** M3 Expressive button sizes: 32 / 40 / 56 / 96 / 136. */
+type ButtonSize = "xs" | "s" | "m" | "l" | "xl";
+/** M3 Expressive button shapes: round (full) or square (per-size). */
+type ButtonShape = "round" | "square";
+interface ButtonProps extends ComponentProps<"button"> {
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    /** M3 Expressive toggle: selected/unselected colors per variant (the
+     * text variant has no toggle) and the shape follows the selection
+     * (unselected round, selected square) when `size` is set. Emits
+     * aria-pressed, so connected button groups pick it up. */
+    selected?: boolean;
+    /** M3 Expressive shape: round (default) or square. Pressing morphs
+     * to the opposite shape. */
+    shape?: ButtonShape;
+    /** M3 Expressive size (xs 32 / s 40 / m 56 / l 96 / xl 136) with
+     * per-size label scale, icon, symmetric padding and square radius.
+     * Default `s` (the spec's small, the default button size). */
+    size?: ButtonSize;
+    /** Label fallback when no children are passed. */
+    text?: string;
+    variant?: ButtonVariant;
+}
+/**
+ * M3 Expressive button. Five sizes (xs 32 / s 40 / m 56 / l 96 / xl 136,
+ * default `s`) with per-size label scale, icon, symmetric padding and
+ * square radius; shape (round/square + pressed morph) and toggle
+ * (selected) variants.
+ */
+declare function Button({ children, className, iconLeft, iconRight, selected, shape, size, text, type, variant, ...props }: ButtonProps): react.JSX.Element;
+
+interface ButtonGroupProps {
+    /** Buttons or icon buttons (pass them the same `size`). */
+    children?: ReactNode;
+    className?: string;
+    /** Accessible label for the group. */
+    label?: string;
+    /** M3 Expressive size — sets the spacing and press-morph metrics to
+     * match the buttons inside. */
+    size?: ButtonSize;
+}
+/**
+ * M3 Expressive standard button group: an invisible container that spaces
+ * its buttons (18/12/8/8/8 per size) and adds interaction between them —
+ * pressing a button widens it while the buttons directly next to it
+ * compress, on the shared 200ms emphasized morph. Buttons keep their own
+ * colors, states and toggle behavior; avoid text and standard icon
+ * buttons (no container treatment, per spec).
+ */
+declare function ButtonGroup({ children, className, label, size, }: ButtonGroupProps): react.JSX.Element;
+
+interface ButtonGroupConnectedProps {
+    /** Buttons or icon buttons with the same `size`; toggle buttons
+     * (`selected`) drive the selection shape via aria-pressed. */
+    children?: ReactNode;
+    className?: string;
+    /** Accessible label for the group. */
+    label?: string;
+    /** Outer corners: full (round) or the per-size square value. */
+    shape?: "round" | "square";
+    /** M3 Expressive size matching the buttons inside. */
+    size?: ButtonSize;
+}
+/**
+ * M3 Expressive connected button group: buttons joined by 2dp gaps where
+ * the group controls the corners — outer edges keep the group shape
+ * (full or square per size) and inner corners stay small (8/8/8/16/20),
+ * sharpening while pressed (4/4/4/12/16) and rounding to full when a
+ * toggle button is selected. Unlike the standard group there is no
+ * interaction between neighbors. Successor of the segmented buttons.
+ */
+declare function ButtonGroupConnected({ children, className, label, shape, size, }: ButtonGroupConnectedProps): react.JSX.Element;
+
+/** M3E color styles: primary/secondary/tertiary = the *-container sets
+ * (primary-container is the spec default). */
+type ExtendedFABVariant = "primary" | "secondary" | "tertiary";
+/** M3 Expressive extended FAB sizes: small 56 / medium 80 / large 96. */
+type ExtendedFABSize = "small" | "medium" | "large";
+interface ExtendedFABProps extends ComponentProps<"button"> {
+    /** Leading icon (24/28/36px box per size). */
+    icon?: ReactNode;
+    /** M3 Expressive size (small 56 / medium 80 / large 96). */
+    size?: ExtendedFABSize;
+    /** Label fallback when no children are passed. */
+    text?: string;
+    variant?: ExtendedFABVariant;
+}
+/**
+ * M3 Expressive extended FAB. Small (default): height 56, shape large,
+ * title-medium label, icon 24, symmetric 16dp padding, gap 8. Medium 80
+ * (large-increased, title-large, icon 28, padding 26, gap 12) and large
+ * 96 (extra-large, headline-small, icon 36, padding 28, gap 16).
+ * Elevation 3→4. (The surface color style is no longer recommended in M3
+ * Expressive; the default is primary = primary-container.)
+ */
+declare function ExtendedFAB({ children, className, icon, size, text, type, variant, ...props }: ExtendedFABProps): react.JSX.Element;
+
+type FABSize = "fab" | "fabMedium" | "fabLarge";
+/** M3E color styles: primary/secondary/tertiary = the *-container sets
+ * (primary-container is the spec default). */
+type FABVariant = "primary" | "secondary" | "tertiary";
+interface FABProps extends ComponentProps<"button"> {
+    /** Icon node. 24px box (28 for fabMedium, 36 for fabLarge). */
+    icon?: ReactNode;
+    /** Container: 56 (fab) / 80 (fabMedium, default — "most recommended"
+     * per the spec) / 96 (fabLarge). */
+    size?: FABSize;
+    variant?: FABVariant;
+}
+/**
+ * M3 Expressive floating action button. Sizes 56/80/96 (default medium 80,
+ * "most recommended"; the small 40 FAB and the surface color style are no
+ * longer recommended in M3 Expressive) with shapes large/large-increased/
+ * extra-large, elevation level 3 (level 4 on hover). Icon-only — pass an
+ * accessible name (aria-label).
+ */
+declare function FAB({ children, className, icon, size, type, variant, ...props }: FABProps): react.JSX.Element;
+
+/** FAB menu color sets (md.comp.fab-menu tokens). */
+type FABMenuVariant = "primary" | "secondary" | "tertiary";
+interface FABMenuItemProps {
+    className?: string;
+    /** Leading icon (24px box, spec menu-item.icon). */
+    icon?: ReactNode;
+    label?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+/** M3 Expressive FAB menu item: a medium-button pill (h 56, title-medium,
+ * icon 24) colored by the parent FABMenu set. */
+declare function FABMenuItem({ className, icon, label, onClick }: FABMenuItemProps): react.JSX.Element;
+interface FABMenuLabels {
+    /** aria-label for the trigger while open. Default "Close menu". */
+    close?: string;
+    /** aria-label for the trigger while closed. Default "Open menu". */
+    open?: string;
+}
+interface FABMenuProps {
+    /** Menu items (FABMenu.Item list), revealed above the FAB. */
+    children?: ReactNode;
+    className?: string;
+    /** FAB icon while closed (24px box). */
+    icon?: ReactNode;
+    /** Customizable accessible names for the trigger. */
+    labels?: FABMenuLabels;
+    variant?: FABMenuVariant;
+}
+/**
+ * M3 Expressive FAB menu: a 56dp FAB that morphs into a fully-round close
+ * button (icon crossfades/rotates into an X, container saturates to the
+ * set color) and reveals up to six menu-item pills above it, right-aligned
+ * and staggered bottom-up (8dp to the FAB, 4dp between items). Items are
+ * medium-button pills on the set's container color. Position the wrapper
+ * yourself (e.g. fixed bottom-right with 16dp margins per spec).
+ */
+declare function FABMenu({ children, className, icon, labels, variant, }: FABMenuProps): react.JSX.Element;
+declare namespace FABMenu {
+    var Item: typeof FABMenuItem;
+}
+
+type IconButtonVariant = "filled" | "tonal" | "outlined" | "standard";
+/** M3 Expressive icon button sizes: 32 / 40 / 56 / 96 / 136. */
+type IconButtonSize = "xs" | "s" | "m" | "l" | "xl";
+/** M3 Expressive icon button shapes. */
+type IconButtonShape = "round" | "square";
+/** M3 Expressive icon button width: narrow / default / wide. */
+type IconButtonWidth = "narrow" | "default" | "wide";
+interface IconButtonProps extends ComponentProps<"button"> {
+    /** Icon node (24px box by default). Children work as a fallback
+     * slot. */
+    icon?: ReactNode;
+    /** M3 Expressive toggle: selected/unselected colors per variant; the
+     * shape also flips (unselected round, selected square). */
+    selected?: boolean;
+    /** M3 Expressive shape: round (default) or square. Pressing morphs
+     * to the opposite shape. */
+    shape?: IconButtonShape;
+    /** M3 Expressive size (xs 32 / s 40 / m 56 / l 96 / xl 136). Default
+     * s — the classic 40x40 icon button. */
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+    /** M3 Expressive width: narrow / default / wide. */
+    width?: IconButtonWidth;
+}
+/**
+ * M3 icon button: 40x40 visual container (48x48 touch target), icon 24,
+ * with the M3 Expressive size/shape/width and toggle (selected) variants.
+ * Icon-only — remember to pass an accessible name (aria-label).
+ */
+declare function IconButton({ children, className, icon, selected, shape, size, type, variant, width, ...props }: IconButtonProps): react.JSX.Element;
+
+interface MenuItemProps {
+    /** Trailing error badge; pass a string for the count/label. */
+    badge?: boolean | string;
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    /** Keep the menu open after activation (e.g. a multi-select toggle). */
+    keepOpen?: boolean;
+    label?: ReactNode;
+    leftElement?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Trailing meta — shortcut text (label-large) or a 20px icon. */
+    rightElement?: ReactNode;
+    /** Selected: tertiary-container fill + corner-medium morph (M3E). */
+    selected?: boolean;
+}
+/**
+ * M3E vertical-menu item: 48 tall, inset state layer (44, corner
+ * extra-small) with label-large, 20dp leading/trailing icons, 12dp
+ * padding. First/last items round their outer corner toward the menu;
+ * selected morphs the state layer to corner-medium with a tertiary fill.
+ */
+declare function MenuItem({ badge, children, className, disabled, keepOpen, label, leftElement, onClick, rightElement, selected, }: MenuItemProps): react.JSX.Element;
+
+/** Split buttons have no text variant (M3 Expressive spec). */
+type SplitButtonVariant = "elevated" | "filled" | "tonal" | "outlined";
+interface SplitButtonLabels {
+    /** aria-label for the trailing menu button. Default "More options". */
+    menu?: string;
+}
+interface SplitButtonProps {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    /** Leading button icon (sized like the Button icon per size). */
+    iconLeft?: ReactNode;
+    /** Customizable accessible names. */
+    labels?: SplitButtonLabels;
+    /** Menu content (SplitButton.Item list), opened by the trailing
+     * button and anchored to its bottom right. */
+    menu?: ReactNode;
+    /** Class for the menu container. */
+    menuClassName?: string;
+    /** Leading button action. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** M3 Expressive size (xs 32 / s 40 / m 56 / l 96 / xl 136). */
+    size?: ButtonSize;
+    /** Label fallback when no children are passed. */
+    text?: string;
+    variant?: SplitButtonVariant;
+}
+/**
+ * M3 Expressive split button: a leading action button and a trailing menu
+ * button separated by a 2dp gap, with full outer corners and inner
+ * corners that morph on hover/focus/press (4/4/4/8/12 → 8/12/12/20/20 per
+ * size). While the menu is open the trailing button rounds to full,
+ * centers its caret (rotated 180°) and keeps a pressed state layer; the
+ * container colors never change on selection. Colors, state layers,
+ * elevation and disabled states are the standard button ones.
+ */
+declare function SplitButton({ children, className, disabled, iconLeft, labels, menu, menuClassName, onClick, size, text, variant, }: SplitButtonProps): react.JSX.Element;
+declare namespace SplitButton {
+    var Item: typeof MenuItem;
+}
+
+type CardBodyProps = ComponentProps<"div">;
+declare function CardBody({ children, className, ...props }: CardBodyProps): react.JSX.Element;
+
+type CardFooterProps = ComponentProps<"div">;
+declare function CardFooter({ children, className, ...props }: CardFooterProps): react.JSX.Element;
+
+type CardHeaderProps = ComponentProps<"div">;
+declare function CardHeader({ children, className, ...props }: CardHeaderProps): react.JSX.Element;
+
+type CardVariant = "elevated" | "filled" | "outlined";
+interface CardProps extends ComponentProps<"div"> {
+    variant?: CardVariant;
+}
+/**
+ * M3 card (shape medium). Variants per spec: elevated = surface-container-low
+ * + level 1, filled = surface-container-highest, outlined = surface +
+ * outline-variant border. Compose content with Card.Header / Card.Body /
+ * Card.Footer.
+ */
+declare function Card({ children, className, variant, ...props }: CardProps): react.JSX.Element;
+declare namespace Card {
+    var Header: typeof CardHeader;
+    var Body: typeof CardBody;
+    var Footer: typeof CardFooter;
+}
+
+type ChipsVariant = "assist" | "filter" | "input" | "suggestion";
+interface ChipsLabels {
+    /** aria-label for the trailing remove affordance. Default "Remove". */
+    remove?: string;
+}
+interface ChipsProps extends ComponentProps<"button"> {
+    /** Input chips: renders the leading element as a 24dp avatar with the
+     * 4dp leading padding from the spec measurements (other variants
+     * ignore it, like the spec). */
+    avatar?: boolean;
+    /** Elevated chip: surface-container-low at level 1 instead of the
+     * outline (assist/filter/suggestion; input chips are always flat). */
+    elevated?: boolean;
+    /** Customizable accessible names. */
+    labels?: ChipsLabels;
+    /** Leading element (icon/avatar, 18px box). */
+    leftElement?: ReactNode;
+    /** Removable input chips: renders a trailing remove affordance. */
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Trailing element (18px box). */
+    rightElement?: ReactNode;
+    /** Selected state (filter/input). */
+    selected?: boolean;
+    /** Label fallback when no children are passed. */
+    text?: string;
+    variant?: ChipsVariant;
+}
+/**
+ * M3 chip (height 32, shape small, label-large). Padding 16, reduced to 8
+ * on the icon/remove side. Selected filter/input chips use
+ * secondary-container; assist/suggestion leading icons tint primary.
+ * Elevated chips swap the outline for surface-container-low at level 1
+ * (2 on hover, 1 pressed, none disabled).
+ */
+declare function Chips({ avatar, children, className, disabled, elevated, labels, leftElement, onRemove, rightElement, selected, text, type, variant, ...props }: ChipsProps): react.JSX.Element;
+
+interface TextContainerProps {
+    children?: ReactNode;
+    className?: string;
+    /** Content fallback when no children are passed. */
+    data?: ReactNode;
+    /** Width class (default w-[300px]) to keep long text readable. */
+    width?: string;
+}
+/** Fixed-width wrapper for long text inside table cells. */
+declare function TextContainer({ children, className, data, width }: TextContainerProps): react.JSX.Element;
+
+type TableBodyProps = ComponentProps<"tbody">;
+declare function TableBody({ children, className, ...props }: TableBodyProps): react.JSX.Element;
+
+interface TableCellProps extends ComponentProps<"td"> {
+    /** Content fallback when no children are passed. */
+    data?: ReactNode;
+}
+declare function TableCell({ children, className, data, ...props }: TableCellProps): react.JSX.Element;
+
+type TableHeadProps = ComponentProps<"thead">;
+declare function TableHead({ children, className, ...props }: TableHeadProps): react.JSX.Element;
+
+interface TableHeaderCellProps extends ComponentProps<"th"> {
+    /** Content fallback when no children are passed. */
+    data?: ReactNode;
+}
+declare function TableHeaderCell({ children, className, data, ...props }: TableHeaderCellProps): react.JSX.Element;
+
+type TableRowProps = ComponentProps<"tr">;
+declare function TableRow({ children, className, ...props }: TableRowProps): react.JSX.Element;
+
+interface TableProps extends ComponentProps<"table"> {
+    /** Class for the scrollable wrapper. */
+    wrapperClassName?: string;
+}
+/**
+ * Data table (horizontal-scroll wrapper included). Compose with
+ * Table.Head / Table.Body / Table.Row / Table.Cell / Table.HeaderCell /
+ * Table.TextContainer. Data always comes from the consumer.
+ */
+declare function Table({ children, className, wrapperClassName, ...props }: TableProps): react.JSX.Element;
+declare namespace Table {
+    var Body: typeof TableBody;
+    var Cell: typeof TableCell;
+    var Head: typeof TableHead;
+    var HeaderCell: typeof TableHeaderCell;
+    var Row: typeof TableRow;
+    var TextContainer: typeof TextContainer;
+}
+
+interface CalendarLabels {
+    /** aria-label for the next-month button. Default "Next month". */
+    nextMonth?: string;
+    /** aria-label for the previous-month button. Default "Previous month". */
+    previousMonth?: string;
+    /** aria-label for the year-grid toggle. Default "Select year". */
+    selectYear?: string;
+}
+
+interface DatePickerLabels extends CalendarLabels {
+    /** Cancel action. Default "Cancel". */
+    cancel?: ReactNode;
+    /** Confirm/commit action. Default "OK". */
+    confirm?: ReactNode;
+    /** Field label in keyboard-input mode. Default "Date". */
+    inputLabel?: string;
+    /** Field placeholder in keyboard-input mode. Default "mm/dd/yyyy". */
+    inputPlaceholder?: string;
+    /** Supporting line above the headline. Default "Select date". */
+    supporting?: ReactNode;
+    /** Toggle aria-label while in input mode. Default "Switch to calendar". */
+    switchToCalendar?: string;
+    /** Toggle aria-label while in calendar mode. Default "Switch to keyboard input". */
+    switchToInput?: string;
+}
+interface DatePickerProps {
+    /** Start in keyboard-input mode. */
+    input?: boolean;
+    isVisible: boolean;
+    /** Customizable text and accessible names. */
+    labels?: DatePickerLabels;
+    locale?: string;
+    max?: Date | null;
+    min?: Date | null;
+    onClose: () => void;
+    /** Commit (OK button). */
+    onConfirm?: (date: Date | null) => void;
+    value?: Date | null;
+    /** 0 = Sunday … 6 = Saturday. */
+    weekStartsOn?: number;
+}
+/**
+ * M3 modal date picker: a 360×568 dialog (surface-container-high, level 3,
+ * extra-large 28) with a 120dp headline header, a calendar/year grid and a
+ * keyboard-input toggle. Selection is drafted and committed on OK.
+ * `DatePicker.Docked` is the field-anchored dropdown variant.
+ */
+declare function DatePicker(props: DatePickerProps): react.JSX.Element;
+declare namespace DatePicker {
+    var Docked: typeof DatePickerDocked;
+}
+interface DatePickerDockedLabels extends CalendarLabels {
+    /** Field label. Default "Date". */
+    field?: string;
+    /** Calendar-open button aria-label. Default "Open calendar". */
+    openCalendar?: string;
+}
+interface DatePickerDockedProps {
+    className?: string;
+    labels?: DatePickerDockedLabels;
+    locale?: string;
+    max?: Date | null;
+    min?: Date | null;
+    onChange?: (date: Date | null) => void;
+    value?: Date | null;
+    weekStartsOn?: number;
+}
+/**
+ * M3 docked date picker: an outlined field with a calendar icon that opens
+ * a dropdown calendar anchored below it. Selection commits immediately.
+ */
+declare function DatePickerDocked({ className, labels, locale, max, min, onChange, value, weekStartsOn, }: DatePickerDockedProps): react.JSX.Element;
+
+type DateRange = [Date | null, Date | null];
+interface DateRangePickerLabels extends CalendarLabels {
+    /** Cancel action. Default "Cancel". */
+    cancel?: ReactNode;
+    /** Confirm/commit action. Default "OK". */
+    confirm?: ReactNode;
+    /** Placeholder for an unset end date. Default "End". */
+    end?: string;
+    /** Placeholder for an unset start date. Default "Start". */
+    start?: string;
+    /** Supporting line above the headline. Default "Select range". */
+    supporting?: ReactNode;
+}
+interface DateRangePickerProps {
+    isVisible: boolean;
+    labels?: DateRangePickerLabels;
+    locale?: string;
+    max?: Date | null;
+    min?: Date | null;
+    onClose: () => void;
+    /** Commit (OK button). */
+    onConfirm?: (range: DateRange) => void;
+    value?: DateRange;
+    weekStartsOn?: number;
+}
+/**
+ * M3 modal date range picker: drafts a start/end pair (first tap sets the
+ * start, the next sets the end) with the days between highlighted in
+ * secondary-container, committed on OK. (The Android full-screen scrolling-
+ * months layout is simplified to the standard navigable calendar.)
+ */
+declare function DateRangePicker(props: DateRangePickerProps): react.JSX.Element;
+
+type DialogBodyProps = ComponentProps<"div">;
+declare function DialogBody({ children, className, ...props }: DialogBodyProps): react.JSX.Element;
+
+type DialogFooterProps = ComponentProps<"div">;
+declare function DialogFooter({ children, className, ...props }: DialogFooterProps): react.JSX.Element;
+
+interface DialogHeaderProps {
+    className?: string;
+    /** Headline (headline-small). */
+    headline?: ReactNode;
+    /** Hero icon (24px, centered, secondary color). */
+    icon?: ReactNode;
+    /** Supporting text (body-medium). */
+    text?: ReactNode;
+}
+declare function DialogHeader({ className, headline, icon, text }: DialogHeaderProps): react.JSX.Element;
+
+interface DialogProps {
+    children?: ReactNode;
+    className?: string;
+    /** Close on scrim click / Escape. Default true. */
+    dismissable?: boolean;
+    isVisible: boolean;
+    /** Accessible name used when no Dialog.Header headline is rendered. */
+    label?: string;
+    onClose: () => void;
+}
+/**
+ * M3 modal dialog: shape extra-large (28), 280–560dp wide, container
+ * surface-container-high, 32% scrim. Mounts/unmounts with enter/exit
+ * animations; compose content with Dialog.Header / Dialog.Body /
+ * Dialog.Footer.
+ */
+declare function Dialog({ children, className, dismissable, isVisible, label, onClose, }: DialogProps): react.JSX.Element | null;
+declare namespace Dialog {
+    var Header: typeof DialogHeader;
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+}
+
+interface DividerProps extends ComponentProps<"hr"> {
+    /**
+     * Inset the rule 16dp (M3 inset dividers, m3.material.io specs).
+     * `"start"` indents the leading edge only — the list divider, left
+     * 16 / right 0; `"middle"` both edges (middle-inset, 16/16); `"end"`
+     * the trailing edge only. Omit for a full-width rule.
+     */
+    inset?: "start" | "middle" | "end";
+}
+/** M3 divider: 1px rule in outline-variant (never `outline`). */
+declare function Divider({ className, inset, ...props }: DividerProps): react.JSX.Element;
+
+interface DropdownProps {
+    /** Detach the menu from the trigger with a 4dp gap. */
+    apart?: boolean;
+    /** Trigger content. */
+    children: ReactNode;
+    className?: string;
+    /** Menu content (Dropdown.Item / Menu.Item list). */
+    menu?: ReactNode;
+    /** Class for the menu container. */
+    menuClassName?: string;
+    /** Vibrant (tertiary-based) color scheme instead of standard. */
+    vibrant?: boolean;
+}
+/**
+ * Trigger + anchor for the shared M3E vertical {@link Menu}: toggles the
+ * menu below the trigger and closes on outside click, item activation or
+ * Escape (ephemeral UI state). Compose the menu with Dropdown.Item
+ * (an alias of Menu.Item) — or Menu.Label / Menu.Divider for groups.
+ */
+declare function Dropdown({ apart, children, className, menu, menuClassName, vibrant, }: DropdownProps): react.JSX.Element;
+declare namespace Dropdown {
+    var Item: typeof MenuItem;
+}
+
+type ImageRowProps = ComponentProps<"div">;
+/** Horizontal row inside a Gallery (8dp gap). */
+declare function ImageRow({ children, className, ...props }: ImageRowProps): react.JSX.Element;
+
+type GalleryProps = ComponentProps<"div">;
+/**
+ * Stacked media gallery (8dp gaps). Compose rows with Gallery.Row and any
+ * media (e.g. Img) inside.
+ */
+declare function Gallery({ children, className, ...props }: GalleryProps): react.JSX.Element;
+declare namespace Gallery {
+    var Row: typeof ImageRow;
+}
+
+interface LinkBoxProps extends ComponentProps<"a"> {
+    /** Explicit current-page state (heavier underline + aria-current);
+     * otherwise derived from href + currentPath. */
+    active?: boolean;
+    /** Current pathname from the consumer's router. */
+    currentPath?: string;
+}
+/**
+ * Text link that reads as a link: primary color, underlined at rest. Native
+ * <a>; client-side routing via onClick or a wrapper. The underline is always
+ * present (not color-only) so an inline link is distinguishable from body
+ * text without relying on color — WCAG 1.4.1 (M3 publishes no link spec; the
+ * primary-vs-text contrast is only 2.64:1 light / 1.31:1 dark). The current
+ * page (active) gets a heavier underline, no color change.
+ */
+declare function LinkBox({ active, children, className, currentPath, href, ...props }: LinkBoxProps): react.JSX.Element;
+
+type LinkContainerProps = ComponentProps<"a">;
+/**
+ * Block-level link wrapping arbitrary content (cards, media...). Adds no
+ * text styling of its own. Native <a>; client-side routing via onClick or
+ * a wrapper.
+ */
+declare function LinkContainer({ children, className, ...props }: LinkContainerProps): react.JSX.Element;
+
+interface ListItemProps {
+    /** Supporting text (body-medium). Switches the item to 72dp. */
+    body?: ReactNode;
+    /** Custom content replacing the text block. */
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    /** Primary text (body-large). */
+    headline?: ReactNode;
+    /** Renders the item as a native <a>. */
+    href?: string;
+    /** Overline (label-small). */
+    label?: ReactNode;
+    leftElement?: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+    rightElement?: ReactNode;
+    /** Selected: secondary-container fill + on-secondary-container content
+     * (visual; the consumer owns selection semantics). */
+    selected?: boolean;
+    target?: string;
+}
+/**
+ * M3 list item: 56dp one-line, 72dp with supporting text. Interactive
+ * (href/onClick) items get a state layer; navigation uses a native <a> —
+ * client-side routing via onClick or a wrapper.
+ */
+declare function ListItem({ body, children, className, disabled, headline, href, label, leftElement, onClick, rightElement, selected, target, }: ListItemProps): react.JSX.Element;
+
+interface ListProps extends ComponentProps<"ul"> {
+    /** M3 list style. `expressive` (default, recommended for new designs):
+     * filled (surface-container) rounded tiles separated by a 2dp gap, with a
+     * container shape that morphs on interaction (4 → 12 → 16dp) and 20dp
+     * icons. `plain`: the transparent, rectangular list — still available in
+     * M3 Expressive. */
+    variant?: "expressive" | "plain";
+}
+/**
+ * M3 Expressive list container. The `expressive` variant (default) renders
+ * filled, gapped tiles; `plain` is the transparent, rectangular list that the
+ * spec keeps available. Transparent container (inherits the surface it sits
+ * on, e.g. inside a sheet), 8dp vertical padding. Compose with List.Item.
+ */
+declare function List({ children, className, variant, ...props }: ListProps): react.JSX.Element;
+declare namespace List {
+    var Item: typeof ListItem;
+}
+
+interface NavBarItemProps {
+    /** Accessible name for icon-only items (when no `label` is shown). */
+    "aria-label"?: string;
+    /** Accessible name via an element id (alternative to aria-label). */
+    "aria-labelledby"?: string;
+    /** Explicit active state; otherwise derived from href + currentPath. */
+    active?: boolean;
+    /** Icon for the active state (spec: the filled variant). */
+    activeIcon?: ReactNode;
+    badge?: boolean;
+    badgeColor?: string;
+    badgeText?: string;
+    className?: string;
+    /** Current pathname from the consumer's router. */
+    currentPath?: string;
+    dotBadge?: boolean;
+    href?: string;
+    icon?: ReactNode;
+    label?: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+    target?: string;
+}
+/**
+ * M3E navigation bar destination. Vertical (default): 32x56 indicator
+ * pill over the 24 icon, `label-medium` below; horizontal (bar with
+ * `horizontal`): a 40dp pill holding icon + label. The indicator springs
+ * its width/alpha from the center on selection and hosts the press
+ * ripple. Native <a> when href is given.
+ */
+declare function NavBarItem({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, active, activeIcon, badge, badgeColor, badgeText, className, currentPath, dotBadge, href, icon, label, onClick, target, }: NavBarItemProps): react.JSX.Element;
+
+interface NavigationBarProps extends ComponentProps<"nav"> {
+    /** Horizontal navigation items (icon beside label inside a 40dp
+     * pill) — the spec configuration for medium windows. Items become
+     * fixed-width and centered. */
+    horizontal?: boolean;
+}
+/**
+ * M3E flexible navigation bar: height 64, surface-container, 3–5
+ * destinations. Vertical items split the width equally; `horizontal`
+ * switches to fixed-width centered items for medium windows. Compose with
+ * NavigationBar.Item.
+ */
+declare function NavigationBar({ children, className, horizontal, ...props }: NavigationBarProps): react.JSX.Element;
+declare namespace NavigationBar {
+    var Item: typeof NavBarItem;
+}
+
+interface NavRailItemProps {
+    /** Explicit active state; otherwise derived from href + currentPath. */
+    active?: boolean;
+    /** Icon for the active state (spec: the filled variant). */
+    activeIcon?: ReactNode;
+    badge?: boolean;
+    badgeColor?: string;
+    badgeText?: string;
+    className?: string;
+    /** Current pathname from the consumer's router. */
+    currentPath?: string;
+    dotBadge?: boolean;
+    href?: string;
+    icon?: ReactNode;
+    label?: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+    target?: string;
+}
+/**
+ * M3E navigation rail destination: a single always-row pill whose width
+ * is driven live by the rail's animating width (collapsed 56x32 with the
+ * `label-medium` below; expanded a full-width 56dp `label-large` row).
+ * The below-label collapses while the side-label reveals inside the
+ * growing pill, so the morph is continuous like Compose's. The indicator
+ * springs width/alpha from the center on selection and hosts the press
+ * ripple. Native <a> when href is given.
+ */
+declare function NavRailItem({ active, activeIcon, badge, badgeColor, badgeText, className, currentPath, dotBadge, href, icon, label, onClick, target, }: NavRailItemProps): react.JSX.Element;
+
+interface NavigationRailLabels {
+    /** aria-label for the menu button while collapsed (click expands).
+     * Default "Expand". */
+    expand?: string;
+    /** aria-label for the menu button while expanded (click collapses).
+     * Default "Collapse". */
+    collapse?: string;
+    /** Accessible name for the FAB. Falls back to a string `fabLabel`; set
+     * this to name an icon-only FAB (the label is visually hidden while the
+     * rail is collapsed). */
+    fab?: string;
+}
+interface NavigationRailProps {
+    /** Bottom-aligned slot. */
+    bottom?: ReactNode;
+    /** Destinations (NavigationRail.Item list). */
+    children?: ReactNode;
+    className?: string;
+    /** Expanded rail (220dp): items morph to full-width rows and the FAB
+     * extends. Drive it from the menu button (rendered when `onMenuClick`
+     * is set). */
+    expanded?: boolean;
+    /** FAB icon (24px box). Renders the rail FAB, which morphs into an
+     * extended FAB while the rail expands. */
+    fabIcon?: ReactNode;
+    /** Extended-FAB label revealed when expanded. */
+    fabLabel?: ReactNode;
+    /** Customizable accessible names (the menu button's aria-label). */
+    labels?: NavigationRailLabels;
+    /** Icon for the menu button while collapsed. Defaults to the M3 `menu`
+     * glyph drawn by the library. */
+    menuIcon?: ReactNode;
+    /** Icon for the menu button while expanded. Defaults to the M3
+     * `menu_open` glyph drawn by the library. */
+    menuOpenIcon?: ReactNode;
+    /** Toggle handler for the menu button. Providing it renders the menu
+     * button above the FAB; the library draws the default M3 menu icon,
+     * swapping `menu` → `menu_open` with `expanded` (override either glyph
+     * with `menuIcon`/`menuOpenIcon`). Wire it to flip `expanded`. */
+    onMenuClick?: MouseEventHandler<HTMLButtonElement>;
+    /** The expanded state overlays the content as a full-window modal
+     * drawer (fixed full height matching the 32% scrim, surface-container,
+     * level 2, large end corners) instead of pushing it. The collapsed
+     * footprint stays in the layout; the overlay surface eases back to the
+     * resting rail as it collapses on close. */
+    modal?: boolean;
+    /** 80dp collapsed width instead of the default 96dp. */
+    narrow?: boolean;
+    onFabClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Modal dismiss (scrim click / Escape). */
+    onClose?: () => void;
+}
+/**
+ * M3E navigation rail: collapsed 96dp (80 with `narrow`) on `surface`
+ * with 44dp top spacing; `expanded` morphs it to a 220dp rail with
+ * full-width row items (the spec's replacement for the navigation
+ * drawer), springing the width (default-spatial; fast-spatial when
+ * `modal`) while item faces crossfade. Compose with NavigationRail.Item.
+ */
+declare function NavigationRail({ bottom, children, className, expanded, fabIcon, fabLabel, labels, menuIcon, menuOpenIcon, modal, narrow, onFabClick, onClose, onMenuClick, }: NavigationRailProps): react.JSX.Element;
+declare namespace NavigationRail {
+    var Item: typeof NavRailItem;
+}
+
+interface MenuDividerProps {
+    className?: string;
+}
+/**
+ * M3E vertical-menu divider: a 1px outline-variant rule inset 12dp,
+ * separating groups within a single menu surface (the "with divider"
+ * grouping). For separate group surfaces with a gap, use Menu.Group instead.
+ */
+declare function MenuDivider({ className }: MenuDividerProps): react.JSX.Element;
+
+interface MenuGroupProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * M3E vertical-menu group: a self-contained menu surface (corner-large,
+ * surface-container-low / tertiary-container at elevation 3) holding a
+ * cluster of items. Stack several inside a Menu and they render as separate
+ * rounded surfaces with a 2dp gap — the "with gap" grouping, the spec's
+ * alternative to a Menu.Divider (m3.material.io/components/menus anatomy
+ * lists both "Gap (optional)" and "Divider (optional)"). First/last items
+ * round their outer corner against this surface, exactly as in an ungrouped
+ * menu (the inset state layer is concentric with the corner-large at 4dp).
+ */
+declare function MenuGroup({ children, className }: MenuGroupProps): react.JSX.Element;
+
+interface MenuLabelProps {
+    children?: ReactNode;
+    className?: string;
+    /** Optional 20px leading icon. */
+    leftElement?: ReactNode;
+}
+/**
+ * M3E vertical-menu section label: 32 tall, label-large in
+ * on-surface-variant (standard) / on-tertiary-container (vibrant), 16dp
+ * inline padding with a 6dp top pad — names the group that follows.
+ */
+declare function MenuLabel({ children, className, leftElement }: MenuLabelProps): react.JSX.Element;
+
+interface MenuSubProps {
+    /** Submenu content (Menu.Item / Menu.Divider / nested Menu.Sub). */
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    label?: ReactNode;
+    leftElement?: ReactNode;
+}
+/**
+ * Submenu: a trigger item (trailing chevron) that opens a nested {@link
+ * Menu} to its side. The submenu renders in a portal so it escapes the
+ * parent surface's clip; it opens on hover (intent) or Right/Enter, closes
+ * on Left/Escape (focus returns to the trigger) and a leaf activation
+ * dismisses the whole chain (inherited closeAll). The trigger keeps the
+ * on-surface state layer while open (the M3E active state).
+ */
+declare function MenuSub({ children, className, disabled, label, leftElement, }: MenuSubProps): react.JSX.Element;
+
+interface MenuProps {
+    /** Move focus to the first item on open (default true; submenus opened
+     * by hover pass false so the pointer keeps control). */
+    autoFocus?: boolean;
+    children?: ReactNode;
+    className?: string;
+    /** True while the close animation plays (from useDismissable). */
+    exiting?: boolean;
+    /** Id for the role="menu" element so a trigger can aria-controls it. */
+    id?: string;
+    /** Dismiss this menu level — items use it, Escape/Tab/ArrowLeft too. */
+    onClose?: () => void;
+    /** Set by Menu.Sub: this is a submenu, so it inherits the chain's
+     * closeAll and ArrowLeft returns to the trigger. */
+    submenu?: boolean;
+    /** Reveal upward instead of downward (anchored above the trigger). */
+    up?: boolean;
+    /** Vibrant (tertiary-based) scheme; inherited by submenus. */
+    vibrant?: boolean;
+}
+/**
+ * M3 Expressive vertical menu surface and behaviour (anchorless — the host
+ * positions it): corner-large container, surface-container-low / tertiary
+ * (vibrant) at elevation 3, inset state-layer items, and WAI-ARIA menu
+ * keyboard (Arrow/Home/End/typeahead/Escape, Left/Right for submenus).
+ * Compose with Menu.Item, Menu.Sub, Menu.Label and Menu.Divider.
+ */
+declare function Menu({ autoFocus, children, className, exiting, id, onClose, submenu, up, vibrant, }: MenuProps): react.JSX.Element;
+declare namespace Menu {
+    var Item: typeof MenuItem;
+    var Sub: typeof MenuSub;
+    var Group: typeof MenuGroup;
+    var Label: typeof MenuLabel;
+    var Divider: typeof MenuDivider;
+}
+
+interface OverflowMenuProps {
+    bottomLeft?: boolean;
+    bottomRight?: boolean;
+    /** Trigger content (usually an IconButton). */
+    children?: ReactNode;
+    className?: string;
+    /** Menu content (OverflowMenu.Item / Menu.Item list). */
+    menu?: ReactNode;
+    /** Class for the menu container. */
+    menuClassName?: string;
+    topLeft?: boolean;
+    topRight?: boolean;
+    /** Vibrant (tertiary-based) color scheme instead of standard. */
+    vibrant?: boolean;
+}
+/**
+ * Contextual menu anchored to a corner of its trigger, over the shared M3E
+ * vertical {@link Menu}. Position via topLeft/topRight/bottomLeft/
+ * bottomRight (default bottomRight); compose with OverflowMenu.Item
+ * (an alias of Menu.Item), Menu.Label and Menu.Divider.
+ */
+declare function OverflowMenu({ bottomLeft, bottomRight, children, className, menu, menuClassName, topLeft, topRight, vibrant, }: OverflowMenuProps): react.JSX.Element;
+declare namespace OverflowMenu {
+    var Item: typeof MenuItem;
+}
+
+interface PerspectiveCardProps {
+    children?: ReactNode;
+    className?: string;
+    /** Rotation strength per pixel of cursor distance. */
+    intensity?: number;
+    /** CSS perspective in px. */
+    perspective?: number;
+}
+/**
+ * Tilts its content in 3D while hovered, resetting on leave. Pointer-only —
+ * static on touch devices.
+ */
+declare function PerspectiveCard({ children, className, intensity, perspective, }: PerspectiveCardProps): react.JSX.Element;
+
+interface PerspectiveImageProps {
+    children?: ReactNode;
+    className?: string;
+    /** Rotation strength per pixel of cursor distance. */
+    intensity?: number;
+    /** CSS perspective in px. */
+    perspective?: number;
+}
+/**
+ * Tilts its content in 3D following the cursor anywhere on the page
+ * (parallax showcase effect). Pointer-only — static on touch devices.
+ */
+declare function PerspectiveImage({ children, className, intensity, perspective, }: PerspectiveImageProps): react.JSX.Element;
+
+interface CircleLabels {
+    /** Accessible name (aria-label). Default "Progress". */
+    label?: string;
+}
+interface CircleProps {
+    /** Center content (e.g. the percentage). */
+    children?: ReactNode;
+    className?: string;
+    /** Spinning arc instead of a fixed value. */
+    indeterminate?: boolean;
+    /** Customizable accessible name. */
+    labels?: CircleLabels;
+    /** Diameter in px (M3 Expressive baselines: flat 40, wavy 48). */
+    size?: number;
+    /** Stroke width in px (M3 active indicator: 4). */
+    strokeWidth?: number;
+    /** 0–100. */
+    value?: number;
+    /** M3 Expressive: the active indicator ripples around the ring — both the
+     * determinate arc and the indeterminate spinner. */
+    wavy?: boolean;
+}
+/**
+ * M3 Expressive circular progress indicator: primary arc over a
+ * secondary-container track with a 4px gap (determinate, stroke moves in
+ * 500ms) or an indeterminate spinner: an SVG arc with round caps that grows
+ * ~10°↔270° as it spins (the flat spinner reuses `_Spinner`, 40dp baseline).
+ * `wavy` ripples the active indicator (amplitude 1.6, wavelength 15, baseline
+ * 48) with the wave traveling one wavelength per second — for the determinate
+ * arc and for the indeterminate spinner, which keeps the same spin +
+ * grow/shrink dash on the rippled ring.
+ */
+declare function Circle({ children, className, indeterminate, labels, size: sizeProp, strokeWidth, value, wavy, }: CircleProps): react.JSX.Element;
+
+interface LoadingIndicatorLabels {
+    /** Accessible name (aria-label). Default "Loading". */
+    label?: string;
+}
+interface LoadingIndicatorProps {
+    className?: string;
+    /** Contained: paints the 48dp fully-round container
+     * (primary-container) under an on-primary-container indicator. */
+    contained?: boolean;
+    /** Customizable accessible name. */
+    labels?: LoadingIndicatorLabels;
+}
+/**
+ * M3 Expressive loading indicator: the exact 38dp MaterialShapes morph
+ * (SoftBurst → Cookie9 → Pentagon → Pill → Sunny → Cookie4 → Oval) on 650ms
+ * spring ticks (through the target at speed, 14% overshoot at the brake,
+ * settle, dwell) with a +90° rotation kick per morph on top of the 4666ms
+ * global rotation, inside a 48dp container. Default paints only the primary
+ * shape; `contained` adds the primary-container circle. Indeterminate by
+ * design — for determinate progress use Progress/Circle.
+ */
+declare function LoadingIndicator({ className, contained, labels, }: LoadingIndicatorProps): react.JSX.Element;
+
+interface ProgressLabels {
+    /** Accessible name (aria-label). Default "Progress". */
+    label?: string;
+}
+interface ProgressProps {
+    className?: string;
+    /** Looping animation instead of a fixed value. */
+    indeterminate?: boolean;
+    /** Customizable accessible name. */
+    labels?: ProgressLabels;
+    /** Track/indicator thickness in px (spec: default 4, configurable —
+     * the thick sample is 8). The stop indicator stays 4. */
+    thickness?: number;
+    /** 0–100. */
+    value?: number;
+    /** M3 Expressive: the active indicator ripples as a sine wave. */
+    wavy?: boolean;
+}
+/**
+ * M3 Expressive linear progress indicator: primary active indicator over
+ * a secondary-container track with a 4px gap and a stop indicator.
+ * Determinate transitions follow @material/web (250ms); the flat
+ * indeterminate runs the @material/web 2s two-bar choreography. The `wavy`
+ * indeterminate runs that same two-bar choreography — two primary segments
+ * sweep across the track (their head/tail clip-path is derived from the flat
+ * variant's translate/scale timing) — but each segment shows the same
+ * traveling sine as the determinate active indicator (wavelength 40,
+ * amplitude 3, one wavelength per second).
+ */
+declare function Progress({ className, indeterminate, labels, thickness, value, wavy, }: ProgressProps): react.JSX.Element;
+
+interface SearchItemProps {
+    children?: ReactNode;
+    className?: string;
+    label?: ReactNode;
+    leftElement?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    rightElement?: ReactNode;
+}
+/** M3 search suggestion row: height 56, body-large, state layer. */
+declare function SearchItem({ children, className, label, leftElement, onClick, rightElement, }: SearchItemProps): react.JSX.Element;
+
+interface SearchInputLabels {
+    /** Input placeholder. Default "Search". */
+    placeholder?: string;
+}
+interface SearchInputProps extends Omit<ComponentProps<"input">, "placeholder" | "size"> {
+    /** Class for the wrapper. */
+    className?: string;
+    inputClassName?: string;
+    /** Customizable text (input placeholder). */
+    labels?: SearchInputLabels;
+    /** Leading slot (56px box), e.g. a search icon or back button. */
+    leftElement?: ReactNode;
+    /** Trailing slot (56px box), e.g. an avatar or mic icon. */
+    rightElement?: ReactNode;
+}
+/**
+ * M3 search bar input row: height 56, body-large text, visible placeholder
+ * (search bars do not float labels). Transparent background — the `Search`
+ * wrapper provides the container color and shape. Leading icon = on-surface
+ * (the search icon is the primary affordance per the search-bar token set);
+ * trailing icon/avatar = on-surface-variant.
+ */
+declare function SearchInput({ className, inputClassName, labels, leftElement, rightElement, ...inputProps }: SearchInputProps): react.JSX.Element;
+
+interface SearchProps {
+    /** The search bar content (usually a SearchInput). */
+    children: ReactNode;
+    className?: string;
+    /**
+     * M3 baseline ("divided") style: the bar joins the results panel with a
+     * divider instead of staying a separate, gapped card. The M3 Expressive
+     * spec marks this "not recommended — use contained" (the default).
+     */
+    divided?: boolean;
+    /** Suggestions shown while open (Search.Item list). */
+    result?: ReactNode;
+    /** Class for the results container. */
+    resultClassName?: string;
+}
+/**
+ * M3 search bar + docked search view. Default = the M3 Expressive **contained**
+ * style: a persistent full-pill bar on surface-container-high that opens a
+ * separate results card below (corner-medium, 2dp gap, no divider). The legacy
+ * **divided** style (`divided`) joins the bar and results with a divider and
+ * squares off the bar's bottom corners — kept for baseline parity. Closes on
+ * outside click or Escape.
+ */
+declare function Search({ children, className, divided, result, resultClassName, }: SearchProps): react.JSX.Element;
+declare namespace Search {
+    var Item: typeof SearchItem;
+    var Input: typeof SearchInput;
+}
+
+interface SelectOption {
+    disabled?: boolean;
+    /** Display content; defaults to the value. */
+    label?: ReactNode;
+    value: string;
+}
+interface SelectBaseProps {
+    /** Class for the wrapper. */
+    className?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    errorText?: ReactNode;
+    id?: string;
+    /** Floating label. */
+    label?: string;
+    /** Leading icon (24px box; the field pads 48 on that side). */
+    leftElement?: ReactNode;
+    /** Posts the value in native forms via a hidden input. */
+    name?: string;
+    /** Fires with the next selected value. */
+    onChange?: (value: string) => void;
+    options: SelectOption[];
+    supportingText?: ReactNode;
+    value?: string;
+}
+
+type SelectFilledProps = SelectBaseProps;
+/**
+ * M3 filled select: the filled text field anatomy (height 56, shape small
+ * on the top corners, surface-container-highest, floating label, active
+ * indicator) opening an options menu with the @material/web animation.
+ * Controllable via `value` + `onChange`; keyboard navigation and 200ms
+ * typeahead included.
+ */
+declare function SelectFilled({ className, defaultValue, disabled, error, errorText, id, label, leftElement, name, onChange, options, supportingText, value: valueProp, }: SelectFilledProps): react.JSX.Element;
+
+type SelectOutlinedProps = SelectBaseProps;
+/**
+ * M3 outlined select: the outlined text field anatomy (height 56, shape
+ * small, fieldset/legend label notch) opening an options menu with the
+ * @material/web animation. Controllable via `value` + `onChange`;
+ * keyboard navigation and 200ms typeahead included.
+ */
+declare function SelectOutlined({ className, defaultValue, disabled, error, errorText, id, label, leftElement, name, onChange, options, supportingText, value: valueProp, }: SelectOutlinedProps): react.JSX.Element;
+
+interface BottomSheetProps {
+    children?: ReactNode;
+    className?: string;
+    /** Show the M3 drag handle (32x4). Default true. */
+    dragHandle?: boolean;
+    isVisible?: boolean;
+    /** Accessible name for the sheet (it is a modal dialog). */
+    label?: string;
+    onClose?: () => void;
+}
+/**
+ * M3 modal bottom sheet: extra-large top corners, surface-container-low,
+ * 32% scrim, slides up and animates out before unmounting.
+ */
+declare function BottomSheet({ children, className, dragHandle, isVisible, label, onClose, }: BottomSheetProps): react.JSX.Element | null;
+
+interface SideSheetLabels {
+    /** aria-label for the default close button. Default "Close". */
+    close?: string;
+    /** Accessible name for the sheet when no `title` is rendered.
+     * Default "Side sheet". */
+    label?: string;
+}
+interface SideSheetProps {
+    children?: ReactNode;
+    className?: string;
+    /** true renders the default close icon button; pass a node for a
+     * custom one. */
+    closeButton?: boolean | ReactNode;
+    isVisible?: boolean;
+    /** Customizable accessible names. */
+    labels?: SideSheetLabels;
+    onClose?: () => void;
+    /** Header title (title-large). */
+    title?: ReactNode;
+}
+/**
+ * M3 modal side sheet: docked right, width up to 400, large start corners,
+ * surface-container-low, 32% scrim, slides in from the right and animates
+ * out before unmounting.
+ */
+declare function SideSheet({ children, className, closeButton, isVisible, labels, onClose, title, }: SideSheetProps): react.JSX.Element | null;
+
+type SliderSize = "xs" | "s" | "m" | "l" | "xl";
+
+interface SliderLabels {
+    /** Accessible name (aria-label) for the range input. Default "Slider". */
+    label?: string;
+}
+interface SliderProps {
+    className?: string;
+    defaultValue?: number;
+    disabled?: boolean;
+    /** Inset leading icon for the thick M3E sizes (`m`/`l`/`xl`); two-toned
+     * to follow the track (on-primary over active, on-secondary-container
+     * over inactive). */
+    icon?: ReactNode;
+    /** Customizable accessible name. */
+    labels?: SliderLabels;
+    max?: number;
+    min?: number;
+    /** Fires with the next numeric value. */
+    onChange?: (value: number) => void;
+    /** Show the value indicator on hover/drag. Default true. */
+    showLabel?: boolean;
+    /** M3E track size: `xs` (default), `s`, `m`, `l`, `xl`. */
+    size?: SliderSize;
+    step?: number;
+    /** Suffix rendered inside the value indicator. */
+    tooltipChildren?: ReactNode;
+    value?: number;
+}
+/**
+ * M3 Expressive continuous slider: inset track with a 6px gap around the 4dp
+ * handle, an on-secondary-container stop indicator on the inactive track and
+ * a 44×48 inverse-surface value indicator on hover/drag. `size` selects the
+ * track scale (xs–xl); the thick sizes (m/l/xl) host an optional inset
+ * `icon`. Controllable via `value` + `onChange`.
+ */
+declare function Slider({ className, defaultValue, disabled, icon, labels, max, min, onChange, showLabel, size, step, tooltipChildren, value: valueProp, }: SliderProps): react.JSX.Element;
+
+interface SliderDualValue {
+    max: number;
+    min: number;
+}
+interface SliderDualLabels {
+    /** Base accessible name; each handle appends its suffix. Default "Range slider". */
+    label?: string;
+    /** Suffix for the upper handle's aria-label. Default "maximum". */
+    maximum?: string;
+    /** Suffix for the lower handle's aria-label. Default "minimum". */
+    minimum?: string;
+}
+interface SliderDualProps {
+    className?: string;
+    defaultValue?: SliderDualValue;
+    disabled?: boolean;
+    /** Customizable accessible names. */
+    labels?: SliderDualLabels;
+    max?: number;
+    min?: number;
+    /** Fires with the next {min, max} pair. */
+    onChange?: (value: SliderDualValue) => void;
+    /** Show value indicators on hover/drag. Default true. */
+    showLabel?: boolean;
+    /** M3E track size: `xs` (default), `s`, `m`, `l`, `xl`. (The inset icon
+     * is single-slider only.) */
+    size?: SliderSize;
+    step?: number;
+    /** Suffix rendered inside the value indicators. */
+    tooltipChildren?: ReactNode;
+    value?: SliderDualValue;
+}
+/**
+ * M3 Expressive range slider: 16px inset track, two 4x44 handles with 6px
+ * gaps, stop indicators at both ends and inverse-surface value indicators.
+ * Controllable via `value` ({min, max}) + `onChange`.
+ */
+declare function SliderDual({ className, defaultValue, disabled, labels, max, min, onChange, showLabel, size, step, tooltipChildren, value: valueProp, }: SliderDualProps): react.JSX.Element;
+
+interface SnackbarLabels {
+    /** aria-label for the dismiss (close) button. Default "Dismiss". */
+    dismiss?: string;
+}
+interface SnackbarProps {
+    /** Optional action button label (rendered as an M3 text button). */
+    actionLabel?: string;
+    /** Auto-close after N ms (calls onClose). Pauses on hover/focus. */
+    autoHideDuration?: number;
+    /** Extra trailing content (e.g. custom buttons). */
+    button?: ReactNode;
+    className?: string;
+    /** Custom close icon (defaults to an X). */
+    closeIcon?: ReactNode;
+    isVisible: boolean;
+    /** Customizable accessible names. */
+    labels?: SnackbarLabels;
+    onAction?: () => void;
+    onClose?: () => void;
+    /** Show the close icon button. */
+    showClose?: boolean;
+    text?: ReactNode;
+}
+/**
+ * M3 snackbar: shape extra-small, inverse-surface, min height 48, width
+ * 344–600, body-medium. Action and close render as real M3 buttons
+ * recolored to inverse roles. `autoHideDuration` closes it automatically
+ * and pauses while hovered or focused (M3 a11y guidance).
+ */
+declare function Snackbar({ actionLabel, autoHideDuration, button, className, closeIcon, isVisible, labels, onAction, onClose, showClose, text, }: SnackbarProps): react.JSX.Element;
+
+interface SnackbarWrapperProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Fixed bottom-centered stacking area for snackbars, portaled to
+ * `document.body`. The portal is what makes snackbars reliable: a plain
+ * `position: fixed` element stays trapped in the stacking context of any
+ * positioned, z-indexed ancestor, so app content could paint over it no
+ * matter how high its `z-index` is. Rendering into `body` lets it always sit
+ * above the page. SSR-safe: renders nothing until mounted on the client.
+ */
+declare function SnackbarWrapper({ children, className }: SnackbarWrapperProps): react.ReactPortal | null;
+
+interface BusinessItemProps extends MediaInjectionProps {
+    alt?: string;
+    className?: string;
+    height?: number;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    radius?: number;
+    /** Static primary ring. */
+    ring?: boolean;
+    src?: ImageSrc;
+    /** Label below (label-large, start-aligned). */
+    text?: string;
+    width?: number;
+}
+/**
+ * Story item for brand/business content: rounded media with an optional
+ * primary ring and a start-aligned label. Media is injectable.
+ */
+declare function BusinessItem({ alt, children, className, height, image, onClick, radius, render, ring, src, text, width, }: BusinessItemProps): react.JSX.Element;
+
+interface UserItemProps extends MediaInjectionProps {
+    alt?: string;
+    badge?: boolean;
+    badgeColor?: string;
+    badgeIcon?: ReactNode;
+    badgeText?: string;
+    className?: string;
+    /** Bottom-centered badge (e.g. "LIVE"). */
+    live?: boolean;
+    liveColor?: string;
+    liveIcon?: ReactNode;
+    liveText?: string;
+    name?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    radius?: number;
+    /** Animated decorative ring (token-based gradient). */
+    ring?: boolean;
+    size?: number;
+    src?: ImageSrc;
+}
+/**
+ * Circular story item with optional ring, badges and name below. Media is
+ * injectable (render > image > children) with a native <img> fallback.
+ */
+declare function UserItem({ alt, badge, badgeColor, badgeIcon, badgeText, children, className, image, live, liveColor, liveIcon, liveText, name, onClick, radius, render, ring, size, src, }: UserItemProps): react.JSX.Element;
+
+interface StoriesProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Horizontal scrollable story strip. Compose with Stories.User /
+ * Stories.Business.
+ */
+declare function Stories({ children, className }: StoriesProps): react.JSX.Element;
+declare namespace Stories {
+    var Business: typeof BusinessItem;
+    var User: typeof UserItem;
+}
+
+interface TabItem {
+    /** Panel content rendered below when the tab is selected. */
+    content?: ReactNode;
+    disabled?: boolean;
+    header?: ReactNode;
+    icon?: ReactNode;
+    id: string;
+}
+interface TabsPrimaryProps {
+    className?: string;
+    defaultSelected?: string;
+    onChange?: (id: string) => void;
+    /** Class for the selected tab's panel. */
+    panelClassName?: string;
+    selected?: string;
+    tabs: TabItem[];
+}
+/**
+ * M3 primary tabs: container 48 (64 with icon), title-small labels, 3px
+ * content-width indicator with full top corners. Controllable via
+ * `selected` + `onChange`.
+ */
+declare function TabsPrimary({ className, defaultSelected, onChange, panelClassName, selected: selectedProp, tabs, }: TabsPrimaryProps): react.JSX.Element;
+
+interface TabsSecondaryProps {
+    className?: string;
+    defaultSelected?: string;
+    onChange?: (id: string) => void;
+    /** Class for the selected tab's panel. */
+    panelClassName?: string;
+    selected?: string;
+    tabs: TabItem[];
+}
+/**
+ * M3 secondary tabs: container 48, title-small labels, 2px full-width
+ * indicator. Controllable via `selected` + `onChange`.
+ */
+declare function TabsSecondary({ className, defaultSelected, onChange, panelClassName, selected: selectedProp, tabs, }: TabsSecondaryProps): react.JSX.Element;
+
+interface InputFilledProps extends Omit<ComponentProps<"input">, "size"> {
+    /** Class for the wrapper. */
+    className?: string;
+    error?: boolean;
+    errorText?: ReactNode;
+    inputClassName?: string;
+    /** Floating label. */
+    label?: string;
+    /** Leading icon (24px box; input pads 48 on that side). */
+    leftElement?: ReactNode;
+    /** Trailing icon. */
+    rightElement?: ReactNode;
+    supportingText?: ReactNode;
+}
+/**
+ * M3 filled text field: height 56, shape small on the top corners,
+ * surface-container-highest container with an active indicator line. The
+ * floating label is driven by focus/value state.
+ */
+declare function InputFilled({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, defaultValue, disabled, error, errorText, id, inputClassName, label, leftElement, onBlur, onChange, onFocus, placeholder, rightElement, supportingText, value, ...inputProps }: InputFilledProps): react.JSX.Element;
+
+interface InputOutlinedProps extends Omit<ComponentProps<"input">, "size"> {
+    /** Class for the wrapper. */
+    className?: string;
+    error?: boolean;
+    errorText?: ReactNode;
+    inputClassName?: string;
+    /** Floating label. */
+    label?: string;
+    /** Leading icon (24px box; input pads 48 on that side). */
+    leftElement?: ReactNode;
+    /** Trailing icon. */
+    rightElement?: ReactNode;
+    supportingText?: ReactNode;
+}
+/**
+ * M3 outlined text field: height 56, shape small, body-large input. The
+ * floating label is driven by focus/value state and notches the outline
+ * via fieldset/legend (works on any background).
+ */
+declare function InputOutlined({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, defaultValue, disabled, error, errorText, id, inputClassName, label, leftElement, onBlur, onChange, onFocus, placeholder, rightElement, supportingText, value, ...inputProps }: InputOutlinedProps): react.JSX.Element;
+
+interface TextFieldFilledProps extends ComponentProps<"textarea"> {
+    /** Class for the wrapper. */
+    className?: string;
+    error?: boolean;
+    errorText?: ReactNode;
+    inputClassName?: string;
+    /** Floating label. */
+    label?: string;
+    /** Leading icon (24px box). */
+    leftElement?: ReactNode;
+    /** Trailing icon. */
+    rightElement?: ReactNode;
+    supportingText?: ReactNode;
+}
+/**
+ * M3 filled text field, multi-line (textarea). Same anatomy as
+ * InputFilled with a top-aligned resting label.
+ */
+declare function TextFieldFilled({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, defaultValue, disabled, error, errorText, id, inputClassName, label, leftElement, onBlur, onChange, onFocus, placeholder, rightElement, rows, supportingText, value, ...textareaProps }: TextFieldFilledProps): react.JSX.Element;
+
+interface TextFieldOutlinedProps extends ComponentProps<"textarea"> {
+    /** Class for the wrapper. */
+    className?: string;
+    error?: boolean;
+    errorText?: ReactNode;
+    inputClassName?: string;
+    /** Floating label. */
+    label?: string;
+    /** Leading icon (24px box). */
+    leftElement?: ReactNode;
+    /** Trailing icon. */
+    rightElement?: ReactNode;
+    supportingText?: ReactNode;
+}
+/**
+ * M3 outlined text field, multi-line (textarea). Same anatomy as
+ * InputOutlined with a top-aligned resting label.
+ */
+declare function TextFieldOutlined({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, defaultValue, disabled, error, errorText, id, inputClassName, label, leftElement, onBlur, onChange, onFocus, placeholder, rightElement, rows, supportingText, value, ...textareaProps }: TextFieldOutlinedProps): react.JSX.Element;
+
+interface TimeValue {
+    /** 0–23. */
+    hours: number;
+    /** 0–59. */
+    minutes: number;
+}
+interface TimePickerLabels {
+    /** AM period label. Default "AM". */
+    am?: string;
+    /** Cancel action. Default "Cancel". */
+    cancel?: ReactNode;
+    /** Confirm/commit action. Default "OK". */
+    confirm?: ReactNode;
+    /** Hour input aria-label. Default "Hour". */
+    hour?: string;
+    /** Minute input aria-label. Default "Minute". */
+    minute?: string;
+    /** PM period label. Default "PM". */
+    pm?: string;
+    /** Supporting line above the time. Default "Select time". */
+    supporting?: ReactNode;
+    /** Toggle aria-label while in input mode. Default "Switch to dial". */
+    switchToDial?: string;
+    /** Toggle aria-label while in dial mode. Default "Switch to keyboard input". */
+    switchToInput?: string;
+}
+interface TimePickerProps {
+    /** Start in keyboard-input mode. */
+    input?: boolean;
+    isVisible: boolean;
+    /** Customizable text and accessible names. */
+    labels?: TimePickerLabels;
+    onClose: () => void;
+    onConfirm?: (value: TimeValue) => void;
+    value?: TimeValue;
+}
+/**
+ * M3 modal time picker: a clock dial (256dp) with a draggable selector, the
+ * big HH:MM time selector, an AM/PM period selector, and a keyboard-input
+ * toggle. Container surface-container-high, level 3, extra-large (28).
+ */
+declare function TimePicker(props: TimePickerProps): react.JSX.Element;
+
+interface ToggleThemeLabels {
+    /** Suffix after the theme name when `label` is shown. Default "theme". */
+    name?: string;
+    /** aria-label while light (clicking switches to dark). Default "Switch to dark theme". */
+    toDark?: string;
+    /** aria-label while dark (clicking switches to light). Default "Switch to light theme". */
+    toLight?: string;
+}
+interface ToggleThemeProps {
+    className?: string;
+    /** Icon shown while dark (click switches to light). */
+    darkIcon?: ReactNode;
+    /** Show the current theme name next to the button. */
+    label?: boolean;
+    /** Customizable text and accessible names. */
+    labels?: ToggleThemeLabels;
+    /** Icon shown while light (click switches to dark). */
+    lightIcon?: ReactNode;
+    variant?: IconButtonVariant;
+}
+/**
+ * Light/dark toggle backed by useMaterialTheme (persists to localStorage,
+ * toggles data-theme + the dark class on <html>).
+ */
+declare function ToggleTheme({ className, darkIcon, label, labels, lightIcon, variant, }: ToggleThemeProps): react.JSX.Element;
+
+/** Themes shipped with the library. Custom themes work by overriding the
+ * --md-sys-* tokens in CSS; this type covers the built-in ones. */
+type MaterialTheme = "light" | "dark";
+
+interface ToggleThemeMenuItem {
+    id: MaterialTheme;
+    label: string;
+}
+interface ToggleThemeMenuLabels {
+    /** Suffix after the theme name when `label` is shown. Default "theme". */
+    name?: string;
+    /** aria-label for the menu trigger. Default "Choose theme". */
+    trigger?: string;
+}
+interface ToggleThemeMenuProps {
+    className?: string;
+    /** Trigger icon (defaults to a palette glyph). */
+    icon?: ReactNode;
+    /** Show the current theme name next to the trigger. */
+    label?: boolean;
+    /** Customizable text and accessible names for the trigger. The theme
+     * names themselves are translated through `themes`. */
+    labels?: ToggleThemeMenuLabels;
+    /** Selectable themes (defaults to the built-in light/dark; pass your
+     * own list when shipping custom token sets, also to translate the
+     * theme names). */
+    themes?: ToggleThemeMenuItem[];
+    variant?: IconButtonVariant;
+}
+/**
+ * Theme picker menu backed by useMaterialTheme. Lists the built-in themes
+ * (or a custom set) and marks the active one.
+ */
+declare function ToggleThemeMenu({ className, icon, label, labels, themes, variant, }: ToggleThemeMenuProps): react.JSX.Element;
+
+interface DockedToolbarProps extends ComponentProps<"div"> {
+    /** Vibrant color scheme (primary-container) instead of the standard
+     * surface-container. */
+    vibrant?: boolean;
+}
+/**
+ * M3 Expressive docked toolbar: a full-width 64dp bar (surface-container,
+ * 16dp edge paddings, 32dp default gap, square corners) pinned to the
+ * bottom of the window. Successor of the baseline bottom app bar; FABs
+ * placed inside sit flat (no own elevation). Ghost icon buttons follow
+ * the toolbar selection colors via `aria-pressed`.
+ */
+declare function DockedToolbar({ children, className, vibrant, ...props }: DockedToolbarProps): react.JSX.Element;
+
+/** Side of the toolbar the FAB sits on (end = trailing/bottom). */
+type FloatingToolbarFabPosition = "start" | "end";
+interface FloatingToolbarProps extends ComponentProps<"div"> {
+    /** Collapse choreography (fast-spatial spring): with `fab` the whole
+     * pill clips away toward the FAB, which grows 56 → 80 (medium);
+     * without it only `leading`/`trailing` collapse. Drive it from your
+     * scroll handler. Default true. */
+    expanded?: boolean;
+    /** Adjacent FAB slot (a `<FAB>`), 8dp from the pill. The toolbar
+     * controls its size and elevation (level 2, hover 3). */
+    fab?: ReactNode;
+    /** FAB side: end (default) or start. */
+    fabPosition?: FloatingToolbarFabPosition;
+    /** Remove the default level-3 elevation (spec guideline for visually
+     * distinct backgrounds). */
+    flat?: boolean;
+    /** Leading actions that collapse away when `expanded` is false. */
+    leading?: ReactNode;
+    /** Trailing actions that collapse away when `expanded` is false. */
+    trailing?: ReactNode;
+    /** Vertical orientation (64dp wide, 24dp min screen margin). */
+    vertical?: boolean;
+    /** Vibrant color scheme (primary-container) instead of the standard
+     * surface-container. */
+    vibrant?: boolean;
+}
+/**
+ * M3 Expressive floating toolbar: a 64dp pill (8dp paddings, 4dp gap,
+ * shape full, level 3) floating above the content with a 16dp (24dp
+ * vertical) screen margin — position the wrapper yourself. Standard
+ * (surface-container) or vibrant (primary-container) schemes; ghost icon
+ * buttons follow the toolbar selection colors via `aria-pressed`. The
+ * expand/collapse motion ports the Compose fast-spatial spring
+ * (damping 0.6 / stiffness 800).
+ */
+declare function FloatingToolbar({ children, className, expanded, fab, fabPosition, flat, leading, trailing, vertical, vibrant, ...props }: FloatingToolbarProps): react.JSX.Element;
+
+interface TooltipProps {
+    /** Action slot for rich tooltips (e.g. a text Button). */
+    action?: ReactNode;
+    bottomLeft?: boolean;
+    bottomRight?: boolean;
+    /** Trigger content. */
+    children?: ReactNode;
+    className?: string;
+    /** Supporting text. */
+    text?: ReactNode;
+    /** Subhead for rich tooltips (title-small). */
+    title?: ReactNode;
+    topLeft?: boolean;
+    topRight?: boolean;
+    /** plain = label on inverse-surface; rich = card-like container. */
+    variant?: "plain" | "rich";
+}
+/**
+ * M3 tooltip shown on hover/focus. Plain: shape extra-small on
+ * inverse-surface. Rich: shape medium on surface-container with optional
+ * subhead and action. Position with the corner flags (default
+ * bottomLeft).
+ */
+declare function Tooltip({ action, bottomLeft, bottomRight, children, className, text, title, topLeft, topRight, variant, }: TooltipProps): react.JSX.Element;
+
+interface AppBarRowProps {
+    children?: ReactNode;
+    className?: string;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    /** Optional supporting line under the title (label-medium, M3E). */
+    subtitle?: ReactNode;
+    /** Title fallback when no children are passed. */
+    title?: ReactNode;
+}
+/** M3 small top app bar: height 64, bar padding 4, title-large start-aligned
+ * (+ optional label-medium subtitle, M3E). */
+declare function SmallAppBar({ children, className, leftElement, rightElement, subtitle, title, }: AppBarRowProps): react.JSX.Element;
+
+/** M3 center-aligned top app bar: the small app bar with centered title text
+ * (M3E merged center-aligned into small as a configuration). Height 64,
+ * title-large centered (+ optional label-medium subtitle). */
+declare function CenterAppBar({ children, className, leftElement, rightElement, subtitle, title, }: AppBarRowProps): react.JSX.Element;
+
+interface CollapsingAppBarProps {
+    children?: ReactNode;
+    className?: string;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    /** Supporting line under the title (label-large). */
+    subtitle?: ReactNode;
+    /** Title fallback when no children are passed. */
+    title?: ReactNode;
+}
+/** M3E medium top app bar (flexible): headline-medium title at the bottom,
+ * height 112 (136 with a subtitle). The M3 baseline medium app bar is no
+ * longer recommended; this is the flexible default. */
+declare function MediumAppBar({ children, className, leftElement, rightElement, subtitle, title, }: CollapsingAppBarProps): react.JSX.Element;
+
+/** M3E large top app bar (flexible): display-small title at the bottom,
+ * height 120 (152 with a subtitle). The M3 baseline large app bar is no
+ * longer recommended; this is the flexible default. */
+declare function LargeAppBar({ children, className, leftElement, rightElement, subtitle, title, }: CollapsingAppBarProps): react.JSX.Element;
+
+type TopAppBarProps = ComponentProps<"header">;
+/**
+ * M3 top app bar container (surface at rest; swap to surface-container on
+ * scroll via className). Compose with TopAppBar.Small / .Center / .Medium /
+ * .Large.
+ */
+declare function TopAppBar({ children, className, ...props }: TopAppBarProps): react.JSX.Element;
+declare namespace TopAppBar {
+    var Small: typeof SmallAppBar;
+    var Medium: typeof MediumAppBar;
+    var Large: typeof LargeAppBar;
+    var Center: typeof CenterAppBar;
+}
+
+type VideoProps = ComponentProps<"video">;
+/**
+ * Native looping video for ambient/media content: muted, autoplay and
+ * inline by default (override via props), object-fit cover. Autoplay is
+ * decorative motion lasting >5s, so it is paused under
+ * `prefers-reduced-motion: reduce` (WCAG 2.2.2 Pause, Stop, Hide); pass
+ * `controls` for an explicit play affordance.
+ */
+declare function Video({ autoPlay, className, loop, muted, playsInline, ref, ...props }: VideoProps): react.JSX.Element;
+
+interface AmountLabels {
+    /** aria-label for the decrement button. Default "Decrease". */
+    decrease?: string;
+    /** aria-label for the increment button. Default "Increase". */
+    increase?: string;
+    /** aria-label for the group. Default "Amount". */
+    label?: string;
+}
+interface AmountProps {
+    className?: string;
+    defaultValue?: number;
+    disabled?: boolean;
+    /** Customizable accessible names. */
+    labels?: AmountLabels;
+    max?: number;
+    min?: number;
+    minusIcon?: ReactNode;
+    /** Fires with the next numeric value. */
+    onChange?: (value: number) => void;
+    plusIcon?: ReactNode;
+    step?: number;
+    value?: number;
+}
+/**
+ * Quantity stepper. Controllable: pass `value` + `onChange`, or let it
+ * manage internal state seeded by `defaultValue` (uncontrolled fallback).
+ */
+declare function Amount({ className, defaultValue, disabled, labels, max, min, minusIcon, onChange, plusIcon, step, value: valueProp, }: AmountProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<ComponentProps<"input">, "type" | "size" | "children"> {
+    /** Class for the wrapping <label>. */
+    className?: string;
+    /** Class for the visual box. */
+    inputClassName?: string;
+    label?: ReactNode;
+}
+/**
+ * M3 checkbox: custom-rendered 18x18 box (2px shape, 2px outline) with a
+ * 40px circular state layer. Controlled via `checked` + `onChange` or
+ * uncontrolled via `defaultChecked` — the native input is the source of
+ * truth, so group semantics behave exactly like the platform's.
+ */
+declare function Checkbox({ className, disabled, inputClassName, label, onChange, ...inputProps }: CheckboxProps): react.JSX.Element;
+
+interface IconProps {
+    className?: string;
+    /** Standalone icon slot. */
+    icon?: ReactNode;
+    /** Leading icon slot. */
+    iconLeft?: ReactNode;
+    /** Trailing icon slot. */
+    iconRight?: ReactNode;
+    /** Box size in px (M3 default 24). */
+    size?: number;
+}
+/**
+ * Icon slot helper. Wraps each provided icon in a fixed square box
+ * (default 24px) so arbitrary icon nodes align with adjacent text.
+ */
+declare function Icon({ className, icon, iconLeft, iconRight, size }: IconProps): react.JSX.Element;
+
+interface ImgProps extends MediaInjectionProps {
+    alt?: string;
+    /** Aspect ratio of the frame (e.g. 16/9). */
+    aspect?: number | string;
+    className?: string;
+    height?: number | string;
+    objectFit?: ObjectFit;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** Shown when there is no media or it fails to load. */
+    placeholder?: ReactNode;
+    /** Corner radius in px or any CSS value. */
+    radius?: number | string;
+    /** Shorthand for equal width/height. */
+    size?: number | string;
+    /** Plain URL or StaticImageData. Ignored when media is injected. */
+    src?: ImageSrc | null;
+    style?: CSSProperties;
+    width?: number | string;
+}
+/**
+ * MediaFrame + image. Uses a native <img> by default; the consumer can
+ * inject its framework's image via `render` > `image` > `children`. Falls
+ * back to the placeholder when there is no source or it errors.
+ */
+declare function Img({ alt, aspect, children, className, height, image, objectFit, onClick, placeholder, radius, render, size, src, style, width, }: ImgProps): react.JSX.Element;
+
+interface LoadingLabels {
+    /** Accessible label (status text). Default "Loading". */
+    label?: string;
+}
+interface LoadingProps {
+    className?: string;
+    /** Customizable accessible name. */
+    labels?: LoadingLabels;
+    /** Diameter in px (M3 default 40 — `CircularProgressIndicatorTokens.Size`;
+     * 48 is only the wavy baseline). */
+    size?: number;
+    /** Stroke width in px (M3 active indicator: 4). */
+    strokeWidth?: number;
+}
+/**
+ * Icon-sized circular indeterminate spinner — an SVG arc with round caps
+ * that grows ~10°↔270° while it spins (shares `_Spinner` with `Circle`).
+ * This IS `<Circle indeterminate />`,
+ * kept as a convenience that inherits `currentColor` (defaults to primary) and
+ * announces via `role="status"` so it can drop inline in buttons/text. It is
+ * NOT the shape-morphing M3 `LoadingIndicator`.
+ */
+declare function Loading({ className, labels, size, strokeWidth, }: LoadingProps): react.JSX.Element;
+
+interface MaterialSymbolProps extends Omit<ComponentProps<"span">, "children"> {
+    /** FILL axis (false = outlined glyph, true = filled). */
+    fill?: boolean;
+    /** GRAD axis (-25..200). */
+    grade?: number;
+    /** Ligature name, e.g. "favorite". */
+    name: string;
+    /** opsz axis (20..48). Defaults to `size`. */
+    opticalSize?: number;
+    /** Font size in px. */
+    size?: number;
+    /** Symbol style — must match the font the consumer loaded. */
+    variant?: "rounded" | "outlined" | "sharp";
+    /** wght axis (100..700). */
+    weight?: number;
+}
+/**
+ * Zero-dependency Material Symbols glyph. Renders a ligature span; it only
+ * displays if the consumer loaded the corresponding Material Symbols
+ * variable font (e.g. from Google Fonts). The library bundles no font.
+ */
+declare function MaterialSymbol({ className, fill, grade, name, opticalSize, size, style, variant, weight, ...rest }: MaterialSymbolProps): react.JSX.Element;
+
+interface MediaFrameProps {
+    /** Aspect ratio of the frame (e.g. 16/9 or "4 / 3"). */
+    aspect?: number | string;
+    /** Content of the frame (usually media). */
+    children?: ReactNode;
+    className?: string;
+    height?: number | string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** Clip the content to the frame shape. Default true. */
+    overflow?: boolean;
+    /** Shown behind/instead of the content (icon, initials...). */
+    placeholder?: ReactNode;
+    /** Corner radius in px, or any CSS value (e.g. "var(--md-sys-shape-corner-large)"). */
+    radius?: number | string;
+    /** Shorthand for equal width/height. */
+    size?: number | string;
+    style?: CSSProperties;
+    width?: number | string;
+}
+/**
+ * Presentational frame for media: size/aspect/radius/overflow plus an
+ * optional placeholder. Renders no image of its own — pair it with `Img`
+ * or inject any media as children.
+ */
+declare function MediaFrame({ aspect, children, className, height, onClick, overflow, placeholder, radius, size, style, width, }: MediaFrameProps): react.JSX.Element;
+
+interface RadioProps extends Omit<ComponentProps<"input">, "type" | "size" | "children"> {
+    /** Class for the wrapping <label>. */
+    className?: string;
+    label?: ReactNode;
+}
+/**
+ * M3 radio button: custom-rendered 20px ring + 10px dot with a 40px
+ * circular state layer. The native input is the source of truth, so
+ * uncontrolled groups (shared `name`) keep native semantics; pass
+ * `checked` + `onChange` for controlled usage.
+ */
+declare function Radio({ className, disabled, label, ...inputProps }: RadioProps): react.JSX.Element;
+
+interface SwitchProps extends Omit<ComponentProps<"input">, "type" | "size" | "children" | "checked" | "defaultChecked"> {
+    checked?: boolean;
+    /** Class for the wrapping <label>. */
+    className?: string;
+    defaultChecked?: boolean;
+    /** Icon shown inside the handle when selected (M3 "with icon": the
+     * handle grows to 24 and the icon renders at 16). */
+    icon?: ReactNode;
+    label?: ReactNode;
+    /** Optional icon for the unselected handle. */
+    uncheckedIcon?: ReactNode;
+}
+/**
+ * M3 switch: 52x32 track (2px outline), handle 16↔24 (28 pressed), 40px
+ * state layer. Controllable: `checked` + `onChange`, or uncontrolled via
+ * `defaultChecked` (internal state through useControlled).
+ */
+declare function Switch({ checked: checkedProp, className, defaultChecked, disabled, icon, label, onChange, uncheckedIcon, ...inputProps }: SwitchProps): react.JSX.Element;
+
+interface TextElementProps {
+    /** Supporting text (body-medium, on-surface-variant). */
+    body?: ReactNode;
+    bodyStyle?: string;
+    className?: string;
+    /** Overline label (label-medium, on-surface-variant). */
+    label?: ReactNode;
+    labelStyle?: string;
+    /** Main text (title-medium, on-surface). */
+    title?: ReactNode;
+    titleStyle?: string;
+}
+/** Label / title / body text stack using the M3 type scale. */
+declare function TextElement({ body, bodyStyle, className, label, labelStyle, title, titleStyle, }: TextElementProps): react.JSX.Element;
+
+interface ContainerProps {
+    children?: ReactNode;
+    className?: string;
+    /** Padding class override (default p-6). */
+    padding?: string;
+}
+/**
+ * Dotted showcase panel (token-based dot grid) for presenting components
+ * over a neutral, theme-aware background.
+ */
+declare function Container({ children, className, padding }: ContainerProps): react.JSX.Element;
+
+interface SectionProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Responsive content section: column on small screens, row on large. */
+declare function Section({ children, className }: SectionProps): react.JSX.Element;
+
+export { Amount, type AmountLabels, type AmountProps, type AppBarRowProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeProps, Blob, type BlobProps, BottomSheet, type BottomSheetProps, type BusinessItemProps, Button, ButtonGroup, ButtonGroupConnected, type ButtonGroupConnectedProps, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chips, type ChipsLabels, type ChipsProps, type ChipsVariant, Circle, type CircleLabels, type CircleProps, type CollapsingAppBarProps, Container, type ContainerProps, DatePicker, type DatePickerDockedLabels, type DatePickerDockedProps, type DatePickerLabels, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, DotBadge, type DotBadgeProps, Dropdown, type MenuItemProps as DropdownItemProps, type DropdownProps, ExtendedFAB, type ExtendedFABProps, type ExtendedFABVariant, FAB, FABMenu, type FABMenuItemProps, type FABMenuLabels, type FABMenuProps, type FABMenuVariant, type FABProps, type FABSize, type FABVariant, FloatingToolbar, type FloatingToolbarFabPosition, type FloatingToolbarProps, Gallery, type GalleryProps, Icon, IconButton, type IconButtonProps, type IconButtonShape, type IconButtonSize, type IconButtonVariant, type IconButtonWidth, type IconProps, type ImageRowProps, Img, type ImgProps, InputFilled, type InputFilledProps, InputOutlined, type InputOutlinedProps, LinkBox, type LinkBoxProps, LinkContainer, type LinkContainerProps, List, type ListItemProps, type ListProps, Loading, LoadingIndicator, type LoadingIndicatorLabels, type LoadingIndicatorProps, type LoadingLabels, type LoadingProps, MaterialSymbol, type MaterialSymbolProps, MediaFrame, type MediaFrameProps, Menu, type MenuDividerProps, type MenuGroupProps, type MenuItemProps, type MenuLabelProps, type MenuProps, type MenuSubProps, type NavBarItemProps, type NavRailItemProps, NavigationBar, type NavigationBarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, OnIconBadge, type OnIconBadgeProps, OverflowMenu, type MenuItemProps as OverflowMenuItemProps, type OverflowMenuProps, PerspectiveCard, type PerspectiveCardProps, PerspectiveImage, type PerspectiveImageProps, Progress, type ProgressLabels, type ProgressProps, Radio, type RadioProps, Search, SearchInput, type SearchInputLabels, type SearchInputProps, type SearchItemProps, type SearchProps, Section, type SectionProps, SelectFilled, type SelectFilledProps, type SelectOption, SelectOutlined, type SelectOutlinedProps, SideSheet, type SideSheetLabels, type SideSheetProps, Slider, SliderDual, type SliderDualLabels, type SliderDualProps, type SliderDualValue, type SliderLabels, type SliderProps, Snackbar, type SnackbarLabels, type SnackbarProps, SnackbarWrapper, type SnackbarWrapperProps, SplitButton, type SplitButtonLabels, type SplitButtonProps, type SplitButtonVariant, Stories, type StoriesProps, Switch, type SwitchProps, type TabItem, Table, type TableBodyProps, type TableCellProps, type TableHeadProps, type TableHeaderCellProps, type TableProps, type TableRowProps, TabsPrimary, type TabsPrimaryProps, TabsSecondary, type TabsSecondaryProps, type TextContainerProps, TextElement, type TextElementProps, TextFieldFilled, type TextFieldFilledProps, TextFieldOutlined, type TextFieldOutlinedProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, ToggleTheme, type ToggleThemeLabels, ToggleThemeMenu, type ToggleThemeMenuItem, type ToggleThemeMenuLabels, type ToggleThemeMenuProps, type ToggleThemeProps, Tooltip, type TooltipProps, TopAppBar, type TopAppBarProps, type UserItemProps, Video, type VideoProps };