@neynar/ui 0.4.0 → 1.0.0

package/dist/node_modules/@base-ui/react/esm/slider/control/SliderControl.js

@@ -0,0 +1,386 @@
+"use client";
+import * as React from "react";
+import { isElement } from "../../../../../@floating-ui/utils/dist/floating-ui.utils.dom.js";
+import { ownerDocument } from "../../../../utils/esm/owner.js";
+import { useAnimationFrame } from "../../../../utils/esm/useAnimationFrame.js";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useValueAsRef } from "../../../../utils/esm/useValueAsRef.js";
+import { clamp } from "../../utils/clamp.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { useSliderRootContext } from "../root/SliderRootContext.js";
+import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { getMidpoint } from "../utils/getMidpoint.js";
+import { roundValueToStep } from "../utils/roundValueToStep.js";
+import { validateMinimumDistance } from "../utils/validateMinimumDistance.js";
+import { resolveThumbCollision } from "../utils/resolveThumbCollision.js";
+import { trackPress, drag } from "../../utils/reason-parts.js";
+import { contains, activeElement } from "../../floating-ui-react/utils/element.js";
+const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getControlOffset(styles, vertical) {
+  if (!styles) {
+    return {
+      start: 0,
+      end: 0
+    };
+  }
+  function parseSize(value) {
+    const parsed = value != null ? parseFloat(value) : 0;
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  const start = !vertical ? "InlineStart" : "Top";
+  const end = !vertical ? "InlineEnd" : "Bottom";
+  return {
+    start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),
+    end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`])
+  };
+}
+function getFingerCoords(event, touchIdRef) {
+  if (touchIdRef.current != null && event.changedTouches) {
+    const touchEvent = event;
+    for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
+      const touch = touchEvent.changedTouches[i];
+      if (touch.identifier === touchIdRef.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+    return null;
+  }
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+const SliderControl = /* @__PURE__ */ React.forwardRef(function SliderControl2(componentProps, forwardedRef) {
+  const {
+    render: renderProp,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    disabled,
+    dragging,
+    validation,
+    inset,
+    lastChangedValueRef,
+    lastChangeReasonRef,
+    max,
+    min,
+    minStepsBetweenValues,
+    onValueCommitted,
+    orientation,
+    pressedInputRef,
+    pressedThumbCenterOffsetRef,
+    pressedThumbIndexRef,
+    pressedValuesRef,
+    registerFieldControlRef,
+    renderBeforeHydration,
+    setActive,
+    setDragging,
+    setValue,
+    state,
+    step,
+    thumbCollisionBehavior,
+    thumbRefs,
+    values
+  } = useSliderRootContext();
+  const direction = useDirection();
+  const range = values.length > 1;
+  const vertical = orientation === "vertical";
+  const controlRef = React.useRef(null);
+  const stylesRef = React.useRef(null);
+  const setStylesRef = useStableCallback((element2) => {
+    if (element2 && stylesRef.current == null) {
+      if (stylesRef.current == null) {
+        stylesRef.current = getComputedStyle(element2);
+      }
+    }
+  });
+  const touchIdRef = React.useRef(null);
+  const moveCountRef = React.useRef(0);
+  const insetThumbOffsetRef = React.useRef(0);
+  const latestValuesRef = useValueAsRef(values);
+  const updatePressedThumb = useStableCallback((nextIndex) => {
+    if (pressedThumbIndexRef.current !== nextIndex) {
+      pressedThumbIndexRef.current = nextIndex;
+    }
+    const thumbElement = thumbRefs.current[nextIndex];
+    if (!thumbElement) {
+      pressedThumbCenterOffsetRef.current = null;
+      pressedInputRef.current = null;
+      return;
+    }
+    pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
+  });
+  const getFingerState = useStableCallback((fingerCoords) => {
+    const control = controlRef.current;
+    if (!control) {
+      return null;
+    }
+    const {
+      width,
+      height,
+      bottom,
+      left,
+      right
+    } = control.getBoundingClientRect();
+    const controlOffset = getControlOffset(stylesRef.current, vertical);
+    const insetThumbOffset = insetThumbOffsetRef.current;
+    const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - insetThumbOffset * 2;
+    const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
+    const fingerX = fingerCoords.x - thumbCenterOffset;
+    const fingerY = fingerCoords.y - thumbCenterOffset;
+    const valueSize = vertical ? bottom - fingerY - controlOffset.end : (direction === "rtl" ? right - fingerX : fingerX - left) - controlOffset.start;
+    const valueRescaled = clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);
+    let newValue = (max - min) * valueRescaled + min;
+    newValue = roundValueToStep(newValue, step, min);
+    newValue = clamp(newValue, min, max);
+    if (!range) {
+      return {
+        value: newValue,
+        thumbIndex: 0,
+        didSwap: false
+      };
+    }
+    const thumbIndex = pressedThumbIndexRef.current;
+    if (thumbIndex < 0) {
+      return null;
+    }
+    const collisionResult = resolveThumbCollision({
+      behavior: thumbCollisionBehavior,
+      values,
+      currentValues: latestValuesRef.current ?? values,
+      initialValues: pressedValuesRef.current,
+      pressedIndex: thumbIndex,
+      nextValue: newValue,
+      min,
+      max,
+      step,
+      minStepsBetweenValues
+    });
+    if (thumbCollisionBehavior === "swap" && collisionResult.didSwap) {
+      updatePressedThumb(collisionResult.thumbIndex);
+    } else {
+      pressedThumbIndexRef.current = collisionResult.thumbIndex;
+    }
+    return collisionResult;
+  });
+  const startPressing = useStableCallback((fingerCoords) => {
+    pressedValuesRef.current = range ? values.slice() : null;
+    latestValuesRef.current = values;
+    const pressedThumbIndex = pressedThumbIndexRef.current;
+    let closestThumbIndex = pressedThumbIndex;
+    if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
+      if (values[pressedThumbIndex] === max) {
+        let candidateIndex = pressedThumbIndex;
+        while (candidateIndex > 0 && values[candidateIndex - 1] === max) {
+          candidateIndex -= 1;
+        }
+        closestThumbIndex = candidateIndex;
+      }
+    } else {
+      const axis = !vertical ? "x" : "y";
+      let minDistance;
+      closestThumbIndex = -1;
+      for (let i = 0; i < thumbRefs.current.length; i += 1) {
+        const thumbEl = thumbRefs.current[i];
+        if (isElement(thumbEl)) {
+          const midpoint = getMidpoint(thumbEl);
+          const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
+          if (minDistance === void 0 || distance <= minDistance) {
+            closestThumbIndex = i;
+            minDistance = distance;
+          }
+        }
+      }
+    }
+    if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
+      updatePressedThumb(closestThumbIndex);
+    }
+    if (inset) {
+      const thumbEl = thumbRefs.current[closestThumbIndex];
+      if (isElement(thumbEl)) {
+        const thumbRect = thumbEl.getBoundingClientRect();
+        const side = !vertical ? "width" : "height";
+        insetThumbOffsetRef.current = thumbRect[side] / 2;
+      }
+    }
+  });
+  const focusThumb = useStableCallback((thumbIndex) => {
+    thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]')?.focus({
+      preventScroll: true
+    });
+  });
+  const handleTouchMove = useStableCallback((nativeEvent) => {
+    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+    if (fingerCoords == null) {
+      return;
+    }
+    moveCountRef.current += 1;
+    if (nativeEvent.type === "pointermove" && nativeEvent.buttons === 0) {
+      handleTouchEnd(nativeEvent);
+      return;
+    }
+    const finger = getFingerState(fingerCoords);
+    if (finger == null) {
+      return;
+    }
+    if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {
+      if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+        setDragging(true);
+      }
+      setValue(finger.value, createChangeEventDetails(drag, nativeEvent, void 0, {
+        activeThumbIndex: finger.thumbIndex
+      }));
+      latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
+      if (finger.didSwap) {
+        focusThumb(finger.thumbIndex);
+      }
+    }
+  });
+  function handleTouchEnd(nativeEvent) {
+    setActive(-1);
+    setDragging(false);
+    pressedInputRef.current = null;
+    pressedThumbCenterOffsetRef.current = null;
+    pressedThumbIndexRef.current = -1;
+    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+    const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
+    if (finger != null) {
+      const commitReason = lastChangeReasonRef.current;
+      validation.commit(lastChangedValueRef.current ?? finger.value);
+      onValueCommitted(lastChangedValueRef.current ?? finger.value, createGenericEventDetails(commitReason, nativeEvent));
+    }
+    if ("pointerType" in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
+      controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
+    }
+    touchIdRef.current = null;
+    pressedValuesRef.current = null;
+    stopListening();
+  }
+  const handleTouchStart = useStableCallback((nativeEvent) => {
+    if (disabled) {
+      return;
+    }
+    const touch = nativeEvent.changedTouches[0];
+    if (touch != null) {
+      touchIdRef.current = touch.identifier;
+    }
+    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+    if (fingerCoords != null) {
+      startPressing(fingerCoords);
+      const finger = getFingerState(fingerCoords);
+      if (finger == null) {
+        return;
+      }
+      focusThumb(finger.thumbIndex);
+      setValue(finger.value, createChangeEventDetails(trackPress, nativeEvent, void 0, {
+        activeThumbIndex: finger.thumbIndex
+      }));
+      latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
+      if (finger.didSwap) {
+        focusThumb(finger.thumbIndex);
+      }
+    }
+    moveCountRef.current = 0;
+    const doc = ownerDocument(controlRef.current);
+    doc.addEventListener("touchmove", handleTouchMove, {
+      passive: true
+    });
+    doc.addEventListener("touchend", handleTouchEnd, {
+      passive: true
+    });
+  });
+  const stopListening = useStableCallback(() => {
+    const doc = ownerDocument(controlRef.current);
+    doc.removeEventListener("pointermove", handleTouchMove);
+    doc.removeEventListener("pointerup", handleTouchEnd);
+    doc.removeEventListener("touchmove", handleTouchMove);
+    doc.removeEventListener("touchend", handleTouchEnd);
+    pressedValuesRef.current = null;
+  });
+  const focusFrame = useAnimationFrame();
+  React.useEffect(() => {
+    const control = controlRef.current;
+    if (!control) {
+      return () => stopListening();
+    }
+    control.addEventListener("touchstart", handleTouchStart, {
+      passive: true
+    });
+    return () => {
+      control.removeEventListener("touchstart", handleTouchStart);
+      focusFrame.cancel();
+      stopListening();
+    };
+  }, [stopListening, handleTouchStart, controlRef, focusFrame]);
+  React.useEffect(() => {
+    if (disabled) {
+      stopListening();
+    }
+  }, [disabled, stopListening]);
+  const element = useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, registerFieldControlRef, controlRef, setStylesRef],
+    props: [{
+      ["data-base-ui-slider-control"]: renderBeforeHydration ? "" : void 0,
+      onPointerDown(event) {
+        const control = controlRef.current;
+        if (!control || disabled || event.defaultPrevented || !isElement(event.target) || // Only handle left clicks
+        event.button !== 0) {
+          return;
+        }
+        const fingerCoords = getFingerCoords(event, touchIdRef);
+        if (fingerCoords != null) {
+          startPressing(fingerCoords);
+          const finger = getFingerState(fingerCoords);
+          if (finger == null) {
+            return;
+          }
+          const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));
+          if (pressedOnFocusedThumb) {
+            event.preventDefault();
+          } else {
+            focusFrame.request(() => {
+              focusThumb(finger.thumbIndex);
+            });
+          }
+          setDragging(true);
+          const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
+          if (!pressedOnAnyThumb) {
+            setValue(finger.value, createChangeEventDetails(trackPress, event.nativeEvent, void 0, {
+              activeThumbIndex: finger.thumbIndex
+            }));
+            latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
+            if (finger.didSwap) {
+              focusThumb(finger.thumbIndex);
+            }
+          }
+        }
+        if (event.nativeEvent.pointerId) {
+          control.setPointerCapture(event.nativeEvent.pointerId);
+        }
+        moveCountRef.current = 0;
+        const doc = ownerDocument(controlRef.current);
+        doc.addEventListener("pointermove", handleTouchMove, {
+          passive: true
+        });
+        doc.addEventListener("pointerup", handleTouchEnd, {
+          once: true
+        });
+      },
+      tabIndex: -1
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SliderControl.displayName = "SliderControl";
+export {
+  SliderControl
+};
+//# sourceMappingURL=SliderControl.js.map

package/dist/node_modules/@base-ui/react/esm/slider/control/SliderControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderControl.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/slider/control/SliderControl.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { isElement } from '@floating-ui/utils/dom';\nimport { ownerDocument } from '@base-ui/utils/owner';\nimport { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useValueAsRef } from '@base-ui/utils/useValueAsRef';\nimport { activeElement, contains } from \"../../floating-ui-react/utils.js\";\nimport { clamp } from \"../../utils/clamp.js\";\nimport { createChangeEventDetails, createGenericEventDetails } from \"../../utils/createBaseUIEventDetails.js\";\nimport { REASONS } from \"../../utils/reasons.js\";\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { useDirection } from \"../../direction-provider/DirectionContext.js\";\nimport { useSliderRootContext } from \"../root/SliderRootContext.js\";\nimport { sliderStateAttributesMapping } from \"../root/stateAttributesMapping.js\";\nimport { getMidpoint } from \"../utils/getMidpoint.js\";\nimport { roundValueToStep } from \"../utils/roundValueToStep.js\";\nimport { validateMinimumDistance } from \"../utils/validateMinimumDistance.js\";\nimport { resolveThumbCollision } from \"../utils/resolveThumbCollision.js\";\nconst INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;\nfunction getControlOffset(styles, vertical) {\n  if (!styles) {\n    return {\n      start: 0,\n      end: 0\n    };\n  }\n  function parseSize(value) {\n    const parsed = value != null ? parseFloat(value) : 0;\n    return Number.isNaN(parsed) ? 0 : parsed;\n  }\n  const start = !vertical ? 'InlineStart' : 'Top';\n  const end = !vertical ? 'InlineEnd' : 'Bottom';\n  return {\n    start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),\n    end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`])\n  };\n}\nfunction getFingerCoords(event, touchIdRef) {\n  // The event is TouchEvent\n  if (touchIdRef.current != null && event.changedTouches) {\n    const touchEvent = event;\n    for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {\n      const touch = touchEvent.changedTouches[i];\n      if (touch.identifier === touchIdRef.current) {\n        return {\n          x: touch.clientX,\n          y: touch.clientY\n        };\n      }\n    }\n    return null;\n  }\n\n  // The event is PointerEvent\n  return {\n    x: event.clientX,\n    y: event.clientY\n  };\n}\n\n/**\n * The clickable, interactive part of the slider.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)\n */\nexport const SliderControl = /*#__PURE__*/React.forwardRef(function SliderControl(componentProps, forwardedRef) {\n  const {\n    render: renderProp,\n    className,\n    ...elementProps\n  } = componentProps;\n  const {\n    disabled,\n    dragging,\n    validation,\n    inset,\n    lastChangedValueRef,\n    lastChangeReasonRef,\n    max,\n    min,\n    minStepsBetweenValues,\n    onValueCommitted,\n    orientation,\n    pressedInputRef,\n    pressedThumbCenterOffsetRef,\n    pressedThumbIndexRef,\n    pressedValuesRef,\n    registerFieldControlRef,\n    renderBeforeHydration,\n    setActive,\n    setDragging,\n    setValue,\n    state,\n    step,\n    thumbCollisionBehavior,\n    thumbRefs,\n    values\n  } = useSliderRootContext();\n  const direction = useDirection();\n  const range = values.length > 1;\n  const vertical = orientation === 'vertical';\n  const controlRef = React.useRef(null);\n  const stylesRef = React.useRef(null);\n  const setStylesRef = useStableCallback(element => {\n    if (element && stylesRef.current == null) {\n      if (stylesRef.current == null) {\n        stylesRef.current = getComputedStyle(element);\n      }\n    }\n  });\n\n  // A number that uniquely identifies the current finger in the touch session.\n  const touchIdRef = React.useRef(null);\n  // The number of touch/pointermove events that have fired.\n  const moveCountRef = React.useRef(0);\n  // The offset amount to each side of the control for inset sliders.\n  // This value should be equal to the radius or half the width/height of the thumb.\n  const insetThumbOffsetRef = React.useRef(0);\n  const latestValuesRef = useValueAsRef(values);\n  const updatePressedThumb = useStableCallback(nextIndex => {\n    if (pressedThumbIndexRef.current !== nextIndex) {\n      pressedThumbIndexRef.current = nextIndex;\n    }\n    const thumbElement = thumbRefs.current[nextIndex];\n    if (!thumbElement) {\n      pressedThumbCenterOffsetRef.current = null;\n      pressedInputRef.current = null;\n      return;\n    }\n    pressedInputRef.current = thumbElement.querySelector('input[type=\"range\"]');\n  });\n  const getFingerState = useStableCallback(fingerCoords => {\n    const control = controlRef.current;\n    if (!control) {\n      return null;\n    }\n    const {\n      width,\n      height,\n      bottom,\n      left,\n      right\n    } = control.getBoundingClientRect();\n    const controlOffset = getControlOffset(stylesRef.current, vertical);\n    const insetThumbOffset = insetThumbOffsetRef.current;\n    const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - insetThumbOffset * 2;\n    const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;\n    const fingerX = fingerCoords.x - thumbCenterOffset;\n    const fingerY = fingerCoords.y - thumbCenterOffset;\n    const valueSize = vertical ? bottom - fingerY - controlOffset.end : (direction === 'rtl' ? right - fingerX : fingerX - left) - controlOffset.start;\n    // the value at the finger origin scaled down to fit the range [0, 1]\n    const valueRescaled = clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);\n    let newValue = (max - min) * valueRescaled + min;\n    newValue = roundValueToStep(newValue, step, min);\n    newValue = clamp(newValue, min, max);\n    if (!range) {\n      return {\n        value: newValue,\n        thumbIndex: 0,\n        didSwap: false\n      };\n    }\n    const thumbIndex = pressedThumbIndexRef.current;\n    if (thumbIndex < 0) {\n      return null;\n    }\n    const collisionResult = resolveThumbCollision({\n      behavior: thumbCollisionBehavior,\n      values,\n      currentValues: latestValuesRef.current ?? values,\n      initialValues: pressedValuesRef.current,\n      pressedIndex: thumbIndex,\n      nextValue: newValue,\n      min,\n      max,\n      step,\n      minStepsBetweenValues\n    });\n    if (thumbCollisionBehavior === 'swap' && collisionResult.didSwap) {\n      updatePressedThumb(collisionResult.thumbIndex);\n    } else {\n      pressedThumbIndexRef.current = collisionResult.thumbIndex;\n    }\n    return collisionResult;\n  });\n  const startPressing = useStableCallback(fingerCoords => {\n    pressedValuesRef.current = range ? values.slice() : null;\n    latestValuesRef.current = values;\n    const pressedThumbIndex = pressedThumbIndexRef.current;\n    let closestThumbIndex = pressedThumbIndex;\n    if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {\n      if (values[pressedThumbIndex] === max) {\n        let candidateIndex = pressedThumbIndex;\n        while (candidateIndex > 0 && values[candidateIndex - 1] === max) {\n          candidateIndex -= 1;\n        }\n        closestThumbIndex = candidateIndex;\n      }\n    } else {\n      // pressed on control\n      const axis = !vertical ? 'x' : 'y';\n      let minDistance;\n      closestThumbIndex = -1;\n      for (let i = 0; i < thumbRefs.current.length; i += 1) {\n        const thumbEl = thumbRefs.current[i];\n        if (isElement(thumbEl)) {\n          const midpoint = getMidpoint(thumbEl);\n          const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);\n          if (minDistance === undefined || distance <= minDistance) {\n            closestThumbIndex = i;\n            minDistance = distance;\n          }\n        }\n      }\n    }\n    if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {\n      updatePressedThumb(closestThumbIndex);\n    }\n    if (inset) {\n      const thumbEl = thumbRefs.current[closestThumbIndex];\n      if (isElement(thumbEl)) {\n        const thumbRect = thumbEl.getBoundingClientRect();\n        const side = !vertical ? 'width' : 'height';\n        insetThumbOffsetRef.current = thumbRect[side] / 2;\n      }\n    }\n  });\n  const focusThumb = useStableCallback(thumbIndex => {\n    thumbRefs.current?.[thumbIndex]?.querySelector('input[type=\"range\"]')?.focus({\n      preventScroll: true\n    });\n  });\n  const handleTouchMove = useStableCallback(nativeEvent => {\n    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);\n    if (fingerCoords == null) {\n      return;\n    }\n    moveCountRef.current += 1;\n\n    // Cancel move in case some other element consumed a pointerup event and it was not fired.\n    if (nativeEvent.type === 'pointermove' && nativeEvent.buttons === 0) {\n      handleTouchEnd(nativeEvent);\n      return;\n    }\n    const finger = getFingerState(fingerCoords);\n    if (finger == null) {\n      return;\n    }\n    if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {\n      if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {\n        setDragging(true);\n      }\n      setValue(finger.value, createChangeEventDetails(REASONS.drag, nativeEvent, undefined, {\n        activeThumbIndex: finger.thumbIndex\n      }));\n      latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];\n      if (finger.didSwap) {\n        focusThumb(finger.thumbIndex);\n      }\n    }\n  });\n  function handleTouchEnd(nativeEvent) {\n    setActive(-1);\n    setDragging(false);\n    pressedInputRef.current = null;\n    pressedThumbCenterOffsetRef.current = null;\n    pressedThumbIndexRef.current = -1;\n    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);\n    const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;\n    if (finger != null) {\n      const commitReason = lastChangeReasonRef.current;\n      validation.commit(lastChangedValueRef.current ?? finger.value);\n      onValueCommitted(lastChangedValueRef.current ?? finger.value, createGenericEventDetails(commitReason, nativeEvent));\n    }\n    if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {\n      controlRef.current?.releasePointerCapture(nativeEvent.pointerId);\n    }\n    touchIdRef.current = null;\n    pressedValuesRef.current = null;\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    stopListening();\n  }\n  const handleTouchStart = useStableCallback(nativeEvent => {\n    if (disabled) {\n      return;\n    }\n    const touch = nativeEvent.changedTouches[0];\n    if (touch != null) {\n      touchIdRef.current = touch.identifier;\n    }\n    const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);\n    if (fingerCoords != null) {\n      startPressing(fingerCoords);\n      const finger = getFingerState(fingerCoords);\n      if (finger == null) {\n        return;\n      }\n      focusThumb(finger.thumbIndex);\n      setValue(finger.value, createChangeEventDetails(REASONS.trackPress, nativeEvent, undefined, {\n        activeThumbIndex: finger.thumbIndex\n      }));\n      latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];\n      if (finger.didSwap) {\n        focusThumb(finger.thumbIndex);\n      }\n    }\n    moveCountRef.current = 0;\n    const doc = ownerDocument(controlRef.current);\n    doc.addEventListener('touchmove', handleTouchMove, {\n      passive: true\n    });\n    doc.addEventListener('touchend', handleTouchEnd, {\n      passive: true\n    });\n  });\n  const stopListening = useStableCallback(() => {\n    const doc = ownerDocument(controlRef.current);\n    doc.removeEventListener('pointermove', handleTouchMove);\n    doc.removeEventListener('pointerup', handleTouchEnd);\n    doc.removeEventListener('touchmove', handleTouchMove);\n    doc.removeEventListener('touchend', handleTouchEnd);\n    pressedValuesRef.current = null;\n  });\n  const focusFrame = useAnimationFrame();\n  React.useEffect(() => {\n    const control = controlRef.current;\n    if (!control) {\n      return () => stopListening();\n    }\n    control.addEventListener('touchstart', handleTouchStart, {\n      passive: true\n    });\n    return () => {\n      control.removeEventListener('touchstart', handleTouchStart);\n      focusFrame.cancel();\n      stopListening();\n    };\n  }, [stopListening, handleTouchStart, controlRef, focusFrame]);\n  React.useEffect(() => {\n    if (disabled) {\n      stopListening();\n    }\n  }, [disabled, stopListening]);\n  const element = useRenderElement('div', componentProps, {\n    state,\n    ref: [forwardedRef, registerFieldControlRef, controlRef, setStylesRef],\n    props: [{\n      ['data-base-ui-slider-control']: renderBeforeHydration ? '' : undefined,\n      onPointerDown(event) {\n        const control = controlRef.current;\n        if (!control || disabled || event.defaultPrevented || !isElement(event.target) ||\n        // Only handle left clicks\n        event.button !== 0) {\n          return;\n        }\n        const fingerCoords = getFingerCoords(event, touchIdRef);\n        if (fingerCoords != null) {\n          startPressing(fingerCoords);\n          const finger = getFingerState(fingerCoords);\n          if (finger == null) {\n            return;\n          }\n          const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));\n          if (pressedOnFocusedThumb) {\n            event.preventDefault();\n          } else {\n            focusFrame.request(() => {\n              focusThumb(finger.thumbIndex);\n            });\n          }\n          setDragging(true);\n          const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;\n          if (!pressedOnAnyThumb) {\n            setValue(finger.value, createChangeEventDetails(REASONS.trackPress, event.nativeEvent, undefined, {\n              activeThumbIndex: finger.thumbIndex\n            }));\n            latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];\n            if (finger.didSwap) {\n              focusThumb(finger.thumbIndex);\n            }\n          }\n        }\n        if (event.nativeEvent.pointerId) {\n          control.setPointerCapture(event.nativeEvent.pointerId);\n        }\n        moveCountRef.current = 0;\n        const doc = ownerDocument(controlRef.current);\n        doc.addEventListener('pointermove', handleTouchMove, {\n          passive: true\n        });\n        doc.addEventListener('pointerup', handleTouchEnd, {\n          once: true\n        });\n      },\n      tabIndex: -1\n    }, elementProps],\n    stateAttributesMapping: sliderStateAttributesMapping\n  });\n  return element;\n});\nif (process.env.NODE_ENV !== \"production\") SliderControl.displayName = \"SliderControl\";"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA;AACA;AACE;AACE;AAAO;AACE;AACF;AACX;AAEE;AACE;AACA;AAAkC;AAEpC;AACA;AACA;AAAO;AACgF;AACN;AAEnF;AACA;AAEE;AACE;AACA;AACE;AACA;AACE;AAAO;AACI;AACA;AACnB;AACM;AAEF;AAAO;AAIT;AAAO;AACI;AACA;AAEb;AAQY;AACV;AAAM;AACI;AACR;AACG;AAEL;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACA;AACA;AACA;AACA;AACA;AACE;AACE;AACE;AAA4C;AAC9C;AACF;AAIF;AAEA;AAGA;AACA;AACA;AACE;AACE;AAA+B;AAEjC;AACA;AACE;AACA;AACA;AAAA;AAEF;AAA0E;AAE5E;AACE;AACA;AACE;AAAO;AAET;AAAM;AACJ;AACA;AACA;AACA;AACA;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACE;AAAO;AACE;AACK;AACH;AACjB;AAEI;AACA;AACE;AAAO;AAET;AAA8C;AAClC;AACV;AAC0C;AACV;AAClB;AACH;AACX;AACA;AACA;AACA;AAEF;AACE;AAA6C;AAE7C;AAA+C;AAEjD;AAAO;AAET;AACE;AACA;AACA;AACA;AACA;AACE;AACE;AACA;AACE;AAAkB;AAEpB;AAAoB;AACtB;AAGA;AACA;AACA;AACA;AACE;AACA;AACE;AACA;AACA;AACE;AACA;AAAc;AAChB;AACF;AACF;AAEF;AACE;AAAoC;AAEtC;AACE;AACA;AACE;AACA;AACA;AAAgD;AAClD;AACF;AAEF;AACE;AAA6E;AAC5D;AAChB;AAEH;AACE;AACA;AACE;AAAA;AAEF;AAGA;AACE;AACA;AAAA;AAEF;AACA;AACE;AAAA;AAEF;AACE;AACE;AAAgB;AAElB;AAAsF;AAC3D;AAE3B;AACA;AACE;AAA4B;AAC9B;AACF;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AACA;AACA;AAAkH;AAEpH;AACE;AAA+D;AAEjE;AACA;AAEA;AAAa;AAEf;AACE;AACE;AAAA;AAEF;AACA;AACE;AAA2B;AAE7B;AACA;AACE;AACA;AACA;AACE;AAAA;AAEF;AACA;AAA4F;AACjE;AAE3B;AACA;AACE;AAA4B;AAC9B;AAEF;AACA;AACA;AAAmD;AACxC;AAEX;AAAiD;AACtC;AACV;AAEH;AACE;AACA;AACA;AACA;AACA;AACA;AAA2B;AAE7B;AACA;AACE;AACA;AACE;AAA0B;AAE5B;AAAyD;AAC9C;AAEX;AACE;AACA;AACA;AAAa;AACf;AAEF;AACE;AACE;AAAa;AACf;AAEF;AAAwD;AACtD;AACqE;AAC7D;AACwD;AAE5D;AACA;AAA6E;AAG3E;AAAA;AAEF;AACA;AACE;AACA;AACA;AACE;AAAA;AAEF;AACA;AACE;AAAoB;AAEpB;AACE;AAA4B;AAC7B;AAEH;AACA;AACA;AACE;AAAkG;AACvE;AAE3B;AACA;AACE;AAA4B;AAC9B;AACF;AAEF;AACE;AAAqD;AAEvD;AACA;AACA;AAAqD;AAC1C;AAEX;AAAkD;AAC1C;AACP;AACH;AACU;AACG;AACS;AAE1B;AACF;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/slider/indicator/SliderIndicator.js

@@ -0,0 +1,84 @@
+"use client";
+import * as React from "react";
+import { useOnMount } from "../../../../utils/esm/useOnMount.js";
+import { valueToPercent } from "../../utils/valueToPercent.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useSliderRootContext } from "../root/SliderRootContext.js";
+import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
+function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+  const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
+  const startEdge = vertical ? "bottom" : "insetInlineStart";
+  const mainSide = vertical ? "height" : "width";
+  const crossSide = vertical ? "width" : "height";
+  const styles = {
+    visibility: renderBeforeHydration && !mounted ? "hidden" : visibility,
+    position: vertical ? "absolute" : "relative",
+    [crossSide]: "inherit"
+  };
+  styles["--start-position"] = `${start ?? 0}%`;
+  if (!range) {
+    styles[startEdge] = 0;
+    styles[mainSide] = "var(--start-position)";
+    return styles;
+  }
+  styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
+  styles[startEdge] = "var(--start-position)";
+  styles[mainSide] = "var(--relative-size)";
+  return styles;
+}
+function getCenteredStyles(vertical, range, start, end) {
+  const startEdge = vertical ? "bottom" : "insetInlineStart";
+  const mainSide = vertical ? "height" : "width";
+  const crossSide = vertical ? "width" : "height";
+  const styles = {
+    position: vertical ? "absolute" : "relative",
+    [crossSide]: "inherit"
+  };
+  if (!range) {
+    styles[startEdge] = 0;
+    styles[mainSide] = `${start}%`;
+    return styles;
+  }
+  const size = end - start;
+  styles[startEdge] = `${start}%`;
+  styles[mainSide] = `${size}%`;
+  return styles;
+}
+const SliderIndicator = /* @__PURE__ */ React.forwardRef(function SliderIndicator2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    indicatorPosition,
+    inset,
+    max,
+    min,
+    orientation,
+    renderBeforeHydration,
+    state,
+    values
+  } = useSliderRootContext();
+  const [isMounted, setIsMounted] = React.useState(false);
+  useOnMount(() => setIsMounted(true));
+  const vertical = orientation === "vertical";
+  const range = values.length > 1;
+  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isMounted) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
+  const element = useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      ["data-base-ui-slider-indicator"]: renderBeforeHydration ? "" : void 0,
+      style,
+      suppressHydrationWarning: renderBeforeHydration || void 0
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SliderIndicator.displayName = "SliderIndicator";
+export {
+  SliderIndicator
+};
+//# sourceMappingURL=SliderIndicator.js.map

package/dist/node_modules/@base-ui/react/esm/slider/indicator/SliderIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderIndicator.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/slider/indicator/SliderIndicator.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOnMount } from '@base-ui/utils/useOnMount';\nimport { valueToPercent } from \"../../utils/valueToPercent.js\";\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { useSliderRootContext } from \"../root/SliderRootContext.js\";\nimport { sliderStateAttributesMapping } from \"../root/stateAttributesMapping.js\";\nfunction getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {\n  const visibility = start === undefined || range && end === undefined ? 'hidden' : undefined;\n  const startEdge = vertical ? 'bottom' : 'insetInlineStart';\n  const mainSide = vertical ? 'height' : 'width';\n  const crossSide = vertical ? 'width' : 'height';\n  const styles = {\n    visibility: renderBeforeHydration && !mounted ? 'hidden' : visibility,\n    position: vertical ? 'absolute' : 'relative',\n    [crossSide]: 'inherit'\n  };\n  styles['--start-position'] = `${start ?? 0}%`;\n  if (!range) {\n    styles[startEdge] = 0;\n    styles[mainSide] = 'var(--start-position)';\n    return styles;\n  }\n  styles['--relative-size'] = `${(end ?? 0) - (start ?? 0)}%`;\n  styles[startEdge] = 'var(--start-position)';\n  styles[mainSide] = 'var(--relative-size)';\n  return styles;\n}\nfunction getCenteredStyles(vertical, range, start, end) {\n  const startEdge = vertical ? 'bottom' : 'insetInlineStart';\n  const mainSide = vertical ? 'height' : 'width';\n  const crossSide = vertical ? 'width' : 'height';\n  const styles = {\n    position: vertical ? 'absolute' : 'relative',\n    [crossSide]: 'inherit'\n  };\n  if (!range) {\n    styles[startEdge] = 0;\n    styles[mainSide] = `${start}%`;\n    return styles;\n  }\n  const size = end - start;\n  styles[startEdge] = `${start}%`;\n  styles[mainSide] = `${size}%`;\n  return styles;\n}\n\n/**\n * Visualizes the current value of the slider.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)\n */\nexport const SliderIndicator = /*#__PURE__*/React.forwardRef(function SliderIndicator(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    ...elementProps\n  } = componentProps;\n  const {\n    indicatorPosition,\n    inset,\n    max,\n    min,\n    orientation,\n    renderBeforeHydration,\n    state,\n    values\n  } = useSliderRootContext();\n  const [isMounted, setIsMounted] = React.useState(false);\n  useOnMount(() => setIsMounted(true));\n  const vertical = orientation === 'vertical';\n  const range = values.length > 1;\n  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isMounted) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));\n  const element = useRenderElement('div', componentProps, {\n    state,\n    ref: forwardedRef,\n    props: [{\n      ['data-base-ui-slider-indicator']: renderBeforeHydration ? '' : undefined,\n      style,\n      suppressHydrationWarning: renderBeforeHydration || undefined\n    }, elementProps],\n    stateAttributesMapping: sliderStateAttributesMapping\n  });\n  return element;\n});\nif (process.env.NODE_ENV !== \"production\") SliderIndicator.displayName = \"SliderIndicator\";"],"names":[],"mappings":";;;;;;;AAQA;AACE;AACA;AACA;AACA;AACA;AAAe;AAC8C;AACzB;AACrB;AAEf;AACA;AACE;AACA;AACA;AAAO;AAET;AACA;AACA;AACA;AACF;AACA;AACE;AACA;AACA;AACA;AAAe;AACqB;AACrB;AAEf;AACE;AACA;AACA;AAAO;AAET;AACA;AACA;AACA;AACF;AAQY;AACV;AAAM;AACJ;AACA;AACG;AAEL;AAAM;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACA;AACA;AACA;AACA;AACA;AAAwD;AACtD;AACK;AACG;AAC0D;AAChE;AACmD;AACtC;AACS;AAE1B;AACF;AACA;;;;","x_google_ignoreList":[0]}