@bug-on/md3-react 2.0.2 → 3.0.0

package/dist/ui/slider/range-slider.d.ts

@@ -1,47 +0,0 @@
-/**
- * @file range-slider.tsx
- * MD3 Expressive RangeSlider — Two-thumb slider with crossover prevention.
- *
- * Extends the core Slider architecture with:
- * - Two SliderThumb instances (start + end)
- * - Crossover prevention: start cannot exceed end and vice versa
- * - Z-index management: last-dragged thumb always on top
- * - Active track spans from startPercent to endPercent
- *
- * Design decisions:
- * - The track renders a custom "range" segment between the two thumbs.
- * - Each thumb has independent onValueChange callbacks + crossover clamping.
- * - Last-active thumb gets zIndex=2 to appear on top when thumbs are at same position.
- *
- * @see https://m3.material.io/components/sliders/overview
- * @see docs/m3/sliders/Slider.kt#RangeSlider
- */
-import * as React from "react";
-import type { RangeSliderProps } from "./slider.types";
-/**
- * MD3 Expressive RangeSlider component.
- *
- * Two-thumb slider where the active track spans between the two thumbs.
- * Thumbs cannot cross each other (crossover prevention built in).
- *
- * @example
- * ```tsx
- * // Controlled
- * <RangeSlider
- *   value={[20, 80]}
- *   onValueChange={([start, end]) => setRange([start, end])}
- *   aria-label="Price range"
- * />
- *
- * // Discrete
- * <RangeSlider defaultValue={[0, 100]} step={10} />
- *
- * // Vertical
- * <div className="h-64">
- *   <RangeSlider defaultValue={[25, 75]} orientation="vertical" />
- * </div>
- * ```
- *
- * @see https://m3.material.io/components/sliders/overview
- */
-export declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/slider/slider-thumb.d.ts

@@ -1,33 +0,0 @@
-/**
- * @file slider-thumb.tsx
- * MD3 Expressive Slider — Animated pill-shaped thumb (handle).
- *
- * Design decisions:
- * 1. POINTER EVENTS (not Framer Motion drag): We use React pointer events
- *    + useMotionValue for real-time position tracking without re-render lag.
- *    Framer Motion's `drag` prop adds momentum/inertia that conflicts with MD3
- *    precise positioning; direct pointer handling gives us full control.
- * 2. SQUEEZE ANIMATION: `whileTap` shrinks width from 4px → 2px via spring.
- * 3. INVERTED Y-AXIS: Vertical slider maps bottom=min, top=max by inverting
- *    the pointer delta direction.
- * 4. VALUE INDICATOR: AnimatePresence pill tooltip with teardrop origin point.
- * 5. ACCESSIBILITY: role=slider, full ARIA attributes, keyboard nav.
- * 6. prefers-reduced-motion: Disables all animations for accessibility.
- *
- * @see docs/m3/sliders/Slider.kt#SliderDefaults.Thumb
- */
-import * as React from "react";
-import type { SliderThumbProps } from "./slider.types";
-/**
- * MD3 Expressive Slider Thumb (handle).
- *
- * - Pill shape: 4px wide × 44px tall by default.
- * - Squeezes to 2px wide on press/drag (Framer Motion spring).
- * - Floats above track via absolute positioning at `percent` along the track.
- * - Handles pointer drag via React PointerEvents + useMotionValue.
- * - Full keyboard navigation per WAI-ARIA Slider pattern.
- * - Value indicator tooltip with AnimatePresence.
- *
- * @internal — consumed by `<Slider>` and `<RangeSlider>`
- */
-export declare const SliderThumb: React.NamedExoticComponent<SliderThumbProps>;

package/dist/ui/slider/slider-track.d.ts

@@ -1,25 +0,0 @@
-/**
- * @file slider-track.tsx
- * MD3 Expressive Slider — Track with asymmetric corner radii, 6px thumb gaps,
- * discrete tick marks, and centered-mode support.
- *
- * Design decisions:
- * 1. GAP MATH: The 6px gap between track and thumb is calculated mathematically
- *    using CSS calc() — NOT using margin/padding which would break layout.
- * 2. ASYMMETRIC RADII: Inner corners (facing thumb) = 2px; outer ends = size/2 (pill cap).
- * 3. CENTERED MODE: Active segment spans from 50% outward to thumb, not from min.
- * 4. TICKS: 4×4px dots positioned absolutely along track center axis.
- *    Color differs on active vs inactive portions of the track.
- * 5. VERTICAL: Uses height/top instead of width/left, with inverted axis
- *    (bottom=0%, top=100%) per MD3 vertical spec.
- *
- * @see docs/m3/sliders/Slider.kt#SliderDefaults.Track
- */
-import * as React from "react";
-import type { SliderTrackProps } from "./slider.types";
-/**
- * MD3 Expressive Slider Track.
- */
-export declare const SliderTrack: React.NamedExoticComponent<Omit<SliderTrackProps, "step"> & {
-    ticks?: number[];
-}>;

package/dist/ui/slider/slider.d.ts

@@ -1,60 +0,0 @@
-/**
- * @file slider.tsx
- * MD3 Expressive Slider — Main composition component.
- *
- * Supports:
- * - Controlled and uncontrolled usage patterns
- * - Horizontal and vertical orientations
- * - Discrete mode (step snapping + tick marks)
- * - Centered active track (isCentered)
- * - Value indicator tooltip
- * - Full keyboard navigation (ARIA Slider pattern)
- * - Click-to-jump on track
- *
- * Architecture: Flat (no Context needed for single thumb variant).
- * Track + Thumb are internal sub-components composed here.
- *
- * @see https://m3.material.io/components/sliders/overview
- * @see docs/m3/sliders/Slider.kt
- */
-import * as React from "react";
-import type { SliderProps } from "./slider.types";
-/**
- * MD3 Expressive Slider component.
- *
- * A pill-shaped vertical handle that slides along a rounded track.
- * Supports continuous and discrete (step) modes, horizontal/vertical
- * orientations, and centered active track.
- *
- * Features:
- * - M3 Expressive handle: 4px pill that squeezes to 2px on press
- * - 6px transparent gap between track and thumb
- * - Asymmetric corner radii: outer ends=9999px, inner ends=2px
- * - Tick marks for discrete mode
- * - Optional floating value indicator tooltip
- * - Full keyboard navigation per WAI-ARIA Slider pattern
- *
- * @example
- * ```tsx
- * // Basic controlled
- * <Slider value={volume} onValueChange={setVolume} aria-label="Volume" />
- *
- * // Discrete with ticks
- * <Slider defaultValue={0} step={10} min={0} max={100} />
- *
- * // Vertical orientation
- * <div className="h-64">
- *   <Slider defaultValue={50} orientation="vertical" aria-label="Brightness" />
- * </div>
- *
- * // Centered active track
- * <Slider defaultValue={0} isCentered showValueIndicator />
- *
- * // Large track with value tooltip
- * <Slider defaultValue={50} trackSize="l" showValueIndicator
- *   formatValue={(v) => `${v}%`} />
- * ```
- *
- * @see https://m3.material.io/components/sliders/overview
- */
-export declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/slider/slider.tokens.d.ts

