@bug-on/md3-react 3.0.1 → 3.0.3

package/dist/index.d.mts

@@ -1,8 +1,9 @@
 import * as React$1 from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ClassValue } from 'clsx';
-import { HTMLMotionProps, Variants, Transition } from 'motion/react';
+import * as motion from 'motion';
+import { HTMLMotionProps, Transition, Variants } from 'motion/react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixDialog from '@radix-ui/react-dialog';
@@ -330,30 +331,9 @@ declare const APP_BAR_COLOR_TRANSITION: {
  * Spring animation for enterAlways behavior (hide/show on scroll direction).
  * Equivalent to MD3 FastSpatial motion scheme.
  */
-declare const APP_BAR_ENTER_ALWAYS_SPRING: {
-    readonly type: "spring";
-    readonly stiffness: 380;
-    readonly damping: 40;
-    readonly mass: 1;
-};
-/**
- * Spring animation for Bottom App Bar hide/show.
- * Slightly looser feel for bottom navigation.
- */
-declare const APP_BAR_BOTTOM_SPRING: {
-    readonly type: "spring";
-    readonly stiffness: 300;
-    readonly damping: 30;
-};
-/**
- * SearchView appearance/disappearance transition.
- * Uses spring for natural feel of expanding overlay.
- */
-declare const SEARCH_VIEW_SPRING: {
-    readonly type: "spring";
-    readonly stiffness: 400;
-    readonly damping: 35;
-};
+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.
@@ -1098,109 +1078,74 @@ declare const Badge: React$1.NamedExoticComponent<BadgeProps & React$1.RefAttrib
  */
 declare function BadgedBox({ badge, children, className, badgeSize, }: BadgedBoxProps): react_jsx_runtime.JSX.Element;
 
-/**
- * @file button.tsx
- *
- * MD3 Expressive Button component.
- *
- * Spec: https://m3.material.io/components/buttons/overview
- * Sizing (May 2025):
- *   XS → h:32dp  | px: 12dp | icon: 18dp | gap: 8dp
- *   SM → h:40dp  | px: 16dp | icon: 20dp | gap: 8dp
- *   MD → h:56dp  | px: 24dp | icon: 24dp | gap: 8dp
- *   LG → h:96dp  | px: 48dp | icon: 32dp | gap: 12dp
- *   XL → h:136dp | px: 48dp | icon: 40dp | gap: 12dp
- */
-
 type MotionButtonProps$2 = Omit<HTMLMotionProps<"button">, "children" | "color">;
-/**
- * Base props shared between the standard and toggle button variants.
- *
- * @see {@link ButtonProps} for the complete discriminated union type.
- * @see https://m3.material.io/components/buttons/overview
- */
 interface BaseButtonProps extends MotionButtonProps$2 {
     /**
-     * Visual style variant following MD3 color roles.
+     * The visual style of the button.
+     * Maps to MD3 emphasis levels.
      * @default "filled"
      */
-    colorStyle?: "elevated" | "filled" | "tonal" | "outlined" | "text";
+    colorStyle?: MD3ColorStyle;
     /**
-     * Color style applied when the toggle button is in the *selected* state.
-     * Only meaningful when `variant="toggle"`.
-     * Falls back to `"filled"` when not specified.
+     * @deprecated `selectedColorStyle` is no longer used. Color styles are now automatically
+     * resolved based on the `colorStyle` and `selected` state per MD3 specs.
+     * If provided, it will be ignored.
      */
-    selectedColorStyle?: "elevated" | "filled" | "tonal" | "outlined" | "text";
+    selectedColorStyle?: MD3ColorStyle;
     /**
-     * Button size following MD3 Expressive size scale.
+     * The size variant of the button.
      * @default "sm"
      */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: MD3Size;
     /**
-     * Container shape — controls border-radius morphing.
-     * - `round`: pill shape (CornerFull), morphs to rounded-square when toggled.
-     * - `square`: rounded-square, morphs to pill when toggled.
+     * Shape of the button container.
+     * MD3 Expressive morphs the shape slightly on press based on the chosen shape variant.
      * @default "round"
      */
-    shape?: "round" | "square";
+    shape?: MD3Shape;
     /**
-     * Optional leading or trailing icon node.
-     * Size is automatically scaled to match the button's `size` prop.
+     * Override the default border width for outlined buttons.
+     * By default, this is derived from the size token (e.g., 1dp for sm, 3dp for xl).
      */
-    icon?: React$1.ReactNode;
+    outlineWidth?: number;
+    /**
+     * An optional icon to display alongside the label.
+     */
+    icon?: React.ReactNode;
     /**
-     * Position of the icon relative to the label text.
+     * Position of the icon relative to the label.
      * @default "leading"
      */
     iconPosition?: "leading" | "trailing";
     /**
-     * When `true`, replaces the icon with an animated loading indicator
-     * and prevents interaction.
+     * The loading state of the button. Replaces the icon (or is prepended) with a spinner.
+     * Disables the button visually and functionally.
      * @default false
      */
     loading?: boolean;
     /**
-     * Controls which loading spinner is shown while `loading={true}`.
-     * - `loading-indicator`: MD3 Expressive morphing shape (default).
-     * - `circular`: Classic circular spinner.
+     * The visual variant of the loading spinner.
      * @default "loading-indicator"
      */
     loadingVariant?: "loading-indicator" | "circular";
     /**
-     * When `true`, the Button renders its child element directly (using Radix Slot),
-     * merging all button props (className, style, event handlers) onto it.
-     * Useful for rendering a Next.js `<Link>` with Button styles.
-     *
-     * @example
-     * ```tsx
-     * <Button asChild size="lg">
-     *   <Link href="/components">Explore Components</Link>
-     * </Button>
-     * ```
+     * Replaces the wrapping `<button>` with the child element, passing all props and styles to it.
+     * Useful for rendering as an `<a>` tag or a React Router `<Link>`.
      * @default false
      */
     asChild?: boolean;
-    /** Button label — any React content, typically a string. */
-    children: React$1.ReactNode;
+    /**
+     * Explicitly sets the trailing icon layout mode.
+     * Mostly used internally by ButtonGroup to align dropdown carets.
+     * @internal
+     */
+    hasTrailingIcon?: boolean;
+    /**
+     * A specific string key identifying the button in a ButtonGroup context.
+     */
+    value?: string;
+    children: React.ReactNode;
 }
-/**
- * Complete `Button` props — discriminated union that enforces
- * `selected` is only valid for `variant="toggle"`.
- *
- * @example
- * ```tsx
- * // Standard button
- * <Button colorStyle="filled" size="md">Confirm</Button>
- *
- * // Toggle button (selected state required)
- * <Button variant="toggle" selected={isActive} onClick={toggle}>Filter</Button>
- *
- * // With leading icon and loading state
- * <Button icon={<CheckIcon />} loading={isSubmitting}>Save</Button>
- * ```
- *
- * @see https://m3.material.io/components/buttons/overview
- */
 type ButtonProps = BaseButtonProps & ({
     variant?: "default";
     selected?: never;
@@ -1208,35 +1153,7 @@ type ButtonProps = BaseButtonProps & ({
     variant: "toggle";
     selected: boolean;
 });
-/**
- * MD3 Expressive Button component.
- *
- * Supports all five MD3 color styles, five sizes, shape morphing on toggle,
- * leading/trailing icons, and an animated loading state.
- *
- * @remarks
- * - `variant="toggle"` requires `selected: boolean` — enforced by the type system.
- * - When `loading={true}`, the button is visually dimmed, pointer events are
- *   blocked, and `aria-busy` is set for screen readers.
- * - Shape morphs smoothly between pill ↔ rounded-square when toggle state changes,
- *   using a critically-damped spring (no overshoot artefacts).
- *
- * @example
- * ```tsx
- * // Standard filled button
- * <Button colorStyle="filled" size="md">Confirm</Button>
- *
- * // Button with icon
- * <Button icon={<CheckIcon />} loading={isSubmitting}>Save</Button>
- *
- * // Toggle button
- * <Button variant="toggle" selected={isActive} onClick={toggle}>
- *   Filter
- * </Button>
- * ```
- *
- * @see https://m3.material.io/components/buttons/overview
- */
+
 declare const Button: React$1.NamedExoticComponent<(Omit<BaseButtonProps & {
     variant?: "default";
     selected?: never;
@@ -1245,6 +1162,93 @@ declare const Button: React$1.NamedExoticComponent<(Omit<BaseButtonProps & {
     selected: boolean;
 }, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare const BUTTON_SIZE_TOKENS: {
+    readonly xs: {
+        readonly height: "2rem";
+        readonly leadingSpace: "1rem";
+        readonly trailingSpace: "1rem";
+        readonly iconSize: "1.25rem";
+        readonly iconLabelSpace: "0.5rem";
+        readonly outlineWidth: 1;
+        readonly squareShapeRadius: 12;
+        readonly pressedShapeRadius: 8;
+        readonly roundShapeRadius: 16;
+    };
+    readonly sm: {
+        readonly height: "2.5rem";
+        readonly leadingSpace: "1rem";
+        readonly trailingSpace: "1rem";
+        readonly iconSize: "1.25rem";
+        readonly iconLabelSpace: "0.5rem";
+        readonly outlineWidth: 1;
+        readonly squareShapeRadius: 12;
+        readonly pressedShapeRadius: 8;
+        readonly roundShapeRadius: 20;
+    };
+    readonly md: {
+        readonly height: "3.5rem";
+        readonly leadingSpace: "1.5rem";
+        readonly trailingSpace: "1.5rem";
+        readonly iconSize: "1.5rem";
+        readonly iconLabelSpace: "0.5rem";
+        readonly outlineWidth: 1;
+        readonly squareShapeRadius: 16;
+        readonly pressedShapeRadius: 12;
+        readonly roundShapeRadius: 28;
+    };
+    readonly lg: {
+        readonly height: "6rem";
+        readonly leadingSpace: "3rem";
+        readonly trailingSpace: "3rem";
+        readonly iconSize: "2rem";
+        readonly iconLabelSpace: "0.75rem";
+        readonly outlineWidth: 2;
+        readonly squareShapeRadius: 28;
+        readonly pressedShapeRadius: 16;
+        readonly roundShapeRadius: 48;
+    };
+    readonly xl: {
+        readonly height: "8.5rem";
+        readonly leadingSpace: "4rem";
+        readonly trailingSpace: "4rem";
+        readonly iconSize: "2.5rem";
+        readonly iconLabelSpace: "1rem";
+        readonly outlineWidth: 3;
+        readonly squareShapeRadius: 28;
+        readonly pressedShapeRadius: 16;
+        readonly roundShapeRadius: 68;
+    };
+};
+declare const BUTTON_COLOR_TOKENS: {
+    readonly elevated: {
+        readonly default: "bg-m3-surface-container-low text-m3-primary shadow-md";
+        readonly selected: "bg-m3-primary text-m3-on-primary shadow-md";
+        readonly unselected: "bg-m3-surface-container-low text-m3-primary shadow-md";
+    };
+    readonly filled: {
+        readonly default: "bg-m3-primary text-m3-on-primary";
+        readonly selected: "bg-m3-primary text-m3-on-primary";
+        readonly unselected: "bg-m3-surface-container text-m3-on-surface-variant";
+    };
+    readonly tonal: {
+        readonly default: "bg-m3-secondary-container text-m3-on-secondary-container";
+        readonly selected: "bg-m3-secondary text-m3-on-secondary";
+        readonly unselected: "bg-m3-secondary-container text-m3-on-secondary-container";
+    };
+    readonly outlined: {
+        readonly default: "bg-transparent text-m3-on-surface-variant border-m3-outline-variant";
+        readonly selected: "bg-m3-inverse-surface text-m3-inverse-on-surface border-transparent";
+        readonly unselected: "bg-transparent text-m3-on-surface-variant border-m3-outline-variant";
+    };
+    readonly text: {
+        readonly default: "bg-transparent text-m3-primary";
+        readonly selected: "bg-transparent text-m3-primary";
+        readonly unselected: "bg-transparent text-m3-primary";
+    };
+};
+
+type ButtonGroupVariant = "standard" | "connected" | "navbar";
+type ButtonGroupOrientation = "horizontal" | "vertical";
 /**
  * Thuộc tính truyền vào cho thành phần nhóm nút (Button Group).
  */
@@ -1253,14 +1257,15 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
      * Cấu trúc hiển thị của nhóm nút:
      * - `standard`: Các nút cách xa và có khoảng cách độc lập với nhau (gap).
      * - `connected`: Các nút nối liền khung viền với nhau để tạo thành dạng Segmented Button.
+     * - `navbar`: Nút hiển thị dưới dạng thanh điều hướng với active pill chuyển động (Sliding Indicator).
      * @default "standard"
      */
-    variant?: "standard" | "connected";
+    variant?: ButtonGroupVariant;
     /**
      * Hướng sắp xếp của các nút trong nhóm.
      * @default "horizontal"
      */
-    orientation?: "horizontal" | "vertical";
+    orientation?: ButtonGroupOrientation;
     /**
      * Đặt thành `true` nếu bạn muốn nhóm hiển thị dạng `standard` giãn đều lấp đầy toàn bộ khu vực chứa (container).
      * @default false
@@ -1269,890 +1274,1033 @@ interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetEl
     /**
      * Áp dụng thống nhất chung một kích thước (`size`) cho tất cả các con trong nhóm (ghi đè kích thước lẻ từng nút).
      */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: MD3Size;
     /**
      * Bật/tắt hiệu ứng thu phóng độ rộng / khoảng đệm (Morphing Width) khi nhấn vào các nút (áp dụng cho nhóm `standard`).
      * @default true
      */
     morphingWidth?: boolean;
+    /**
+     * Tỷ lệ mở rộng chiều rộng của nút khi được nhấn (áp dụng cho nhóm `standard` ngang).
+     * Theo MD3 Spec, mặc định là 0.15 (15%).
+     * @default 0.15
+     */
+    expandedRatio?: number;
     /**
      * Tự động hiển thị biểu tượng (icon) Check khi một nút trạng thái nằm trong nhóm được chỉ định là `selected={true}`.
      * @default false
      */
     showCheck?: boolean;
-}
-/**
- * Component Nhóm Nút (Button Group) được sử dụng để gom nhóm nhiều nút có công năng tương tự lại với nhau.
- * Hỗ trợ tạo các bộ nút độc lập (Standard) hoặc khối liên kết liền mạch (Connected/Segmented Buttons).
- * Kế thừa cơ chế chuyển động kết hợp liền mạch của MD3 Expressive.
- *
- * @example
- * ```tsx
- * // Nhóm nút tiêu chuẩn rời rạc (Standard)
- * <ButtonGroup variant="standard">
- *   <Button>Lựa chọn 1</Button>
- *   <Button>Lựa chọn 2</Button>
- * </ButtonGroup>
- *
- * // Nhóm nút liền khối (Connected Segmented Button)
- * <ButtonGroup variant="connected" showCheck fullWidth>
- *   <Button variant="toggle" selected={view === "day"} onClick={() => setView("day")}>Ngày</Button>
- *   <Button variant="toggle" selected={view === "week"} onClick={() => setView("week")}>Tuần</Button>
- *   <Button variant="toggle" selected={view === "month"} onClick={() => setView("month")}>Tháng</Button>
- * </ButtonGroup>
- * ```
- */
-declare const ButtonGroup: React$1.NamedExoticComponent<ButtonGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
-
-declare const cardVariants: (props?: ({
-    variant?: "outlined" | "elevated" | "filled" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
-interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
-    /** Vô hiệu hóa tương tác và giảm opacity (MD3 disabled state). */
-    disabled?: boolean;
     /**
-     * Buộc card trở thành interactive dù không có `onClick`.
-     * Hữu ích khi card chứa các element con là interactive.
+     * Điều khiển hành vi hiển thị Icon (áp dụng chính cho `navbar`).
+     * - `selected`: Chỉ hiển thị icon trên mục được chọn.
+     * - `all`: Hiển thị trên tất cả.
+     * - `none`: Ẩn toàn bộ icon.
      */
-    interactive?: boolean;
+    iconBehavior?: "selected" | "all" | "none";
     /**
-     * Nếu có, card render thành thẻ `<a>`. Tự động kích hoạt interactive mode.
-     * Ưu tiên dùng `href` thay vì `onClick` khi điều hướng trang.
+     * Điều khiển hành vi hiển thị Label (áp dụng chính cho `navbar`).
+     * - `selected`: Chỉ hiển thị label trên mục được chọn.
+     * - `all`: Hiển thị trên tất cả.
+     * - `none`: Ẩn toàn bộ label.
      */
-    href?: string;
-    /** Target cho thẻ `<a>` (chỉ có hiệu lực khi `href` được cung cấp). */
-    target?: React$1.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
-    /** rel cho thẻ `<a>` (tự động thêm `noreferrer` khi `target="_blank"`). */
-    rel?: string;
-    children?: React$1.ReactNode;
+    labelBehavior?: "selected" | "all" | "none";
+    /**
+     * Tùy chọn: Bật chế độ Active Morphing (dựa trên Selection).
+     * Khi `true`, các nút sẽ tự động co dãn (tăng/giảm width) dựa trên việc nút nào đang được chọn,
+     * tạo hiệu ứng thay đổi kích thước mượt mà theo trạng thái.
+     * Khi `false` hoặc `undefined`, Group sẽ hoạt động dựa trên `isPressed` (nhấn chuột) như mặc định.
+     */
+    activeMorphing?: boolean;
+    /**
+     * Class CSS tùy chỉnh áp dụng cho từng button con trong nhóm.
+     * Hữu ích để thay đổi padding, min-width hoặc các thuộc tính khác một cách linh hoạt.
+     * Đối với variant `navbar`, class này sẽ được ưu tiên hơn so với các padding mặc định.
+     */
+    itemClassName?: string;
 }
-declare const Card: React$1.NamedExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
 
-/**
- * @file checkbox.tsx
- * MD3 Expressive Checkbox — 2-state and tri-state support.
- * Spec: https://m3.material.io/components/checkbox/overview
- */
+declare const ButtonGroup: React$1.NamedExoticComponent<ButtonGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 
+type MotionButtonProps$1 = Omit<HTMLMotionProps<"button">, "children" | "color">;
 /**
- * Tri-state value: `"unchecked"` | `"checked"` | `"indeterminate"`.
- */
-type CheckboxState = "unchecked" | "checked" | "indeterminate";
-/**
- * Props for `Checkbox`. Supports boolean (`checked`/`onCheckedChange`)
- * and tri-state (`state`/`onStateChange`) modes.
- */
-interface CheckboxProps {
-    /** Controlled checked value (2-state mode). */
-    checked?: boolean;
-    /** Initial value for uncontrolled mode. @default false */
-    defaultChecked?: boolean;
-    /** Forces indeterminate rendering regardless of `checked`. */
-    indeterminate?: boolean;
-    /** Fired on checked change (simple mode). Not called when disabled. */
-    onCheckedChange?: (checked: boolean) => void;
-    /** Controlled tri-state value. Takes priority over `checked`/`indeterminate`. */
-    state?: CheckboxState;
-    /** Fired on tri-state change. Cycles: unchecked → checked → indeterminate. */
-    onStateChange?: (state: CheckboxState) => void;
-    /** Disables interaction and applies 0.38 opacity. */
-    disabled?: boolean;
-    /** Error state — changes colors to `m3-error` and sets `aria-invalid`. */
-    error?: boolean;
-    /** Adjacent label text. Wraps checkbox + span in `<label>`. */
-    label?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    "aria-required"?: boolean;
-    /** Passed to the hidden `<input>` for form submission. */
-    name?: string;
-    /** Passed to the hidden `<input>` for form submission. */
-    value?: string;
-    /** ID for the hidden `<input>`. Auto-generated when `label` is set. */
-    id?: string;
-    /** Extra class names on the outermost wrapper. */
-    className?: string;
-    /** Ref pointing to the hidden `<input type="checkbox">`. */
-    ref?: React$1.Ref<HTMLInputElement>;
-}
-/**
- * `TriStateCheckbox` props — requires `state` + `onStateChange`.
- */
-interface TriStateCheckboxProps extends Omit<CheckboxProps, "checked" | "defaultChecked" | "onCheckedChange"> {
-    state: CheckboxState;
-    onStateChange: (state: CheckboxState) => void;
-}
-/**
- * MD3 Expressive Checkbox component.
- *
- * Supports 2-state and tri-state patterns. Fully animated per MD3 spec:
- * checkmark draw, indeterminate dash morph, container fill, state layer, and ripple.
- *
- * @example
- * ```tsx
- * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} label="Accept terms" />
- * <Checkbox state={parentState} onStateChange={setParentState} label="Select all" />
- * <Checkbox error label="Required field" aria-describedby="err-msg" />
- * ```
- * @see https://m3.material.io/components/checkbox/overview
- */
-declare const Checkbox: React$1.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
-/**
- * MD3 Expressive Tri-State Checkbox.
+ * Tham số Props dùng cho component thao tác nổi `FAB`.
  *
- * Convenience wrapper around `Checkbox` that enforces `state` + `onStateChange`.
- * Ideal for parent-child selection patterns.
+ * @remarks
+ * - Đảm bảo rằng đối với loại FAB chỉ show ra mỗi con Icon mà không có nhãn hiển thị (icon-only), bắt buộc phải có thuộc tính `aria-label` nhằm phục vụ (accessibility).
+ * - Ở hình thể mở rộng (khi `extended={true}`), phần nội dung truyền vào `children` chính là chuỗi Text được thể hiện cùng nút, và nó sẽ khiến nút button có label mặc định nên bạn có thể chém bớt tham số `aria-label`.
+ * - Thuộc tính cờ `lowered` (chìm) giúp giáng cấp hiệu ứng tạo bóng Shadow của thẻ, rải mảng cái shadow theo phong thái MD3 "lowered" FAB;
+ *   sử dụng khi nút FAB này vốn bị bọc bên trong bề mặt chìm đè lên component gì khác mà vốn tụi nó đã nhún ở mực sâu (Ví dụ Bottom App Bar) để thiết lập Hierarchy hài hoà.
  *
- * @example
- * ```tsx
- * <TriStateCheckbox state={parentState} onStateChange={setParentState} label="Select all" />
- * ```
+ * @see https://m3.material.io/components/floating-action-button/overview
  */
-declare const TriStateCheckbox: React$1.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
-
-declare const chipVariants: (props?: ({
-    variant?: "input" | "filter" | "assist" | "suggestion" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+interface FABProps extends MotionButtonProps$1 {
     /**
-     * Chip variant.
-     * - `assist`     → Smart/automated actions. Flat by default, can be elevated.
-     * - `filter`     → Toggleable tag/filter. Shows animated checkmark when selected.
-     * - `input`      → Entity representation (tag, contact). Has optional avatar + remove button.
-     * - `suggestion` → Contextual suggestions. Like assist, flat by default, can be elevated.
-     * @default 'assist'
+     * Icon đại diện render — thông thường là truyền thẻ component Icon.
+     * Sẽ được tráo đổi thành Spinner tự động quay khi giá trị `loading={true}`.
      */
-    variant?: VariantProps<typeof chipVariants>["variant"];
+    icon: React$1.ReactNode;
     /**
-     * Renders with elevation shadow (Level 1) and fills background with `surface-container-low`.
-     * Applicable to `assist`, `filter` (unselected), and `suggestion` variants.
-     * Source: AssistChipTokens.ElevatedContainerColor / SuggestionChipTokens.ElevatedContainerColor
+     * Kích thước hiển thị FAB. Tuân chuẩn.
+     * - `sm`: Small (40dp) — Được khuyên dùng cho các không gian kín/trong lòng Content.
+     * - `md`: Regular (56dp) — Action thứ yếu hoặc tiêu điểm màn hình. (Phần đông người dùng xài).
+     * - `lg`: Large (96dp) — Trọng tâm thao tác quan trọng lớn nhát.
+     * - `xl`: Extra-large (136dp) — Gây tiếng vang, dạng Spotlight cực bùng nổ của app.
+     * @default "md"
      */
-    elevated?: boolean;
+    size?: "sm" | "md" | "lg" | "xl";
     /**
-     * Toggle/selection state.
-     * - `filter`:  selected → bg `secondary-container`, animated checkmark appears.
-     * - `input`:   selected → bg `secondary-container`.
-     * Used for `role="checkbox"` (filter) / `aria-pressed` (input).
+     * Container vai trò hệ thống tông màu MD3 dùng phết nền.
+     * @default "primary"
      */
-    selected?: boolean;
+    colorStyle?: "primary" | "secondary" | "tertiary" | "surface";
     /**
-     * Disables the chip. Applies:
-     * - `pointer-events-none` – no mouse/touch interaction
-     * - `opacity-[0.38]`      – DisabledLabelTextOpacity (0.38) per MD3 tokens
-     * - `aria-disabled="true"`
-     * - `tabIndex={-1}`
+     * Kích hoạt khi giá trị được đổi là `true`, sẽ diễn tả Animation bung chữ kèm theo độ dãn hình dài cho cái FAB.
+     * Chiều rộng tự cơi nới để thích ứng chuỗi `children`.
+     * @default false
      */
-    disabled?: boolean;
+    extended?: boolean;
     /**
-     * Visible label. Required. Can be a string or ReactNode.
+     * Nơi đón lấy chữ được render cùng khi `extended={true}` bật lên.
+     * Khuyến nghị là Text string thuần.
      */
-    label: React$1.ReactNode;
+    children?: React$1.ReactNode;
     /**
-     * Optional leading icon element (18×18px recommended).
-     * For `filter` chips with `selected=true`, this is replaced by an animated checkmark.
-     * For `assist`/`suggestion`: icon color → `primary`
-     * For `input` (unselected): icon color → `on-surface-variant`
+     * Nhấn `true`, thì rút lại shadow đi một cấp xuống độ nổi nông cạn.
+     * Mảng bám ở Bottom bar hay Top bar Surface để ránh rườm rà.
+     * @default false
      */
-    leadingIcon?: React$1.ReactNode;
+    lowered?: boolean;
     /**
-     * Optional trailing icon element (18×18px recommended).
-     * Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
+     * Nhấp chuột sang `true`, đổi Icon thành cối xay Spinner chờ kết quả. Đồng loạt chặn click tương tác.
+     * @default false
      */
-    trailingIcon?: React$1.ReactNode;
+    loading?: boolean;
     /**
-     * Avatar element for `input` chips. Takes priority over `leadingIcon`.
-     * Rendered as a 24×24px circle (InputChipTokens: AvatarSize = 24.dp, AvatarShape = CornerFull).
+     * Có 2 chuẩn hình của Loading chờ.
+     * @default "loading-indicator"
      */
-    avatar?: React$1.ReactNode;
+    loadingVariant?: "loading-indicator" | "circular";
     /**
-     * Callback when the trailing remove (×) button is activated on `input` chips.
-     * When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
+     * Hiện thẻ FAB lên layout không (Kiểm soát bằng motion scale Entrance/Exit).
+     * @default true
      */
-    onRemove?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+    visible?: boolean;
 }
 /**
- * MD3 Expressive Chip — 4-variant interactive tag component.
+ * Interface cho component bọc thẻ `FABPosition` — Gắn lớp absolute position nhét cục FAB vào một góc cố định của góc nào đó tại trình duyệt/bề mặt render.
  *
- * @remarks
- * - `filter` chips accept `selected` and render an animated checkmark.
- * - `input` chips accept `onRemove` to render a compound close button.
- * - `elevated` is supported on `assist`, `filter` (unselected), and `suggestion`.
- * - Fully accessible: `role="checkbox"` for filter, `role="group"` for compound chips.
+ * @see {@link FABPosition}
+ */
+interface FABPositionProps {
+    /**
+     * Góc để niêm chặt nút FAB.
+     * @default "bottom-right"
+     */
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Kẹp một nùi element. Mong chờ thả Node `<FAB>` vào đây.*/
+    children: React$1.ReactNode;
+    /** CSS Class hỗ trợ chỉnh override */
+    className?: string;
+}
+/**
+ * Element bao bọc thẻ định vị Absolute cho component `<FAB>`.
+ *
+ * Component dùng để cắm phao Neo cái FAB vào sát ở góc của screen kèm theo một cái offset space theo responsive an toàn mà lại trơn chu nhạy nhẽo.
+ * Nhưng có quy tắc gốc đó là phần tử bao bọc cha mẹ của nó PHẢI có thẻ tag css `position: relative` (hoặc ở cấp tổ tiêm của trang nào đó phải đẻ gốc rễ ra posisition).
  *
  * @example
  * ```tsx
- * // Assist chip
- * <Chip variant="assist" label="Share" onClick={share} />
- *
- * // Filter chip
- * <Chip variant="filter" label="Unread" selected={showUnread} onClick={toggle} />
- *
- * // Input chip with remove
- * <Chip variant="input" label="React" onRemove={() => removeTag("React")} />
+ * <div className="relative min-h-screen">
+ *   // Cái nút sẽ xà xuống dưới cùng bên lề Trái
+ *   <FABPosition position="bottom-left">
+ *     <FAB icon={<Icon name="edit" />} aria-label="Compose New Mail" />
+ *   </FABPosition>
+ * </div>
  * ```
  *
- * @see https://m3.material.io/components/chips/overview
+ * @see {@link FAB}
+ * @see https://m3.material.io/components/floating-action-button/guidelines
  */
-declare const Chip: React$1.NamedExoticComponent<ChipProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-interface CodeBlockProps {
-    /** Raw code string to display and copy. */
-    code: string;
-    /** Language label in the header (presentational only). @default "React" */
-    language?: string;
-    /** Additional CSS classes for the outer wrapper. */
-    className?: string;
-    /**
-     * Pre-highlighted HTML from Shiki SSR.
-     * Use `codeToHtml` with `themes: { light, dark }` for dual-theme support.
-     */
-    html?: string;
-}
-declare function CodeBlock({ code, language, className, html, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
-
+declare function FABPosition({ position, children, className, }: FABPositionProps): react_jsx_runtime.JSX.Element;
 /**
- * Thuộc tính của cội gốc Root `Dialog`. Chức năng làm gương phản hồi của Radix `Dialog.Root` qua dạng controlled state đóng hay mở.
+ * Action nổi chính theo phong cách MD3 Expressive Floating Action Button (FAB).
+ *
+ * Phơi nhiễm các action tạo nhịp điệu kích hoạt cho người sử dụng với đủ bộ trang hoàn trọn kích thước Size (SM->XL),
+ * mang nhiều màu sắc Color role khác biệt, cung cấp một sức nén cho Label để kéo toẹt cái ống dài ra (gọi là Dạng Mở Rộng - Extended) tạo nên hành động sinh động,
+ * Trạng thái load/nhấp hiện xuất cùng animation thu scale thoát cảnh bắt mắt đầy nghệ thuật.
+ *
+ * @remarks
+ * - Chỉ định bắt buộc `aria-label` cho những mẫu icon bị đơn côi trơ trọi (icon-only FABs).
+ * - Trường hợp xài mode Mở Rộng qua việc truyền hàm `extended={true}`, nút FAB này tự ngộ nhận thân thế, lấy `children` dùng làm Aria label luôn hễ như `children` đó đang chứa text string.
+ *   Khi ấy bạn tha hồ cắt bỏ thuộc tính `aria-label` ra.
+ * - Lúc cho biến mất (`visible={false}`), bộ nút tung chiêu lùi về sau làm quả rút bóng thoát Scale-out qua effect spring uyển chuyển.
+ * - Sài kèm `FABPosition` bao đùm nó lại nếu bạn muốn xích nó cố định ngấm chân sâu góc màn hình hiển thị.
  *
  * @example
  * ```tsx
- * const [open, setOpen] = React.useState(false);
+ * // FAB cơ bản, nhỏ xinh, chỉ hiện icon.
+ * <FAB icon={<Icon name="search" />} aria-label="Nhấn tìm kiếm" size="sm" />
  *
- * <Dialog open={open} onOpenChange={setOpen}>
- *   <DialogTrigger asChild>
- *      <Button>Bấm Mở Dialog</Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *        <DialogTitle>Bạn có muốn phiêu lưu không?</DialogTitle>
- *     </DialogHeader>
- *     <DialogBody>Chuẩn bị lên đồ rời khỏi hang nào.</DialogBody>
- *     <DialogFooter>
- *        <Button onClick={() => setOpen(false)} variant="text">Đóng</Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
+ * // Dịch sang dòng Extended có dòng caption chữ dài thòn
+ * const [isOpen, setOpen] = React.useState(false);
+ * <FAB
+ *   icon={<Icon name="edit" />}
+ *   extended={isOpen}
+ *   onClick={() => setOpen(!isOpen)}
+ * >
+ *   Viết tâm thư
+ * </FAB>
+ *
+ * // FAB to lớn nhất dùng trạng thái chờ load Submit lên Server
+ * <FAB
+ *   icon={<Icon name="upload" />}
+ *   size="lg"
+ *   loading={isUploading}
+ *   colorStyle="secondary"
+ *   aria-label="Upload Files lên mây xanh"
+ * />
+ *
+ * // Cố định dưới chân tay phải
+ * <FABPosition position="bottom-right">
+ *   <FAB icon={<Icon name="add" />} aria-label="Dấu Cộng sinh nảy" />
+ * </FABPosition>
  * ```
+ *
+ * @see https://m3.material.io/components/floating-action-button/overview
  */
-interface DialogProps {
-    /** Whether the dialog is open (controlled). Omit for uncontrolled. */
-    open?: boolean;
-    /** Called when the open state should change. */
-    onOpenChange?: (open: boolean) => void;
-    /** Dialog trigger + content. */
-    children: React$1.ReactNode;
-}
+declare const FAB: React$1.NamedExoticComponent<Omit<FABProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
 /**
- * Các props được tiêm vào component bao ngoài Container `DialogContent` thuộc dạng Normal Standard.
+ * Định dạng dữ liệu cho từng hành động (item) trong biểu mẫu menu của FAB.
  *
- * @see {@link DialogContent}
+ * Nếu bỏ qua thuộc tính `label`, item sẽ render dạng ô vuông chỉ có icon.
  */
-interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
-    /** Vô hình đi đi nút Close dấu (X) góc phải trên. @default false */
-    hideCloseButton?: boolean;
+interface FABMenuItemData {
+    /** Một ID duy nhất để dùng cho key react và quản lý focus. */
+    id: string;
+    /** Label hiển thị cạnh icon (tuỳ chọn). Không thêm thuộc tính này nếu muốn hiển thị chỉ có icon (icon-only). */
+    label?: string;
+    /** Node của Icon — thường là một component SVG Icon duy nhất. */
+    icon: React$1.ReactNode;
+    /** Gọi hàm ngay lập tức khi item được kích hoạt (click hoặc nhấn Enter/Phím cách). */
+    onClick: () => void;
+    /**
+     * Khi `true`, vô hiệu hoá item về mặt hình thức lẫn tương tác rẽ nhánh.
+     * Vẫn dùng `aria-disabled` thay vì HTML `disabled` nhằm giữ nó lấy được focus phục vụ cho accessibility.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Thêm CSS classes bổ sung dùng cho wrapper chính của item. */
     className?: string;
 }
 /**
- * Thuộc tính Props của biến thể `DialogFullScreenContent` chuyên dụng dành riêng cho Mode Full-Screen tràn màn hình.
+ * Các props điều khiển Component chính `FABMenu`.
  *
  * @remarks
- * Những hộp thoại Full-screen có biệt tài tự nới rộng và xâm chiếm cả bề ngang dọc nguyên thiết bị. Nó còn thiết lập một đường Top App bar (thanh ngang đỉnh)
- * kẹp chung cả 1 nhãn title mô tả đỉnh, một nút icon X dẹp ở rìa, thêm luôn hẳn cái nút Confirm cực xịn xò.
- *
- * @see {@link DialogFullScreenContent}
- * @see https://m3.material.io/components/dialogs/guidelines#full-screen
+ * FABMenu quản lý vòng đời trạng thái mở/đóng menu (open/close), quản lý focus, điều khiển phím,
+ * và điều hướng hiệu ứng chuyển động. Trạng thái `expanded` được truyền từ ngoài (controlled state),
+ * do đó bạn có thể quản lý qua react state, hoặc dùng router hay business logic khác.
  */
-interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
-    /** Nhãn Title nằm vùng khu vực thanh ngang Top Bar. */
-    title?: string;
-    /** Chữ viết đính kèm bên trong cục Nút nhấn thao tác ngay trên góc Top App bar đó (VD: "Lưu lại", "Save"). */
-    actionLabel?: string;
-    /** Hàm handler phát động cờ để kích chạy tính năng lưu, xác nhận kia. */
-    onAction?: () => void;
-    /** Rạch một làn kẻ chia cách thân body nội dung cuộn bên dưới và dòng App bar cố thủ bên trên. @default false */
-    showDivider?: boolean;
+interface FABMenuProps {
+    /** FAB Menu có đang mở (mở rộng)/hiển thị hay không. */
+    expanded: boolean;
+    /** Hàm handler kích hoạt khi Toggle FAB được người dùng tương tác, hoặc khi dismiss backdrop. */
+    onToggle: (expanded: boolean) => void;
+    /** Danh sách các action items (Spec MD3 đề nghị 2-6 item là hoàn hảo). */
+    items: FABMenuItemData[];
+    /**
+     * Vai trò màu (color role container) MD3 cho cái nút FAB lẫn các menu items.
+     * @default "primary"
+     */
+    colorVariant?: "primary" | "secondary" | "tertiary";
+    /**
+     * Kích cỡ khởi tạo cho cái ToggleFAB (FAB biến hình thành cục đóng dấu X khi nó expanded).
+     * @default "baseline"
+     */
+    fabSize?: "baseline" | "medium" | "large";
+    /**
+     * Căn lề của danh sách menu items tương quan với cái Toggle FAB.
+     * - `"end"`: Các items dồn hết theo lề phía tay phải (trailing edge, default cực hữu hiệu đối với RTL design).
+     * - `"start"`: Các items dồn hết dọc theo lề trái.
+     * - `"center"`: Các item sẽ được căn ra giữa chiều dọc, căn giữa tâm khối với cái FAB.
+     * @default "end"
+     */
+    alignment?: "start" | "end" | "center";
+    /** Thuộc tính cho CSS component root để đè. */
     className?: string;
+    /**
+     * Nếu `true`, khi menu đang hiện ra, click chuột ra phía sau (màn xám mờ backdrop) để đóng menu.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Nếu `true`, focus sẽ tự động chạy xuống item CUỐI (sát bên trên cái nút FAB) khi menu vừa loé mờ ra.
+     * Nếu `false`, focus sẽ bay lên item ĐẦU TIÊN của danh sách (cao nhất trên màn hình).
+     * @default true
+     */
+    focusLast?: boolean;
+    /** Bắt buộc truyền `aria-label` cho ToggleFAB để đáp ứng Accessibility. */
+    "aria-label"?: string;
 }
 /**
- * Gốc rễ Root của Component Dialog — trạc lấp lên cái module `Dialog.Root` của nhà Radix.
- *
- * @remarks Cơ năng hoạt động ở chế độ Controlled (kiểm soát vòng đời ở Client) xài mảng `open`/`onOpenChange`.
- *  Tuy thế bạn nếu không thích thì đừng có xài truyền mấy cái Props tay đôi trên, mà bỏ xài kiểu Untracked thông qua cái cục `DialogTrigger` là đủ.
+ * Props thuộc component `ToggleFAB` đứng độc lập.
  */
-declare const Dialog: {
-    ({ open, onOpenChange, children }: DialogProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-/** Bộ Trigger gieo phát đà giúp tắt bật cờ State đóng mở của Dialog con, dùng kèm kĩ năng nhét thông qua cái cầu `asChild`. */
-declare const DialogTrigger: React$1.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: {
-    ({ open, children, }: {
-        open?: boolean;
-        children: React$1.ReactNode;
-    }): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const DialogBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const DialogClose: React$1.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DialogFullScreenContent: React$1.ForwardRefExoticComponent<DialogFullScreenContentProps & React$1.RefAttributes<HTMLDivElement>>;
-
-/**
- * @file divider.tsx
- *
- * MD3 Expressive Divider component.
- *
- * - `Divider` → A thin line that groups content in lists and layouts.
- *
+interface ToggleFABProps {
+    /** Nút có đang trong trạng thái được kích hoạt check (expanded). */
+    expanded: boolean;
+    /** Gọi khi xảy ra sự kiện Toggle nút. */
+    onToggle: (expanded: boolean) => void;
+    /**
+     * Function sinh Icon - nhận về tiến độ `progress` trong khoảng `0` -> `1` (Từ Chưa Expanded -> Đã Expanded)
+     * Dùng cho các hiệu ứng morphing Icon khi animtion render (VD: Từ Cộng thành Đóng).
+     *
+     * @example
+     * ```tsx
+     * icon={(progress) => progress > 0.5 ? <Icon name="close" /> : <Icon name="add" />}
+     * ```
+     */
+    icon: (progress: number) => React$1.ReactNode;
+    /** Vai trò màu container chuẩn MD3. @default "primary" */
+    colorVariant?: "primary" | "secondary" | "tertiary";
+    /** Kích thước của cục FAB ban đầu (Sau khi nhấn sẽ thu tròn). @default "baseline" */
+    fabSize?: "baseline" | "medium" | "large";
+    /** CSS Class linh tinh bổ sung thêm. */
+    className?: string;
+    /** Thuộc tính đọc thẻ accessibility. Bắt buộc có. */
+    "aria-label"?: string;
+    /** Kiểm soát giá trị của ID để link với menu qua aria-controls. */
+    "aria-controls"?: string;
+    /** Trỏ id component. */
+    id?: string;
+}
+/**
+ * Props thuộc component một món item đơn lẻ `FABMenuItem`.
+ */
+interface FABMenuItemProps {
+    /** Node của icon hiện. */
+    icon: React$1.ReactNode;
+    /** Tên nhãn mô tả kế bên icon cho item này. Hoặc ẩn nó đi nếu không mong đợi. */
+    label?: string;
+    /** Hàm bắn ra khi item được kích. */
+    onClick: () => void;
+    /** Vô hiệu hóa hành vi tương tác item mà vẫn cho phép bàn phím tab bấm dính lấy focus. @default false */
+    disabled?: boolean;
+    /** Container tông màu. @default "primary" */
+    colorVariant?: "primary" | "secondary" | "tertiary";
+    /** Custom CSS className. */
+    className?: string;
+    /** Số index liệt kê trong mảng dùng tính render delay (Dành cho animation cấu trúc `custom`). */
+    index?: number;
+    /** Tổng danh sách items có mảng. */
+    totalItems?: number;
+    /** Giá trị logic `tabIndex` dùng điều khiển thao tác phím Tab thủ công. */
+    tabIndex?: number;
+}
+/**
+ * Nút Toggle FAB (Biến hình) có thể được dùng độc lập đứng một mình (standalone) hoặc kết nối để kích hoạt mở cả nùi Menu ở dưới con `FABMenu`.
+ *
+ * Sức ép hiệu ứng kích thước khung nền sẽ chuyển từ vuôn/vát cạnh sang hình tròn hẵn (square → circle), chuyển biến cả màu sắc
+ * khi mà cờ `expanded` chuyển tiếp từ false sang → true.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
+ * <ToggleFAB
+ *   expanded={open}
+ *   onToggle={setOpen}
+ *   colorVariant="primary"
+ *   aria-label="Toggle actions"
+ *   icon={(progress) => progress > 0.5 ? <Icon name="close" /> : <Icon name="add" />}
+ * />
+ * ```
+ */
+declare const ToggleFAB: React$1.NamedExoticComponent<ToggleFABProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Một item thực hiện một loại hành động duy nhất trong `FABMenu`.
+ *
+ * Render hình dạng viên thuốc bao quanh icon cùng với label diễn giải.
+ * Khi `label` bỏ trống, nó sẽ render thành một cục thẻ gạch ốp màu vuông vức chứa chữ mỗi cái icon.
+ * Component chứa gợn sóng MD3 Ripple cùng 48dp chuẩn vùng target đụng diện chuẩn WCAG 2.5.5 cho cảm ứng.
+ *
  * @remarks
- * Token references (Kotlin source — DividerTokens.kt v0_117):
- *   Color     = ColorSchemeKeyTokens.OutlineVariant → bg-m3-outline-variant / text-m3-outline-variant
- *   Thickness = 1.0.dp → h-px (flat horizontal) | w-px (flat vertical) | strokeWidth={1} (wavy SVG)
+ * Những thành phần khi bị tắt (vô hiệu tương tác) thì chỉ được dùng role `aria-disabled="true"` ở lớp div bề mặt thay vì lấy
+ *  thuộc tính gốc `disabled` của HTML. Nhờ đó, item tuy xám mờ không bấm được phím chuột vẫn sẽ có khả năng focus qua vòng đời tab phím bàn phím
+ * (quy chuẩn chặt chẽ của Material Design 3).
+ */
+declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * MD3 Expressive FAB Menu.
  *
- * Variants:
- *   - "full-bleed"    → spans full width, no indent
- *   - "inset"         → leading indent (16dp standard / 72dp after-icon via insetStart)
- *   - "middle-inset"  → 16dp indent both sides
- *   - "subheader"     → same as full-bleed (label provided externally)
+ * Bộ mở rộng Floating Action Button. Khi tương tác bật vào toggle-button (FAB con lai), sẽ trút ra mớ tác vụ menu ở xếp dọc (hoặc lan ra) từ trên đè ngược xuống trên nó.
  *
- * Shapes:
- *   - "flat"  → straight 1px line rendered as <m.div> (default)
- *   - "wavy"  → sinusoidal SVG wave via <m.svg> + buildWavePath helper (horizontal only)
+ * Accessibility thực thi chuẩn MD3 toàn phần:
+ *  - thẻ `role="menu"` trang bị cho thẻ hộp div làm luống container
+ *  - trang bị thẻ `role="menuitem"` trên mảng items thành phần con
+ *  - Lifecycle Focus cho trải nghiệm hoàn mỹ: Mở phím bật -> Focus thẳng lên item cao/thấp đầu/cuối cùng menu; Đóng tắt menu -> Focus trả về ngược lại ToggleFAB
+ *  - Tính năng Bàn Phím: Lách Escape nhấn tắt nhắm, Nhấn phím hướng lên-xuống(ArrowUp/Down) để di chuyển, Móc Tab(hoặc là Shift+Tab) nhảy lăng quăng qua các item.
  *
- * Architecture:
- *   - Styling: `cn` (clsx/tailwind-merge) + static Tailwind classes only
- *   - Animation: Framer Motion LazyMotion/domMax, scaleX/scaleY spring entrance
- *   - Wavy: SVG path generated by pure-JS `buildWavePath()` (cubic Bézier sine approx)
- *           Uses ResizeObserver (via useContainerWidth) to measure container width so
- *           the path has precise bounds and leading/trailing ends are properly rounded.
- *   - A11y: role="separator", aria-orientation, aria-hidden when decorative
+ * @example
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
  *
- * @see https://m3.material.io/components/divider/overview
+ * const items = [
+ *   { id: 'share', icon: <Icon name="share" />, label: 'Chia sẻ', onClick: () => console.log('Share') },
+ *   { id: 'edit', icon: <Icon name="edit" />, label: 'Chỉnh sửa', onClick: () => console.log('Edit') },
+ *   { id: 'delete', icon: <Icon name="delete" />, label: 'Xóa bớt', disabled: true, onClick: () => {} }
+ * ];
+ *
+ * <FABMenu
+ *   expanded={open}
+ *   onToggle={setOpen}
+ *   aria-label="Các công cụ thao tác nhanh"
+ *   alignment="center"
+ *   colorVariant="tertiary"
+ *   items={items}
+ * />
+ * ```
+ *
+ * @see https://m3.material.io/components/floating-action-button/overview
  */
+declare function FABMenu({ expanded, onToggle, items, colorVariant, fabSize, alignment, className, closeOnBackdropClick, focusLast, "aria-label": ariaLabel, }: FABMenuProps): react_jsx_runtime.JSX.Element;
 
-type SafeHTMLDivAttrs = Omit<React$1.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
-interface DividerProps extends SafeHTMLDivAttrs {
-    /**
-     * Visual variant controlling indentation.
-     * - "full-bleed"   → no indent, spans full container width/height (default)
-     * - "inset"        → leading indent only (use `insetStart` to control amount)
-     * - "middle-inset" → 16px indent on both sides
-     * - "subheader"    → alias for full-bleed, used before section labels
-     * @default "full-bleed"
-     */
-    variant?: "full-bleed" | "inset" | "middle-inset" | "subheader";
+/**
+ * @file icon-button.tsx
+ *
+ * MD3 Expressive Icon Button component.
+ *
+ * An icon-only button with shape morphing, ripple effect, loading state,
+ * and toggle variant. Requires `aria-label` for accessibility since there
+ * is no visible text label.
+ *
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+
+type MotionButtonProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
+/**
+ * Base props for the Icon Button component.
+ *
+ * @see {@link IconButtonProps} for the full discriminated union.
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+interface BaseIconButtonProps extends MotionButtonProps {
     /**
-     * Orientation of the divider line.
-     * - "horizontal" → renders as `h-px w-full` bar (default)
-     * - "vertical"   → renders as `w-px h-full` column
-     * Note: `shape="wavy"` is not supported with orientation="vertical".
-     * @default "horizontal"
+     * Visual color style following MD3 color roles.
+     * @default "standard"
      */
-    orientation?: "horizontal" | "vertical";
+    colorStyle?: "standard" | "filled" | "tonal" | "outlined";
     /**
-     * Shape of the divider line.
-     * - "flat"  → straight 1px line rendered as `<div>` (default)
-     * - "wavy"  → sinusoidal SVG wave (horizontal orientation only)
-     *
-     * When `shape="wavy"` and `orientation="vertical"`, silently falls back to
-     * `shape="flat"` and emits a `console.warn`.
-     * @default "flat"
+     * Button container size.
+     * Sizes: XS=32dp, SM=40dp, MD=56dp, LG=96dp, XL=136dp.
+     * @default "sm"
      */
-    shape?: "flat" | "wavy";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     /**
-     * Leading inset size for the "inset" variant.
-     * - "standard" → 16px (`ml-4`)
-     * - "icon"     → 72px (`ml-[72px]`) — use when list items have leading icons/avatars
-     * Only applies when `variant="inset"`.
-     * @default "standard"
+     * Container shape controlling border-radius morphing.
+     * - `round`: fully circular (CornerFull).
+     * - `square`: rounded square (CornerMedium–CornerExtraLarge per size).
+     * @default "round"
      */
-    insetStart?: "standard" | "icon";
+    shape?: "round" | "square";
     /**
-     * Wavy shape visual parameters. Only applies when `shape="wavy"`.
-     * All values are in pixels.
+     * When `true`, replaces the icon with an animated loading indicator.
+     * Interaction is blocked and `aria-busy` is set.
+     * @default false
      */
-    waveConfig?: {
-        /**
-         * Peak displacement from the center line.
-         * @default 2
-         */
-        amplitude?: number;
-        /**
-         * Pixels per full sine cycle.
-         * @default 32
-         */
-        wavelength?: number;
-        /**
-         * Thickness of the wave stroke in pixels.
-         * @default 1
-         */
-        strokeWidth?: number;
-    };
+    loading?: boolean;
     /**
-     * When true, marks the divider as decorative (`aria-hidden="true"`).
-     * Use when the divider is purely visual with no semantic meaning.
-     * @default false
+     * Spinner style shown while `loading={true}`.
+     * @default "loading-indicator"
      */
-    decorative?: boolean;
+    loadingVariant?: "loading-indicator" | "circular";
+    /** Icon content — typically a single SVG icon component. */
+    children: React$1.ReactNode;
     /**
-     * When true, plays an entrance animation (scaleX/scaleY from 0→1).
-     * Automatically disabled when user prefers reduced motion.
-     * @default true
+     * Accessible label — **REQUIRED** because icon buttons have no visible text.
+     *
+     * @example "Close", "Add to favourites", "Toggle dark mode"
+     * @see https://m3.material.io/components/icon-buttons/accessibility
      */
-    animate?: boolean;
+    "aria-label": string;
 }
 /**
- * Generates an SVG path `d` string for a sinusoidal wave between two X bounds.
- * Uses cubic Bézier approximation of a sine curve for smooth rendering.
- * The error vs. a true sine is < 0.2%.
+ * Complete `IconButton` props — discriminated union that enforces
+ * `selected` is only valid with `variant="toggle"`.
  *
- * Each half-cycle alternates between crest (+amplitude) and trough (-amplitude).
- * Control points are placed at 1/3 and 2/3 of each half-cycle for accuracy.
+ * @example
+ * ```tsx
+ * // Standard
+ * <IconButton aria-label="Close" onClick={handleClose}>
+ *   <XIcon />
+ * </IconButton>
  *
- * @param startX     - X coordinate where the path begins (e.g. capWidth = strokeWidth/2)
- * @param endX       - X coordinate where the path ends (e.g. containerWidth - capWidth)
- * @param amplitude  - Peak displacement from center line (px). Default: 2
- * @param wavelength - Pixels per full sine cycle. Default: 32
- * @param yCenter    - Y coordinate of the wave center line. Default: 4
- * @returns SVG path `d` attribute string, or "" when startX >= endX
+ * // Toggle
+ * <IconButton
+ *   variant="toggle"
+ *   selected={isLiked}
+ *   aria-label={isLiked ? "Unlike" : "Like"}
+ *   colorStyle="filled"
+ *   onClick={() => setIsLiked(!isLiked)}
+ * >
+ *   <HeartIcon />
+ * </IconButton>
+ * ```
  *
- * @example
- * buildWavePath(0.5, 499.5, 2, 32, 4)
- * // → "M 0.5,4 C 11.17,... 500,4 ..."
+ * @see https://m3.material.io/components/icon-buttons/overview
  */
-declare function buildWavePath(startX: number, endX: number, amplitude?: number, wavelength?: number, yCenter?: number): string;
+type IconButtonProps = BaseIconButtonProps & ({
+    variant?: "default";
+    selected?: never;
+} | {
+    variant: "toggle";
+    selected: boolean;
+});
 /**
- * MD3 Expressive Divider — a thin line that groups content in lists and layouts.
+ * MD3 Expressive Icon Button.
  *
- * Supports four layout variants (full-bleed, inset, middle-inset, subheader),
- * two orientations (horizontal, vertical), and two shape modes (flat, wavy).
+ * An icon-only button with spring shape morphing, ripple effect, loading state support,
+ * and an optional toggle variant. Compliant with MD3 Expressive sizing and WCAG 2.5.5
+ * (touch target minimum for XS and SM sizes).
  *
- * The wavy shape renders a sinusoidal SVG wave and is only supported with
- * `orientation="horizontal"`.
+ * @remarks
+ * - `aria-label` is **required** — icon buttons have no visible text label.
+ * - `variant="toggle"` requires `selected: boolean`.
+ * - Touch target is automatically extended to 48dp for `xs` and `sm` sizes.
  *
  * @example
  * ```tsx
- * // Default flat full-bleed horizontal divider
- * <Divider />
- *
- * // Inset after icon list items
- * <Divider variant="inset" insetStart="icon" />
- *
- * // Vertical separator between panes
- * <Divider orientation="vertical" />
- *
- * // Wavy expressive divider
- * <Divider shape="wavy" />
- *
- * // Wavy with custom wave config
- * <Divider shape="wavy" waveConfig={{ amplitude: 5, wavelength: 24 }} />
- *
- * // Decorative (no a11y semantics)
- * <Divider decorative />
- *
- * // No entrance animation
- * <Divider animate={false} />
+ * <IconButton aria-label="Close" onClick={handleClose}>
+ *   <XIcon />
+ * </IconButton>
  *
- * // Middle-inset wavy divider
- * <Divider variant="middle-inset" shape="wavy" />
+ * <IconButton
+ *   variant="toggle"
+ *   selected={isBookmarked}
+ *   aria-label={isBookmarked ? "Remove bookmark" : "Bookmark"}
+ *   colorStyle="filled"
+ *   onClick={toggleBookmark}
+ * >
+ *   <BookmarkIcon />
+ * </IconButton>
  * ```
  *
- * @see https://m3.material.io/components/divider/overview
+ * @see https://m3.material.io/components/icon-buttons/overview
  */
-declare const Divider: React$1.NamedExoticComponent<DividerProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const IconButton: React$1.NamedExoticComponent<(Omit<BaseIconButtonProps & {
+    variant?: "default";
+    selected?: never;
+}, "ref"> | Omit<BaseIconButtonProps & {
+    variant: "toggle";
+    selected: boolean;
+}, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
 
-interface DrawerProps {
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children: React$1.ReactNode;
-}
-interface DrawerContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content>, "asChild"> {
-    /** Chiều cao tối đa (vh). Mặc định 90vh */
-    maxHeight?: string;
-    /** Ẩn drag handle */
-    hideHandle?: boolean;
-    /** Ẩn nút đóng */
-    hideCloseButton?: boolean;
-    className?: string;
+declare const cardVariants: (props?: ({
+    variant?: "outlined" | "elevated" | "filled" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
+interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
+    /** Vô hiệu hóa tương tác và giảm opacity (MD3 disabled state). */
+    disabled?: boolean;
+    /**
+     * Buộc card trở thành interactive dù không có `onClick`.
+     * Hữu ích khi card chứa các element con là interactive.
+     */
+    interactive?: boolean;
+    /**
+     * Nếu có, card render thành thẻ `<a>`. Tự động kích hoạt interactive mode.
+     * Ưu tiên dùng `href` thay vì `onClick` khi điều hướng trang.
+     */
+    href?: string;
+    /** Target cho thẻ `<a>` (chỉ có hiệu lực khi `href` được cung cấp). */
+    target?: React$1.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    /** rel cho thẻ `<a>` (tự động thêm `noreferrer` khi `target="_blank"`). */
+    rel?: string;
+    children?: React$1.ReactNode;
 }
-declare const Drawer: {
-    ({ open, onOpenChange, children }: DrawerProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const DrawerTrigger: React$1.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerClose: React$1.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerPortal: ({ open, children, }: {
-    open?: boolean;
-    children: React$1.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DrawerContent: React$1.ForwardRefExoticComponent<DrawerContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DrawerHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const DrawerFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const DrawerTitle: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const DrawerDescription: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const Card: React$1.NamedExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
 
-type MotionButtonProps$1 = Omit<HTMLMotionProps<"button">, "children" | "color">;
 /**
- * Tham số Props dùng cho component thao tác nổi `FAB`.
+ * @file checkbox.tsx
+ * MD3 Expressive Checkbox — 2-state and tri-state support.
+ * Spec: https://m3.material.io/components/checkbox/overview
+ */
+
+/**
+ * Tri-state value: `"unchecked"` | `"checked"` | `"indeterminate"`.
+ */
+type CheckboxState = "unchecked" | "checked" | "indeterminate";
+/**
+ * Props for `Checkbox`. Supports boolean (`checked`/`onCheckedChange`)
+ * and tri-state (`state`/`onStateChange`) modes.
+ */
+interface CheckboxProps {
+    /** Controlled checked value (2-state mode). */
+    checked?: boolean;
+    /** Initial value for uncontrolled mode. @default false */
+    defaultChecked?: boolean;
+    /** Forces indeterminate rendering regardless of `checked`. */
+    indeterminate?: boolean;
+    /** Fired on checked change (simple mode). Not called when disabled. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Controlled tri-state value. Takes priority over `checked`/`indeterminate`. */
+    state?: CheckboxState;
+    /** Fired on tri-state change. Cycles: unchecked → checked → indeterminate. */
+    onStateChange?: (state: CheckboxState) => void;
+    /** Disables interaction and applies 0.38 opacity. */
+    disabled?: boolean;
+    /** Error state — changes colors to `m3-error` and sets `aria-invalid`. */
+    error?: boolean;
+    /** Adjacent label text. Wraps checkbox + span in `<label>`. */
+    label?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-required"?: boolean;
+    /** Passed to the hidden `<input>` for form submission. */
+    name?: string;
+    /** Passed to the hidden `<input>` for form submission. */
+    value?: string;
+    /** ID for the hidden `<input>`. Auto-generated when `label` is set. */
+    id?: string;
+    /** Extra class names on the outermost wrapper. */
+    className?: string;
+    /** Ref pointing to the hidden `<input type="checkbox">`. */
+    ref?: React$1.Ref<HTMLInputElement>;
+}
+/**
+ * `TriStateCheckbox` props — requires `state` + `onStateChange`.
+ */
+interface TriStateCheckboxProps extends Omit<CheckboxProps, "checked" | "defaultChecked" | "onCheckedChange"> {
+    state: CheckboxState;
+    onStateChange: (state: CheckboxState) => void;
+}
+/**
+ * MD3 Expressive Checkbox component.
  *
- * @remarks
- * - Đảm bảo rằng đối với loại FAB chỉ show ra mỗi con Icon mà không có nhãn hiển thị (icon-only), bắt buộc phải có thuộc tính `aria-label` nhằm phục vụ (accessibility).
- * - Ở hình thể mở rộng (khi `extended={true}`), phần nội dung truyền vào `children` chính là chuỗi Text được thể hiện cùng nút, và nó sẽ khiến nút button có label mặc định nên bạn có thể chém bớt tham số `aria-label`.
- * - Thuộc tính cờ `lowered` (chìm) giúp giáng cấp hiệu ứng tạo bóng Shadow của thẻ, rải mảng cái shadow theo phong thái MD3 "lowered" FAB;
- *   sử dụng khi nút FAB này vốn bị bọc bên trong bề mặt chìm đè lên component gì khác mà vốn tụi nó đã nhún ở mực sâu (Ví dụ Bottom App Bar) để thiết lập Hierarchy hài hoà.
+ * Supports 2-state and tri-state patterns. Fully animated per MD3 spec:
+ * checkmark draw, indeterminate dash morph, container fill, state layer, and ripple.
  *
- * @see https://m3.material.io/components/floating-action-button/overview
+ * @example
+ * ```tsx
+ * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} label="Accept terms" />
+ * <Checkbox state={parentState} onStateChange={setParentState} label="Select all" />
+ * <Checkbox error label="Required field" aria-describedby="err-msg" />
+ * ```
+ * @see https://m3.material.io/components/checkbox/overview
  */
-interface FABProps extends MotionButtonProps$1 {
+declare const Checkbox: React$1.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+/**
+ * MD3 Expressive Tri-State Checkbox.
+ *
+ * Convenience wrapper around `Checkbox` that enforces `state` + `onStateChange`.
+ * Ideal for parent-child selection patterns.
+ *
+ * @example
+ * ```tsx
+ * <TriStateCheckbox state={parentState} onStateChange={setParentState} label="Select all" />
+ * ```
+ */
+declare const TriStateCheckbox: React$1.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const chipVariants: (props?: ({
+    variant?: "input" | "filter" | "assist" | "suggestion" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
-     * Icon đại diện render — thông thường là truyền thẻ component Icon.
-     * Sẽ được tráo đổi thành Spinner tự động quay khi giá trị `loading={true}`.
+     * Chip variant.
+     * - `assist`     → Smart/automated actions. Flat by default, can be elevated.
+     * - `filter`     → Toggleable tag/filter. Shows animated checkmark when selected.
+     * - `input`      → Entity representation (tag, contact). Has optional avatar + remove button.
+     * - `suggestion` → Contextual suggestions. Like assist, flat by default, can be elevated.
+     * @default 'assist'
      */
-    icon: React$1.ReactNode;
+    variant?: VariantProps<typeof chipVariants>["variant"];
     /**
-     * Kích thước hiển thị FAB. Tuân chuẩn.
-     * - `sm`: Small (40dp) — Được khuyên dùng cho các không gian kín/trong lòng Content.
-     * - `md`: Regular (56dp) — Action thứ yếu hoặc tiêu điểm màn hình. (Phần đông người dùng xài).
-     * - `lg`: Large (96dp) — Trọng tâm thao tác quan trọng lớn nhát.
-     * - `xl`: Extra-large (136dp) — Gây tiếng vang, dạng Spotlight cực bùng nổ của app.
-     * @default "md"
+     * Renders with elevation shadow (Level 1) and fills background with `surface-container-low`.
+     * Applicable to `assist`, `filter` (unselected), and `suggestion` variants.
+     * Source: AssistChipTokens.ElevatedContainerColor / SuggestionChipTokens.ElevatedContainerColor
      */
-    size?: "sm" | "md" | "lg" | "xl";
+    elevated?: boolean;
     /**
-     * Container vai trò hệ thống tông màu MD3 dùng phết nền.
-     * @default "primary"
+     * Toggle/selection state.
+     * - `filter`:  selected → bg `secondary-container`, animated checkmark appears.
+     * - `input`:   selected → bg `secondary-container`.
+     * Used for `role="checkbox"` (filter) / `aria-pressed` (input).
      */
-    colorStyle?: "primary" | "secondary" | "tertiary" | "surface";
+    selected?: boolean;
     /**
-     * Kích hoạt khi giá trị được đổi là `true`, sẽ diễn tả Animation bung chữ kèm theo độ dãn hình dài cho cái FAB.
-     * Chiều rộng tự cơi nới để thích ứng chuỗi `children`.
-     * @default false
+     * Disables the chip. Applies:
+     * - `pointer-events-none` – no mouse/touch interaction
+     * - `opacity-[0.38]`      – DisabledLabelTextOpacity (0.38) per MD3 tokens
+     * - `aria-disabled="true"`
+     * - `tabIndex={-1}`
      */
-    extended?: boolean;
+    disabled?: boolean;
     /**
-     * Nơi đón lấy chữ được render cùng khi `extended={true}` bật lên.
-     * Khuyến nghị là Text string thuần.
+     * Visible label. Required. Can be a string or ReactNode.
      */
-    children?: React$1.ReactNode;
+    label: React$1.ReactNode;
     /**
-     * Nhấn `true`, thì rút lại shadow đi một cấp xuống độ nổi nông cạn.
-     * Mảng bám ở Bottom bar hay Top bar Surface để ránh rườm rà.
-     * @default false
+     * Optional leading icon element (18×18px recommended).
+     * For `filter` chips with `selected=true`, this is replaced by an animated checkmark.
+     * For `assist`/`suggestion`: icon color → `primary`
+     * For `input` (unselected): icon color → `on-surface-variant`
      */
-    lowered?: boolean;
+    leadingIcon?: React$1.ReactNode;
     /**
-     * Nhấp chuột sang `true`, đổi Icon thành cối xay Spinner chờ kết quả. Đồng loạt chặn click tương tác.
-     * @default false
+     * Optional trailing icon element (18×18px recommended).
+     * Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
      */
-    loading?: boolean;
+    trailingIcon?: React$1.ReactNode;
     /**
-     * Có 2 chuẩn hình của Loading chờ.
-     * @default "loading-indicator"
+     * Avatar element for `input` chips. Takes priority over `leadingIcon`.
+     * Rendered as a 24×24px circle (InputChipTokens: AvatarSize = 24.dp, AvatarShape = CornerFull).
      */
-    loadingVariant?: "loading-indicator" | "circular";
+    avatar?: React$1.ReactNode;
     /**
-     * Hiện thẻ FAB lên layout không (Kiểm soát bằng motion scale Entrance/Exit).
-     * @default true
+     * Callback when the trailing remove (×) button is activated on `input` chips.
+     * When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
      */
-    visible?: boolean;
+    onRemove?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
- * Interface cho component bọc thẻ `FABPosition` — Gắn lớp absolute position nhét cục FAB vào một góc cố định của góc nào đó tại trình duyệt/bề mặt render.
+ * MD3 Expressive Chip — 4-variant interactive tag component.
  *
- * @see {@link FABPosition}
+ * @remarks
+ * - `filter` chips accept `selected` and render an animated checkmark.
+ * - `input` chips accept `onRemove` to render a compound close button.
+ * - `elevated` is supported on `assist`, `filter` (unselected), and `suggestion`.
+ * - Fully accessible: `role="checkbox"` for filter, `role="group"` for compound chips.
+ *
+ * @example
+ * ```tsx
+ * // Assist chip
+ * <Chip variant="assist" label="Share" onClick={share} />
+ *
+ * // Filter chip
+ * <Chip variant="filter" label="Unread" selected={showUnread} onClick={toggle} />
+ *
+ * // Input chip with remove
+ * <Chip variant="input" label="React" onRemove={() => removeTag("React")} />
+ * ```
+ *
+ * @see https://m3.material.io/components/chips/overview
  */
-interface FABPositionProps {
+declare const Chip: React$1.NamedExoticComponent<ChipProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CodeBlockProps {
+    /** Raw code string to display and copy. */
+    code: string;
+    /** Language label in the header (presentational only). @default "React" */
+    language?: string;
+    /** Additional CSS classes for the outer wrapper. */
+    className?: string;
     /**
-     * Góc để niêm chặt nút FAB.
-     * @default "bottom-right"
+     * Pre-highlighted HTML from Shiki SSR.
+     * Use `codeToHtml` with `themes: { light, dark }` for dual-theme support.
      */
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
-    /** Kẹp một nùi element. Mong chờ thả Node `<FAB>` vào đây.*/
-    children: React$1.ReactNode;
-    /** CSS Class hỗ trợ chỉnh override */
-    className?: string;
+    html?: string;
 }
+declare function CodeBlock({ code, language, className, html, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Element bao bọc thẻ định vị Absolute cho component `<FAB>`.
- *
- * Component dùng để cắm phao Neo cái FAB vào sát ở góc của screen kèm theo một cái offset space theo responsive an toàn mà lại trơn chu nhạy nhẽo.
- * Nhưng có quy tắc gốc đó là phần tử bao bọc cha mẹ của nó PHẢI có thẻ tag css `position: relative` (hoặc ở cấp tổ tiêm của trang nào đó phải đẻ gốc rễ ra posisition).
+ * Thuộc tính của cội gốc Root `Dialog`. Chức năng làm gương phản hồi của Radix `Dialog.Root` qua dạng controlled state đóng hay mở.
  *
  * @example
  * ```tsx
- * <div className="relative min-h-screen">
- *   // Cái nút sẽ xà xuống dưới cùng bên lề Trái
- *   <FABPosition position="bottom-left">
- *     <FAB icon={<Icon name="edit" />} aria-label="Compose New Mail" />
- *   </FABPosition>
- * </div>
+ * const [open, setOpen] = React.useState(false);
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogTrigger asChild>
+ *      <Button>Bấm Mở Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *        <DialogTitle>Bạn có muốn phiêu lưu không?</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>Chuẩn bị lên đồ rời khỏi hang nào.</DialogBody>
+ *     <DialogFooter>
+ *        <Button onClick={() => setOpen(false)} variant="text">Đóng</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
  * ```
+ */
+interface DialogProps {
+    /** Whether the dialog is open (controlled). Omit for uncontrolled. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog trigger + content. */
+    children: React$1.ReactNode;
+}
+/**
+ * Các props được tiêm vào component bao ngoài Container `DialogContent` thuộc dạng Normal Standard.
  *
- * @see {@link FAB}
- * @see https://m3.material.io/components/floating-action-button/guidelines
+ * @see {@link DialogContent}
  */
-declare function FABPosition({ position, children, className, }: FABPositionProps): react_jsx_runtime.JSX.Element;
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+    /** Vô hình đi đi nút Close dấu (X) góc phải trên. @default false */
+    hideCloseButton?: boolean;
+    className?: string;
+}
+/**
+ * Thuộc tính Props của biến thể `DialogFullScreenContent` chuyên dụng dành riêng cho Mode Full-Screen tràn màn hình.
+ *
+ * @remarks
+ * Những hộp thoại Full-screen có biệt tài tự nới rộng và xâm chiếm cả bề ngang dọc nguyên thiết bị. Nó còn thiết lập một đường Top App bar (thanh ngang đỉnh)
+ * kẹp chung cả 1 nhãn title mô tả đỉnh, một nút icon X dẹp ở rìa, thêm luôn hẳn cái nút Confirm cực xịn xò.
+ *
+ * @see {@link DialogFullScreenContent}
+ * @see https://m3.material.io/components/dialogs/guidelines#full-screen
+ */
+interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+    /** Nhãn Title nằm vùng khu vực thanh ngang Top Bar. */
+    title?: string;
+    /** Chữ viết đính kèm bên trong cục Nút nhấn thao tác ngay trên góc Top App bar đó (VD: "Lưu lại", "Save"). */
+    actionLabel?: string;
+    /** Hàm handler phát động cờ để kích chạy tính năng lưu, xác nhận kia. */
+    onAction?: () => void;
+    /** Rạch một làn kẻ chia cách thân body nội dung cuộn bên dưới và dòng App bar cố thủ bên trên. @default false */
+    showDivider?: boolean;
+    className?: string;
+}
+/**
+ * Gốc rễ Root của Component Dialog — trạc lấp lên cái module `Dialog.Root` của nhà Radix.
+ *
+ * @remarks Cơ năng hoạt động ở chế độ Controlled (kiểm soát vòng đời ở Client) xài mảng `open`/`onOpenChange`.
+ *  Tuy thế bạn nếu không thích thì đừng có xài truyền mấy cái Props tay đôi trên, mà bỏ xài kiểu Untracked thông qua cái cục `DialogTrigger` là đủ.
+ */
+declare const Dialog: {
+    ({ open, onOpenChange, children }: DialogProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** Bộ Trigger gieo phát đà giúp tắt bật cờ State đóng mở của Dialog con, dùng kèm kĩ năng nhét thông qua cái cầu `asChild`. */
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: {
+    ({ open, children, }: {
+        open?: boolean;
+        children: React$1.ReactNode;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const DialogBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogClose: React$1.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogFullScreenContent: React$1.ForwardRefExoticComponent<DialogFullScreenContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
- * Action nổi chính theo phong cách MD3 Expressive Floating Action Button (FAB).
+ * @file divider.tsx
  *
- * Phơi nhiễm các action tạo nhịp điệu kích hoạt cho người sử dụng với đủ bộ trang hoàn trọn kích thước Size (SM->XL),
- * mang nhiều màu sắc Color role khác biệt, cung cấp một sức nén cho Label để kéo toẹt cái ống dài ra (gọi là Dạng Mở Rộng - Extended) tạo nên hành động sinh động,
- * Trạng thái load/nhấp hiện xuất cùng animation thu scale thoát cảnh bắt mắt đầy nghệ thuật.
+ * MD3 Expressive Divider component.
  *
- * @remarks
- * - Chỉ định bắt buộc `aria-label` cho những mẫu icon bị đơn côi trơ trọi (icon-only FABs).
- * - Trường hợp xài mode Mở Rộng qua việc truyền hàm `extended={true}`, nút FAB này tự ngộ nhận thân thế, lấy `children` dùng làm Aria label luôn hễ như `children` đó đang chứa text string.
- *   Khi ấy bạn tha hồ cắt bỏ thuộc tính `aria-label` ra.
- * - Lúc cho biến mất (`visible={false}`), bộ nút tung chiêu lùi về sau làm quả rút bóng thoát Scale-out qua effect spring uyển chuyển.
- * - Sài kèm `FABPosition` bao đùm nó lại nếu bạn muốn xích nó cố định ngấm chân sâu góc màn hình hiển thị.
+ * - `Divider` → A thin line that groups content in lists and layouts.
  *
- * @example
- * ```tsx
- * // FAB cơ bản, nhỏ xinh, chỉ hiện icon.
- * <FAB icon={<Icon name="search" />} aria-label="Nhấn tìm kiếm" size="sm" />
+ * @remarks
+ * Token references (Kotlin source — DividerTokens.kt v0_117):
+ *   Color     = ColorSchemeKeyTokens.OutlineVariant → bg-m3-outline-variant / text-m3-outline-variant
+ *   Thickness = 1.0.dp → h-px (flat horizontal) | w-px (flat vertical) | strokeWidth={1} (wavy SVG)
  *
- * // Dịch sang dòng Extended có dòng caption chữ dài thòn
- * const [isOpen, setOpen] = React.useState(false);
- * <FAB
- *   icon={<Icon name="edit" />}
- *   extended={isOpen}
- *   onClick={() => setOpen(!isOpen)}
- * >
- *   Viết tâm thư
- * </FAB>
+ * Variants:
+ *   - "full-bleed"    → spans full width, no indent
+ *   - "inset"         → leading indent (16dp standard / 72dp after-icon via insetStart)
+ *   - "middle-inset"  → 16dp indent both sides
+ *   - "subheader"     → same as full-bleed (label provided externally)
  *
- * // FAB to lớn nhất dùng trạng thái chờ load Submit lên Server
- * <FAB
- *   icon={<Icon name="upload" />}
- *   size="lg"
- *   loading={isUploading}
- *   colorStyle="secondary"
- *   aria-label="Upload Files lên mây xanh"
- * />
+ * Shapes:
+ *   - "flat"  → straight 1px line rendered as <m.div> (default)
+ *   - "wavy"  → sinusoidal SVG wave via <m.svg> + buildWavePath helper (horizontal only)
  *
- * // Cố định dưới chân tay phải
- * <FABPosition position="bottom-right">
- *   <FAB icon={<Icon name="add" />} aria-label="Dấu Cộng sinh nảy" />
- * </FABPosition>
- * ```
+ * Architecture:
+ *   - Styling: `cn` (clsx/tailwind-merge) + static Tailwind classes only
+ *   - Animation: Framer Motion LazyMotion/domMax, scaleX/scaleY spring entrance
+ *   - Wavy: SVG path generated by pure-JS `buildWavePath()` (cubic Bézier sine approx)
+ *           Uses ResizeObserver (via useContainerWidth) to measure container width so
+ *           the path has precise bounds and leading/trailing ends are properly rounded.
+ *   - A11y: role="separator", aria-orientation, aria-hidden when decorative
  *
- * @see https://m3.material.io/components/floating-action-button/overview
+ * @see https://m3.material.io/components/divider/overview
  */
-declare const FAB: React$1.NamedExoticComponent<Omit<FABProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-/**
- * Định dạng dữ liệu cho từng hành động (item) trong biểu mẫu menu của FAB.
- *
- * Nếu bỏ qua thuộc tính `label`, item sẽ render dạng ô vuông chỉ có icon.
- */
-interface FABMenuItemData {
-    /** Một ID duy nhất để dùng cho key react và quản lý focus. */
-    id: string;
-    /** Label hiển thị cạnh icon (tuỳ chọn). Không thêm thuộc tính này nếu muốn hiển thị chỉ có icon (icon-only). */
-    label?: string;
-    /** Node của Icon — thường là một component SVG Icon duy nhất. */
-    icon: React$1.ReactNode;
-    /** Gọi hàm ngay lập tức khi item được kích hoạt (click hoặc nhấn Enter/Phím cách). */
-    onClick: () => void;
+type SafeHTMLDivAttrs = Omit<React$1.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
+interface DividerProps extends SafeHTMLDivAttrs {
     /**
-     * Khi `true`, vô hiệu hoá item về mặt hình thức lẫn tương tác rẽ nhánh.
-     * Vẫn dùng `aria-disabled` thay vì HTML `disabled` nhằm giữ nó lấy được focus phục vụ cho accessibility.
-     * @default false
+     * Visual variant controlling indentation.
+     * - "full-bleed"   → no indent, spans full container width/height (default)
+     * - "inset"        → leading indent only (use `insetStart` to control amount)
+     * - "middle-inset" → 16px indent on both sides
+     * - "subheader"    → alias for full-bleed, used before section labels
+     * @default "full-bleed"
      */
-    disabled?: boolean;
-    /** Thêm CSS classes bổ sung dùng cho wrapper chính của item. */
-    className?: string;
-}
-/**
- * Các props điều khiển Component chính `FABMenu`.
- *
- * @remarks
- * FABMenu quản lý vòng đời trạng thái mở/đóng menu (open/close), quản lý focus, điều khiển phím,
- * và điều hướng hiệu ứng chuyển động. Trạng thái `expanded` được truyền từ ngoài (controlled state),
- * do đó bạn có thể quản lý qua react state, hoặc dùng router hay business logic khác.
- */
-interface FABMenuProps {
-    /** FAB Menu có đang mở (mở rộng)/hiển thị hay không. */
-    expanded: boolean;
-    /** Hàm handler kích hoạt khi Toggle FAB được người dùng tương tác, hoặc khi dismiss backdrop. */
-    onToggle: (expanded: boolean) => void;
-    /** Danh sách các action items (Spec MD3 đề nghị 2-6 item là hoàn hảo). */
-    items: FABMenuItemData[];
+    variant?: "full-bleed" | "inset" | "middle-inset" | "subheader";
     /**
-     * Vai trò màu (color role container) MD3 cho cái nút FAB lẫn các menu items.
-     * @default "primary"
+     * Orientation of the divider line.
+     * - "horizontal" → renders as `h-px w-full` bar (default)
+     * - "vertical"   → renders as `w-px h-full` column
+     * Note: `shape="wavy"` is not supported with orientation="vertical".
+     * @default "horizontal"
      */
-    colorVariant?: "primary" | "secondary" | "tertiary";
+    orientation?: "horizontal" | "vertical";
     /**
-     * Kích cỡ khởi tạo cho cái ToggleFAB (FAB biến hình thành cục đóng dấu X khi nó expanded).
-     * @default "baseline"
+     * Shape of the divider line.
+     * - "flat"  → straight 1px line rendered as `<div>` (default)
+     * - "wavy"  → sinusoidal SVG wave (horizontal orientation only)
+     *
+     * When `shape="wavy"` and `orientation="vertical"`, silently falls back to
+     * `shape="flat"` and emits a `console.warn`.
+     * @default "flat"
      */
-    fabSize?: "baseline" | "medium" | "large";
+    shape?: "flat" | "wavy";
     /**
-     * Căn lề của danh sách menu items tương quan với cái Toggle FAB.
-     * - `"end"`: Các items dồn hết theo lề phía tay phải (trailing edge, default cực hữu hiệu đối với RTL design).
-     * - `"start"`: Các items dồn hết dọc theo lề trái.
-     * - `"center"`: Các item sẽ được căn ra giữa chiều dọc, căn giữa tâm khối với cái FAB.
-     * @default "end"
+     * Leading inset size for the "inset" variant.
+     * - "standard" → 16px (`ml-4`)
+     * - "icon"     → 72px (`ml-[72px]`) — use when list items have leading icons/avatars
+     * Only applies when `variant="inset"`.
+     * @default "standard"
      */
-    alignment?: "start" | "end" | "center";
-    /** Thuộc tính cho CSS component root để đè. */
-    className?: string;
+    insetStart?: "standard" | "icon";
     /**
-     * Nếu `true`, khi menu đang hiện ra, click chuột ra phía sau (màn xám mờ backdrop) để đóng menu.
-     * @default true
+     * Wavy shape visual parameters. Only applies when `shape="wavy"`.
+     * All values are in pixels.
      */
-    closeOnBackdropClick?: boolean;
+    waveConfig?: {
+        /**
+         * Peak displacement from the center line.
+         * @default 2
+         */
+        amplitude?: number;
+        /**
+         * Pixels per full sine cycle.
+         * @default 32
+         */
+        wavelength?: number;
+        /**
+         * Thickness of the wave stroke in pixels.
+         * @default 1
+         */
+        strokeWidth?: number;
+    };
     /**
-     * Nếu `true`, focus sẽ tự động chạy xuống item CUỐI (sát bên trên cái nút FAB) khi menu vừa loé mờ ra.
-     * Nếu `false`, focus sẽ bay lên item ĐẦU TIÊN của danh sách (cao nhất trên màn hình).
-     * @default true
+     * When true, marks the divider as decorative (`aria-hidden="true"`).
+     * Use when the divider is purely visual with no semantic meaning.
+     * @default false
      */
-    focusLast?: boolean;
-    /** Bắt buộc truyền `aria-label` cho ToggleFAB để đáp ứng Accessibility. */
-    "aria-label"?: string;
-}
-/**
- * Props thuộc component `ToggleFAB` đứng độc lập.
- */
-interface ToggleFABProps {
-    /** Nút có đang trong trạng thái được kích hoạt check (expanded). */
-    expanded: boolean;
-    /** Gọi khi xảy ra sự kiện Toggle nút. */
-    onToggle: (expanded: boolean) => void;
+    decorative?: boolean;
     /**
-     * Function sinh Icon - nhận về tiến độ `progress` trong khoảng `0` -> `1` (Từ Chưa Expanded -> Đã Expanded)
-     * Dùng cho các hiệu ứng morphing Icon khi animtion render (VD: Từ Cộng thành Đóng).
-     *
-     * @example
-     * ```tsx
-     * icon={(progress) => progress > 0.5 ? <Icon name="close" /> : <Icon name="add" />}
-     * ```
-     */
-    icon: (progress: number) => React$1.ReactNode;
-    /** Vai trò màu container chuẩn MD3. @default "primary" */
-    colorVariant?: "primary" | "secondary" | "tertiary";
-    /** Kích thước của cục FAB ban đầu (Sau khi nhấn sẽ thu tròn). @default "baseline" */
-    fabSize?: "baseline" | "medium" | "large";
-    /** CSS Class linh tinh bổ sung thêm. */
-    className?: string;
-    /** Thuộc tính đọc thẻ accessibility. Bắt buộc có. */
-    "aria-label"?: string;
-    /** Kiểm soát giá trị của ID để link với menu qua aria-controls. */
-    "aria-controls"?: string;
-    /** Trỏ id component. */
-    id?: string;
-}
-/**
- * Props thuộc component một món item đơn lẻ `FABMenuItem`.
- */
-interface FABMenuItemProps {
-    /** Node của icon hiện. */
-    icon: React$1.ReactNode;
-    /** Tên nhãn mô tả kế bên icon cho item này. Hoặc ẩn nó đi nếu không mong đợi. */
-    label?: string;
-    /** Hàm bắn ra khi item được kích. */
-    onClick: () => void;
-    /** Vô hiệu hóa hành vi tương tác item mà vẫn cho phép bàn phím tab bấm dính lấy focus. @default false */
-    disabled?: boolean;
-    /** Container tông màu. @default "primary" */
-    colorVariant?: "primary" | "secondary" | "tertiary";
-    /** Custom CSS className. */
-    className?: string;
-    /** Số index liệt kê trong mảng dùng tính render delay (Dành cho animation cấu trúc `custom`). */
-    index?: number;
-    /** Tổng danh sách items có mảng. */
-    totalItems?: number;
-    /** Giá trị logic `tabIndex` dùng điều khiển thao tác phím Tab thủ công. */
-    tabIndex?: number;
-}
-/**
- * Nút Toggle FAB (Biến hình) có thể được dùng độc lập đứng một mình (standalone) hoặc kết nối để kích hoạt mở cả nùi Menu ở dưới con `FABMenu`.
- *
- * Sức ép hiệu ứng kích thước khung nền sẽ chuyển từ vuôn/vát cạnh sang hình tròn hẵn (square → circle), chuyển biến cả màu sắc
- * khi mà cờ `expanded` chuyển tiếp từ false sang → true.
- *
- * @example
- * ```tsx
- * const [open, setOpen] = React.useState(false);
- * <ToggleFAB
- *   expanded={open}
- *   onToggle={setOpen}
- *   colorVariant="primary"
- *   aria-label="Toggle actions"
- *   icon={(progress) => progress > 0.5 ? <Icon name="close" /> : <Icon name="add" />}
- * />
- * ```
- */
-declare const ToggleFAB: React$1.NamedExoticComponent<ToggleFABProps & React$1.RefAttributes<HTMLButtonElement>>;
+     * When true, plays an entrance animation (scaleX/scaleY from 0→1).
+     * Automatically disabled when user prefers reduced motion.
+     * @default true
+     */
+    animate?: boolean;
+}
 /**
- * Một item thực hiện một loại hành động duy nhất trong `FABMenu`.
+ * Generates an SVG path `d` string for a sinusoidal wave between two X bounds.
+ * Uses cubic Bézier approximation of a sine curve for smooth rendering.
+ * The error vs. a true sine is < 0.2%.
  *
- * Render hình dạng viên thuốc bao quanh icon cùng với label diễn giải.
- * Khi `label` bỏ trống, nó sẽ render thành một cục thẻ gạch ốp màu vuông vức chứa chữ mỗi cái icon.
- * Component chứa gợn sóng MD3 Ripple cùng 48dp chuẩn vùng target đụng diện chuẩn WCAG 2.5.5 cho cảm ứng.
+ * Each half-cycle alternates between crest (+amplitude) and trough (-amplitude).
+ * Control points are placed at 1/3 and 2/3 of each half-cycle for accuracy.
  *
- * @remarks
- * Những thành phần khi bị tắt (vô hiệu tương tác) thì chỉ được dùng role `aria-disabled="true"` ở lớp div bề mặt thay vì lấy
- *  thuộc tính gốc `disabled` của HTML. Nhờ đó, item tuy xám mờ không bấm được phím chuột vẫn sẽ có khả năng focus qua vòng đời tab phím bàn phím
- * (quy chuẩn chặt chẽ của Material Design 3).
+ * @param startX     - X coordinate where the path begins (e.g. capWidth = strokeWidth/2)
+ * @param endX       - X coordinate where the path ends (e.g. containerWidth - capWidth)
+ * @param amplitude  - Peak displacement from center line (px). Default: 2
+ * @param wavelength - Pixels per full sine cycle. Default: 32
+ * @param yCenter    - Y coordinate of the wave center line. Default: 4
+ * @returns SVG path `d` attribute string, or "" when startX >= endX
+ *
+ * @example
+ * buildWavePath(0.5, 499.5, 2, 32, 4)
+ * // → "M 0.5,4 C 11.17,... 500,4 ..."
  */
-declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, className, tabIndex, }: FABMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function buildWavePath(startX: number, endX: number, amplitude?: number, wavelength?: number, yCenter?: number): string;
 /**
- * MD3 Expressive FAB Menu.
+ * MD3 Expressive Divider — a thin line that groups content in lists and layouts.
  *
- * Bộ mở rộng Floating Action Button. Khi tương tác bật vào toggle-button (FAB con lai), sẽ trút ra mớ tác vụ menu ở xếp dọc (hoặc lan ra) từ trên đè ngược xuống trên nó.
+ * Supports four layout variants (full-bleed, inset, middle-inset, subheader),
+ * two orientations (horizontal, vertical), and two shape modes (flat, wavy).
  *
- * Accessibility thực thi chuẩn MD3 toàn phần:
- *  - thẻ `role="menu"` trang bị cho thẻ hộp div làm luống container
- *  - trang bị thẻ `role="menuitem"` trên mảng items thành phần con
- *  - Lifecycle Focus cho trải nghiệm hoàn mỹ: Mở phím bật -> Focus thẳng lên item cao/thấp đầu/cuối cùng menu; Đóng tắt menu -> Focus trả về ngược lại ToggleFAB
- *  - Tính năng Bàn Phím: Lách Escape nhấn tắt nhắm, Nhấn phím hướng lên-xuống(ArrowUp/Down) để di chuyển, Móc Tab(hoặc là Shift+Tab) nhảy lăng quăng qua các item.
+ * The wavy shape renders a sinusoidal SVG wave and is only supported with
+ * `orientation="horizontal"`.
  *
  * @example
  * ```tsx
- * const [open, setOpen] = React.useState(false);
+ * // Default flat full-bleed horizontal divider
+ * <Divider />
  *
- * const items = [
- *   { id: 'share', icon: <Icon name="share" />, label: 'Chia sẻ', onClick: () => console.log('Share') },
- *   { id: 'edit', icon: <Icon name="edit" />, label: 'Chỉnh sửa', onClick: () => console.log('Edit') },
- *   { id: 'delete', icon: <Icon name="delete" />, label: 'Xóa bớt', disabled: true, onClick: () => {} }
- * ];
+ * // Inset after icon list items
+ * <Divider variant="inset" insetStart="icon" />
  *
- * <FABMenu
- *   expanded={open}
- *   onToggle={setOpen}
- *   aria-label="Các công cụ thao tác nhanh"
- *   alignment="center"
- *   colorVariant="tertiary"
- *   items={items}
- * />
+ * // Vertical separator between panes
+ * <Divider orientation="vertical" />
+ *
+ * // Wavy expressive divider
+ * <Divider shape="wavy" />
+ *
+ * // Wavy with custom wave config
+ * <Divider shape="wavy" waveConfig={{ amplitude: 5, wavelength: 24 }} />
+ *
+ * // Decorative (no a11y semantics)
+ * <Divider decorative />
+ *
+ * // No entrance animation
+ * <Divider animate={false} />
+ *
+ * // Middle-inset wavy divider
+ * <Divider variant="middle-inset" shape="wavy" />
  * ```
  *
- * @see https://m3.material.io/components/floating-action-button/overview
+ * @see https://m3.material.io/components/divider/overview
  */
-declare function FABMenu({ expanded, onToggle, items, colorVariant, fabSize, alignment, className, closeOnBackdropClick, focusLast, "aria-label": ariaLabel, }: FABMenuProps): react_jsx_runtime.JSX.Element;
+declare const Divider: React$1.NamedExoticComponent<DividerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface DrawerProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React$1.ReactNode;
+}
+interface DrawerContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content>, "asChild"> {
+    /** Chiều cao tối đa (vh). Mặc định 90vh */
+    maxHeight?: string;
+    /** Ẩn drag handle */
+    hideHandle?: boolean;
+    /** Ẩn nút đóng */
+    hideCloseButton?: boolean;
+    className?: string;
+}
+declare const Drawer: {
+    ({ open, onOpenChange, children }: DrawerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React$1.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React$1.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: ({ open, children, }: {
+    open?: boolean;
+    children: React$1.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React$1.ForwardRefExoticComponent<DrawerContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 /**
  * Props cho component {@link Icon}.
@@ -2194,183 +2342,53 @@ interface IconProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      * @default 24
      */
     opticalSize?: 20 | 24 | 40 | 48;
-    /**
-     * Ghi đè trực tiếp `font-size` bằng px. Trục `opsz` vẫn sẽ tuân theo thuộc tính `opticalSize`.
-     * @example size={18} opticalSize={20}
-     */
-    size?: number | "inherit";
-    /**
-     * Kích hoạt hiệu ứng spring mượt mà khi chuyển đổi giá trị FILL (sử dụng cấu hình `SPRING_TRANSITION_FAST`).
-     * Yêu cầu dependency `motion/react`.
-     * @default false
-     * @example <Icon name="favorite" fill={isLiked ? 1 : 0} animateFill />
-     */
-    animateFill?: boolean;
-}
-/**
- * Component hiển thị Icon bằng Material Symbols (variable font).
- *
- * Hãy đảm bảo đã import CSS chứa font trước khi dùng:
- * ```ts
- * import '@bug-on/md3-react/material-symbols.css';
- * ```
- *
- * @remarks
- * - Đặt tên icon dùng snake_case: `"arrow_forward"`, KHÔNG PHẢI `"ArrowForward"`.
- * - Thuộc tính `aria-hidden="true"` được tự động thêm vào — bạn cần thêm label đọc bằng giọng nói (accessible labels) ở phần tử cha.
- *
- * @example
- * ```tsx
- * // Icon cơ bản
- * <Icon name="home" />
- *
- * // Tùy chỉnh trực quan (filled, nét dày)
- * <Icon name="favorite" variant="rounded" fill={1} weight={300} />
- *
- * // Animate khi trạng thái thay đổi
- * <Icon name="bookmark" fill={saved ? 1 : 0} animateFill />
- *
- * // Đổi kích thước icon cụ thể
- * <Icon name="close" size={18} opticalSize={20} />
- *
- * // Kết hợp với các component khác
- * <Button icon={<Icon name="add" />}>Thêm vào giỏ</Button>
- * ```
- *
- * @see https://fonts.google.com/icons
- * @see https://m3.material.io/styles/icons/overview
- */
-declare const Icon: React$1.NamedExoticComponent<IconProps & React$1.RefAttributes<HTMLSpanElement>>;
-
-/**
- * @file icon-button.tsx
- *
- * MD3 Expressive Icon Button component.
- *
- * An icon-only button with shape morphing, ripple effect, loading state,
- * and toggle variant. Requires `aria-label` for accessibility since there
- * is no visible text label.
- *
- * @see https://m3.material.io/components/icon-buttons/overview
- */
-
-type MotionButtonProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
-/**
- * Base props for the Icon Button component.
- *
- * @see {@link IconButtonProps} for the full discriminated union.
- * @see https://m3.material.io/components/icon-buttons/overview
- */
-interface BaseIconButtonProps extends MotionButtonProps {
-    /**
-     * Visual color style following MD3 color roles.
-     * @default "standard"
-     */
-    colorStyle?: "standard" | "filled" | "tonal" | "outlined";
-    /**
-     * Button container size.
-     * Sizes: XS=32dp, SM=40dp, MD=56dp, LG=96dp, XL=136dp.
-     * @default "sm"
-     */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    /**
-     * Container shape controlling border-radius morphing.
-     * - `round`: fully circular (CornerFull).
-     * - `square`: rounded square (CornerMedium–CornerExtraLarge per size).
-     * @default "round"
-     */
-    shape?: "round" | "square";
-    /**
-     * When `true`, replaces the icon with an animated loading indicator.
-     * Interaction is blocked and `aria-busy` is set.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Spinner style shown while `loading={true}`.
-     * @default "loading-indicator"
-     */
-    loadingVariant?: "loading-indicator" | "circular";
-    /** Icon content — typically a single SVG icon component. */
-    children: React$1.ReactNode;
-    /**
-     * Accessible label — **REQUIRED** because icon buttons have no visible text.
-     *
-     * @example "Close", "Add to favourites", "Toggle dark mode"
-     * @see https://m3.material.io/components/icon-buttons/accessibility
-     */
-    "aria-label": string;
-}
-/**
- * Complete `IconButton` props — discriminated union that enforces
- * `selected` is only valid with `variant="toggle"`.
- *
- * @example
- * ```tsx
- * // Standard
- * <IconButton aria-label="Close" onClick={handleClose}>
- *   <XIcon />
- * </IconButton>
- *
- * // Toggle
- * <IconButton
- *   variant="toggle"
- *   selected={isLiked}
- *   aria-label={isLiked ? "Unlike" : "Like"}
- *   colorStyle="filled"
- *   onClick={() => setIsLiked(!isLiked)}
- * >
- *   <HeartIcon />
- * </IconButton>
- * ```
- *
- * @see https://m3.material.io/components/icon-buttons/overview
- */
-type IconButtonProps = BaseIconButtonProps & ({
-    variant?: "default";
-    selected?: never;
-} | {
-    variant: "toggle";
-    selected: boolean;
-});
+    /**
+     * Ghi đè trực tiếp `font-size` bằng px. Trục `opsz` vẫn sẽ tuân theo thuộc tính `opticalSize`.
+     * @example size={18} opticalSize={20}
+     */
+    size?: number | "inherit";
+    /**
+     * Kích hoạt hiệu ứng spring mượt mà khi chuyển đổi giá trị FILL (sử dụng cấu hình `SPRING_TRANSITION_FAST`).
+     * Yêu cầu dependency `motion/react`.
+     * @default false
+     * @example <Icon name="favorite" fill={isLiked ? 1 : 0} animateFill />
+     */
+    animateFill?: boolean;
+}
 /**
- * MD3 Expressive Icon Button.
+ * Component hiển thị Icon bằng Material Symbols (variable font).
  *
- * An icon-only button with spring shape morphing, ripple effect, loading state support,
- * and an optional toggle variant. Compliant with MD3 Expressive sizing and WCAG 2.5.5
- * (touch target minimum for XS and SM sizes).
+ * Hãy đảm bảo đã import CSS chứa font trước khi dùng:
+ * ```ts
+ * import '@bug-on/md3-react/material-symbols.css';
+ * ```
  *
  * @remarks
- * - `aria-label` is **required** — icon buttons have no visible text label.
- * - `variant="toggle"` requires `selected: boolean`.
- * - Touch target is automatically extended to 48dp for `xs` and `sm` sizes.
+ * - Đặt tên icon dùng snake_case: `"arrow_forward"`, KHÔNG PHẢI `"ArrowForward"`.
+ * - Thuộc tính `aria-hidden="true"` được tự động thêm vào — bạn cần thêm label đọc bằng giọng nói (accessible labels) ở phần tử cha.
  *
  * @example
  * ```tsx
- * <IconButton aria-label="Close" onClick={handleClose}>
- *   <XIcon />
- * </IconButton>
+ * // Icon cơ bản
+ * <Icon name="home" />
  *
- * <IconButton
- *   variant="toggle"
- *   selected={isBookmarked}
- *   aria-label={isBookmarked ? "Remove bookmark" : "Bookmark"}
- *   colorStyle="filled"
- *   onClick={toggleBookmark}
- * >
- *   <BookmarkIcon />
- * </IconButton>
+ * // Tùy chỉnh trực quan (filled, nét dày)
+ * <Icon name="favorite" variant="rounded" fill={1} weight={300} />
+ *
+ * // Animate khi trạng thái thay đổi
+ * <Icon name="bookmark" fill={saved ? 1 : 0} animateFill />
+ *
+ * // Đổi kích thước icon cụ thể
+ * <Icon name="close" size={18} opticalSize={20} />
+ *
+ * // Kết hợp với các component khác
+ * <Button icon={<Icon name="add" />}>Thêm vào giỏ</Button>
  * ```
  *
- * @see https://m3.material.io/components/icon-buttons/overview
+ * @see https://fonts.google.com/icons
+ * @see https://m3.material.io/styles/icons/overview
  */
-declare const IconButton: React$1.NamedExoticComponent<(Omit<BaseIconButtonProps & {
-    variant?: "default";
-    selected?: never;
-}, "ref"> | Omit<BaseIconButtonProps & {
-    variant: "toggle";
-    selected: boolean;
-}, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Icon: React$1.NamedExoticComponent<IconProps & React$1.RefAttributes<HTMLSpanElement>>;
 
 interface LoadingIndicatorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
@@ -2790,10 +2808,35 @@ declare const MenuTrigger: React$1.ForwardRefExoticComponent<MenuTriggerProps &
  */
 declare const MenuContent: React$1.ForwardRefExoticComponent<MenuContentProps & Omit<Omit<DropdownMenu.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & React$1.RefAttributes<HTMLDivElement>>;
 
-/** FastSpatial spring — used for shape morphing and spatial enter animations */
+/**
+ * @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 transition — used for opacity and exit animations */
-declare const FAST_EFFECTS_TRANSITION: 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.
@@ -3192,7 +3235,55 @@ declare const VerticalMenuContent: React$1.ForwardRefExoticComponent<VerticalMen
  */
 declare const VerticalMenu: React$1.ForwardRefExoticComponent<VerticalMenuProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
-type NavigationRailVariant = "collapsed" | "expanded" | "modal";
+/**
+ * Layout styling for navigation bar items.
+ * - vertical: Icon above label (default for mobile)
+ * - horizontal: Icon beside label (forced)
+ */
+type NavigationBarItemLayout = "vertical" | "horizontal";
+/**
+ * Visual variant of the Navigation Bar.
+ * - flexible: Default MD3 behavior (h-16), becomes horizontal on desktop.
+ * - baseline: Taller MD3 behavior (h-20), always vertical.
+ * - xr: Floating orbiter variant for spatial interfaces (detached from bottom).
+ */
+type NavigationBarVariant = "flexible" | "baseline" | "xr";
+interface NavigationBarItemProps {
+    selected: boolean;
+    icon: React$1.ReactNode;
+    label: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    badge?: React$1.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+}
+interface NavigationBarProps {
+    /** Visual variant of the Navigation Bar */
+    variant?: NavigationBarVariant;
+    /** Forces a specific item layout (horizontal/vertical) */
+    itemLayout?: NavigationBarItemLayout;
+    /** Whether the bar should hide when scrolling down */
+    hideOnScroll?: boolean;
+    /** Whether the bar should have an elevation shadow */
+    elevated?: boolean;
+    /** Whether the bar is fixed to the viewport (default) or absolute */
+    fixed?: boolean;
+    /** Container ref to track scrolling for hideOnScroll */
+    scrollContainerRef?: React$1.RefObject<HTMLElement | null>;
+    /** Transition for the active indicator pill */
+    activeIndicatorTransition?: Transition;
+    /** Navigation items */
+    children: React$1.ReactNode;
+    /** Optional additional classes */
+    className?: string;
+    /** Optional inline styles */
+    style?: React$1.CSSProperties;
+}
+declare const NavigationBarItem: React$1.NamedExoticComponent<NavigationBarItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationBar: React$1.NamedExoticComponent<NavigationBarProps & React$1.RefAttributes<HTMLElement>>;
+
+type NavigationRailVariant = "collapsed" | "expanded" | "modal" | "xr";
 type NavigationRailLabelVisibility = "labeled" | "auto" | "unlabeled";
 interface NavigationRailItemProps {
     selected: boolean;
@@ -3209,11 +3300,12 @@ interface NavigationRailProps {
     labelVisibility?: NavigationRailLabelVisibility;
     header?: React$1.ReactNode;
     fab?: React$1.ReactNode;
+    fabPlacement?: "contained" | "spatialized";
     footer?: React$1.ReactNode;
     narrow?: boolean;
     open?: boolean;
-    xr?: boolean | "contained" | "spatialized";
     onClose?: () => void;
+    activeIndicatorTransition?: Transition;
     children: React$1.ReactNode;
     className?: string;
     style?: React$1.CSSProperties;
@@ -3645,6 +3737,8 @@ interface ScrollAreaProps extends Omit<React$1.ComponentPropsWithoutRef<typeof R
     scrollHideDelay?: number;
     /** Extra classes applied to the inner viewport element. */
     viewportClassName?: string;
+    /** Ref to the scrolling viewport element. */
+    viewportRef?: React$1.Ref<HTMLDivElement>;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<RadixScrollArea.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -3847,17 +3941,6 @@ declare const Search: typeof SearchComponent & {
     useSearch: typeof useSearch;
 };
 
-/**
- * @file search.tokens.ts
- * MD3 Expressive Search — Design tokens ported from:
- *   - SearchBarTokens.kt (v0_210)
- *   - SearchViewTokens.kt (v0_210)
- *
- * All dimensional values are in px (1dp = 1px on web).
- * Colors reference CSS custom properties — do NOT hardcode hex.
- * @see docs/m3/search/SearchBarTokens.kt
- * @see docs/m3/search/SearchViewTokens.kt
- */
 /**
  * Height and shape tokens for Search variants.
  * Maps directly from MD3 Kotlin token files.
@@ -3919,36 +4002,9 @@ declare const SEARCH_TYPOGRAPHY: {
     /** BodyLarge — used for input text and placeholder. */
     readonly bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]";
 };
-/**
- * Spring animation for SearchBar width expand (inactive → active).
- * Matches MD3 FastSpatial motion scheme.
- */
-declare const SEARCH_BAR_EXPAND_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};
-/**
- * Spring animation for Docked SearchView dropdown reveal (slide + fade).
- * Offset Y: -8px on enter, opacity 0→1.
- */
-declare const SEARCH_DOCKED_REVEAL_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};
-/**
- * Spring animation for FullScreen SearchView shape morphing.
- * Lower stiffness + mass gives a smoother pill→fullscreen morph.
- */
-declare const SEARCH_FULLSCREEN_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};
+declare const SEARCH_BAR_EXPAND_SPRING: motion.Transition;
+declare const SEARCH_DOCKED_REVEAL_SPRING: motion.Transition;
+declare const SEARCH_FULLSCREEN_SPRING: motion.Transition;
 
 type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
     /** KeyDown handler from useSearchKeyboard. */
@@ -4730,14 +4786,6 @@ declare const SwitchColors: {
     readonly focusIndicator: "var(--md-sys-color-secondary)";
 };
 
-declare const typographyVariants: (props?: ({
-    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TextProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
-    as?: React$1.ElementType;
-}
-declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
-
 /**
  * @file tabs.types.ts
  * MD3 Expressive Tabs — TypeScript prop definitions.
@@ -5109,6 +5157,14 @@ declare const TabsContent: React$1.NamedExoticComponent<TabsContentProps & React
  */
 declare const TabsList: React$1.NamedExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
 
+declare const typographyVariants: (props?: ({
+    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: React$1.ElementType;
+}
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
+
 /**
  * @file text-field.types.ts
  * TypeScript interfaces and types for TextField MD3 Expressive component.
@@ -5861,6 +5917,388 @@ interface TableOfContentsProps {
  */
 declare function TableOfContents({ items, className, scrollAreaProps, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Color configuration types and standard values for the FloatingToolbar component.
+ * Maps MD3 design tokens to CSS custom properties used in Tailwind CSS.
+ */
+interface FloatingToolbarColors {
+    /** The background color of the toolbar container */
+    toolbarContainerColor?: string;
+    /** The color of the content (icons, text) inside the toolbar */
+    toolbarContentColor?: string;
+    /** The background color of the FAB container */
+    fabContainerColor?: string;
+    /** The color of the content inside the FAB */
+    fabContentColor?: string;
+}
+/**
+ * Standard color configuration for the floating toolbar.
+ * Uses surface container for the toolbar and secondary container for the FAB.
+ */
+declare const standardFloatingToolbarColors: FloatingToolbarColors;
+/**
+ * Vibrant color configuration for the floating toolbar.
+ * Uses primary container for the toolbar and tertiary container for the FAB.
+ */
+declare const vibrantFloatingToolbarColors: FloatingToolbarColors;
+
+interface BottomDockedToolbarProps {
+    /** Color variant: standard or vibrant */
+    variant?: "standard" | "vibrant";
+    /** Custom colors override */
+    colors?: FloatingToolbarColors;
+    /** Whether to hide on scroll */
+    hideOnScroll?: boolean;
+    /** Scroll container ref for scroll behavior (if empty, uses window scroll) */
+    scrollContainerRef?: React$1.RefObject<HTMLElement | null>;
+    /** Start content (left-aligned) */
+    startContent?: React$1.ReactNode;
+    /** End content (right-aligned) */
+    endContent?: React$1.ReactNode;
+    /** Center content */
+    children?: React$1.ReactNode;
+    /**
+     * Horizontal padding (px) applied to the toolbar container.
+     * MD3 spec requires a minimum of 16dp on leading and trailing edges.
+     * @default 16
+     */
+    paddingX?: number;
+    /**
+     * Layout distribution of toolbar content.
+     * - `"between"` – leading/center/trailing spread across full width (default, compact screens).
+     * - `"center"` – all content centered; ideal for medium+ screen widths.
+     * - `"end-weighted"` – key action is centered while others are pushed to the edges.
+     * @default "between"
+     */
+    justify?: "between" | "center" | "end-weighted";
+    /**
+     * Container shape.
+     * - `"none"` – straight corners (MD3 default for mobile docked toolbars).
+     * - `"large"` – large rounded corners (recommended for web / large screens).
+     * - `"full"` – fully pill-shaped.
+     *
+     * MD3 guideline: *"On web and large screens, the docked toolbar can be rounded."*
+     * @default "none"
+     */
+    shape?: "none" | "large" | "full";
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * A full-width docked toolbar typically fixed at the bottom of the screen.
+ * Replaces the deprecated Bottom App Bar in MD3 Expressive.
+ *
+ * @example
+ * ```tsx
+ * <BottomDockedToolbar hideOnScroll startContent={<IconButton aria-label="Menu"><Icon name="menu" /></IconButton>}>
+ *   <div className="flex gap-2">
+ *     <IconButton aria-label="Search"><Icon name="search" /></IconButton>
+ *     <IconButton aria-label="Edit"><Icon name="edit" /></IconButton>
+ *   </div>
+ * </BottomDockedToolbar>
+ * ```
+ */
+declare const BottomDockedToolbar: React$1.ForwardRefExoticComponent<BottomDockedToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Configuration options for the `useFloatingToolbarScrollBehavior` hook.
+ */
+interface UseFloatingToolbarScrollBehaviorOptions {
+    /** Direction toolbar exits: 'top' | 'bottom' | 'start' | 'end'. Defaults to 'bottom'. */
+    exitDirection?: "top" | "bottom" | "start" | "end";
+    /** Scroll distance threshold to trigger collapse (in px). Defaults to 10. */
+    collapseThreshold?: number;
+    /** Scroll distance threshold to trigger expand (in px). Defaults to 10. */
+    expandThreshold?: number;
+    /** Optional ref to a scrollable container. If not provided, it listens to window scroll. */
+    scrollContainerRef?: RefObject<HTMLElement | null>;
+}
+/**
+ * The resulting behavior object returned by `useFloatingToolbarScrollBehavior`.
+ */
+interface FloatingToolbarScrollBehavior {
+    /** Current offset. 0 is fully visible, -1 is fully hidden. */
+    offset: number;
+    /** Whether the toolbar is currently expanded. */
+    isExpanded: boolean;
+    /** Optional scroll handler to bind to a React scrollable container (legacy fallback). */
+    onScroll?: (event: React.UIEvent<HTMLElement>) => void;
+    /** Manually update the expanded state of the toolbar. */
+    setExpanded: (expanded: boolean) => void;
+    /** The configured exit direction. */
+    exitDirection: "top" | "bottom" | "start" | "end";
+}
+/**
+ * A hook that provides scroll behavior for floating toolbars, allowing them to
+ * collapse (exit) when scrolling down and expand (enter) when scrolling up.
+ * Leverages Framer Motion's useScroll internally for optimized performance.
+ *
+ * @param options Configuration options for scroll behavior.
+ * @returns An object containing the current scroll state and handlers.
+ *
+ * @example
+ * ```tsx
+ * const scrollBehavior = useFloatingToolbarScrollBehavior({
+ *   exitDirection: 'bottom',
+ *   collapseThreshold: 20
+ * });
+ *
+ * <HorizontalFloatingToolbar scrollBehavior={scrollBehavior}>
+ *   <IconButton icon="bold" />
+ * </HorizontalFloatingToolbar>
+ * ```
+ */
+declare function useFloatingToolbarScrollBehavior(options?: UseFloatingToolbarScrollBehaviorOptions): FloatingToolbarScrollBehavior;
+
+interface FloatingToolbarProps {
+    /** Whether the toolbar is expanded, showing startContent and endContent */
+    expanded: boolean;
+    /** Orientation of the toolbar */
+    orientation?: "horizontal" | "vertical";
+    /** Color configuration */
+    colors?: FloatingToolbarColors;
+    /** Shape variant: full = pill shape (default), large = large rounded */
+    shape?: "full" | "large";
+    /** Padding inside toolbar container */
+    contentPadding?: React$1.CSSProperties | string;
+    /** Scroll behavior hook result */
+    scrollBehavior?: FloatingToolbarScrollBehavior;
+    /** Start content (shown when expanded, usually on the left/top) */
+    startContent?: React$1.ReactNode;
+    /** End content (shown when expanded, usually on the right/bottom) */
+    endContent?: React$1.ReactNode;
+    /** Main toolbar content (always visible) */
+    children: React$1.ReactNode;
+    /** Whether to disable the internal scroll translation (useful when parent handles it) */
+    disableScrollTranslation?: boolean;
+    /** Whether to disable layout animation (useful when nested inside FloatingToolbarWithFab) */
+    disableLayoutAnimation?: boolean;
+    /**
+     * Gap (px) between items in the center children slot.
+     * Corresponds to MD3 `ContainerBetweenSpace` token (4dp default).
+     * @default 4
+     */
+    itemGap?: number;
+    /** Alignment (justify-content) of the center children slot */
+    childrenAlignment?: "start" | "center" | "end";
+    /** Custom CSS class applied to each child item in the toolbar slots */
+    itemClassName?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    "aria-label"?: string;
+}
+/**
+ * A horizontal floating toolbar that displays navigation and key actions.
+ * It can be positioned anywhere on the screen and floats over the rest of the content.
+ *
+ * @example
+ * ```tsx
+ * const [expanded, setExpanded] = useState(true);
+ * const scrollBehavior = useFloatingToolbarScrollBehavior({ exitDirection: 'bottom' });
+ *
+ * <HorizontalFloatingToolbar
+ *   expanded={expanded}
+ *   scrollBehavior={scrollBehavior}
+ *   startContent={<IconButton icon="undo" />}
+ *   endContent={<IconButton icon="redo" />}
+ * >
+ *   <IconButton icon="bold" />
+ *   <IconButton icon="italic" />
+ * </HorizontalFloatingToolbar>
+ * ```
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines
+ */
+declare const HorizontalFloatingToolbar: React$1.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "orientation"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A vertical floating toolbar that displays navigation and key actions.
+ * It floats over the rest of the content.
+ *
+ * @example
+ * ```tsx
+ * <VerticalFloatingToolbar expanded={true}>
+ *   <IconButton icon="bold" />
+ * </VerticalFloatingToolbar>
+ * ```
+ */
+declare const VerticalFloatingToolbar: React$1.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "orientation"> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface FloatingToolbarWithFabProps extends FloatingToolbarProps {
+    /** FAB element (use FAB component or custom node) */
+    floatingActionButton: React$1.ReactNode;
+    /** FAB position for horizontal: 'start' | 'end'. For vertical: 'top' | 'bottom' */
+    fabPosition?: "start" | "end" | "top" | "bottom";
+    /** Animation duration override */
+    animationDuration?: number;
+    /** Start content (explicitly declared to resolve type issues) */
+    startContent?: React$1.ReactNode;
+    /** End content (explicitly declared to resolve type issues) */
+    endContent?: React$1.ReactNode;
+    /**
+     * Size of the FAB container.
+     * - `"default"` → 56×56px (`FabBaselineTokens.ContainerHeight`)
+     * - `"medium"` → 80×80px (`FabBaselineTokens.MediumContainerHeight`)
+     *
+     * MD3: pair a medium FAB with the toolbar to give it greater visual prominence.
+     * @default "default"
+     */
+    fabSize?: "default" | "medium";
+}
+/**
+ * A horizontal floating toolbar paired with a FAB.
+ */
+declare const HorizontalFloatingToolbarWithFab: React$1.ForwardRefExoticComponent<FloatingToolbarWithFabProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A vertical floating toolbar paired with a FAB.
+ */
+declare const VerticalFloatingToolbarWithFab: React$1.ForwardRefExoticComponent<FloatingToolbarWithFabProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file toolbar-divider.tsx
+ *
+ * A decorative divider for use inside MD3 Toolbar components.
+ * Renders as a thin line that visually separates groups of toolbar actions.
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots)
+ */
+
+interface ToolbarDividerProps {
+    /**
+     * The toolbar's orientation context.
+     * - `"horizontal"` toolbar → renders a **vertical** divider line.
+     * - `"vertical"` toolbar → renders a **horizontal** divider line.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+/**
+ * A thin decorative separator for grouping actions inside a Toolbar.
+ *
+ * Inherits its color from the toolbar's `--toolbar-color` CSS variable via
+ * `currentColor`, so it automatically adapts to both standard and vibrant
+ * color configurations.
+ *
+ * @example
+ * ```tsx
+ * <HorizontalFloatingToolbar expanded={true}>
+ *   <IconButton aria-label="Bold"><BoldIcon /></IconButton>
+ *   <IconButton aria-label="Italic"><ItalicIcon /></IconButton>
+ *   <ToolbarDivider />
+ *   <IconButton aria-label="Align left"><AlignLeftIcon /></IconButton>
+ * </HorizontalFloatingToolbar>
+ * ```
+ */
+declare const ToolbarDivider: React$1.FC<ToolbarDividerProps>;
+
+/**
+ * @file toolbar-icon-button.tsx
+ *
+ * A thin wrapper around the MD3 `IconButton` component, pre-configured
+ * for use inside Toolbar slots.
+ *
+ * Supports the three emphasis variants described in the MD3 Flexibility & slots
+ * spec, plus narrow/wide sizing for asymmetric visual hierarchy.
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines (Anatomy → Flexibility & slots)
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+
+interface ToolbarIconButtonProps extends Omit<BaseIconButtonProps, "colorStyle" | "size" | "shape"> {
+    /**
+     * Visual emphasis variant.
+     *
+     * ⚠️ Avoid emphasising more than one action at a time.
+     * @default "standard"
+     */
+    emphasis?: ToolbarIconButtonVariant;
+    /**
+     * Button width sizing.
+     *
+     * Height is always `48px` to meet MD3 touch-target requirements.
+     * @default "default"
+     */
+    toolbarSize?: ToolbarIconButtonSize;
+    /** Icon content — typically a single SVG icon component. */
+    children: React$1.ReactNode;
+    /**
+     * Accessible label — **REQUIRED** because icon buttons have no visible text.
+     */
+    "aria-label": string;
+}
+/**
+ * Width sizing for a toolbar icon button.
+ *
+ * MD3 guideline: *"Use wide and narrow icon buttons"* to create visual hierarchy.
+ * Touch-target height is always 48dp regardless of width.
+ *
+ * - `narrow` → 40px wide (secondary, de-emphasised)
+ * - `default` → 48px wide (standard square touch target)
+ * - `wide` → 64px wide (primary emphasis, draws eye)
+ */
+type ToolbarIconButtonSize = "narrow" | "default" | "wide";
+/**
+ * Visual emphasis variant for a toolbar icon button.
+ *
+ * MD3 guideline: *"Use different icon button color styles, such as filled,
+ * tonal, and standard."*
+ *
+ * ⚠️ **Avoid emphasising more than one action at a time.**
+ * Use `"filled"` or `"tonal"` for the single highest-priority action and
+ * keep all other buttons as `"standard"`.
+ */
+type ToolbarIconButtonVariant = "standard" | "tonal" | "filled";
+/**
+ * An MD3 icon button optimised for use inside Toolbar slots.
+ *
+ * Wraps the project's `IconButton` and adds:
+ * - Three emphasis styles (`standard`, `tonal`, `filled`) via `emphasis` prop.
+ * - Three width sizes (`narrow`, `default`, `wide`) for visual hierarchy.
+ * - Always `rounded-full` shape (required for floating toolbars per MD3 spec).
+ * - Always 48dp height to meet MD3 accessibility touch-target requirements.
+ *
+ * @example
+ * ```tsx
+ * // Standard (default) — use for most actions
+ * <ToolbarIconButton aria-label="Share">
+ *   <ShareIcon />
+ * </ToolbarIconButton>
+ *
+ * // Filled + wide — use for the single highest-priority action
+ * <ToolbarIconButton emphasis="filled" toolbarSize="wide" aria-label="Add">
+ *   <PlusIcon />
+ * </ToolbarIconButton>
+ * ```
+ *
+ * @see https://m3.material.io/components/toolbars/guidelines
+ */
+declare const ToolbarIconButton: React$1.ForwardRefExoticComponent<Omit<ToolbarIconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Design tokens for the ToolbarDivider component.
+ * The divider is a decorative separator used to group toolbar actions.
+ */
+declare const ToolbarDividerTokens: {
+    /** Divider line thickness in px */
+    readonly Thickness: 1;
+    /** Divider size as a fraction of the toolbar container dimension */
+    readonly HeightRatio: 0.5;
+};
+/**
+ * Design tokens for the ToolbarIconButton component.
+ * Sizes follow MD3 Expressive touch-target minimums (48dp height always).
+ * - narrow: de-emphasised secondary actions
+ * - default: standard icon button
+ * - wide: primary action emphasis inside the toolbar
+ */
+declare const ToolbarIconButtonTokens: {
+    readonly NarrowWidth: 40;
+    readonly DefaultWidth: 48;
+    readonly WideWidth: 64;
+    /** Minimum touch-target height per MD3 accessibility guidelines */
+    readonly Height: 48;
+};
+
 type TooltipPlacement = "top" | "bottom" | "left" | "right" | "auto";
 type TooltipTrigger = "hover" | "focus" | "click" | "long-press" | "manual";
 interface TooltipStateConfig {
@@ -6132,4 +6570,4 @@ declare const TypeScaleTokens: {
 };
 type TypeScaleTokensType = typeof TypeScaleTokens;
 
-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, Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type BaseAppBarProps, type BaseButtonProps, type BaseIconButtonProps, BottomAppBar, type BottomAppBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHECK_ICON_VARIANTS, Card, type CardProps, type CaretConfig, Checkbox, type CheckboxProps, type CheckboxState, Chip, type ChipProps, type CircularProgressProps, CodeBlock, type CodeBlockProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogFullScreenContent, type DialogFullScreenContentProps, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, type FABMenuItemData, type FABMenuItemProps, type FABMenuProps, FABPosition, type FABPositionProps, type FABProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, GROUP_SHAPES, ITEM_SHAPE_CLASSES, Icon, IconButton, type IconButtonProps, type IconProps, LargeFlexibleAppBar, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, type MD3ColorScheme, type MD3ColorStyle, type MD3Shape, type MD3Size, MD3ThemeProvider, type MD3ThemeProviderProps, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, PlainTooltip, type PlainTooltipProps, type PolymorphicProps, type PolymorphicRef, ProgressIndicator, type ProgressIndicatorProps, RadioButton, type RadioButtonColors, type RadioButtonProps, RadioGroup, type RadioGroupProps, RangeSlider, type RangeSliderProps, RichTooltip, type RichTooltipProps, Ripple, type RippleOrigin, type RippleProps, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaType, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, Slider, SliderColors, type SliderOrientation, type SliderProps, SliderTokens, type SliderTrackSize, type SliderVariant, SmallAppBar, type SmallAppBarProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, SubMenu, type SubMenuProps, Switch, SwitchColors, type SwitchProps, SwitchTokens, Tab, type TabProps, TableOfContents, type TableOfContentsProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, Text, TextField, type TextFieldHandle, type TextFieldInputType, type TextFieldProps, type TextFieldTrailingIconMode, type TextFieldVariant, type TextProps, type TextStyle, type ThemeMode, type TitleAlignment, type ToCItem, ToggleFAB, type ToggleFABProps, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, TriStateCheckbox, type TriStateCheckboxProps, TypeScaleTokens, type TypeScaleTokensType, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, type TypographyProviderProps, TypographyTokens, type UseAppBarScrollReturn, type UseRippleStateOptions, type UseSnackbarStateReturn, VIBRANT_COLORS, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, resolveMode, useAppBarScroll, useRipple$1 as useDOMRipple, useMediaQuery, useMenuContext, useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
+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, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type BaseAppBarProps, type BaseButtonProps, type BaseIconButtonProps, BottomAppBar, type BottomAppBarProps, BottomDockedToolbar, type BottomDockedToolbarProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, CHECK_ICON_VARIANTS, Card, type CardProps, type CaretConfig, Checkbox, type CheckboxProps, type CheckboxState, Chip, type ChipProps, type CircularProgressProps, CodeBlock, type CodeBlockProps, ContextMenu, ContextMenuContent, type ContextMenuContentProps, type ContextMenuProps, ContextMenuTrigger, type ContextMenuTriggerProps, DIVIDER_COLOR, DIVIDER_PADDING, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogFullScreenContent, type DialogFullScreenContentProps, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Divider, type DividerProps, DockedToolbar, type DockedToolbarProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, FAB, FABMenu, FABMenuItem, type FABMenuItemData, type FABMenuItemProps, type FABMenuProps, FABPosition, type FABPositionProps, type FABProps, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, type FlexibleAppBarProps, type FloatingToolbarColors, type FloatingToolbarProps, type FloatingToolbarScrollBehavior, type FloatingToolbarWithFabProps, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, type IconButtonProps, type IconProps, LargeFlexibleAppBar, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, type MD3ColorScheme, type MD3ColorStyle, type MD3Shape, type MD3Size, MD3ThemeProvider, type MD3ThemeProviderProps, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MediumFlexibleAppBar, Menu, type MenuColorVariant, MenuContent, type MenuContentProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupPosition, type MenuGroupProps, MenuItem, type MenuItemPosition, type MenuItemProps, type MenuPrimitive, type MenuProps, MenuProvider, MenuTrigger, type MenuTriggerProps, type MenuVariant, NavigationBar, NavigationBarItem, type NavigationBarItemLayout, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarVariant, NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailLabelVisibility, type NavigationRailProps, type NavigationRailVariant, PlainTooltip, type PlainTooltipProps, type PolymorphicProps, type PolymorphicRef, ProgressIndicator, type ProgressIndicatorProps, RadioButton, type RadioButtonColors, type RadioButtonProps, RadioGroup, type RadioGroupProps, RangeSlider, type RangeSliderProps, RichTooltip, type RichTooltipProps, Ripple, type RippleOrigin, type RippleProps, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaType, Search, SearchAppBar, type SearchAppBarProps, SearchBar, type SearchBarVariant, type SearchProps, type SearchStyleType, SearchTokens, type SearchVariant, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, type SearchViewProps, Slider, SliderColors, type SliderOrientation, type SliderProps, SliderTokens, type SliderTrackSize, type SliderVariant, SmallAppBar, type SmallAppBarProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, SubMenu, type SubMenuProps, Switch, SwitchColors, type SwitchProps, SwitchTokens, Tab, type TabProps, TableOfContents, type TableOfContentsProps, Tabs, TabsColors, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTokens, type TabsVariant, Text, TextField, type TextFieldHandle, type TextFieldInputType, type TextFieldProps, type TextFieldTrailingIconMode, type TextFieldVariant, type TextProps, type TextStyle, type ThemeMode, type TitleAlignment, type ToCItem, ToggleFAB, type ToggleFABProps, ToolbarDivider, type ToolbarDividerProps, ToolbarDividerTokens, ToolbarIconButton, type ToolbarIconButtonProps, type ToolbarIconButtonSize, ToolbarIconButtonTokens, type ToolbarIconButtonVariant, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, TriStateCheckbox, type TriStateCheckboxProps, TypeScaleTokens, type TypeScaleTokensType, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, type TypographyProviderProps, TypographyTokens, type UseAppBarScrollReturn, type UseFloatingToolbarScrollBehaviorOptions, type UseRippleStateOptions, type UseSnackbarStateReturn, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, type VerticalMenuContentProps, VerticalMenuDivider, type VerticalMenuDividerProps, VerticalMenuGroup, type VerticalMenuGroupProps, type VerticalMenuProps, type VerticalMenuSeparatorStyle, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, resolveMode, standardFloatingToolbarColors, useAppBarScroll, useRipple$1 as useDOMRipple, useFloatingToolbarScrollBehavior, useMediaQuery, useMenuContext, useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors };