@bug-on/m3-expressive 1.0.0

package/dist/split-button-trailing-uncheckable-C5CLCIKP.d.ts

@@ -0,0 +1,731 @@
+import { HTMLMotionProps } from 'motion/react';
+import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-DFhj-NZj.js';
+import * as React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MotionButtonProps$3 = Omit<HTMLMotionProps<"button">, "children" | "color">;
+interface BaseButtonProps extends MotionButtonProps$3 {
+    /**
+     * The visual style of the button.
+     * Maps to MD3 emphasis levels.
+     * @default "filled"
+     */
+    colorStyle?: MD3ColorStyle;
+    /**
+     * @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?: MD3ColorStyle;
+    /**
+     * The size variant of the button.
+     * @default "sm"
+     */
+    size?: MD3Size;
+    /**
+     * Shape of the button container.
+     * MD3 Expressive morphs the shape slightly on press based on the chosen shape variant.
+     * @default "round"
+     */
+    shape?: MD3Shape;
+    /**
+     * 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).
+     */
+    outlineWidth?: number;
+    /**
+     * An optional icon to display alongside the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Position of the icon relative to the label.
+     * @default "leading"
+     */
+    iconPosition?: "leading" | "trailing";
+    /**
+     * 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;
+    /**
+     * The visual variant of the loading spinner.
+     * @default "loading-indicator"
+     */
+    loadingVariant?: "loading-indicator" | "circular";
+    /**
+     * 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;
+    /**
+     * 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;
+}
+type ButtonProps = BaseButtonProps & ({
+    variant?: "default";
+    selected?: never;
+} | {
+    variant: "toggle";
+    selected: boolean;
+});
+
+declare const Button: React$1.NamedExoticComponent<(Omit<BaseButtonProps & {
+    variant?: "default";
+    selected?: never;
+}, "ref"> | Omit<BaseButtonProps & {
+    variant: "toggle";
+    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).
+ */
+interface ButtonGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /**
+     * 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?: ButtonGroupVariant;
+    /**
+     * Hướng sắp xếp của các nút trong nhóm.
+     * @default "horizontal"
+     */
+    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
+     */
+    fullWidth?: boolean;
+    /**
+     * Á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?: 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;
+    /**
+     * Đ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.
+     */
+    iconBehavior?: "selected" | "all" | "none";
+    /**
+     * Đ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.
+     */
+    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 ButtonGroup: React$1.NamedExoticComponent<ButtonGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
+
+/**
+ * @file extended-fab.tsx
+ * MD3 Expressive Extended Floating Action Button.
+ * @see https://m3.material.io/components/extended-fab/specs
+ */
+
+type MotionButtonProps$2 = Omit<HTMLMotionProps<"button">, "children" | "color">;
+/** Props for the `ExtendedFAB` component. */
+interface ExtendedFABProps extends MotionButtonProps$2 {
+    /** Required text label. Keep it short (1-2 words); it does not wrap. */
+    label: string;
+    /** Icon to render. Automatically replaced by a spinner when `loading={true}`. */
+    icon?: React$1.ReactNode;
+    /** Button size per MD3 Expressive spec. @default "sm" */
+    size?: "sm" | "md" | "lg";
+    /** MD3 color role for the container surface. @default "primary" */
+    colorStyle?: "primary" | "secondary" | "tertiary" | "surface";
+    /** Reduces shadow to the lower elevation variant. @default false */
+    lowered?: boolean;
+    /** Replaces the icon with a spinner and blocks interaction. @default false */
+    loading?: boolean;
+    /** Spinner style shown while loading. @default "loading-indicator" */
+    loadingVariant?: "loading-indicator" | "circular";
+    /** Mounts/unmounts with an entrance/exit animation. @default true */
+    visible?: boolean;
+    /** Collapses to icon-only when the user scrolls down. @default false */
+    collapseOnScroll?: boolean;
+    /** Minimum scroll delta (px) required to trigger collapse/expand. @default 50 */
+    scrollThreshold?: number;
+    /** Controlled collapsed state. Overrides internal scroll-driven state when provided. */
+    collapsed?: boolean;
+    /** Callback fired when the internal collapsed state changes. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Layout ID for Framer Motion Container Transform transitions. */
+    layoutId?: string;
+}
+declare const ExtendedFAB: React$1.NamedExoticComponent<Omit<ExtendedFABProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+type MotionButtonProps$1 = Omit<HTMLMotionProps<"button">, "children" | "color">;
+/**
+ * Tham số Props dùng cho component thao tác nổi `FAB`.
+ *
+ * @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à.
+ *
+ * @see https://m3.material.io/components/floating-action-button/overview
+ */
+interface FABProps extends MotionButtonProps$1 {
+    /**
+     * 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}`.
+     */
+    icon: React$1.ReactNode;
+    /**
+     * 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"
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Container vai trò hệ thống tông màu MD3 dùng phết nền.
+     * @default "primary"
+     */
+    colorStyle?: "primary" | "secondary" | "tertiary" | "surface";
+    /**
+     * 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
+     */
+    extended?: 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.
+     */
+    children?: 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
+     */
+    lowered?: boolean;
+    /**
+     * 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
+     */
+    loading?: boolean;
+    /**
+     * Có 2 chuẩn hình của Loading chờ.
+     * @default "loading-indicator"
+     */
+    loadingVariant?: "loading-indicator" | "circular";
+    /**
+     * Hiện thẻ FAB lên layout không (Kiểm soát bằng motion scale Entrance/Exit).
+     * @default true
+     */
+    visible?: boolean;
+}
+/**
+ * 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.
+ *
+ * @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
+ * <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 {@link FAB}
+ * @see https://m3.material.io/components/floating-action-button/guidelines
+ */
+declare function FABPosition({ position, children, className, }: FABPositionProps): react_jsx_runtime.JSX.Element;
+/**
+ * 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
+ * // 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" />
+ *
+ * // 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
+ */
+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;
+    /**
+     * 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;
+}
+/**
+ * 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[];
+    /**
+     * 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;
+}
+/**
+ * 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;
+    /**
+     * 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
+ * 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.
+ *
+ * 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ó.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
+ *
+ * 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 SplitButtonVariant = "filled" | "tonal" | "elevated" | "outlined";
+type SplitButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface SplitButtonSizeTokens {
+    containerHeight: number;
+    betweenSpace: number;
+    innerCorner: {
+        default: number;
+        hovered: number;
+        pressed: number;
+    };
+    outerCornerPercent: number;
+    leadingPadding: {
+        start: number;
+        end: number;
+    };
+    trailingPadding: {
+        start: number;
+        end: number;
+    };
+    trailingIconSize: number;
+    /** Optical centering offset in px for trailing icon when unselected (asymmetric shape).
+     *  Negative = shift toward center. Applied as translateX(-Ndp) on trailing icon container.
+     *  Values: xs=-1, sm=-1, md=-2, lg=-3, xl=-6.
+     *  When trailing button is selected (circular), offset = 0 (centered normally). */
+    opticalCenterOffset: number;
+}
+interface SplitButtonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    leadingButton: React.ReactNode;
+    trailingButton: React.ReactNode;
+    /**
+     * Visual variant for both buttons. If provided, overrides variants on sub-components.
+     */
+    variant?: SplitButtonVariant;
+    /**
+     * Size for both buttons. If provided, overrides sizes on sub-components.
+     */
+    size?: SplitButtonSize;
+    className?: string;
+    /**
+     * Gap between leading and trailing button.
+     * Default: 2
+     */
+    spacing?: number;
+}
+type MotionButtonProps = Omit<HTMLMotionProps<"button">, "color" | "children">;
+interface SplitButtonLeadingProps extends MotionButtonProps {
+    /** Visual variant matching the paired trailing button */
+    variant?: SplitButtonVariant;
+    /** Size of the button */
+    size?: SplitButtonSize;
+    /** Leading icon element */
+    icon?: React.ReactNode;
+    /** Children = label text */
+    children?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+interface SplitButtonTrailingProps extends Omit<MotionButtonProps, "onChange" | "color" | "children"> {
+    variant?: SplitButtonVariant;
+    size?: SplitButtonSize;
+    /** Checked/selected state — triggers shape morph to circle + icon rotation */
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Icon to render (default: arrow_drop_down icon) */
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    /** aria-label REQUIRED for accessibility */
+    "aria-label": string;
+    /** ID of controlled menu element */
+    "aria-controls"?: string;
+    className?: string;
+}
+interface SplitButtonTrailingUncheckableProps extends Omit<MotionButtonProps, "color" | "children"> {
+    variant?: SplitButtonVariant;
+    size?: SplitButtonSize;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    "aria-label": string;
+    className?: string;
+}
+
+declare const SplitButtonLayout: React$1.NamedExoticComponent<SplitButtonLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const SplitButtonLeading: React$1.NamedExoticComponent<Omit<SplitButtonLeadingProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const FilledSplitButtonLeading: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonLeadingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TonalSplitButtonLeading: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonLeadingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ElevatedSplitButtonLeading: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonLeadingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const OutlinedSplitButtonLeading: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonLeadingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const SplitButtonTrailing: React$1.NamedExoticComponent<Omit<SplitButtonTrailingProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const FilledSplitButtonTrailing: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TonalSplitButtonTrailing: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ElevatedSplitButtonTrailing: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const OutlinedSplitButtonTrailing: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const SplitButtonTrailingUncheckable: React$1.NamedExoticComponent<Omit<SplitButtonTrailingUncheckableProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const FilledSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TonalSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ElevatedSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const OutlinedSplitButtonTrailingUncheckable: React$1.ForwardRefExoticComponent<Omit<Omit<SplitButtonTrailingUncheckableProps, "variant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+export { SplitButtonLeading as A, BUTTON_COLOR_TOKENS as B, type SplitButtonLeadingProps as C, type SplitButtonSize as D, ElevatedSplitButtonLeading as E, FAB as F, SplitButtonTrailing as G, type SplitButtonTrailingProps as H, SplitButtonTrailingUncheckable as I, type SplitButtonTrailingUncheckableProps as J, type SplitButtonVariant as K, type ToggleFABProps as L, TonalSplitButtonLeading as M, TonalSplitButtonTrailing as N, OutlinedSplitButtonLeading as O, TonalSplitButtonTrailingUncheckable as P, type SplitButtonSizeTokens as Q, SplitButtonLayout as S, ToggleFAB as T, BUTTON_SIZE_TOKENS as a, type BaseButtonProps as b, Button as c, ButtonGroup as d, type ButtonGroupOrientation as e, type ButtonGroupProps as f, type ButtonGroupVariant as g, type ButtonProps as h, ElevatedSplitButtonTrailing as i, ElevatedSplitButtonTrailingUncheckable as j, ExtendedFAB as k, type ExtendedFABProps as l, FABMenu as m, FABMenuItem as n, type FABMenuItemData as o, type FABMenuItemProps as p, type FABMenuProps as q, FABPosition as r, type FABPositionProps as s, type FABProps as t, FilledSplitButtonLeading as u, FilledSplitButtonTrailing as v, FilledSplitButtonTrailingUncheckable as w, OutlinedSplitButtonTrailing as x, OutlinedSplitButtonTrailingUncheckable as y, type SplitButtonLayoutProps as z };