@bug-on/md3-react 2.0.3 → 3.0.0

package/dist/ui/search/search-view-fullscreen.d.ts

@@ -1,36 +0,0 @@
-/**
- * @file search-view-fullscreen.tsx
- * MD3 Expressive SearchView — FullScreen variant.
- *
- * Renders a full-screen overlay via React Portal.
- * Using Portal avoids z-index stacking context issues and ensures
- * the overlay always covers the entire viewport correctly.
- *
- * Animation (Option B — MD3 morphing):
- * - Shares `layoutId` with SearchBar. After SearchBar exits via its own
- *   AnimatePresence (mode="popLayout"), this view claims the layoutId and
- *   Framer Motion morphs the pill shape → full-screen rect (CornerFull → CornerNone).
- * - mode="popLayout" on this AnimatePresence enables SearchBar to re-enter
- *   after this view exits.
- * - Focus: double-rAF pattern syncs focus with layout animation frame.
- *
- * Header height: 72dp per SearchViewTokens.FullScreenHeaderContainerHeight.
- * ESC key closes the view (handled by useSearchKeyboard).
- */
-import * as React from "react";
-import type { SearchInternalProps, SearchProps } from "./search.types";
-type SearchViewFullScreenProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "styleType" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
-    onKeyDown: (e: React.KeyboardEvent) => void;
-    activeIndex: number;
-};
-/**
- * SearchView FullScreen — full-screen overlay via React Portal.
- *
- * The `layoutId` shared with SearchBar enables Framer Motion to animate
- * the shape morphing from the pill (rounded-full) to a full-screen rect.
- *
- * Contained style: no divider, background preserved.
- * Divided style: HorizontalDivider between header and results.
- */
-export declare function SearchViewFullScreen({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, styleType, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewFullScreenProps): React.ReactPortal | null;
-export {};

package/dist/ui/search/search.d.ts

@@ -1,50 +0,0 @@
-/**
- * @file search.tsx
- * MD3 Expressive Search — Orchestrator component.
- *
- * Composes SearchBar (collapsed) + SearchView (expanded) into a single
- * developer-facing API. Routes to the correct SearchView variant based on props.
- *
- * Developer usage:
- * ```tsx
- * const [query, setQuery] = useState("");
- * const [active, setActive] = useState(false);
- *
- * <Search
- *   query={query}
- *   onQueryChange={setQuery}
- *   onSearch={(q) => doSearch(q)}
- *   active={active}
- *   onActiveChange={setActive}
- *   variant="docked"
- *   styleType="contained"
- * >
- *   {results.map((r) => (
- *     <div key={r.id} id={`${YOUR_LISTBOX_ID}-option-0`} role="option">
- *       {r.label}
- *     </div>
- *   ))}
- * </Search>
- * ```
- */
-import type { SearchProps } from "./search.types";
-import { useSearch } from "./search-context";
-/**
- * MD3 Expressive Search — Orchestrator component.
- *
- * Renders a SearchBar (collapsed pill) and the appropriate SearchView
- * (docked popup or fullscreen overlay) based on `variant`.
- *
- * The component is fully controlled:
- * - `active` / `onActiveChange` manage open/close state.
- * - `query` / `onQueryChange` manage input value.
- *
- * Shared `searchId` (React.useId) links SearchBar and SearchView via
- * Framer Motion `layoutId` for seamless animated transitions.
- */
-declare function SearchComponent({ query, onQueryChange, onSearch, active, onActiveChange, variant, styleType, hasGap, leadingIcon, trailingIcon, placeholder, textAlign, children, id, "aria-label": ariaLabel, className, viewClassName, }: SearchProps): import("react/jsx-runtime").JSX.Element;
-/** MD3 Expressive Search component with `Search.useSearch` context accessor. */
-export declare const Search: typeof SearchComponent & {
-    useSearch: typeof useSearch;
-};
-export {};

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

@@ -1,112 +0,0 @@
-/**
- * @file search.tokens.ts
- * MD3 Expressive Search — Design tokens ported from:
- *   - SearchBarTokens.kt (v0_210)
- *   - SearchViewTokens.kt (v0_210)
- *
- * All dimensional values are in px (1dp = 1px on web).
- * Colors reference CSS custom properties — do NOT hardcode hex.
- * @see docs/m3/search/SearchBarTokens.kt
- * @see docs/m3/search/SearchViewTokens.kt
- */
-/**
- * Height and shape tokens for Search variants.
- * Maps directly from MD3 Kotlin token files.
- */
-export declare const SearchTokens: {
-    readonly heights: {
-        /** SearchBarTokens.ContainerHeight = 56dp */
-        readonly bar: 56;
-        /** SearchViewTokens.DockedHeaderContainerHeight = 56dp */
-        readonly dockedHeader: 56;
-        /** SearchViewTokens.FullScreenHeaderContainerHeight = 72dp */
-        readonly fullScreenHeader: 72;
-    };
-    /** SearchBarTokens.AvatarSize = 30dp */
-    readonly avatarSize: 30;
-    /** Standard icon size for leading/trailing icons. */
-    readonly iconSize: 20;
-    /** Touch target for interactive icons per MD3 a11y spec. */
-    readonly iconTouchTarget: 48;
-    /** Gap between SearchBar and results list when hasGap=true. */
-    readonly dropdownGap: 2;
-};
-/**
- * CSS custom property references for Search colors.
- * Maps to --md-sys-color-* tokens in the MD3 theme system.
- *
- * SearchBarTokens.kt:
- * - ContainerColor → SurfaceContainerHigh
- * - LeadingIconColor → OnSurface
- * - TrailingIconColor → OnSurfaceVariant
- * - InputTextColor → OnSurface
- * - SupportingTextColor → OnSurfaceVariant (placeholder)
- *
- * SearchViewTokens.kt:
- * - ContainerColor → SurfaceContainerHigh
- * - DividerColor → Outline
- */
-export declare const SEARCH_COLORS: {
-    /** SearchBarTokens.ContainerColor → surface-container-high */
-    readonly container: "var(--md-sys-color-surface-container-high)";
-    /** SearchBarTokens.LeadingIconColor → on-surface */
-    readonly leadingIcon: "var(--md-sys-color-on-surface)";
-    /** SearchBarTokens.TrailingIconColor → on-surface-variant */
-    readonly trailingIcon: "var(--md-sys-color-on-surface-variant)";
-    /** SearchBarTokens.InputTextColor → on-surface */
-    readonly inputText: "var(--md-sys-color-on-surface)";
-    /** SearchBarTokens.SupportingTextColor → on-surface-variant (placeholder) */
-    readonly supportingText: "var(--md-sys-color-on-surface-variant)";
-    /** SearchViewTokens.DividerColor → outline */
-    readonly divider: "var(--md-sys-color-outline)";
-    /** Focus indicator → secondary */
-    readonly focusIndicator: "var(--md-sys-color-secondary)";
-};
-/**
- * SearchBarTokens.InputTextFont = BodyLarge (16sp / 24sp line-height).
- * SearchBarTokens.SupportingTextFont = BodyLarge.
- */
-export declare const SEARCH_TYPOGRAPHY: {
-    /** BodyLarge — used for input text and placeholder. */
-    readonly bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]";
-};
-/**
- * Spring animation for SearchBar width expand (inactive → active).
- * Matches MD3 FastSpatial motion scheme.
- */
-export declare const SEARCH_BAR_EXPAND_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};
-/**
- * Spring animation for Docked SearchView dropdown reveal (slide + fade).
- * Offset Y: -8px on enter, opacity 0→1.
- */
-export declare const SEARCH_DOCKED_REVEAL_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};
-/**
- * Spring animation for FullScreen SearchView shape morphing.
- * Lower stiffness + mass gives a smoother pill→fullscreen morph.
- */
-export declare const SEARCH_FULLSCREEN_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};
-/**
- * Exit transition for SearchBar when mode="popLayout" is used.
- * Fast fade-out so SearchView can claim the layoutId quickly.
- */
-export declare const SEARCH_BAR_EXIT_SPRING: {
-    type: "spring";
-    stiffness: number;
-    damping: number;
-    mass: number;
-};

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

