@bug-on/md3-react 0.1.0

package/dist/ui/progress-indicator/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ProgressIndicatorProps } from "./types";
+/**
+ * Thanh tiến trình (Progress Indicator) theo nguyên tắc Material Design 3 Expressive.
+ * Hỗ trợ linh hoạt 2 loại hình hiển thị: Linear (Đường thẳng) và Circular (Hình tròn),
+ * cùng với thiết kế Wavy (Lượn sóng) động rất mềm mại.
+ *
+ * @example
+ * ```tsx
+ * // Determinate Flat Linear
+ * <ProgressIndicator variant="linear" value={60} aria-label="Loading profile..." />
+ *
+ * // Indeterminate Wavy Linear
+ * <ProgressIndicator variant="linear" shape="wavy" aria-label="Connecting to server..." />
+ *
+ * // Determinate Flat Circular
+ * <ProgressIndicator variant="circular" value={45} size={48} aria-label="Syncing..." />
+ * ```
+ */
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export type { CircularProgressProps, LinearProgressProps, ProgressIndicatorProps, } from "./types";

package/dist/ui/progress-indicator/linear-flat.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export declare const FlatLinearTrack: React.NamedExoticComponent<{
+    trackHeight: number;
+    activeColor: string;
+    trackColor: string;
+    value?: number;
+    isRtl: boolean;
+    gapSize: number;
+    crawlerSpeed: number;
+}>;

package/dist/ui/progress-indicator/linear-wavy.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export declare const WavyLinearTrack: React.NamedExoticComponent<{
+    trackHeight: number;
+    svgHeight: number;
+    amplitude: number;
+    wavelength: number;
+    indeterminateWavelength: number;
+    activeColor: string;
+    trackColor: string;
+    value?: number;
+    isRtl: boolean;
+    gapSize: number;
+    waveSpeed: number;
+    crawlerSpeed: number;
+    determinateAnimation: "md3" | "continuous";
+    indeterminateAnimation: "md3" | "continuous";
+    trackShape: "flat" | "wavy";
+}>;

package/dist/ui/progress-indicator/linear.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { LinearProgressProps } from "./types";
+export declare const LinearProgress: React.ForwardRefExoticComponent<LinearProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/progress-indicator/types.d.ts

@@ -0,0 +1,151 @@
+import type * as React from "react";
+export interface ProgressBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Giá trị phần trăm tiến trình hiện tại (từ 0 đến 100).
+     * Nếu truyền giá trị này, tiến trình sẽ hiển thị ở trạng thái Determinate.
+     * Nếu bỏ trống (undefined), tiến trình sẽ tự động ở trạng thái Indeterminate.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator value={45} aria-label="Loading profile..." />
+     * ```
+     */
+    value?: number;
+    /**
+     * Nhan đề mô tả mục đích của thanh tiến trình dành cho screen readers (bắt buộc).
+     */
+    "aria-label": string;
+    /**
+     * Độ dày của track (đường nền) của thanh tiến trình (đơn vị: px).
+     * - Với Linear: là chiều cao của thanh.
+     * - Với Circular: là độ dày của viền hình tròn.
+     *
+     * @example
+     * trackHeight={8} // Dày hơn bình thường
+     */
+    trackHeight?: number;
+    /**
+     * Màu sắc của phần tiến trình (phần đã hoàn thành).
+     * Mặc định mượn màu `currentColor` của thẻ wrap, để dễ dàng tuỳ biến qua utility class.
+     *
+     * @example
+     * color="var(--md-sys-color-primary)" // Sử dụng custom token
+     */
+    color?: string;
+    /**
+     * Màu sắc của thanh nền (phần chưa hoàn thành).
+     * Mặc định sử dụng màu được tính toán từ bề mặt hoặc transparency để tạo sự tinh tế.
+     */
+    trackColor?: string;
+}
+export interface LinearProgressProps extends ProgressBaseProps {
+    /** Phân loại component sang kiểu dáng Linear (đường thẳng ngang). */
+    variant: "linear";
+    /**
+     * Hình dáng của vạch tiến trình (phần đã hoàn thành).
+     * - `flat`: Đường nét liền phẳng (mặc định)
+     * - `wavy`: Đường lượn sóng động
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Hình dáng của thanh nền chờ (track).
+     * - `flat`: Đường nét liền phẳng (mặc định)
+     * - `wavy`: Đường lượn sóng cố định hoặc động
+     */
+    trackShape?: "flat" | "wavy";
+    /**
+     * Biên độ sóng (áp dụng khi `shape` hoặc `trackShape` là "wavy").
+     * Chỉ định độ lượn cao thấp của con sóng.
+     */
+    amplitude?: number;
+    /**
+     * Chiều dài một nhịp sóng (áp dụng khi `shape` là "wavy" theo determinate).
+     * Khoảng cách giữa 2 đỉnh sóng kề nhau.
+     */
+    wavelength?: number;
+    /**
+     * Nhịp sóng dành riêng cho trạng thái chạy liên tục (Indeterminate Wavy).
+     */
+    indeterminateWavelength?: number;
+    /**
+     * Khoảng hở kết dính giữa cụm vạch đang chạy và thanh nền.
+     * Cho phép truyền \`0\` để hai thanh chạm sát vào nhau liền mạch.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Sóng chạm track liền nét
+     * ```
+     */
+    gapSize?: number;
+    /**
+     * Tốc độ dao động vỗ của sóng (Multiplier). Mặc định là \`1\`.
+     * Tăng giá trị (VD: 1.5, 2) để sóng dao động nhanh hơn.
+     */
+    waveSpeed?: number;
+    /**
+     * Tốc độ lướt / cuộn dải màu dọc trên track (Crawler) đối với trạng thái Indeterminate.
+     * Mặc định là \`1\`.
+     */
+    crawlerSpeed?: number;
+    /**
+     * Cấu hình hiệu ứng gợn khi thanh determinate ở mức xấp xỉ mép viền (<= 10% hoặc >= 90%).
+     * - `md3`: Tự động ép phẳng biên độ sóng thành số 0 một cách mềm mại (Chuẩn Google MD3).
+     * - `continuous`: Bỏ qua các ràng buộc ép phẳng, con sóng vẫn gợn lấp lóa trên mọi giá trị phần trăm.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="linear" shape="wavy" determinateAnimation="continuous" />
+     * ```
+     */
+    determinateAnimation?: "md3" | "continuous";
+    /**
+     * Kiểu kịch bản tịnh tiến cho thanh Indeterminate.
+     * - `md3`: Render 2 vạch song song vọt tới & co giãn mô phỏng vật lý (Chuẩn Google MD3).
+     * - `continuous`: Vạch không ngắt quãng mà tràn lướt vòng lặp mượt mà.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="linear" indeterminateAnimation="continuous" />
+     * ```
+     */
+    indeterminateAnimation?: "md3" | "continuous";
+    /**
+     * Bật/tắt dấm chấm điểm báo kết thúc ở cuối track (Stop Indicator).
+     * - `true`: Luôn thấy một chấm tròn bé xíu ở cuối đường đi
+     * - `false`: Tắt hoàn toàn
+     * - `"auto"`: Chấm tròn chỉ hiển thị và hòa trộn khi progress đạt 100%
+     */
+    showStopIndicator?: boolean | "auto";
+}
+export interface CircularProgressProps extends ProgressBaseProps {
+    /** Phân loại component sang kiểu dáng Circular (hình tròn khép kín). */
+    variant: "circular";
+    /**
+     * Đường kính hiển thị của vòng biểu đồ, đơn vị px.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="circular" size={48} aria-label="Loading..." />
+     * ```
+     */
+    size?: number;
+    /**
+     * Phong cách nét vẽ của đường viền trong trạng thái trượt.
+     * - `flat`: Đường nét cứng, vuốt tròn hai đầu stroke.
+     * - `wavy`: Vệt màu chuyển động rung tạo hình răng cưa/gợn sóng.
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Biên độ gợn của trạng thái `wavy` cho vòng tròn.
+     */
+    amplitude?: number;
+    /** Bước sóng bao trọn chu vi hình tròn. */
+    wavelength?: number;
+    /** Khoảng hở khe đứt ngang nối đỉnh nét vẽ. */
+    gapSize?: number;
+    /**
+     * Xoay nhanh hay chậm theo số nhân cho Crawler Circular quay Indeterminate.
+     */
+    crawlerSpeed?: number;
+}
+export type ProgressIndicatorProps = LinearProgressProps | CircularProgressProps;

package/dist/ui/progress-indicator/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function easeInOutCubic(x: number): number;
+export declare function generateWavyCircularPath(center: number, radius: number, amplitude: number, wavelength: number): string;
+export declare function getSinePath(startX: number, endX: number, phase: number, wl: number, amp: number): string;

package/dist/ui/radio-button.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @file radio-button.tsx
+ * MD3 Expressive RadioButton — single-select with RadioGroup support.
+ * Spec: https://m3.material.io/components/radio-button/overview
+ */
+import * as React from "react";
+/**
+ * Color variant for `RadioButton`.
+ * - `"primary"` — standard selection (default)
+ * - `"error"` — error/invalid state
+ */
+export type RadioButtonColors = "primary" | "error";
+/** Props for `RadioButton`. */
+export interface RadioButtonProps {
+    /** Whether this radio is selected. */
+    selected?: boolean;
+    /** Initial selected state (uncontrolled). @default false */
+    defaultSelected?: boolean;
+    /** Called when user clicks. Pass `null` to disable interaction. */
+    onClick?: (() => void) | null;
+    /** Disables the radio — visual disabled state + no interaction. @default false */
+    disabled?: boolean;
+    /** Color variant. @default "primary" */
+    color?: RadioButtonColors;
+    /** Error state — changes colors to `m3-error`. @default false */
+    error?: boolean;
+    /** Adjacent label text. Renders a `<label>` wrapper. */
+    label?: string;
+    /** Value used for form submission. */
+    value?: string;
+    /** Name for grouping (used in RadioGroup context). */
+    name?: string;
+    /** ID for the hidden `<input>`. Auto-generated when `label` is set. */
+    id?: string;
+    /** Extra class names on the outermost wrapper. */
+    className?: string;
+    /** ARIA label for the radio when no visible label exists. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Whether the radio is required for form submission. */
+    required?: boolean;
+    /** Ref to the hidden `<input type="radio">`. */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Props for `RadioGroup`. */
+export interface RadioGroupProps {
+    /** The name attribute shared across all child RadioButtons. */
+    name: string;
+    /** The currently selected value (controlled). */
+    value?: string;
+    /** Default value (uncontrolled). */
+    defaultValue?: string;
+    /** Called when selection changes. */
+    onValueChange?: (value: string) => void;
+    /** Disables all radio buttons in the group. */
+    disabled?: boolean;
+    /** Error state for the entire group. */
+    error?: boolean;
+    /** Label for the group (renders as visually hidden or visible heading). */
+    label?: string;
+    /** ID of an external element that labels this group. */
+    "aria-labelledby"?: string;
+    /** Direction of layout. @default "vertical" */
+    orientation?: "horizontal" | "vertical";
+    /** Whether at least one radio in the group must be selected. */
+    required?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * MD3 Expressive RadioButton component.
+ *
+ * Single-select control. Supports standalone (controlled/uncontrolled) and
+ * `RadioGroup` context. Animated per MD3 spec: inner dot radius morph,
+ * outer ring color transition, state layer, and ripple.
+ *
+ * @example
+ * ```tsx
+ * <RadioButton selected={isSelected} onClick={() => setSelected(true)} label="Option A" />
+ *
+ * <RadioGroup name="plan" value={plan} onValueChange={setPlan}>
+ *   <RadioButton value="free" label="Free" />
+ *   <RadioButton value="pro" label="Pro" />
+ * </RadioGroup>
+ * ```
+ * @see https://m3.material.io/components/radio-button/overview
+ */
+export declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * MD3 Expressive RadioGroup component.
+ *
+ * Groups multiple `RadioButton` components under a shared `name` with keyboard
+ * navigation (Arrow keys with wrapping) and ARIA `radiogroup` semantics.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="theme" value={theme} onValueChange={setTheme} label="Theme">
+ *   <RadioButton value="light" label="Light" />
+ *   <RadioButton value="dark" label="Dark" />
+ *   <RadioButton value="system" label="System" />
+ * </RadioGroup>
+ * ```
+ * @see https://m3.material.io/components/radio-button/overview
+ */
+export declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/ripple.d.ts

@@ -0,0 +1,126 @@
+import * as React from "react";
+/**
+ * Represents a single ripple wave instance with position and size metadata.
+ *
+ * @example
+ * ```tsx
+ * const ripple: RippleOrigin = { id: Date.now(), x: 50, y: 30, size: 200 };
+ * ```
+ */
+export interface RippleOrigin {
+    /** Unique identifier used as React key and for removal. */
+    id: number;
+    /** X coordinate of the pointer event relative to the container's left edge (px). */
+    x: number;
+    /** Y coordinate of the pointer event relative to the container's top edge (px). */
+    y: number;
+    /**
+     * Diameter of the ripple circle (px).
+     * Typically `Math.hypot(width, height) * 2` to ensure it fills the container.
+     */
+    size: number;
+}
+/**
+ * Props for the `Ripple` presentation component.
+ */
+export interface RippleProps {
+    /** Active ripple instances to render. Managed by the parent via `useRipple`. */
+    ripples: RippleOrigin[];
+    /** Called when a ripple's exit animation completes — remove it from state. */
+    onRippleDone: (id: number) => void;
+    /**
+     * Completely disables the ripple effect.
+     * Use this when the parent element is disabled or interaction is not desired.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, the ripple respects the user's OS-level
+     * `prefers-reduced-motion` accessibility setting and renders nothing if active.
+     *
+     * Set to `false` to always show ripples regardless of system preference.
+     * @default true
+     */
+    respectSystemMotion?: boolean;
+}
+/**
+ * MD3 Expressive Ripple — animated touch-feedback wave layer.
+ *
+ * Renders absolutely-positioned ripple circles inside an `overflow-hidden`
+ * container. Must be placed as a direct child of the interactive element.
+ *
+ * @remarks
+ * - The parent element **must** have `overflow: hidden` and `position: relative`
+ *   (or equivalent) for clipping to work correctly.
+ * - Set `disabled` to `true` on parent's disabled state to avoid stale ripples.
+ * - The ripple color is `currentColor` at 12% opacity — matching MD3 state layer spec.
+ *
+ * @example
+ * ```tsx
+ * const { ripples, onPointerDown, removeRipple } = useRippleState();
+ *
+ * <button onPointerDown={onPointerDown} className="relative overflow-hidden">
+ *   <Ripple ripples={ripples} onRippleDone={removeRipple} />
+ *   Click me
+ * </button>
+ * ```
+ *
+ * @see {@link useRippleState} for the state management hook
+ * @see https://m3.material.io/foundations/interaction/states/overview
+ */
+export declare function Ripple({ ripples, onRippleDone, disabled, respectSystemMotion, }: RippleProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Options for configuring `useRippleState` behaviour.
+ */
+export interface UseRippleStateOptions {
+    /**
+     * When `true`, the ripple is suppressed — `onPointerDown` becomes a no-op.
+     * Use this to sync the ripple with the parent element's `disabled` state.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * `useRippleState` — state manager for MD3 Expressive ripple waves.
+ *
+ * Tracks active ripple instances and provides pointer event handlers.
+ * Pair with the `<Ripple>` component for rendering.
+ *
+ * @remarks
+ * This hook only manages ripple *state* (coordinates, size, lifecycle).
+ * The actual animation is handled by `<Ripple>` via Framer Motion.
+ * Respecting `prefers-reduced-motion` is handled by `<Ripple>` itself.
+ *
+ * @param options - Configuration options. See {@link UseRippleStateOptions}.
+ * @returns `{ ripples, onPointerDown, removeRipple }` — bind to the interactive element.
+ *
+ * @example
+ * ```tsx
+ * function MyButton({ disabled, children }) {
+ *   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
+ *
+ *   return (
+ *     <button
+ *       disabled={disabled}
+ *       onPointerDown={onPointerDown}
+ *       className="relative overflow-hidden"
+ *     >
+ *       <Ripple ripples={ripples} onRippleDone={removeRipple} disabled={disabled} />
+ *       {children}
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link Ripple} for the rendering component
+ */
+export declare function useRippleState(options?: UseRippleStateOptions): {
+    ripples: RippleOrigin[];
+    onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
+    removeRipple: (id: number) => void;
+};
+/**
+ * @deprecated Use `useRippleState` instead. This alias will be removed in a future version.
+ * @see {@link useRippleState}
+ */
+export declare const useRipple: typeof useRippleState;

package/dist/ui/scroll-area.d.ts

@@ -0,0 +1,27 @@
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import * as React from "react";
+/** Radix accepts hover/scroll/always/auto. We add 'none' as a UI-only hide. */
+export type ScrollAreaType = "hover" | "scroll" | "always" | "none";
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixScrollArea.Root>, "type"> {
+    /**
+     * Controls when the scrollbars are visible.
+     * - `hover`: Show on hover (default, recommended for desktop)
+     * - `scroll`: Show only while scrolling (recommended for mobile)
+     * - `always`: Always visible
+     * - `none`: Never visible
+     */
+    type?: ScrollAreaType;
+    /**
+     * The scrollbar orientation to render.
+     * @default "vertical"
+     */
+    orientation?: ScrollAreaOrientation;
+    /** Delay in ms before scrollbars hide when `type` is `hover` or `scroll`. */
+    scrollHideDelay?: number;
+    /** Extra classes applied to the inner viewport element. */
+    viewportClassName?: string;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<RadixScrollArea.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollAreaScrollbar };

package/dist/ui/shared/constants.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @file shared/constants.ts
+ *
+ * Shared animation constants for MD3 Expressive UI components.
+ * Centralises spring transition configs and motion variant objects to avoid
+ * duplication across button, icon-button, FAB, and other interactive components.
+ *
+ * @see https://m3.material.io/foundations/animation/overview
+ */
+import type { Target, TargetAndTransition, Transition } from "motion/react";
+/**
+ * Fast critically-damped spring — used for border-radius morphing.
+ *
+ * - Duration: 200ms
+ * - Bounce: 0 (no overshoot → prevents negative radius jitter)
+ *
+ * @example
+ * ```tsx
+ * <m.button transition={{ borderRadius: SPRING_TRANSITION_FAST }}>...</m.button>
+ * ```
+ */
+export declare const SPRING_TRANSITION_FAST: Transition;
+/**
+ * Standard critically-damped spring — used for icon/content scale animations.
+ *
+ * - Duration: 300ms
+ * - Bounce: 0 (no overshoot)
+ *
+ * @example
+ * ```tsx
+ * <m.span transition={SPRING_TRANSITION}>...</m.span>
+ * ```
+ */
+export declare const SPRING_TRANSITION: Transition;
+/**
+ * Framer Motion variants for animating icon spans in/out.
+ *
+ * Scale from near-zero → 1 on enter; back to near-zero on exit.
+ * The near-zero value (0.01) avoids the SMIL freeze bug on Chromium
+ * that occurs when an element starts at exactly `scale(0)`.
+ *
+ * @example
+ * ```tsx
+ * <AnimatePresence mode="wait">
+ *   {loading ? (
+ *     <m.span key="loading" {...ICON_SPAN_VARIANTS} transition={SPRING_TRANSITION}>
+ *       <LoadingIndicator />
+ *     </m.span>
+ *   ) : (
+ *     <m.span key="icon" {...ICON_SPAN_VARIANTS} transition={SPRING_TRANSITION}>
+ *       {icon}
+ *     </m.span>
+ *   )}
+ * </AnimatePresence>
+ * ```
+ */
+export declare const ICON_SPAN_VARIANTS: {
+    initial: Target;
+    animate: TargetAndTransition;
+    exit: TargetAndTransition;
+};
+/**
+ * MD3 Standard easing curve — used for label float, active indicator expand.
+ * cubic-bezier(0.2, 0, 0, 1)
+ *
+ * @see https://m3.material.io/foundations/animation/easing-and-duration
+ */
+export declare const MD3_STANDARD_EASING: [number, number, number, number];
+/**
+ * Duration for floating label transition: 150ms.
+ * Used when label moves between inline position ↔ floated position.
+ */
+export declare const MD3_LABEL_FLOAT_DURATION = 0.15;
+/**
+ * Duration for active indicator expand/collapse: 200ms.
+ * Used for the bottom border (filled) and outline (outlined) on focus.
+ */
+export declare const MD3_INDICATOR_DURATION = 0.2;
+/**
+ * Duration for supporting text / error text appear/disappear: 120ms.
+ */
+export declare const MD3_SUPPORTING_DURATION = 0.12;
+/**
+ * Duration for trailing icon appear/disappear (clear button, password toggle): 100ms.
+ */
+export declare const MD3_ICON_SWAP_DURATION = 0.1;

package/dist/ui/shared/touch-target.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @file shared/touch-target.tsx
+ *
+ * Invisible 48×48dp touch-target expander for small interactive elements.
+ *
+ * WCAG 2.5.5 (Level AA) requires interactive targets to be at least 44×44 CSS pixels.
+ * MD3 specifies a minimum 48dp touch target for all interactive components.
+ * For button sizes XS (32dp) and SM (40dp) that are smaller than this minimum,
+ * an invisible absolutely-positioned `<span>` is overlaid to extend the
+ * effective tap area without affecting visual layout.
+ *
+ * @see https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
+ * @see https://m3.material.io/foundations/accessible-design/accessibility-basics
+ */
+/**
+ * Invisible 48×48dp touch area expander — satisfies WCAG 2.5.5 + MD3 spec.
+ *
+ * Place as a direct child of any interactive element whose visual size is
+ * smaller than 48dp (e.g. `xs`/`sm` buttons and icon buttons).
+ * The parent element **must** have `position: relative`.
+ *
+ * @remarks
+ * - Hidden from assistive technologies via `aria-hidden="true"`.
+ * - `pointer-events: none` ensures it does not intercept click events.
+ * - Centred with `left: 50% / top: 50%` + negative translate for symmetry.
+ *
+ * @example
+ * ```tsx
+ * // Used inside a 32dp XS button:
+ * <button className="relative h-8 w-auto ...">
+ *   <TouchTarget />
+ *   Label
+ * </button>
+ * ```
+ *
+ * @see https://m3.material.io/components/buttons/specs (Touch target section)
+ */
+export declare function TouchTarget(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/snackbar/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file snackbar/index.ts
+ * Barrel re-export for the MD3 Expressive Snackbar component system.
+ */
+export type { SnackbarData, SnackbarDuration, SnackbarHostProps, SnackbarProps, SnackbarResult, SnackbarVisuals, UseSnackbarStateReturn, } from "./snackbar";
+export { Snackbar, SnackbarHost, SnackbarProvider, useSnackbar, useSnackbarState, } from "./snackbar";