@react-md/core 1.0.0-next.0

package/dist/form/Slider.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useDraggable } from "../draggable/useDraggable.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { identity } from "../utils/identity.js";
+import { withinRange } from "../utils/withinRange.js";
+import { SliderContainer } from "./SliderContainer.js";
+import { SliderThumb } from "./SliderThumb.js";
+import { SliderTrack } from "./SliderTrack.js";
+import { SliderValueMarks } from "./SliderValueMarks.js";
+import { getJumpValue } from "./sliderUtils.js";
+const emptyString = ()=>"";
+const noop = ()=>{
+// do nothing
+};
+export function Slider(props) {
+    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: propId, min = 0, max = 100, step = 1, jump: propJump, vertical = false, discrete = false, disabled = false, getValueText = emptyString, children, marks = false, value, setValue, rangeValue, setRangeValue, trackProps, thumbProps, minThumbProps, minThumbLabel, minThumbLabelledBy, maxThumbProps, maxThumbLabel, maxThumbLabelledBy, tooltipProps, containerRef, getMarkProps = noop, getMarkLabelProps = noop, tooltipVisibility = "auto", getTooltipChildren = identity, disableSmoothDragging = !!marks, ...remaining } = props;
+    const jump = getJumpValue({
+        min,
+        max,
+        step,
+        jump: propJump
+    });
+    const isRangeSlider = typeof value !== "number";
+    const thumb1Id = useEnsuredId(propId, "slider");
+    const thumb2Id = `${thumb1Id}-2`;
+    const thumb1Ref = useRef(null);
+    const thumb2Ref = useRef(null);
+    let thumb1Max = max;
+    let thumb2Min = min;
+    let thumb1Label;
+    let thumb1LabelledBy;
+    let thumb2Label;
+    let thumb2LabelledBy;
+    let thumb1Value;
+    let thumb2Value;
+    let setThumb1Value;
+    let setThumb2Value;
+    if (!isRangeSlider) {
+        thumb1Value = value;
+        setThumb1Value = setValue;
+        thumb2Value = max;
+        setThumb2Value = noop;
+        thumb1Label = ariaLabel;
+        thumb1LabelledBy = ariaLabelledBy;
+    } else {
+        thumb1LabelledBy = minThumbLabelledBy;
+        thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : "Min");
+        thumb2LabelledBy = maxThumbLabelledBy;
+        thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : "max");
+        [thumb1Value, thumb2Value] = rangeValue;
+        thumb1Max = thumb2Value - step;
+        thumb2Min = thumb1Value + step;
+        setThumb1Value = (valueOrSetter)=>{
+            setRangeValue((prevRangeValue)=>{
+                const value = typeof valueOrSetter === "number" ? valueOrSetter : valueOrSetter(prevRangeValue[0]);
+                return [
+                    value,
+                    prevRangeValue[1]
+                ];
+            });
+        };
+        setThumb2Value = (valueOrSetter)=>{
+            setRangeValue((prevRangeValue)=>{
+                const value = typeof valueOrSetter === "number" ? valueOrSetter : valueOrSetter(prevRangeValue[1]);
+                return [
+                    prevRangeValue[0],
+                    value
+                ];
+            });
+        };
+    }
+    const [thumb1Dragging, setThumb1Dragging] = useState(false);
+    const { onKeyDown: thumb1OnKeyDown, onMouseUp: thumb1OnMouseUp, onMouseDown: thumb1OnMouseDown, onMouseMove: thumb1OnMouseMove, onTouchStart: thumb1OnTouchStart, onTouchMove: thumb1OnTouchMove, dragPercentage: thumb1DragPercentage, draggableRef: thumb1DraggableRef } = useDraggable({
+        ref: thumb1Ref,
+        min,
+        max: thumb1Max,
+        rangeMax: max,
+        step,
+        value: thumb1Value,
+        setValue: setThumb1Value,
+        dragging: thumb1Dragging,
+        setDragging: setThumb1Dragging,
+        disabled,
+        vertical,
+        withinOffsetParent: true,
+        disableDraggingCursorClassName: true,
+        onKeyDown (event) {
+            switch(event.key){
+                case "PageUp":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setThumb1Value((prevValue)=>withinRange({
+                            min,
+                            max: thumb1Max,
+                            value: prevValue + jump
+                        }));
+                    break;
+                case "PageDown":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setThumb1Value((prevValue)=>withinRange({
+                            min,
+                            max: thumb1Max,
+                            value: prevValue - jump
+                        }));
+                    break;
+            }
+        }
+    });
+    const [thumb2Dragging, setThumb2Dragging] = useState(false);
+    const { onKeyDown: thumb2OnKeyDown, onMouseUp: thumb2OnMouseUp, onMouseDown: thumb2OnMouseDown, onMouseMove: thumb2OnMouseMove, onTouchStart: thumb2OnTouchStart, onTouchMove: thumb2OnTouchMove, dragPercentage: thumb2DragPercentage, draggableRef: thumb2DraggableRef } = useDraggable({
+        ref: thumb2Ref,
+        min: thumb2Min,
+        max,
+        rangeMin: min,
+        step,
+        value: thumb2Value,
+        setValue: setThumb2Value,
+        dragging: thumb2Dragging,
+        setDragging: setThumb2Dragging,
+        vertical,
+        disabled,
+        withinOffsetParent: true,
+        disableDraggingCursorClassName: true,
+        onKeyDown (event) {
+            switch(event.key){
+                case "PageUp":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setThumb2Value((prevValue)=>withinRange({
+                            min: thumb2Min,
+                            max,
+                            value: prevValue + jump
+                        }));
+                    break;
+                case "PageDown":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setThumb2Value((prevValue)=>withinRange({
+                            min: thumb2Min,
+                            max,
+                            value: prevValue - jump
+                        }));
+                    break;
+            }
+        }
+    });
+    const dragging = thumb1Dragging || thumb2Dragging;
+    const sharedThumbProps = {
+        step,
+        animate: !dragging,
+        discrete,
+        disabled,
+        vertical,
+        getValueText,
+        tooltipProps,
+        getTooltipChildren,
+        tooltipVisibility,
+        disableSmoothDragging
+    };
+    return /*#__PURE__*/ _jsx(SliderContainer, {
+        ...remaining,
+        ref: containerRef,
+        vertical: vertical,
+        children: /*#__PURE__*/ _jsxs(SliderTrack, {
+            ...trackProps,
+            min: min,
+            max: max,
+            thumb1Ref: thumb1Ref,
+            thumb1Value: thumb1Value,
+            thumb1Dragging: !disableSmoothDragging && thumb1Dragging,
+            thumb1DragPercentage: thumb1DragPercentage,
+            thumb1OnMouseUp: thumb1OnMouseUp,
+            thumb1OnMouseDown: thumb1OnMouseDown,
+            thumb1OnMouseMove: thumb1OnMouseMove,
+            thumb1OnTouchStart: thumb1OnTouchStart,
+            thumb1OnTouchMove: thumb1OnTouchMove,
+            thumb2Ref: thumb2Ref,
+            thumb2Value: thumb2Value,
+            thumb2Dragging: !disableSmoothDragging && thumb2Dragging,
+            thumb2DragPercentage: thumb2DragPercentage,
+            thumb2OnMouseUp: thumb2OnMouseUp,
+            thumb2OnMouseDown: thumb2OnMouseDown,
+            thumb2OnMouseMove: thumb2OnMouseMove,
+            thumb2OnTouchStart: thumb2OnTouchStart,
+            thumb2OnTouchMove: thumb2OnTouchMove,
+            animate: !disableSmoothDragging && !dragging,
+            disabled: disabled,
+            vertical: vertical,
+            isRangeSlider: isRangeSlider,
+            children: [
+                /*#__PURE__*/ _jsx(SliderThumb, {
+                    "aria-label": thumb1Label,
+                    "aria-labelledby": thumb1LabelledBy,
+                    id: thumb1Id,
+                    ...thumbProps,
+                    ...minThumbProps,
+                    ...sharedThumbProps,
+                    ref: thumb1DraggableRef,
+                    min: min,
+                    max: thumb1Max,
+                    value: thumb1Value,
+                    index: 1,
+                    active: thumb1Dragging,
+                    onChange: (event)=>setThumb1Value(event.currentTarget.valueAsNumber),
+                    onKeyDown: thumb1OnKeyDown
+                }),
+                isRangeSlider && /*#__PURE__*/ _jsx(SliderThumb, {
+                    "aria-label": thumb2Label,
+                    "aria-labelledby": thumb2LabelledBy,
+                    id: thumb2Id,
+                    ...maxThumbProps,
+                    ...sharedThumbProps,
+                    ref: thumb2DraggableRef,
+                    min: thumb2Min,
+                    max: max,
+                    value: thumb2Value,
+                    index: 2,
+                    active: thumb2Dragging,
+                    onChange: (event)=>setThumb2Value(event.currentTarget.valueAsNumber),
+                    onKeyDown: thumb2OnKeyDown
+                }),
+                marks && /*#__PURE__*/ _jsx(SliderValueMarks, {
+                    min: min,
+                    max: max,
+                    step: step,
+                    marks: marks,
+                    vertical: vertical,
+                    thumb1Value: thumb1Value,
+                    thumb2Value: thumb2Value,
+                    isRangeSlider: isRangeSlider,
+                    getMarkProps: getMarkProps,
+                    getMarkLabelProps: getMarkLabelProps
+                }),
+                children
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=Slider.js.map

package/dist/form/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/Slider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useDraggable } from \"../draggable/useDraggable.js\";\nimport { type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n  type LabelRequiredForA11y,\n  type PropsWithRef,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { identity } from \"../utils/identity.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport { SliderContainer, type SliderAddonProps } from \"./SliderContainer.js\";\nimport {\n  SliderThumb,\n  type SliderThumbPresentation,\n  type SliderThumbProps,\n} from \"./SliderThumb.js\";\nimport { SliderTrack } from \"./SliderTrack.js\";\nimport {\n  SliderValueMarks,\n  type SliderMarksOptions,\n} from \"./SliderValueMarks.js\";\nimport { getJumpValue } from \"./sliderUtils.js\";\nimport { type RangeSliderState } from \"./useRangeSlider.js\";\nimport { type SliderState, type SliderValueOptions } from \"./useSlider.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slider-color\"?: string;\n    \"--rmd-slider-active-color\"?: string;\n    \"--rmd-slider-inactive-color\"?: string;\n    \"--rmd-slider-size\"?: string | number;\n    \"--rmd-slider-active-size\"?: string | number;\n    \"--rmd-slider-inactive-size\"?: string | number;\n    \"--rmd-slider-vertical-size\"?: string | number;\n    \"--rmd-slider-offset-1\"?: string;\n    \"--rmd-slider-offset-2\"?: string;\n    \"--rmd-slider-tooltip-scale\"?: string | number;\n    \"--rmd-slider-tooltip-translate\"?: string | number;\n    \"--rmd-slider-mark-offset\"?: string;\n  }\n}\n\nconst emptyString = (): string => \"\";\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface BaseSliderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderThumbPresentation,\n    SliderValueOptions,\n    SliderAddonProps,\n    SliderMarksOptions {\n  /**\n   * This can be used to apply a ref to the container element since this\n   * component does not use `forwardRef`.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * The amount to jump the slider's value when the `PageUp` or `PageDown`\n   * key is pressed.\n   *\n   * The default value is 1/10th of the range.\n   *\n   * @defaultValue `(numberOfSteps / 10) * step`\n   */\n  jump?: number;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /**\n   * This can be used to apply custom styles or a `ref` to the track element if\n   * needed.\n   */\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * This can be used to configure any additional tooltip props like the\n   * CSS transition `classNames`, styles, etc.\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * Note: The `position` will always be `\"above\"` for horizontal sliders and\n   * `\"left\"` for vertical sliders.\n   */\n  tooltipProps?: Omit<Partial<TooltipProps>, \"position\">;\n}\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Only requires `value` and `setValue` props instead of all the\n * slider controls.\n * \\@since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use\n * the `aria-label` or `aria-labelledby` props instead.\n */\nexport interface SliderProps extends BaseSliderProps, SliderState {\n  /**\n   * Any additional props that should be provided to the thumb element. This can\n   * be useful for applying additional styling.\n   */\n  thumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example\n   * More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value) => (\n   *     <TextIconSpacing icon={<FavoriteIcon />}>\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?(value: number): ReactNode;\n}\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of\n * all the slider controls.\n * \\@since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,\n * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to\n * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,\n * `maxThumbLabelledBy`, and `maxThumbProps` respectively.\n */\nexport interface RangeSliderProps extends BaseSliderProps, RangeSliderState {\n  /**\n   * Any additional props that should be provided to the min value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  minThumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be provided to the max value thumb\n   * element. This can be useful for applying additional styling.\n   */\n  maxThumbProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * The `aria-label` to apply to the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Min\"`\n   */\n  minThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the min value.\n   *\n   * Note: Either this prop or the {@link minThumbLabel} are required for\n   * accessibility.\n   */\n  minThumbLabelledBy?: string;\n\n  /**\n   * The `aria-label` to apply to the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabelledBy} are required for\n   * accessibility.\n   *\n   * @defaultValue `\"Max\"`\n   */\n  maxThumbLabel?: string;\n\n  /**\n   * Set this to an element's id that labels the max value.\n   *\n   * Note: Either this prop or the {@link maxThumbLabel} are required for\n   * accessibility.\n   */\n  maxThumbLabelledBy?: string;\n\n  /**\n   * This can be used to update the discrete slider's value tooltip.\n   *\n   * @example\n   * More Value Information\n   * ```tsx\n   * <Slider\n   *   {...slider}\n   *   discrete\n   *   getTooltipChildren={(value, isMinValue) => (\n   *     <TextIconSpacing\n   *       icon={isMinValue ? <FavoriteIcon /> : <CloseIcon /}\n   *       iconAfter={!isMinValue}\n   *     >\n   *       {value}\n   *     </TextIconSpacing>\n   *   )}\n   * />\n   * ```\n   *\n   * This will only be used when {@link discrete} is `true`.\n   *\n   * @defaultValue `(value) => value`\n   */\n  getTooltipChildren?(value: number, isMinValue: boolean): ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Slider, useSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: 50,\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { value, setValue } = slider;\n *\n *   return (\n *     <Form>\n *       <Slider {...slider} aria-label=\"Volume\" />\n *     </Form>\n *   );\n * }\n * ```\n *\n * @example\n * Range Slider Example\n * ```tsx\n * import { Fieldset, Form, Legend, Slider, useRangeSlider } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * function Example(): ReactElement {\n *   const slider = useRangeSlider({\n *     // these are the defaults and can be changed\n *     min: 0,\n *     max: 100,\n *     step: 1,\n *     defaultValue: [0, 100],\n *   });\n *\n *   // if you need access to the current value or manually change the value\n *   // yourself.\n *   const { rangeValue, setRangeValue } = slider;\n *   const [minPrice, maxPrice] = rangeValue;\n *\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Price Range</Legend>\n *         <Slider {...slider} />\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 The `Slider` and `RangeSlider` have been combined into the\n * single `Slider` component and removed the `label` support.\n * \\@since 6.0.0 Each thumb includes an invisible `<input type=\"range\">` instead\n * of an `<input type=\"hidden\">`.\n */\nexport function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;\nexport function Slider(props: RangeSliderProps): ReactElement;\nexport function Slider(\n  props: LabelRequiredForA11y<SliderProps> | RangeSliderProps\n): ReactElement {\n  const {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    id: propId,\n    min = 0,\n    max = 100,\n    step = 1,\n    jump: propJump,\n    vertical = false,\n    discrete = false,\n    disabled = false,\n    getValueText = emptyString,\n    children,\n    marks = false,\n    value,\n    setValue,\n    rangeValue,\n    setRangeValue,\n    trackProps,\n    thumbProps,\n    minThumbProps,\n    minThumbLabel,\n    minThumbLabelledBy,\n    maxThumbProps,\n    maxThumbLabel,\n    maxThumbLabelledBy,\n    tooltipProps,\n    containerRef,\n    getMarkProps = noop,\n    getMarkLabelProps = noop,\n    tooltipVisibility = \"auto\",\n    getTooltipChildren = identity,\n    disableSmoothDragging = !!marks,\n    ...remaining\n  } = props as SliderProps & RangeSliderProps;\n\n  const jump = getJumpValue({ min, max, step, jump: propJump });\n  const isRangeSlider = typeof value !== \"number\";\n\n  const thumb1Id = useEnsuredId(propId, \"slider\");\n  const thumb2Id = `${thumb1Id}-2`;\n  const thumb1Ref = useRef<HTMLSpanElement>(null);\n  const thumb2Ref = useRef<HTMLSpanElement>(null);\n\n  let thumb1Max = max;\n  let thumb2Min = min;\n  let thumb1Label: string | undefined;\n  let thumb1LabelledBy: string | undefined;\n  let thumb2Label: string | undefined;\n  let thumb2LabelledBy: string | undefined;\n  let thumb1Value: number;\n  let thumb2Value: number;\n  let setThumb1Value: UseStateSetter<number>;\n  let setThumb2Value: UseStateSetter<number>;\n  if (!isRangeSlider) {\n    thumb1Value = value;\n    setThumb1Value = setValue;\n    thumb2Value = max;\n    setThumb2Value = noop;\n    thumb1Label = ariaLabel;\n    thumb1LabelledBy = ariaLabelledBy;\n  } else {\n    thumb1LabelledBy = minThumbLabelledBy;\n    thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : \"Min\");\n    thumb2LabelledBy = maxThumbLabelledBy;\n    thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : \"max\");\n\n    [thumb1Value, thumb2Value] = rangeValue;\n\n    thumb1Max = thumb2Value - step;\n    thumb2Min = thumb1Value + step;\n\n    setThumb1Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[0]);\n\n        return [value, prevRangeValue[1]];\n      });\n    };\n    setThumb2Value = (valueOrSetter) => {\n      setRangeValue((prevRangeValue) => {\n        const value =\n          typeof valueOrSetter === \"number\"\n            ? valueOrSetter\n            : valueOrSetter(prevRangeValue[1]);\n\n        return [prevRangeValue[0], value];\n      });\n    };\n  }\n\n  const [thumb1Dragging, setThumb1Dragging] = useState(false);\n  const {\n    onKeyDown: thumb1OnKeyDown,\n    onMouseUp: thumb1OnMouseUp,\n    onMouseDown: thumb1OnMouseDown,\n    onMouseMove: thumb1OnMouseMove,\n    onTouchStart: thumb1OnTouchStart,\n    onTouchMove: thumb1OnTouchMove,\n    dragPercentage: thumb1DragPercentage,\n    draggableRef: thumb1DraggableRef,\n  } = useDraggable({\n    ref: thumb1Ref,\n    min,\n    max: thumb1Max,\n    rangeMax: max,\n    step,\n    value: thumb1Value,\n    setValue: setThumb1Value,\n    dragging: thumb1Dragging,\n    setDragging: setThumb1Dragging,\n    disabled,\n    vertical,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb1Value((prevValue) =>\n            withinRange({\n              min,\n              max: thumb1Max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb1Value((prevValue) =>\n            withinRange({\n              min,\n              max: thumb1Max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  const [thumb2Dragging, setThumb2Dragging] = useState(false);\n  const {\n    onKeyDown: thumb2OnKeyDown,\n    onMouseUp: thumb2OnMouseUp,\n    onMouseDown: thumb2OnMouseDown,\n    onMouseMove: thumb2OnMouseMove,\n    onTouchStart: thumb2OnTouchStart,\n    onTouchMove: thumb2OnTouchMove,\n    dragPercentage: thumb2DragPercentage,\n    draggableRef: thumb2DraggableRef,\n  } = useDraggable({\n    ref: thumb2Ref,\n    min: thumb2Min,\n    max,\n    rangeMin: min,\n    step,\n    value: thumb2Value,\n    setValue: setThumb2Value,\n    dragging: thumb2Dragging,\n    setDragging: setThumb2Dragging,\n    vertical,\n    disabled,\n    withinOffsetParent: true,\n    disableDraggingCursorClassName: true,\n    onKeyDown(event) {\n      switch (event.key) {\n        case \"PageUp\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb2Value((prevValue) =>\n            withinRange({\n              min: thumb2Min,\n              max,\n              value: prevValue + jump,\n            })\n          );\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          event.stopPropagation();\n          setThumb2Value((prevValue) =>\n            withinRange({\n              min: thumb2Min,\n              max,\n              value: prevValue - jump,\n            })\n          );\n          break;\n      }\n    },\n  });\n\n  const dragging = thumb1Dragging || thumb2Dragging;\n  const sharedThumbProps = {\n    step,\n    animate: !dragging,\n    discrete,\n    disabled,\n    vertical,\n    getValueText,\n    tooltipProps,\n    getTooltipChildren,\n    tooltipVisibility,\n    disableSmoothDragging,\n  } as const satisfies Partial<SliderThumbProps>;\n\n  return (\n    <SliderContainer {...remaining} ref={containerRef} vertical={vertical}>\n      <SliderTrack\n        {...trackProps}\n        min={min}\n        max={max}\n        thumb1Ref={thumb1Ref}\n        thumb1Value={thumb1Value}\n        thumb1Dragging={!disableSmoothDragging && thumb1Dragging}\n        thumb1DragPercentage={thumb1DragPercentage}\n        thumb1OnMouseUp={thumb1OnMouseUp}\n        thumb1OnMouseDown={thumb1OnMouseDown}\n        thumb1OnMouseMove={thumb1OnMouseMove}\n        thumb1OnTouchStart={thumb1OnTouchStart}\n        thumb1OnTouchMove={thumb1OnTouchMove}\n        thumb2Ref={thumb2Ref}\n        thumb2Value={thumb2Value}\n        thumb2Dragging={!disableSmoothDragging && thumb2Dragging}\n        thumb2DragPercentage={thumb2DragPercentage}\n        thumb2OnMouseUp={thumb2OnMouseUp}\n        thumb2OnMouseDown={thumb2OnMouseDown}\n        thumb2OnMouseMove={thumb2OnMouseMove}\n        thumb2OnTouchStart={thumb2OnTouchStart}\n        thumb2OnTouchMove={thumb2OnTouchMove}\n        animate={!disableSmoothDragging && !dragging}\n        disabled={disabled}\n        vertical={vertical}\n        isRangeSlider={isRangeSlider}\n      >\n        <SliderThumb\n          aria-label={thumb1Label as string}\n          aria-labelledby={thumb1LabelledBy}\n          id={thumb1Id}\n          {...thumbProps}\n          {...minThumbProps}\n          {...sharedThumbProps}\n          ref={thumb1DraggableRef}\n          min={min}\n          max={thumb1Max}\n          value={thumb1Value}\n          index={1}\n          active={thumb1Dragging}\n          onChange={(event) =>\n            setThumb1Value(event.currentTarget.valueAsNumber)\n          }\n          onKeyDown={thumb1OnKeyDown}\n        />\n        {isRangeSlider && (\n          <SliderThumb\n            aria-label={thumb2Label as string}\n            aria-labelledby={thumb2LabelledBy}\n            id={thumb2Id}\n            {...maxThumbProps}\n            {...sharedThumbProps}\n            ref={thumb2DraggableRef}\n            min={thumb2Min}\n            max={max}\n            value={thumb2Value}\n            index={2}\n            active={thumb2Dragging}\n            onChange={(event) =>\n              setThumb2Value(event.currentTarget.valueAsNumber)\n            }\n            onKeyDown={thumb2OnKeyDown}\n          />\n        )}\n        {marks && (\n          <SliderValueMarks\n            min={min}\n            max={max}\n            step={step}\n            marks={marks}\n            vertical={vertical}\n            thumb1Value={thumb1Value}\n            thumb2Value={thumb2Value}\n            isRangeSlider={isRangeSlider}\n            getMarkProps={getMarkProps}\n            getMarkLabelProps={getMarkLabelProps}\n          />\n        )}\n        {children}\n      </SliderTrack>\n    </SliderContainer>\n  );\n}\n"],"names":["useRef","useState","useDraggable","useEnsuredId","identity","withinRange","SliderContainer","SliderThumb","SliderTrack","SliderValueMarks","getJumpValue","emptyString","noop","Slider","props","ariaLabel","ariaLabelledBy","id","propId","min","max","step","jump","propJump","vertical","discrete","disabled","getValueText","children","marks","value","setValue","rangeValue","setRangeValue","trackProps","thumbProps","minThumbProps","minThumbLabel","minThumbLabelledBy","maxThumbProps","maxThumbLabel","maxThumbLabelledBy","tooltipProps","containerRef","getMarkProps","getMarkLabelProps","tooltipVisibility","getTooltipChildren","disableSmoothDragging","remaining","isRangeSlider","thumb1Id","thumb2Id","thumb1Ref","thumb2Ref","thumb1Max","thumb2Min","thumb1Label","thumb1LabelledBy","thumb2Label","thumb2LabelledBy","thumb1Value","thumb2Value","setThumb1Value","setThumb2Value","undefined","valueOrSetter","prevRangeValue","thumb1Dragging","setThumb1Dragging","onKeyDown","thumb1OnKeyDown","onMouseUp","thumb1OnMouseUp","onMouseDown","thumb1OnMouseDown","onMouseMove","thumb1OnMouseMove","onTouchStart","thumb1OnTouchStart","onTouchMove","thumb1OnTouchMove","dragPercentage","thumb1DragPercentage","draggableRef","thumb1DraggableRef","ref","rangeMax","dragging","setDragging","withinOffsetParent","disableDraggingCursorClassName","event","key","preventDefault","stopPropagation","prevValue","thumb2Dragging","setThumb2Dragging","thumb2OnKeyDown","thumb2OnMouseUp","thumb2OnMouseDown","thumb2OnMouseMove","thumb2OnTouchStart","thumb2OnTouchMove","thumb2DragPercentage","thumb2DraggableRef","rangeMin","sharedThumbProps","animate","aria-label","aria-labelledby","index","active","onChange","currentTarget","valueAsNumber"],"mappings":"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"}

package/dist/form/SliderContainer.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`
+ */
+export interface SliderAddonProps {
+    /**
+     * An optional addon to render before the slider's track. This can be anything
+     * and will be wrapped in the `TextIconSpacing` component.
+     *
+     * When the `vertical` prop is enabled, the addon will appear underneath the
+     * track.
+     */
+    beforeAddon?: ReactNode;
+    /**
+     * An optional addon to render after the slider's track. This can be anything
+     * and will be wrapped in the `TextIconSpacing` component.
+     *
+     * When the `vertical` prop is enabled, the addon will appear above the track.
+     */
+    afterAddon?: ReactNode;
+}
+/**
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Removed the `label` support since you'll generally want to use
+ * a `Fieldset` instead.
+ */
+export interface SliderContainerProps extends HTMLAttributes<HTMLDivElement>, SliderAddonProps {
+    vertical: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * The `SliderContainer` component is mostly an internal component that is
+ * built-in to the `Slider` and `RangeSlider` components to add addons to the
+ * left or right of the `SliderTrack`. When vertical, it will add addons to the
+ * bottom or top instead.
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Removed the `label` support since you'll generally want to use
+ * a `Fieldset` instead.
+ */
+export declare const SliderContainer: import("react").ForwardRefExoticComponent<SliderContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/SliderContainer.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-slider-container");
+/**
+ * **Server Component**
+ *
+ * The `SliderContainer` component is mostly an internal component that is
+ * built-in to the `Slider` and `RangeSlider` components to add addons to the
+ * left or right of the `SliderTrack`. When vertical, it will add addons to the
+ * bottom or top instead.
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Removed the `label` support since you'll generally want to use
+ * a `Fieldset` instead.
+ */ export const SliderContainer = /*#__PURE__*/ forwardRef(function SliderContainer(props, ref) {
+    const { className, children, beforeAddon, afterAddon, vertical, ...remaining } = props;
+    return /*#__PURE__*/ _jsxs("div", {
+        ...remaining,
+        ref: ref,
+        className: cnb(styles({
+            h: !vertical,
+            "pad-left": !vertical && !beforeAddon,
+            "pad-right": !vertical && !afterAddon,
+            v: vertical,
+            "pad-bottom": vertical && !beforeAddon,
+            "pad-top": vertical && !afterAddon
+        }), className),
+        children: [
+            beforeAddon,
+            children,
+            afterAddon
+        ]
+    });
+});
+
+//# sourceMappingURL=SliderContainer.js.map

package/dist/form/SliderContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/SliderContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-container\");\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Renamed from `SliderAddons` to `SliderContainerAddonProps`\n */\nexport interface SliderAddonProps {\n  /**\n   * An optional addon to render before the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear underneath the\n   * track.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the slider's track. This can be anything\n   * and will be wrapped in the `TextIconSpacing` component.\n   *\n   * When the `vertical` prop is enabled, the addon will appear above the track.\n   */\n  afterAddon?: ReactNode;\n}\n\n/**\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport interface SliderContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SliderAddonProps {\n  vertical: boolean;\n}\n\n/**\n * **Server Component**\n *\n * The `SliderContainer` component is mostly an internal component that is\n * built-in to the `Slider` and `RangeSlider` components to add addons to the\n * left or right of the `SliderTrack`. When vertical, it will add addons to the\n * bottom or top instead.\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Removed the `label` support since you'll generally want to use\n * a `Fieldset` instead.\n */\nexport const SliderContainer = forwardRef<HTMLDivElement, SliderContainerProps>(\n  function SliderContainer(props, ref) {\n    const {\n      className,\n      children,\n      beforeAddon,\n      afterAddon,\n      vertical,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cnb(\n          styles({\n            h: !vertical,\n            \"pad-left\": !vertical && !beforeAddon,\n            \"pad-right\": !vertical && !afterAddon,\n            v: vertical,\n            \"pad-bottom\": vertical && !beforeAddon,\n            \"pad-top\": vertical && !afterAddon,\n          }),\n          className\n        )}\n      >\n        {beforeAddon}\n        {children}\n        {afterAddon}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","SliderContainer","props","ref","className","children","beforeAddon","afterAddon","vertical","remaining","div","h","v"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuCnB;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAME,gCAAkBH,WAC7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,MAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWP,IACTG,OAAO;YACLW,GAAG,CAACH;YACJ,YAAY,CAACA,YAAY,CAACF;YAC1B,aAAa,CAACE,YAAY,CAACD;YAC3BK,GAAGJ;YACH,cAAcA,YAAY,CAACF;YAC3B,WAAWE,YAAY,CAACD;QAC1B,IACAH;;YAGDE;YACAD;YACAE;;;AAGP,GACA"}

package/dist/form/SliderMark.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface SliderMarkProps extends HTMLAttributes<HTMLSpanElement> {
+    active: boolean;
+    offset: string;
+    vertical: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function SliderMark(props: SliderMarkProps): ReactElement;

package/dist/form/SliderMark.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-slider-mark");
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function SliderMark(props) {
+    const { active, offset, vertical, style, className, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("span", {
+        ...remaining,
+        style: {
+            ...style,
+            "--rmd-slider-mark-offset": offset
+        },
+        className: cnb(styles({
+            active,
+            inactive: !active,
+            h: !vertical,
+            v: vertical
+        }), className)
+    });
+}
+
+//# sourceMappingURL=SliderMark.js.map

package/dist/form/SliderMark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/SliderMark.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactElement } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-mark\");\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface SliderMarkProps extends HTMLAttributes<HTMLSpanElement> {\n  active: boolean;\n  offset: string;\n  vertical: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function SliderMark(props: SliderMarkProps): ReactElement {\n  const { active, offset, vertical, style, className, ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      style={{ ...style, \"--rmd-slider-mark-offset\": offset }}\n      className={cnb(\n        styles({\n          active,\n          inactive: !active,\n          h: !vertical,\n          v: vertical,\n        }),\n        className\n      )}\n    />\n  );\n}\n"],"names":["cnb","bem","styles","SliderMark","props","active","offset","vertical","style","className","remaining","span","inactive","h","v"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;;;;CAKC,GACD,OAAO,SAASE,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGN;IAErE,qBACE,KAACO;QACE,GAAGD,SAAS;QACbF,OAAO;YAAE,GAAGA,KAAK;YAAE,4BAA4BF;QAAO;QACtDG,WAAWT,IACTE,OAAO;YACLG;YACAO,UAAU,CAACP;YACXQ,GAAG,CAACN;YACJO,GAAGP;QACL,IACAE;;AAIR"}

package/dist/form/SliderMarkLabel.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement } from "react";
+import { type CustomTypographyComponent, type TypographyProps, type TypographyType } from "../typography/Typography.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface CustomizableSliderMarkLabelProps extends TypographyProps {
+    /** @defaultValue `"span"` */
+    as?: CustomTypographyComponent;
+    /** @defaultValue `"body-2"` */
+    type?: TypographyType;
+}
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export interface SliderMarkLabelProps extends CustomizableSliderMarkLabelProps {
+    offset: string;
+    vertical: boolean;
+}
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export declare function SliderMarkLabel(props: SliderMarkLabelProps): ReactElement;

package/dist/form/SliderMarkLabel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { Typography } from "../typography/Typography.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-slider-mark-label");
+/**
+ * **Server Component**
+ *
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function SliderMarkLabel(props) {
+    const { as = "span", type = "body-2", offset, vertical, style, className, children, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Typography, {
+        ...remaining,
+        as: as,
+        type: type,
+        style: {
+            ...style,
+            "--rmd-slider-mark-offset": offset
+        },
+        className: cnb(styles({
+            h: !vertical,
+            v: vertical
+        }), className),
+        children: children
+    });
+}
+
+//# sourceMappingURL=SliderMarkLabel.js.map

package/dist/form/SliderMarkLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/SliderMarkLabel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\nimport {\n  Typography,\n  type CustomTypographyComponent,\n  type TypographyProps,\n  type TypographyType,\n} from \"../typography/Typography.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slider-mark-label\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CustomizableSliderMarkLabelProps extends TypographyProps {\n  /** @defaultValue `\"span\"` */\n  as?: CustomTypographyComponent;\n\n  /** @defaultValue `\"body-2\"` */\n  type?: TypographyType;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface SliderMarkLabelProps extends CustomizableSliderMarkLabelProps {\n  offset: string;\n  vertical: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function SliderMarkLabel(props: SliderMarkLabelProps): ReactElement {\n  const {\n    as = \"span\",\n    type = \"body-2\",\n    offset,\n    vertical,\n    style,\n    className,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <Typography\n      {...remaining}\n      as={as}\n      type={type}\n      style={{ ...style, \"--rmd-slider-mark-offset\": offset }}\n      className={cnb(styles({ h: !vertical, v: vertical }), className)}\n    >\n      {children}\n    </Typography>\n  );\n}\n"],"names":["cnb","Typography","bem","styles","SliderMarkLabel","props","as","type","offset","vertical","style","className","children","remaining","h","v"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SACEC,UAAU,QAIL,8BAA8B;AACrC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAsBnB;;;;;CAKC,GACD,OAAO,SAASE,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,KAAK,MAAM,EACXC,OAAO,QAAQ,EACfC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACJ;QACE,GAAGY,SAAS;QACbP,IAAIA;QACJC,MAAMA;QACNG,OAAO;YAAE,GAAGA,KAAK;YAAE,4BAA4BF;QAAO;QACtDG,WAAWX,IAAIG,OAAO;YAAEW,GAAG,CAACL;YAAUM,GAAGN;QAAS,IAAIE;kBAErDC;;AAGP"}

package/dist/form/SliderThumb.d.ts

@@ -0,0 +1,83 @@
+import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type SliderValueOptions } from "./useSlider.js";
+/**
+ * @remarks \@since 2.5.0
+ */
+export interface SliderThumbPresentation {
+    /**
+     * Boolean if the slider should act as a discrete slider which will render a
+     * tooltip above the thumb while dragging to visualize the current value for
+     * the slider.
+     *
+     * @defaultValue `false`
+     */
+    discrete?: boolean;
+    /**
+     * A function that is used to help with accessibility by creating a better
+     * value string if just a number isn't representative enough of your range.
+     *
+     * Example:
+     *
+     * ```tsx
+     * const [value, controls] = useSlider(0, {
+     *   // format to be `$100`, etc
+     *   getValueText: value => `$${value}`,
+     * });
+     *
+     * return <Slider baseId="price-slider" label="Price" {...controls} />;
+     * ```
+     *
+     * @defaultValue `() => ""`
+     */
+    getValueText?(value: number): string;
+    /**
+     * Set this to `true` if the slider's thumb position should only update when
+     * the user has dragged to the next value instead of with the mouse.
+     *
+     * @see {@link marks}
+     * @defaultValue `!!marks`
+     */
+    disableSmoothDragging?: boolean;
+    /**
+     * The discrete slider's value tooltip will only become visible when:
+     *
+     * - `"auto"` - the user is dragging with touch/mouse or focused with a keyboard
+     * - `"hover"` - the behavior of `"auto"` plus while hovering the thumb with a mouse
+     * - `"always"` - ... always
+     *
+     * This only applies when the {@link discrete} prop is `true`.
+     *
+     * @defaultValue `"auto"`
+     */
+    tooltipVisibility?: "auto" | "hover" | "always";
+}
+/**
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Internal only component.
+ */
+export interface SliderThumbProps extends Omit<HTMLAttributes<HTMLSpanElement>, "onChange">, Required<SliderValueOptions>, Required<SliderThumbPresentation> {
+    id: string;
+    name?: string;
+    value: number;
+    index: 1 | 2;
+    active: boolean;
+    animate: boolean;
+    disabled: boolean;
+    vertical: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    tooltipProps?: Partial<TooltipProps>;
+    getTooltipChildren(value: number, isMinValue: boolean): ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @remarks
+ * \@since 2.5.0
+ * \@since 6.0.0 Internal only component.
+ */
+export declare const SliderThumb: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<SliderThumbProps> & import("react").RefAttributes<HTMLSpanElement>>;