@bug-on/md3-react 0.1.0

package/dist/ui/card.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @file card.tsx
+ *
+ * Thẻ Card của bộ khung MD3 Expressive.
+ *
+ * Phân chia làm hai khía cạnh chức năng (cấu trúc tham khảo từ con ruột Android Card.kt):
+ * - **Tĩnh Lặng (Static)**    → đơn thuần mang thẻ `<div>`, yên tĩnh và không hề mảy may phản hồi có tương tác nào.
+ * - **Có phản ứng (Interactive)** → được phù phép bằng `<motion.button>` hoặc `<motion.a>`, mang bùa Ripple vẫy sống cùng khả năng nhảy vọt elevation khi lướt lên.
+ *
+ * Nấc độ bóng Elevation levels (dịch từ các file mã ElevatedCardTokens / FilledCardTokens / OutlinedCardTokens / Elevation.kt):
+ * - Level 0 = "none" (Bằng phẳng)
+ * - Level 1 = box-shadow ~1dp (Hơi nhỉnh nổi nhẹ)
+ * - Level 2 = box-shadow ~2dp (Bay lên cao xíu)
+ *
+ * @example
+ * ```tsx
+ * // Card tĩnh
+ * <Card variant="elevated">
+ *   <div className="p-4">Nội dung thẻ Card nhẹ nhàng</div>
+ * </Card>
+ *
+ * // Card button tương tác
+ * <Card variant="filled" onClick={() => alert('Đã nhấn!')}>
+ *   <div className="p-4">Click vào đây em ei</div>
+ * </Card>
+ *
+ * // Card làm thẻ Link a
+ * <Card variant="outlined" href="/home">
+ *   <div className="p-4">Click để chuyển trang</div>
+ * </Card>
+ * ```
+ *
+ * @see https://m3.material.io/components/cards/overview
+ */
+import { type VariantProps } from "class-variance-authority";
+import type { HTMLMotionProps } from "motion/react";
+import * as React from "react";
+declare const cardVariants: (props?: ({
+    variant?: "outlined" | "elevated" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
+export 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.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    /** rel cho thẻ `<a>` (tự động thêm `noreferrer` khi `target="_blank"`). */
+    rel?: string;
+    children?: React.ReactNode;
+}
+export declare const Card: React.NamedExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @file checkbox.tsx
+ * MD3 Expressive Checkbox — 2-state and tri-state support.
+ * Spec: https://m3.material.io/components/checkbox/overview
+ */
+import * as React from "react";
+/**
+ * Tri-state value: `"unchecked"` | `"checked"` | `"indeterminate"`.
+ */
+export type CheckboxState = "unchecked" | "checked" | "indeterminate";
+/**
+ * Props for `Checkbox`. Supports boolean (`checked`/`onCheckedChange`)
+ * and tri-state (`state`/`onStateChange`) modes.
+ */
+export 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.Ref<HTMLInputElement>;
+}
+/**
+ * `TriStateCheckbox` props — requires `state` + `onStateChange`.
+ */
+export 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
+ */
+export declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React.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" />
+ * ```
+ */
+export declare const TriStateCheckbox: React.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/ui/chip.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @file chip.tsx
+ *
+ * MD3 Expressive Chip component — 4 variants.
+ *
+ * - `assist`     → Triggered actions spanning multiple apps. Flat (bordered) or Elevated.
+ * - `filter`     → Toggleable selections. Animated checkmark on select.
+ * - `input`      → Entities/tags with optional avatar and a dedicated remove button.
+ * - `suggestion` → Contextual dynamic recommendations. Flat (bordered) or Elevated.
+ *
+ * @remarks
+ * Token references (Kotlin source):
+ * AssistChipTokens, FilterChipTokens, InputChipTokens, SuggestionChipTokens
+ *
+ * Architecture:
+ * - Styling: `cva` + `cn` (clsx/tailwind-merge)
+ * - Animation: Framer Motion (`LazyMotion` + `domMax`) for animated checkmark
+ * - Ripple: `Ripple` + `useRippleState` from `./ripple.tsx`
+ * - A11y: `role="checkbox"` (filter), `role="button"` (others); full keyboard support
+ *
+ * @see https://m3.material.io/components/chips/overview
+ */
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const chipVariants: (props?: ({
+    variant?: "input" | "filter" | "assist" | "suggestion" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * 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'
+     */
+    variant?: VariantProps<typeof chipVariants>["variant"];
+    /**
+     * 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
+     */
+    elevated?: boolean;
+    /**
+     * Toggle/selection state.
+     * - `filter`:  selected → bg `secondary-container`, animated checkmark appears.
+     * - `input`:   selected → bg `secondary-container`.
+     * Used for `role="checkbox"` (filter) / `aria-pressed` (input).
+     */
+    selected?: boolean;
+    /**
+     * 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}`
+     */
+    disabled?: boolean;
+    /**
+     * Visible label. Required. Can be a string or ReactNode.
+     */
+    label: React.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`
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Optional trailing icon element (18×18px recommended).
+     * Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Avatar element for `input` chips. Takes priority over `leadingIcon`.
+     * Rendered as a 24×24px circle (InputChipTokens: AvatarSize = 24.dp, AvatarShape = CornerFull).
+     */
+    avatar?: React.ReactNode;
+    /**
+     * 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.
+     */
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * MD3 Expressive Chip — 4-variant interactive tag component.
+ *
+ * @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
+ */
+export declare const Chip: React.NamedExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/ui/code-block.d.ts

@@ -0,0 +1,14 @@
+export 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;
+}
+export declare function CodeBlock({ code, language, className, html, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/dialog.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @file dialog.tsx
+ *
+ * Sub-system Component Dialog theo phong cách hiển thị MD3 Expressive.
+ *
+ * Được kế thừa trên nền lõi của hệ mã Radix UI Dialog primitives đi kèm gói kén Framer Motion dùng vào việc bổ sung
+ * nhip điệu đẩy Spring ở hướng hiện vào (Entrance) cũng như bay lên (Exit); ăn liền với bản thiết kế specs MD3 Expressive siêu quyến rũ.
+ * Phục vụ cả ở chế độ Standard (Tiêu chuẩn lọt thỏm) và phiên bản Full-Screen tràn viền toàn diện.
+ *
+ * @see https://m3.material.io/components/dialogs/overview
+ */
+import * as RadixDialog from "@radix-ui/react-dialog";
+import * as React from "react";
+/**
+ * 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
+ * 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>
+ * ```
+ */
+export 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.ReactNode;
+}
+/**
+ * Các props được tiêm vào component bao ngoài Container `DialogContent` thuộc dạng Normal Standard.
+ *
+ * @see {@link DialogContent}
+ */
+export interface DialogContentProps extends React.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
+ */
+export interface DialogFullScreenContentProps extends React.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): import("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.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: {
+    ({ open, children, }: {
+        open?: boolean;
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogClose: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogFullScreenContent: React.ForwardRefExoticComponent<DialogFullScreenContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/ui/divider.d.ts

@@ -0,0 +1,164 @@
+/**
+ * @file divider.tsx
+ *
+ * MD3 Expressive Divider component.
+ *
+ * - `Divider` → A thin line that groups content in lists and layouts.
+ *
+ * @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)
+ *
+ * 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)
+ *
+ * Shapes:
+ *   - "flat"  → straight 1px line rendered as <m.div> (default)
+ *   - "wavy"  → sinusoidal SVG wave via <m.svg> + buildWavePath helper (horizontal only)
+ *
+ * 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/divider/overview
+ */
+import * as React from "react";
+type SafeHTMLDivAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
+export 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";
+    /**
+     * 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"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * 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"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * 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"
+     */
+    insetStart?: "standard" | "icon";
+    /**
+     * Wavy shape visual parameters. Only applies when `shape="wavy"`.
+     * All values are in pixels.
+     */
+    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;
+    };
+    /**
+     * When true, marks the divider as decorative (`aria-hidden="true"`).
+     * Use when the divider is purely visual with no semantic meaning.
+     * @default false
+     */
+    decorative?: boolean;
+    /**
+     * When true, plays an entrance animation (scaleX/scaleY from 0→1).
+     * Automatically disabled when user prefers reduced motion.
+     * @default true
+     */
+    animate?: boolean;
+}
+/**
+ * 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%.
+ *
+ * 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.
+ *
+ * @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 ..."
+ */
+export declare function buildWavePath(startX: number, endX: number, amplitude?: number, wavelength?: number, yCenter?: number): string;
+/**
+ * MD3 Expressive Divider — a thin line that groups content in lists and layouts.
+ *
+ * Supports four layout variants (full-bleed, inset, middle-inset, subheader),
+ * two orientations (horizontal, vertical), and two shape modes (flat, wavy).
+ *
+ * The wavy shape renders a sinusoidal SVG wave and is only supported with
+ * `orientation="horizontal"`.
+ *
+ * @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} />
+ *
+ * // Middle-inset wavy divider
+ * <Divider variant="middle-inset" shape="wavy" />
+ * ```
+ *
+ * @see https://m3.material.io/components/divider/overview
+ */
+export declare const Divider: React.NamedExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/ui/drawer.d.ts

@@ -0,0 +1,39 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+import * as React from "react";
+export interface DrawerProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+export interface DrawerContentProps extends Omit<React.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): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: ({ open, children, }: {
+    open?: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/ui/dropdown.d.ts

@@ -0,0 +1,29 @@
+import * as RadixDropdown from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+export type DropdownMenuProps = React.ComponentPropsWithoutRef<typeof RadixDropdown.Root>;
+export type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof RadixDropdown.Trigger>;
+declare const DropdownMenu: React.FC<RadixDropdown.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<RadixDropdown.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<RadixDropdown.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<RadixDropdown.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<RadixDropdown.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<RadixDropdown.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };