@bug-on/md3-react 2.0.2 → 3.0.0

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

@@ -1,10 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,106 +0,0 @@
-/**
- * @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

@@ -1,126 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,86 +0,0 @@
-/**
- * @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/slider/hooks/useSliderMath.d.ts

@@ -1,101 +0,0 @@
-/**
- * @file useSliderMath.ts
- * MD3 Expressive Slider — Math utility hook.
- *
- * Handles all slider math in one place:
- * - value coercion to [min, max]
- * - step snapping for discrete mode
- * - value ↔ percent conversion
- * - keyboard delta calculation
- * - tick position generation
- *
- * Exported as a pure hook for testability and reuse in both Slider and RangeSlider.
- */
-/**
- * Clamps `value` to the closed interval `[min, max]`.
- *
- * @example coerceValue(150, 0, 100) → 100
- */
-export declare function coerceValue(value: number, min: number, max: number): number;
-/**
- * Rounds `value` to the nearest multiple of `step` relative to `min`.
- * When `step === 0`, returns `value` unchanged (continuous mode).
- *
- * @example snapToStep(23, 0, 10) → 20
- * @example snapToStep(27, 0, 10) → 30
- */
-export declare function snapToStep(value: number, min: number, step: number): number;
-/**
- * Converts a raw value to a 0–1 fraction of the [min, max] range.
- * Returns 0 when max === min (degenerate range).
- *
- * @example valueToPercent(50, 0, 100) → 0.5
- */
-export declare function valueToPercent(value: number, min: number, max: number): number;
-/**
- * Converts a 0–1 fraction to a value within [min, max], then snaps to step.
- * The result is also coerced to [min, max].
- *
- * @example percentToValue(0.5, 0, 100, 10) → 50
- * @example percentToValue(0.23, 0, 100, 10) → 20
- */
-export declare function percentToValue(percent: number, min: number, max: number, step: number): number;
-/**
- * Computes the keyboard increment for a given key.
- *
- * Key mappings per WAI-ARIA Slider pattern:
- * - ArrowRight/Up → +step (or +1% of range if continuous)
- * - ArrowLeft/Down → -step (or -1% of range)
- * - PageUp → +10% of range (snapped to step)
- * - PageDown → -10% of range (snapped to step)
- * - Home / End → handled by the caller (jump to min/max)
- *
- * @returns the signed delta to add to current value, or `null` for Home/End.
- */
-export declare function getKeyboardDelta(key: string, step: number, min: number, max: number): number | null;
-/**
- * Generates the list of value positions for tick marks.
- * Returns an empty array when `step === 0` (continuous mode).
- *
- * @example generateTicks(0, 100, 10) → [0, 10, 20, ..., 100]
- */
-export declare function generateTicks(min: number, max: number, step: number): number[];
-export interface UseSliderMathOptions {
-    min: number;
-    max: number;
-    step: number;
-}
-export interface UseSliderMathReturn {
-    /** Clamp value to [min, max]. */
-    coerce: (v: number) => number;
-    /** Snap value to nearest step (no-op if step=0). */
-    snap: (v: number) => number;
-    /** Value → percent [0, 1]. */
-    toPercent: (v: number) => number;
-    /** Percent [0, 1] → snapped value. */
-    fromPercent: (pct: number) => number;
-    /**
-     * Signed delta for a keyboard key.
-     * Returns `null` for Home/End (jump to min/max, handled by caller).
-     */
-    getKeyDelta: (key: string) => number | null;
-    /** Tick positions. Empty array in continuous mode. */
-    ticks: number[];
-}
-/**
- * Math utility hook for MD3 Slider components.
- *
- * Memoizes all math functions against `min`, `max`, `step` changes.
- * Use this in both `<Slider>` and `<RangeSlider>` to share logic.
- *
- * @example
- * ```ts
- * const { coerce, snap, toPercent, fromPercent, getKeyDelta, ticks } =
- *   useSliderMath({ min: 0, max: 100, step: 10 });
- *
- * const percent = toPercent(value);          // → 0.5 for value=50
- * const newValue = fromPercent(dragPercent); // → 50
- * const delta = getKeyDelta("ArrowRight");   // → 10
- * ```
- */
-export declare function useSliderMath({ min, max, step, }: UseSliderMathOptions): UseSliderMathReturn;