@base-ui/react 1.5.0 → 1.6.0

package/esm/slider/root/SliderRoot.d.ts

@@ -1,189 +0,0 @@
-import * as React from 'react';
-import type { BaseUIComponentProps, Orientation } from "../../internals/types.js";
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
-import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import { REASONS } from "../../internals/reasons.js";
-/**
- * Groups all parts of the slider.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
- */
-export declare const SliderRoot: {
-  <Value extends number | readonly number[]>(props: SliderRoot.Props<Value> & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-  }): React.JSX.Element;
-};
-export interface SliderRootState extends FieldRootState {
-  /**
-   * The index of the active thumb.
-   */
-  activeThumbIndex: number;
-  /**
-   * Whether the component should ignore user interaction.
-   */
-  disabled: boolean;
-  /**
-   * Whether the thumb is currently being dragged.
-   */
-  dragging: boolean;
-  /**
-   * The maximum value.
-   */
-  max: number;
-  /**
-   * The minimum value.
-   */
-  min: number;
-  /**
-   * The minimum steps between values in a range slider.
-   * @default 0
-   */
-  minStepsBetweenValues: number;
-  /**
-   * The component orientation.
-   */
-  orientation: Orientation;
-  /**
-   * The step increment of the slider when incrementing or decrementing. It will snap
-   * to multiples of this value. Decimal values are supported.
-   * @default 1
-   */
-  step: number;
-  /**
-   * The raw number value of the slider.
-   */
-  values: readonly number[];
-}
-export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', SliderRootState> {
-  /**
-   * The uncontrolled value of the slider when it's initially rendered.
-   *
-   * To render a controlled slider, use the `value` prop instead.
-   */
-  defaultValue?: Value | undefined;
-  /**
-   * Whether the slider should ignore user interaction.
-   * @default false
-   */
-  disabled?: boolean | undefined;
-  /**
-   * Options to format the input value.
-   */
-  format?: Intl.NumberFormatOptions | undefined;
-  /**
-   * The locale used by `Intl.NumberFormat` when formatting the value.
-   * Defaults to the user's runtime locale.
-   */
-  locale?: Intl.LocalesArgument | undefined;
-  /**
-   * The maximum allowed value of the slider.
-   * Should not be equal to min.
-   * @default 100
-   */
-  max?: number | undefined;
-  /**
-   * The minimum allowed value of the slider.
-   * Should not be equal to max.
-   * @default 0
-   */
-  min?: number | undefined;
-  /**
-   * The minimum steps between values in a range slider.
-   * @default 0
-   */
-  minStepsBetweenValues?: number | undefined;
-  /**
-   * Identifies the field when a form is submitted.
-   */
-  name?: string | undefined;
-  /**
-   * Identifies the form that owns the slider inputs.
-   * Useful when the slider is rendered outside the form.
-   */
-  form?: string | undefined;
-  /**
-   * The component orientation.
-   * @default 'horizontal'
-   */
-  orientation?: Orientation | undefined;
-  /**
-   * The granularity with which the slider can step through values. (A "discrete" slider.)
-   * The `min` prop serves as the origin for the valid values.
-   * We recommend (max - min) to be evenly divisible by the step.
-   * @default 1
-   */
-  step?: number | undefined;
-  /**
-   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
-   * @default 10
-   */
-  largeStep?: number | undefined;
-  /**
-   * How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`:
-   * - `center`: The center of the thumb is aligned with the control edge
-   * - `edge`: The thumb is inset within the control such that its edge is aligned with the control edge
-   * - `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return
-   * @default 'center'
-   */
-  thumbAlignment?: 'center' | 'edge' | 'edge-client-only' | undefined;
-  /**
-   * Controls how thumbs behave when they collide during pointer interactions.
-   *
-   * - `'push'` (default): Thumbs push each other without restoring their previous positions when dragged back.
-   * - `'swap'`: Thumbs swap places when dragged past each other.
-   * - `'none'`: Thumbs cannot move past each other; excess movement is ignored.
-   *
-   * @default 'push'
-   */
-  thumbCollisionBehavior?: 'push' | 'swap' | 'none' | undefined;
-  /**
-   * The value of the slider.
-   * For ranged sliders, provide an array with two values.
-   */
-  value?: Value | undefined;
-  /**
-   * Callback function that is fired when the slider's value changed.
-   * You can pull out the new value by accessing `event.target.value` (any).
-   *
-   * The `eventDetails.reason` indicates what triggered the change:
-   *
-   * - `'input-change'` when the hidden range input emits a change event (for example, via form integration)
-   * - `'track-press'` when the control track is pressed
-   * - `'drag'` while dragging a thumb
-   * - `'keyboard'` for keyboard input
-   * - `'none'` when the change is triggered without a specific interaction
-   */
-  onValueChange?: ((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void) | undefined;
-  /**
-   * Callback function that is fired when the `pointerup` is triggered.
-   * **Warning**: This is a generic event not a change event.
-   *
-   * The `eventDetails.reason` indicates what triggered the commit:
-   *
-   * - `'drag'` while dragging a thumb
-   * - `'track-press'` when the control track is pressed
-   * - `'keyboard'` for keyboard input
-   * - `'input-change'` when the hidden range input emits a change event (for example, via form integration)
-   * - `'none'` when the commit occurs without a specific interaction
-   */
-  onValueCommitted?: ((value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void) | undefined;
-}
-export interface SliderRootChangeEventCustomProperties {
-  /**
-   * The index of the active thumb at the time of the change.
-   */
-  activeThumbIndex: number;
-}
-export type SliderRootChangeEventReason = typeof REASONS.inputChange | typeof REASONS.trackPress | typeof REASONS.drag | typeof REASONS.keyboard | typeof REASONS.none;
-export type SliderRootChangeEventDetails = BaseUIChangeEventDetails<SliderRoot.ChangeEventReason, SliderRootChangeEventCustomProperties>;
-export type SliderRootCommitEventReason = typeof REASONS.inputChange | typeof REASONS.trackPress | typeof REASONS.drag | typeof REASONS.keyboard | typeof REASONS.none;
-export type SliderRootCommitEventDetails = BaseUIGenericEventDetails<SliderRoot.CommitEventReason>;
-export declare namespace SliderRoot {
-  type State = SliderRootState;
-  type Props<Value extends number | readonly number[] = number | readonly number[]> = SliderRootProps<Value>;
-  type ChangeEventReason = SliderRootChangeEventReason;
-  type ChangeEventDetails = SliderRootChangeEventDetails;
-  type CommitEventReason = SliderRootCommitEventReason;
-  type CommitEventDetails = SliderRootCommitEventDetails;
-}

package/esm/slider/root/SliderRoot.js

@@ -1,300 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { useControlled } from '@base-ui/utils/useControlled';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { warn } from '@base-ui/utils/warn';
-import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
-import { useValueChanged } from "../../internals/useValueChanged.js";
-import { useBaseUiId } from "../../internals/useBaseUiId.js";
-import { useRenderElement } from "../../internals/useRenderElement.js";
-import { clamp } from "../../internals/clamp.js";
-import { areArraysEqual } from "../../internals/areArraysEqual.js";
-import { activeElement, contains } from "../../floating-ui-react/utils.js";
-import { CompositeList } from "../../internals/composite/list/CompositeList.js";
-import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
-import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
-import { useFormContext } from "../../internals/form-context/FormContext.js";
-import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
-import { resolveAriaLabelledBy, getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
-import { asc } from "../utils/asc.js";
-import { getSliderValue } from "../utils/getSliderValue.js";
-import { validateMinimumDistance } from "../utils/validateMinimumDistance.js";
-import { sliderStateAttributesMapping } from "./stateAttributesMapping.js";
-import { SliderRootContext } from "./SliderRootContext.js";
-import { REASONS } from "../../internals/reasons.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function getSliderChangeEventReason(event) {
-  return 'key' in event ? REASONS.keyboard : REASONS.inputChange;
-}
-function areValuesEqual(newValue, oldValue) {
-  if (typeof newValue === 'number' && typeof oldValue === 'number') {
-    return newValue === oldValue;
-  }
-  if (Array.isArray(newValue) && Array.isArray(oldValue)) {
-    return areArraysEqual(newValue, oldValue);
-  }
-  return false;
-}
-
-/**
- * Groups all parts of the slider.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
- */
-export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(componentProps, forwardedRef) {
-  const {
-    'aria-labelledby': ariaLabelledByProp,
-    className,
-    defaultValue,
-    disabled: disabledProp = false,
-    id: idProp,
-    format,
-    largeStep = 10,
-    locale,
-    render,
-    max = 100,
-    min = 0,
-    minStepsBetweenValues = 0,
-    form,
-    name: nameProp,
-    onValueChange: onValueChangeProp,
-    onValueCommitted: onValueCommittedProp,
-    orientation = 'horizontal',
-    step = 1,
-    thumbCollisionBehavior = 'push',
-    thumbAlignment = 'center',
-    value: valueProp,
-    style,
-    ...elementProps
-  } = componentProps;
-  const id = useBaseUiId(idProp);
-  const defaultLabelId = getDefaultLabelId(id);
-  const onValueChange = useStableCallback(onValueChangeProp);
-  const onValueCommitted = useStableCallback(onValueCommittedProp);
-  const {
-    clearErrors
-  } = useFormContext();
-  const {
-    state: fieldState,
-    disabled: fieldDisabled,
-    name: fieldName,
-    setTouched,
-    setDirty,
-    validityData,
-    shouldValidateOnChange,
-    validation
-  } = useFieldRootContext();
-  const {
-    labelId: fieldLabelId
-  } = useLabelableContext();
-  const [labelId, setLabelId] = React.useState();
-  const ariaLabelledby = ariaLabelledByProp ?? resolveAriaLabelledBy(fieldLabelId, labelId);
-  const disabled = fieldDisabled || disabledProp;
-  const name = fieldName ?? nameProp;
-
-  // The internal value is potentially unsorted, e.g. to support frozen arrays
-  // https://github.com/mui/material-ui/pull/28472
-  const [valueUnwrapped, setValueUnwrapped] = useControlled({
-    controlled: valueProp,
-    default: defaultValue ?? min,
-    name: 'Slider'
-  });
-  const sliderRef = React.useRef(null);
-  const controlRef = React.useRef(null);
-  const thumbRefs = React.useRef([]);
-  // The input element nested in the pressed thumb.
-  const pressedInputRef = React.useRef(null);
-  // The px distance between the pointer and the center of a pressed thumb.
-  const pressedThumbCenterOffsetRef = React.useRef(null);
-  // The index of the pressed thumb, or the closest thumb if the `Control` was pressed.
-  // This is updated on pointerdown, which is sooner than the `active/activeIndex`
-  // state which is updated later when the nested `input` receives focus.
-  const pressedThumbIndexRef = React.useRef(-1);
-  // The values when the current drag interaction started.
-  const pressedValuesRef = React.useRef(null);
-  const lastChangedValueRef = React.useRef(null);
-  const lastChangeReasonRef = React.useRef('none');
-  const formatOptionsRef = useValueAsRef(format);
-
-  // We can't use the :active browser pseudo-classes.
-  // - The active state isn't triggered when clicking on the rail.
-  // - The active state isn't transferred when inversing a range slider.
-  const [active, setActiveState] = React.useState(-1);
-  const [lastUsedThumbIndex, setLastUsedThumbIndex] = React.useState(-1);
-  const [dragging, setDragging] = React.useState(false);
-  const [thumbMap, setThumbMap] = React.useState(() => new Map());
-  const [indicatorPosition, setIndicatorPosition] = React.useState([undefined, undefined]);
-  const setActive = useStableCallback(value => {
-    setActiveState(value);
-    if (value !== -1) {
-      setLastUsedThumbIndex(value);
-    }
-  });
-  useRegisterFieldControl(controlRef, id, valueUnwrapped);
-  useValueChanged(valueUnwrapped, () => {
-    clearErrors(name);
-    if (shouldValidateOnChange()) {
-      validation.commit(valueUnwrapped);
-    } else {
-      validation.commit(valueUnwrapped, true);
-    }
-    const initialValue = validityData.initialValue;
-    let isDirty;
-    if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
-      isDirty = !areArraysEqual(valueUnwrapped, initialValue);
-    } else {
-      isDirty = valueUnwrapped !== initialValue;
-    }
-    setDirty(isDirty);
-  });
-  const registerFieldControlRef = useStableCallback(element => {
-    if (element) {
-      controlRef.current = element;
-    }
-  });
-  const range = Array.isArray(valueUnwrapped);
-  const values = React.useMemo(() => {
-    if (!range) {
-      return [clamp(valueUnwrapped, min, max)];
-    }
-    return valueUnwrapped.slice().sort(asc);
-  }, [max, min, range, valueUnwrapped]);
-  const setValue = useStableCallback((newValue, details) => {
-    if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
-      return;
-    }
-    const changeDetails = details ?? createChangeEventDetails(REASONS.none, undefined, undefined, {
-      activeThumbIndex: -1
-    });
-    lastChangeReasonRef.current = changeDetails.reason;
-
-    // Redefine target to allow name and value to be read.
-    // This allows seamless integration with the most popular form libraries.
-    // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
-    // Clone the event to not override `target` of the original event.
-    const nativeEvent = changeDetails.event;
-    const EventConstructor = nativeEvent.constructor ?? Event;
-    const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
-    Object.defineProperty(clonedEvent, 'target', {
-      writable: true,
-      value: {
-        value: newValue,
-        name
-      }
-    });
-    changeDetails.event = clonedEvent;
-    lastChangedValueRef.current = newValue;
-    onValueChange(newValue, changeDetails);
-    if (changeDetails.isCanceled) {
-      return;
-    }
-    setValueUnwrapped(newValue);
-  });
-  const handleInputChange = useStableCallback((valueInput, index, event) => {
-    const newValue = getSliderValue(valueInput, index, min, max, range, values);
-    if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
-      const reason = getSliderChangeEventReason(event);
-      setValue(newValue, createChangeEventDetails(reason, event.nativeEvent, undefined, {
-        activeThumbIndex: index
-      }));
-      setTouched(true);
-      const nextValue = lastChangedValueRef.current ?? newValue;
-      onValueCommitted(nextValue, createGenericEventDetails(reason, event.nativeEvent));
-    }
-  });
-  if (process.env.NODE_ENV !== 'production') {
-    if (min >= max) {
-      warn('Slider `max` must be greater than `min`.');
-    }
-  }
-  useIsoLayoutEffect(() => {
-    const activeEl = activeElement(ownerDocument(sliderRef.current));
-    if (disabled && contains(sliderRef.current, activeEl)) {
-      // This is necessary because Firefox and Safari will keep focus
-      // on a disabled element:
-      // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
-      activeEl.blur();
-    }
-  }, [disabled]);
-  if (disabled && active !== -1) {
-    setActive(-1);
-  }
-  const state = React.useMemo(() => ({
-    ...fieldState,
-    activeThumbIndex: active,
-    disabled,
-    dragging,
-    orientation,
-    max,
-    min,
-    minStepsBetweenValues,
-    step,
-    values
-  }), [fieldState, active, disabled, dragging, max, min, minStepsBetweenValues, orientation, step, values]);
-  const contextValue = React.useMemo(() => ({
-    active,
-    controlRef,
-    disabled,
-    dragging,
-    validation,
-    formatOptionsRef,
-    handleInputChange,
-    indicatorPosition,
-    inset: thumbAlignment !== 'center',
-    labelId: ariaLabelledby,
-    rootLabelId: defaultLabelId,
-    largeStep,
-    lastUsedThumbIndex,
-    lastChangedValueRef,
-    lastChangeReasonRef,
-    form,
-    locale,
-    max,
-    min,
-    minStepsBetweenValues,
-    name,
-    onValueCommitted,
-    orientation,
-    pressedInputRef,
-    pressedThumbCenterOffsetRef,
-    pressedThumbIndexRef,
-    pressedValuesRef,
-    registerFieldControlRef,
-    renderBeforeHydration: thumbAlignment === 'edge',
-    setActive,
-    setDragging,
-    setIndicatorPosition,
-    setLabelId,
-    setValue,
-    state,
-    step,
-    thumbCollisionBehavior,
-    thumbMap,
-    thumbRefs,
-    values
-  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, sliderRef],
-    props: [{
-      'aria-labelledby': ariaLabelledby,
-      id,
-      role: 'group'
-    }, validation.getValidationProps, elementProps],
-    stateAttributesMapping: sliderStateAttributesMapping
-  });
-  return /*#__PURE__*/_jsx(SliderRootContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(CompositeList, {
-      elementsRef: thumbRefs,
-      onMapChange: setThumbMap,
-      children: element
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") SliderRoot.displayName = "SliderRoot";

package/esm/slider/root/SliderRootContext.d.ts

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import type { Orientation } from "../../internals/types.js";
-import type { CompositeMetadata } from "../../internals/composite/list/CompositeList.js";
-import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
-import type { ThumbMetadata } from "../thumb/SliderThumb.js";
-import type { SliderRoot, SliderRootState } from "./SliderRoot.js";
-export interface SliderRootContext {
-  /**
-   * The index of the active thumb.
-   */
-  active: number;
-  /**
-   * The index of the most recently interacted thumb.
-   */
-  lastUsedThumbIndex: number;
-  controlRef: React.RefObject<HTMLElement | null>;
-  dragging: boolean;
-  disabled: boolean;
-  validation: UseFieldValidationReturnValue;
-  formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
-  handleInputChange: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
-  indicatorPosition: (number | undefined)[];
-  inset: boolean;
-  labelId?: string | undefined;
-  rootLabelId?: string | undefined;
-  /**
-   * The large step value of the slider when incrementing or decrementing while the shift key is held,
-   * or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
-   * @default 10
-   */
-  largeStep: number;
-  lastChangedValueRef: React.RefObject<number | readonly number[] | null>;
-  lastChangeReasonRef: React.RefObject<SliderRoot.ChangeEventReason>;
-  /**
-   * The locale used by `Intl.NumberFormat` when formatting the value.
-   * Defaults to the user's runtime locale.
-   */
-  locale?: Intl.LocalesArgument | undefined;
-  /**
-   * The maximum allowed value of the slider.
-   */
-  max: number;
-  /**
-   * The minimum allowed value of the slider.
-   */
-  min: number;
-  /**
-   * The minimum steps between values in a range slider.
-   */
-  minStepsBetweenValues: number;
-  form: string | undefined;
-  name: string | undefined;
-  /**
-   * Function to be called when drag ends and the pointer is released.
-   */
-  onValueCommitted: (newValue: number | readonly number[], data: SliderRoot.CommitEventDetails) => void;
-  /**
-   * The component orientation.
-   * @default 'horizontal'
-   */
-  orientation: Orientation;
-  pressedInputRef: React.RefObject<HTMLInputElement | null>;
-  pressedThumbCenterOffsetRef: React.RefObject<number | null>;
-  pressedThumbIndexRef: React.RefObject<number>;
-  pressedValuesRef: React.RefObject<readonly number[] | null>;
-  renderBeforeHydration: boolean;
-  registerFieldControlRef: React.RefCallback<Element> | null;
-  setActive: (index: number) => void;
-  setDragging: React.Dispatch<React.SetStateAction<boolean>>;
-  setIndicatorPosition: React.Dispatch<React.SetStateAction<(number | undefined)[]>>;
-  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  /**
-   * Callback fired when dragging and invokes onValueChange.
-   */
-  setValue: (newValue: number | number[], details?: SliderRoot.ChangeEventDetails) => void;
-  state: SliderRootState;
-  /**
-   * The step increment of the slider when incrementing or decrementing. It will snap
-   * to multiples of this value. Decimal values are supported.
-   * @default 1
-   */
-  step: number;
-  thumbCollisionBehavior: 'push' | 'swap' | 'none';
-  thumbMap: Map<Node, CompositeMetadata<ThumbMetadata> | null>;
-  thumbRefs: React.RefObject<(HTMLElement | null)[]>;
-  /**
-   * The value(s) of the slider
-   */
-  values: readonly number[];
-}
-export declare const SliderRootContext: React.Context<SliderRootContext | undefined>;
-export declare function useSliderRootContext(): SliderRootContext;

package/esm/slider/root/stateAttributesMapping.d.ts

@@ -1,3 +0,0 @@
-import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
-import type { SliderRootState } from "./SliderRoot.js";
-export declare const sliderStateAttributesMapping: StateAttributesMapping<SliderRootState>;

package/esm/slider/root/stateAttributesMapping.js

@@ -1,10 +0,0 @@
-import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
-export const sliderStateAttributesMapping = {
-  activeThumbIndex: () => null,
-  max: () => null,
-  min: () => null,
-  minStepsBetweenValues: () => null,
-  step: () => null,
-  values: () => null,
-  ...fieldValidityMapping
-};

package/esm/slider/thumb/SliderThumb.d.ts

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { BaseUIComponentProps } from "../../internals/types.js";
-import { type LabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
-import type { SliderRootState } from "../root/SliderRoot.js";
-/**
- * The draggable part of the slider at the tip of the indicator.
- * Renders a `<div>` element and a nested `<input type="range">`.
- *
- * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
- */
-export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ThumbMetadata {
-  inputId: LabelableContext['controlId'];
-}
-export interface SliderThumbState extends SliderRootState {}
-export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumbState>, 'onBlur' | 'onFocus'> {
-  /**
-   * Whether the thumb should ignore user interaction.
-   * @default false
-   */
-  disabled?: boolean | undefined;
-  /**
-   * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
-   */
-  getAriaLabel?: ((index: number) => string) | null | undefined;
-  /**
-   * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
-   * This is important for screen reader users.
-   */
-  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null | undefined;
-  /**
-   * The index of the thumb which corresponds to the index of its value in the
-   * `value` or `defaultValue` array.
-   * This prop is required to support server-side rendering for range sliders
-   * with multiple thumbs.
-   * @example
-   * ```tsx
-   * <Slider.Root value={[10, 20]}>
-   *   <Slider.Thumb index={0} />
-   *   <Slider.Thumb index={1} />
-   * </Slider.Root>
-   * ```
-   */
-  index?: number | undefined;
-  /**
-   * A ref to access the nested input element.
-   */
-  inputRef?: React.Ref<HTMLInputElement> | undefined;
-  /**
-   * A blur handler forwarded to the `input`.
-   */
-  onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
-  /**
-   * A focus handler forwarded to the `input`.
-   */
-  onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
-  /**
-   * Optional tab index attribute forwarded to the `input`.
-   */
-  tabIndex?: number | undefined;
-}
-export declare namespace SliderThumb {
-  type State = SliderThumbState;
-  type Props = SliderThumbProps;
-}