@@ -1,131 +0,0 @@
-/**
- * @file search.types.ts
- * MD3 Expressive Search — TypeScript prop definitions.
- * Spec: https://m3.material.io/components/search/overview
- * Reference: docs/m3/search/SearchBar.kt (MD3 Expressive)
- */
-import type * as React from "react";
-/**
- * Display variant for the expanded SearchView.
- *
- * - `docked`: Popup dropdown below the SearchBar. For medium/large screens.
- * - `fullscreen`: Full-screen dialog overlay. For compact/mobile screens.
- */
-export type SearchVariant = "docked" | "fullscreen";
-/**
- * Visual style type for the SearchView.
- *
- * - `contained`: No divider between the input area and results.
- *   The container background is preserved continuously (recommended).
- * - `divided`: A HorizontalDivider separates the input area from results.
- */
-export type SearchStyleType = "contained" | "divided";
-/**
- * Internal props shared between SearchBar and SearchView sub-components.
- * Not part of the public API.
- * @internal
- */
-export interface SearchInternalProps {
-    /** Unique ID generated by useId(), used as Framer Motion layoutId. */
-    searchId: string;
-    /** Unique ID for the results listbox, used for aria-controls. */
-    listboxId: string;
-}
-/**
- * Props for the `<Search>` component (orchestrator).
- *
- * @example
- * ```tsx
- * const [query, setQuery] = useState("");
- * const [active, setActive] = useState(false);
- *
- * <Search
- *   query={query}
- *   onQueryChange={setQuery}
- *   onSearch={(q) => console.log("search:", q)}
- *   active={active}
- *   onActiveChange={setActive}
- *   variant="docked"
- *   styleType="contained"
- * >
- *   <SearchResultsList />
- * </Search>
- * ```
- */
-export interface SearchProps {
-    /** Current search query value (controlled). */
-    query: string;
-    /** Called when user types in the search input. */
-    onQueryChange: (query: string) => void;
-    /** Called when user submits search (Enter key or suggestion click). */
-    onSearch: (query: string) => void;
-    /** Whether the SearchView is expanded/open (controlled). */
-    active: boolean;
-    /** Called when the Search open/close state should change. */
-    onActiveChange: (active: boolean) => void;
-    /**
-     * Display variant for the expanded state.
-     * @default "docked"
-     */
-    variant?: SearchVariant;
-    /**
-     * Visual style for the SearchView container.
-     * @default "contained"
-     */
-    styleType?: SearchStyleType;
-    /**
-     * Whether to add a 2dp gap between the input header and the results list.
-     * Only applies when `variant="docked"`.
-     * @default false
-     */
-    hasGap?: boolean;
-    /**
-     * Icon rendered at the leading edge of the search input.
-     * Defaults to a built-in search icon.
-     */
-    leadingIcon?: React.ReactNode;
-    /**
-     * Icon or action rendered at the trailing edge of the search input.
-     * Common examples: mic, camera, QR code.
-     */
-    trailingIcon?: React.ReactNode;
-    /** Placeholder text shown when the input is empty. @default "Search" */
-    placeholder?: string;
-    /**
-     * Align the placeholder text to left, center, or right.
-     * Typed text will always remain left-aligned.
-     * @default "left"
-     */
-    textAlign?: "left" | "center" | "right";
-    /**
-     * Search results or suggestions rendered inside the SearchView.
-     * Use `role="option"` on each item for accessibility.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override the auto-generated input element ID.
-     * Auto-generated via React.useId() if not provided.
-     */
-    id?: string;
-    /**
-     * Accessible label for the search landmark.
-     * @default "Search"
-     */
-    "aria-label"?: string;
-    /** Additional CSS classes for the SearchBar root element. */
-    className?: string;
-    /** Additional CSS classes for the SearchView container. */
-    viewClassName?: string;
-}
-/**
- * Return type for `useSearchKeyboard`.
- * @internal
- */
-export interface UseSearchKeyboardReturn {
-    /** Currently highlighted suggestion index. -1 = none. */
-    activeIndex: number;
-    /** KeyDown handler — attach to the search input. */
-    handleKeyDown: (e: React.KeyboardEvent) => void;
-    /** Reset activeIndex (e.g., when query changes). */
-    resetActiveIndex: () => void;
-}

package/dist/ui/search/trailing-action.d.ts

@@ -1,9 +0,0 @@
-import type * as React from "react";
-interface TrailingActionProps {
-    query: string;
-    trailingIcon?: React.ReactNode;
-    onClear: () => void;
-}
-/** Clear button when query is non-empty, otherwise the trailing icon slot. */
-export declare function TrailingAction({ query, trailingIcon, onClear, }: TrailingActionProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

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;

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[];
-}>;