@@ -1,151 +0,0 @@
-/**
- * @file slider.tokens.ts
- * MD3 Expressive Slider — Design tokens ported from:
- *   - SliderTokens.kt (Jetpack Compose M3 Expressive)
- *   - M3 Expressive visual spec (handle squeeze, gaps, asymmetric radii)
- *
- * All dimensional values are in px (dp equivalents for web).
- * Colors reference CSS custom properties — do NOT hardcode hex.
- * @see docs/m3/sliders/Slider.kt
- */
-/**
- * Core dimensional design tokens for the MD3 Expressive Slider.
- * Maps directly from SliderTokens.kt to CSS/JS values.
- */
-export declare const SliderTokens: {
-    readonly trackSizes: {
-        xs: number;
-        s: number;
-        m: number;
-        l: number;
-        xl: number;
-    };
-    readonly trackShapes: {
-        xs: number;
-        s: number;
-        m: number;
-        l: number;
-        xl: number;
-    };
-    /** Thumb height grows with track size */
-    readonly thumbHeights: {
-        xs: number;
-        s: number;
-        m: number;
-        l: number;
-        xl: number;
-    };
-    /**
-     * Thumb width at rest and on hover.
-     * MD3 Expressive handle pill: 4dp wide.
-     */
-    readonly thumbWidthDefault: 4;
-    /**
-     * Thumb width while pressed/dragging.
-     * "Squeeze" animation: 4dp → 2dp (M3 Expressive behavior).
-     */
-    readonly thumbWidthPressed: 2;
-    /**
-     * Transparent gap between the active/inactive track segments and the thumb.
-     * Maps to ActiveHandleLeadingSpace / ActiveHandleTrailingSpace = 6dp.
-     *
-     * This gap is rendered by mathematically subtracting it from the track
-     * segment width — NOT using margin/padding.
-     */
-    readonly thumbGap: 6;
-    /**
-     * Corner radius on the INNER ends of each track segment (facing the thumb).
-     * Fixed to 2px according to MD3 Expressive Slider specs (TrackInsideCornerSize).
-     * Outer ends use `trackSize / 2` (pill cap) — computed inline per component.
-     */
-    readonly trackInnerRadius: 2;
-    /** Tick dot size (width and height). = 4dp. */
-    readonly tickSize: 4;
-    /**
-     * Minimum touch target for the thumb wrapper.
-     * MD3 requires 48dp minimum touch target for interactive elements.
-     */
-    readonly thumbTouchTarget: 48;
-    /** Offset above the thumb center for the value indicator tooltip. */
-    readonly valueIndicatorOffset: 52;
-    /** Standard icon size map for inset icons inside the track. */
-    readonly insetIconSizes: {
-        xs: number;
-        s: number;
-        m: number;
-        l: number;
-        xl: number;
-    };
-    /**
-     * Padding between icon and track edge (horizontal).
-     * Keeps the icon visually centered within the pill track.
-     */
-    readonly insetIconPadding: 4;
-};
-/**
- * CSS custom property references for Slider colors.
- * Maps to --md-sys-color-* tokens in the MD3 theme system.
- *
- * DO NOT hardcode hex/rgba values — these references automatically
- * adapt to light/dark theme.
- */
-export declare const SliderColors: {
-    /** Active track color. Maps to ActiveTrackColor token. */
-    readonly activeTrack: "var(--md-sys-color-primary)";
-    /** Inactive track color. Maps to InactiveTrackColor token. */
-    readonly inactiveTrack: "var(--md-sys-color-secondary-container)";
-    /**
-     * Disabled track color.
-     * Uses opacity + on-surface per MD3 disabled state spec.
-     */
-    readonly disabledActiveTrack: "var(--md-sys-color-on-surface)";
-    readonly disabledInactiveTrack: "var(--md-sys-color-on-surface)";
-    /** Thumb (handle) color. Maps to HandleColor token. */
-    readonly thumb: "var(--md-sys-color-primary)";
-    /** Disabled thumb color. */
-    readonly disabledThumb: "var(--md-sys-color-on-surface)";
-    /** Value indicator (tooltip) background. Maps to InverseSurface. */
-    readonly valueIndicatorBg: "var(--md-sys-color-inverse-surface)";
-    /** Value indicator (tooltip) text. Maps to InverseOnSurface. */
-    readonly valueIndicatorText: "var(--md-sys-color-inverse-on-surface)";
-    /**
-     * Tick on the INACTIVE portion of the track.
-     * Maps to TickMarkActiveContainerColor (in spec: primary color stands out).
-     */
-    readonly tickOnInactive: "var(--md-sys-color-primary)";
-    /**
-     * Tick on the ACTIVE portion of the track.
-     * Maps to TickMarkInactiveContainerColor (secondary-container blends in).
-     */
-    readonly tickOnActive: "var(--md-sys-color-secondary-container)";
-    readonly disabledTick: "var(--md-sys-color-on-surface)";
-};
-/**
- * FastSpatial spring for thumb width squeeze animation.
- * Equivalent to MotionSchemeKeyTokens.FastSpatial in Compose.
- */
-export declare const SLIDER_THUMB_SPRING: {
-    readonly type: "spring";
-    readonly stiffness: 500;
-    readonly damping: 40;
-};
-/**
- * DefaultSpatial spring for thumb position/track updates.
- * Slightly looser feel for position changes.
- */
-export declare const SLIDER_POSITION_SPRING: {
-    readonly type: "spring";
-    readonly stiffness: 400;
-    readonly damping: 38;
-};
-/** Color crossfade for active/inactive track color transitions. */
-export declare const SLIDER_COLOR_TRANSITION: {
-    readonly duration: 0.18;
-    readonly ease: "easeInOut";
-};
-/** Value indicator appear/disappear animation. */
-export declare const SLIDER_INDICATOR_TRANSITION: {
-    readonly type: "spring";
-    readonly stiffness: 450;
-    readonly damping: 32;
-};

package/dist/ui/slider/slider.types.d.ts

@@ -1,259 +0,0 @@
-/**
- * @file slider.types.ts
- * MD3 Expressive Slider — TypeScript prop definitions.
- * Spec: https://m3.material.io/components/sliders/overview
- * Reference: docs/m3/sliders/Slider.kt
- */
-import type * as React from "react";
-/** Track size variants mapping to physical px values. */
-export type SliderTrackSize = "xs" | "s" | "m" | "l" | "xl";
-export type SliderVariant = "primary" | "secondary" | "tertiary" | "error";
-export type SliderTrackShape = "md3" | "full" | number;
-/** Slider layout direction. */
-export type SliderOrientation = "horizontal" | "vertical";
-/**
- * Internal context shared between Slider sub-components.
- * @internal
- */
-export interface SliderContextValue {
-    /** Minimum allowed value. */
-    min: number;
-    /** Maximum allowed value. */
-    max: number;
-    /**
-     * Step size. When > 0, slider is discrete and snaps to multiples of step.
-     * When 0, slider is continuous.
-     */
-    step: number;
-    /** Whether the slider is interactive. */
-    disabled: boolean;
-    /** Layout orientation. */
-    orientation: SliderOrientation;
-    /** Physical size of the track. */
-    trackSize: SliderTrackSize;
-    /** Color variant. */
-    variant: SliderVariant;
-    /**
-     * When true, active track originates from center (50%) instead of the min end.
-     * Mirrors Compose's `SliderDefaults.Track(drawCenteredTrack = true)`.
-     */
-    isCentered: boolean;
-    /** Show the floating value tooltip on hover/drag. */
-    showValueIndicator: boolean;
-    /** Ref to the track DOM element — used for drag constraint. */
-    trackRef: React.RefObject<HTMLDivElement | null>;
-}
-/**
- * Props for the `<Slider>` component.
- *
- * Supports both controlled (`value` + `onValueChange`) and
- * uncontrolled (`defaultValue`) usage patterns per React standards.
- *
- * @example
- * ```tsx
- * // Controlled
- * <Slider value={volume} onValueChange={setVolume} min={0} max={100} />
- *
- * // Uncontrolled
- * <Slider defaultValue={50} />
- *
- * // Discrete (step snapping)
- * <Slider defaultValue={0} step={10} />
- *
- * // Vertical orientation
- * <Slider defaultValue={50} orientation="vertical" />
- *
- * // Centered active track
- * <Slider defaultValue={0} isCentered />
- * ```
- */
-export interface SliderProps {
-    /** Controlled current value. Use with `onValueChange`. */
-    value?: number;
-    /** Initial value for uncontrolled usage. @default midpoint of min/max */
-    defaultValue?: number;
-    /** Called whenever the value changes during interaction. */
-    onValueChange?: (value: number) => void;
-    /** Called when the user finishes dragging / commits a keyboard change. */
-    onValueChangeEnd?: (value: number) => void;
-    /** Minimum value. @default 0 */
-    min?: number;
-    /** Maximum value. @default 100 */
-    max?: number;
-    /**
-     * Step size. When > 0, slider snaps to multiples of `step` from `min`
-     * and renders tick marks. When 0, slider is continuous.
-     * @default 0
-     */
-    step?: number;
-    /** Layout orientation. @default "horizontal" */
-    orientation?: SliderOrientation;
-    /**
-     * Physical track size.
-     * Horizontal: height. Vertical: width.
-     * @default "m"
-     */
-    trackSize?: SliderTrackSize;
-    /**
-     * Color variant.
-     * @default "primary"
-     */
-    variant?: SliderVariant;
-    /**
-     * When true, the active track segment grows from the center (50%)
-     * outward toward the thumb position.
-     * @default false
-     */
-    isCentered?: boolean;
-    /** Disables all interaction. @default false */
-    disabled?: boolean;
-    /**
-     * When true, shows a floating value indicator tooltip above the thumb.
-     * @default false
-     */
-    showValueIndicator?: boolean;
-    /**
-     * When true, shows tick marks along the track.
-     * Only applicable if `step` > 0.
-     * @default false
-     */
-    showTicks?: boolean;
-    /**
-     * Track shape configuration for border radius.
-     * - "md3": Default MD3 specific border radius per size
-     * - "full": Fully rounded ends (pill shape - size/2)
-     * - number: Custom border radius in px
-     * @default "md3"
-     */
-    trackShape?: SliderTrackShape;
-    /**
-     * Icon rendered inside the track (inset icon).
-     * MD3 spec: only valid for M, L, XL track sizes.
-     * The icon moves from the active track to the inactive track
-     * when there's not enough space at low values.
-     * Do not use with `isCentered` or `RangeSlider`.
-     */
-    insetIcon?: React.ReactNode;
-    /**
-     * Alternate icon shown when value equals `min`.
-     * Swaps with `insetIcon` at the minimum value
-     * (e.g., a mute icon replacing a volume icon when volume = 0).
-     */
-    insetIconAtMin?: React.ReactNode;
-    /**
-     * Icon rendered inside the track at the trailing end (right side).
-     * Only valid for track sizes >= 40dp (e.g. XL).
-     */
-    insetIconTrailing?: React.ReactNode;
-    /**
-     * Alternate icon shown when value equals `max`.
-     * Swaps with `insetIconTrailing` at the maximum value.
-     */
-    insetIconAtMax?: React.ReactNode;
-    /** Additional CSS class applied to the outermost wrapper. */
-    className?: string;
-    /**
-     * Accessible label for the slider when no visible label exists.
-     * Required if parent does not have a visible label.
-     */
-    "aria-label"?: string;
-    /** ID of a visible label element. Required if `aria-label` is not provided. */
-    "aria-labelledby"?: string;
-    /**
-     * Format function for the displayed value in the value indicator tooltip.
-     * Defaults to `String(value)`.
-     */
-    formatValue?: (value: number) => string;
-}
-/**
- * Props for the `<RangeSlider>` component.
- *
- * Extends `SliderProps` with tuple-based value API.
- * The two thumbs cannot cross each other.
- *
- * @example
- * ```tsx
- * <RangeSlider
- *   value={[20, 80]}
- *   onValueChange={([start, end]) => setRange([start, end])}
- * />
- * ```
- */
-export interface RangeSliderProps extends Omit<SliderProps, "value" | "defaultValue" | "onValueChange" | "onValueChangeEnd" | "isCentered"> {
-    /** Controlled [start, end] tuple. Use with `onValueChange`. */
-    value?: [number, number];
-    /** Initial [start, end] tuple for uncontrolled usage. */
-    defaultValue?: [number, number];
-    /** Called whenever [start, end] changes during interaction. */
-    onValueChange?: (value: [number, number]) => void;
-    /** Called when the user finishes dragging either thumb. */
-    onValueChangeEnd?: (value: [number, number]) => void;
-}
-/**
- * Props for `<SliderTrack>`.
- * @internal
- */
-export interface SliderTrackProps {
-    /** Current thumb position as 0–1 fraction. */
-    percent: number;
-    trackSize: SliderTrackSize;
-    orientation: SliderOrientation;
-    variant: SliderVariant;
-    isCentered: boolean;
-    /** For discrete mode: step size. 0 = no ticks. */
-    step: number;
-    min: number;
-    max: number;
-    disabled: boolean;
-    trackShape?: SliderTrackShape;
-    /** Ref forwarded to the root track element for drag constraint. */
-    trackRef: React.RefObject<HTMLDivElement | null>;
-    /** onClick handler on the track for click-to-jump. */
-    onTrackPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void;
-    /**
-     * Icon rendered inside the track (inset icon).
-     * @internal — passed down from Slider after guard check.
-     */
-    insetIcon?: React.ReactNode;
-    /** Alternate icon swapped in when value === min. @internal */
-    insetIconAtMin?: React.ReactNode;
-    /** Icon rendered at the trailing end (right side). @internal */
-    insetIconTrailing?: React.ReactNode;
-    /** Alternate icon swapped in when value === max. @internal */
-    insetIconAtMax?: React.ReactNode;
-    /** Current slider value — used for inset icon swap at min/max. @internal */
-    value?: number;
-}
-/**
- * Props for `<SliderThumb>`.
- * @internal
- */
-export interface SliderThumbProps {
-    /** Current value (for ARIA). */
-    value: number;
-    /** Current 0–1 fraction (for positioning). */
-    percent: number;
-    min: number;
-    max: number;
-    step: number;
-    disabled: boolean;
-    orientation: SliderOrientation;
-    showValueIndicator: boolean;
-    /** For the drag constraint ref. */
-    trackRef: React.RefObject<HTMLDivElement | null>;
-    trackSize: SliderTrackSize;
-    variant: SliderVariant;
-    /** Called during pointer drag with new value. */
-    onValueChange: (value: number) => void;
-    /** Called on drag end / keyboard commit. */
-    onValueChangeEnd?: (value: number) => void;
-    /** Value display formatter. */
-    formatValue?: (value: number) => string;
-    /** Unique ID for ARIA. */
-    thumbId?: string;
-    /** zIndex for RangeSlider layering. */
-    zIndex?: number;
-    /** Optional accessible label for this specific thumb. */
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-}

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

@@ -1,6 +0,0 @@
-/**
- * @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";