@neynar/ui 0.4.0 → 0.5.0

package/dist/node_modules/@base-ui/react/esm/slider/root/SliderRoot.js

@@ -0,0 +1,272 @@
+"use client";
+import * as React from "react";
+import { ownerDocument } from "../../../../utils/esm/owner.js";
+import { useControlled } from "../../../../utils/esm/useControlled.js";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useValueAsRef } from "../../../../utils/esm/useValueAsRef.js";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { warn } from "../../../../utils/esm/warn.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { useValueChanged } from "../../utils/useValueChanged.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { clamp } from "../../utils/clamp.js";
+import { areArraysEqual } from "../../utils/areArraysEqual.js";
+import { CompositeList } from "../../composite/list/CompositeList.js";
+import { useField } from "../../field/useField.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useFormContext } from "../../form/FormContext.js";
+import { useLabelableContext } from "../../labelable-provider/LabelableContext.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 { jsx } from "react/jsx-runtime";
+import { activeElement } from "../../floating-ui-react/utils/element.js";
+import { none, keyboard, inputChange } from "../../utils/reason-parts.js";
+function getSliderChangeEventReason(event2) {
+  return "key" in event2 ? keyboard : 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;
+}
+const SliderRoot = /* @__PURE__ */ React.forwardRef(function SliderRoot2(componentProps, forwardedRef) {
+  const {
+    "aria-labelledby": ariaLabelledByProp,
+    className,
+    defaultValue,
+    disabled: disabledProp = false,
+    id: idProp,
+    format,
+    largeStep = 10,
+    locale,
+    render,
+    max = 100,
+    min = 0,
+    minStepsBetweenValues = 0,
+    name: nameProp,
+    onValueChange: onValueChangeProp,
+    onValueCommitted: onValueCommittedProp,
+    orientation = "horizontal",
+    step = 1,
+    thumbCollisionBehavior = "push",
+    thumbAlignment = "center",
+    value: valueProp,
+    ...elementProps
+  } = componentProps;
+  const id = useBaseUiId(idProp);
+  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
+  } = useLabelableContext();
+  const ariaLabelledby = ariaLabelledByProp ?? labelId;
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  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([]);
+  const pressedInputRef = React.useRef(null);
+  const pressedThumbCenterOffsetRef = React.useRef(null);
+  const pressedThumbIndexRef = React.useRef(-1);
+  const pressedValuesRef = React.useRef(null);
+  const lastChangedValueRef = React.useRef(null);
+  const lastChangeReasonRef = React.useRef("none");
+  const formatOptionsRef = useValueAsRef(format);
+  const [active, setActiveState] = React.useState(-1);
+  const [lastUsedThumbIndex, setLastUsedThumbIndex] = React.useState(-1);
+  const [dragging, setDragging] = React.useState(false);
+  const [thumbMap, setThumbMap] = React.useState(() => /* @__PURE__ */ new Map());
+  const [indicatorPosition, setIndicatorPosition] = React.useState([void 0, void 0]);
+  const setActive = useStableCallback((value) => {
+    setActiveState(value);
+    if (value !== -1) {
+      setLastUsedThumbIndex(value);
+    }
+  });
+  useField({
+    id,
+    commit: validation.commit,
+    value: valueUnwrapped,
+    controlRef,
+    name,
+    getValue: () => 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((element2) => {
+    if (element2) {
+      controlRef.current = element2;
+    }
+  });
+  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(none, void 0, void 0, {
+      activeThumbIndex: -1
+    });
+    lastChangeReasonRef.current = changeDetails.reason;
+    const clonedEvent = new event.constructor(event.type, event);
+    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, event2) => {
+    const newValue = getSliderValue(valueInput, index, min, max, range, values);
+    if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
+      const reason = getSliderChangeEventReason(event2);
+      setValue(newValue, createChangeEventDetails(reason, event2.nativeEvent, void 0, {
+        activeThumbIndex: index
+      }));
+      setTouched(true);
+      const nextValue = lastChangedValueRef.current ?? newValue;
+      onValueCommitted(nextValue, createGenericEventDetails(reason, event2.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 && activeEl && sliderRef.current?.contains(activeEl)) {
+      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,
+    largeStep,
+    lastUsedThumbIndex,
+    lastChangedValueRef,
+    lastChangeReasonRef,
+    locale,
+    max,
+    min,
+    minStepsBetweenValues,
+    name,
+    onValueCommitted,
+    orientation,
+    pressedInputRef,
+    pressedThumbCenterOffsetRef,
+    pressedThumbIndexRef,
+    pressedValuesRef,
+    registerFieldControlRef,
+    renderBeforeHydration: thumbAlignment === "edge",
+    setActive,
+    setDragging,
+    setIndicatorPosition,
+    setValue,
+    state,
+    step,
+    thumbCollisionBehavior,
+    thumbMap,
+    thumbRefs,
+    values
+  }), [active, controlRef, ariaLabelledby, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, 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";
+export {
+  SliderRoot
+};
+//# sourceMappingURL=SliderRoot.js.map

package/dist/node_modules/@base-ui/react/esm/slider/root/SliderRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRoot.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/slider/root/SliderRoot.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ownerDocument } from '@base-ui/utils/owner';\nimport { useControlled } from '@base-ui/utils/useControlled';\nimport { useStableCallback } from '@base-ui/utils/useStableCallback';\nimport { useValueAsRef } from '@base-ui/utils/useValueAsRef';\nimport { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';\nimport { warn } from '@base-ui/utils/warn';\nimport { createChangeEventDetails, createGenericEventDetails } from \"../../utils/createBaseUIEventDetails.js\";\nimport { useValueChanged } from \"../../utils/useValueChanged.js\";\nimport { useBaseUiId } from \"../../utils/useBaseUiId.js\";\nimport { useRenderElement } from \"../../utils/useRenderElement.js\";\nimport { clamp } from \"../../utils/clamp.js\";\nimport { areArraysEqual } from \"../../utils/areArraysEqual.js\";\nimport { activeElement } from \"../../floating-ui-react/utils.js\";\nimport { CompositeList } from \"../../composite/list/CompositeList.js\";\nimport { useField } from \"../../field/useField.js\";\nimport { useFieldRootContext } from \"../../field/root/FieldRootContext.js\";\nimport { useFormContext } from \"../../form/FormContext.js\";\nimport { useLabelableContext } from \"../../labelable-provider/LabelableContext.js\";\nimport { asc } from \"../utils/asc.js\";\nimport { getSliderValue } from \"../utils/getSliderValue.js\";\nimport { validateMinimumDistance } from \"../utils/validateMinimumDistance.js\";\nimport { sliderStateAttributesMapping } from \"./stateAttributesMapping.js\";\nimport { SliderRootContext } from \"./SliderRootContext.js\";\nimport { REASONS } from \"../../utils/reasons.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction getSliderChangeEventReason(event) {\n  return 'key' in event ? REASONS.keyboard : REASONS.inputChange;\n}\nfunction areValuesEqual(newValue, oldValue) {\n  if (typeof newValue === 'number' && typeof oldValue === 'number') {\n    return newValue === oldValue;\n  }\n  if (Array.isArray(newValue) && Array.isArray(oldValue)) {\n    return areArraysEqual(newValue, oldValue);\n  }\n  return false;\n}\n\n/**\n * Groups all parts of the slider.\n * Renders a `<div>` element.\n *\n * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)\n */\nexport const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(componentProps, forwardedRef) {\n  const {\n    'aria-labelledby': ariaLabelledByProp,\n    className,\n    defaultValue,\n    disabled: disabledProp = false,\n    id: idProp,\n    format,\n    largeStep = 10,\n    locale,\n    render,\n    max = 100,\n    min = 0,\n    minStepsBetweenValues = 0,\n    name: nameProp,\n    onValueChange: onValueChangeProp,\n    onValueCommitted: onValueCommittedProp,\n    orientation = 'horizontal',\n    step = 1,\n    thumbCollisionBehavior = 'push',\n    thumbAlignment = 'center',\n    value: valueProp,\n    ...elementProps\n  } = componentProps;\n  const id = useBaseUiId(idProp);\n  const onValueChange = useStableCallback(onValueChangeProp);\n  const onValueCommitted = useStableCallback(onValueCommittedProp);\n  const {\n    clearErrors\n  } = useFormContext();\n  const {\n    state: fieldState,\n    disabled: fieldDisabled,\n    name: fieldName,\n    setTouched,\n    setDirty,\n    validityData,\n    shouldValidateOnChange,\n    validation\n  } = useFieldRootContext();\n  const {\n    labelId\n  } = useLabelableContext();\n  const ariaLabelledby = ariaLabelledByProp ?? labelId;\n  const disabled = fieldDisabled || disabledProp;\n  const name = fieldName ?? nameProp;\n\n  // The internal value is potentially unsorted, e.g. to support frozen arrays\n  // https://github.com/mui/material-ui/pull/28472\n  const [valueUnwrapped, setValueUnwrapped] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? min,\n    name: 'Slider'\n  });\n  const sliderRef = React.useRef(null);\n  const controlRef = React.useRef(null);\n  const thumbRefs = React.useRef([]);\n  // The input element nested in the pressed thumb.\n  const pressedInputRef = React.useRef(null);\n  // The px distance between the pointer and the center of a pressed thumb.\n  const pressedThumbCenterOffsetRef = React.useRef(null);\n  // The index of the pressed thumb, or the closest thumb if the `Control` was pressed.\n  // This is updated on pointerdown, which is sooner than the `active/activeIndex`\n  // state which is updated later when the nested `input` receives focus.\n  const pressedThumbIndexRef = React.useRef(-1);\n  // The values when the current drag interaction started.\n  const pressedValuesRef = React.useRef(null);\n  const lastChangedValueRef = React.useRef(null);\n  const lastChangeReasonRef = React.useRef('none');\n  const formatOptionsRef = useValueAsRef(format);\n\n  // We can't use the :active browser pseudo-classes.\n  // - The active state isn't triggered when clicking on the rail.\n  // - The active state isn't transferred when inversing a range slider.\n  const [active, setActiveState] = React.useState(-1);\n  const [lastUsedThumbIndex, setLastUsedThumbIndex] = React.useState(-1);\n  const [dragging, setDragging] = React.useState(false);\n  const [thumbMap, setThumbMap] = React.useState(() => new Map());\n  const [indicatorPosition, setIndicatorPosition] = React.useState([undefined, undefined]);\n  const setActive = useStableCallback(value => {\n    setActiveState(value);\n    if (value !== -1) {\n      setLastUsedThumbIndex(value);\n    }\n  });\n  useField({\n    id,\n    commit: validation.commit,\n    value: valueUnwrapped,\n    controlRef,\n    name,\n    getValue: () => valueUnwrapped\n  });\n  useValueChanged(valueUnwrapped, () => {\n    clearErrors(name);\n    if (shouldValidateOnChange()) {\n      validation.commit(valueUnwrapped);\n    } else {\n      validation.commit(valueUnwrapped, true);\n    }\n    const initialValue = validityData.initialValue;\n    let isDirty;\n    if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {\n      isDirty = !areArraysEqual(valueUnwrapped, initialValue);\n    } else {\n      isDirty = valueUnwrapped !== initialValue;\n    }\n    setDirty(isDirty);\n  });\n  const registerFieldControlRef = useStableCallback(element => {\n    if (element) {\n      controlRef.current = element;\n    }\n  });\n  const range = Array.isArray(valueUnwrapped);\n  const values = React.useMemo(() => {\n    if (!range) {\n      return [clamp(valueUnwrapped, min, max)];\n    }\n    return valueUnwrapped.slice().sort(asc);\n  }, [max, min, range, valueUnwrapped]);\n  const setValue = useStableCallback((newValue, details) => {\n    if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {\n      return;\n    }\n    const changeDetails = details ?? createChangeEventDetails(REASONS.none, undefined, undefined, {\n      activeThumbIndex: -1\n    });\n    lastChangeReasonRef.current = changeDetails.reason;\n\n    // Redefine target to allow name and value to be read.\n    // This allows seamless integration with the most popular form libraries.\n    // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492\n    // Clone the event to not override `target` of the original event.\n    // @ts-expect-error The nativeEvent is function, not object\n    const clonedEvent = new event.constructor(event.type, event);\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: {\n        value: newValue,\n        name\n      }\n    });\n    changeDetails.event = clonedEvent;\n    lastChangedValueRef.current = newValue;\n    onValueChange(newValue, changeDetails);\n    if (changeDetails.isCanceled) {\n      return;\n    }\n    setValueUnwrapped(newValue);\n  });\n  const handleInputChange = useStableCallback((valueInput, index, event) => {\n    const newValue = getSliderValue(valueInput, index, min, max, range, values);\n    if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {\n      const reason = getSliderChangeEventReason(event);\n      setValue(newValue, createChangeEventDetails(reason, event.nativeEvent, undefined, {\n        activeThumbIndex: index\n      }));\n      setTouched(true);\n      const nextValue = lastChangedValueRef.current ?? newValue;\n      onValueCommitted(nextValue, createGenericEventDetails(reason, event.nativeEvent));\n    }\n  });\n  if (process.env.NODE_ENV !== 'production') {\n    if (min >= max) {\n      warn('Slider `max` must be greater than `min`.');\n    }\n  }\n  useIsoLayoutEffect(() => {\n    const activeEl = activeElement(ownerDocument(sliderRef.current));\n    if (disabled && activeEl && sliderRef.current?.contains(activeEl)) {\n      // This is necessary because Firefox and Safari will keep focus\n      // on a disabled element:\n      // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js\n      activeEl.blur();\n    }\n  }, [disabled]);\n  if (disabled && active !== -1) {\n    setActive(-1);\n  }\n  const state = React.useMemo(() => ({\n    ...fieldState,\n    activeThumbIndex: active,\n    disabled,\n    dragging,\n    orientation,\n    max,\n    min,\n    minStepsBetweenValues,\n    step,\n    values\n  }), [fieldState, active, disabled, dragging, max, min, minStepsBetweenValues, orientation, step, values]);\n  const contextValue = React.useMemo(() => ({\n    active,\n    controlRef,\n    disabled,\n    dragging,\n    validation,\n    formatOptionsRef,\n    handleInputChange,\n    indicatorPosition,\n    inset: thumbAlignment !== 'center',\n    labelId: ariaLabelledby,\n    largeStep,\n    lastUsedThumbIndex,\n    lastChangedValueRef,\n    lastChangeReasonRef,\n    locale,\n    max,\n    min,\n    minStepsBetweenValues,\n    name,\n    onValueCommitted,\n    orientation,\n    pressedInputRef,\n    pressedThumbCenterOffsetRef,\n    pressedThumbIndexRef,\n    pressedValuesRef,\n    registerFieldControlRef,\n    renderBeforeHydration: thumbAlignment === 'edge',\n    setActive,\n    setDragging,\n    setIndicatorPosition,\n    setValue,\n    state,\n    step,\n    thumbCollisionBehavior,\n    thumbMap,\n    thumbRefs,\n    values\n  }), [active, controlRef, ariaLabelledby, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);\n  const element = useRenderElement('div', componentProps, {\n    state,\n    ref: [forwardedRef, sliderRef],\n    props: [{\n      'aria-labelledby': ariaLabelledby,\n      id,\n      role: 'group'\n    }, validation.getValidationProps, elementProps],\n    stateAttributesMapping: sliderStateAttributesMapping\n  });\n  return /*#__PURE__*/_jsx(SliderRootContext.Provider, {\n    value: contextValue,\n    children: /*#__PURE__*/_jsx(CompositeList, {\n      elementsRef: thumbRefs,\n      onMapChange: setThumbMap,\n      children: element\n    })\n  });\n});\nif (process.env.NODE_ENV !== \"production\") SliderRoot.displayName = \"SliderRoot\";"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;AACE;AACF;AACA;AACE;AACE;AAAoB;AAEtB;AACE;AAAwC;AAE1C;AACF;AAQY;AACV;AAAM;AACe;AACnB;AACA;AACyB;AACrB;AACJ;AACY;AACZ;AACA;AACM;AACA;AACkB;AAClB;AACS;AACG;AACJ;AACP;AACkB;AACR;AACV;AACJ;AAEL;AACA;AACA;AACA;AAAM;AACJ;AAEF;AAAM;AACG;AACG;AACJ;AACN;AACA;AACA;AACA;AACA;AAEF;AAAM;AACJ;AAEF;AACA;AACA;AAIA;AAA0D;AAC5C;AACa;AACnB;AAER;AACA;AACA;AAEA;AAEA;AAIA;AAEA;AACA;AACA;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACE;AACA;AACE;AAA2B;AAC7B;AAEF;AAAS;AACP;AACmB;AACZ;AACP;AACA;AACgB;AAElB;AACE;AACA;AACE;AAAgC;AAEhC;AAAsC;AAExC;AACA;AACA;AACE;AAAsD;AAEtD;AAA6B;AAE/B;AAAgB;AAElB;AACE;AACE;AAAqB;AACvB;AAEF;AACA;AACE;AACE;AAAuC;AAEzC;AAAsC;AAExC;AACE;AACE;AAAA;AAEF;AAA8F;AAC1E;AAEpB;AAOA;AACA;AAA6C;AACjC;AACH;AACE;AACP;AACR;AAEI;AACA;AACA;AACA;AACE;AAAA;AAEF;AAA0B;AAE5B;AACE;AACA;AACE;AACA;AAAkF;AAC9D;AAEpB;AACA;AACA;AAAgF;AAClF;AAEF;AACE;AACE;AAA+C;AACjD;AAEF;AACE;AACA;AAIE;AAAa;AACf;AAEF;AACE;AAAY;AAEd;AAAmC;AAC9B;AACe;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAA0C;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC0B;AACjB;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC0C;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AAAwD;AACtD;AAC6B;AACrB;AACa;AACnB;AACM;AACsC;AACtB;AAE1B;AAAqD;AAC5C;AACoC;AAC5B;AACA;AACH;AACX;AAEL;AACA;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/slider/root/SliderRootContext.js

@@ -0,0 +1,17 @@
+"use client";
+import formatErrorMessage from "../../../../utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const SliderRootContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") SliderRootContext.displayName = "SliderRootContext";
+function useSliderRootContext() {
+  const context = React.useContext(SliderRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>." : formatErrorMessage(62));
+  }
+  return context;
+}
+export {
+  SliderRootContext,
+  useSliderRootContext
+};
+//# sourceMappingURL=SliderRootContext.js.map

package/dist/node_modules/@base-ui/react/esm/slider/root/SliderRootContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRootContext.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/slider/root/SliderRootContext.js"],"sourcesContent":["'use client';\n\nimport _formatErrorMessage from \"@base-ui/utils/formatErrorMessage\";\nimport * as React from 'react';\nexport const SliderRootContext = /*#__PURE__*/React.createContext(undefined);\nif (process.env.NODE_ENV !== \"production\") SliderRootContext.displayName = \"SliderRootContext\";\nexport function useSliderRootContext() {\n  const context = React.useContext(SliderRootContext);\n  if (context === undefined) {\n    throw new Error(process.env.NODE_ENV !== \"production\" ? 'Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>.' : _formatErrorMessage(62));\n  }\n  return context;\n}"],"names":[],"mappings":";;;AAIY;AACZ;AACO;AACL;AACA;AACE;AAA4K;AAE9K;AACF;;;;;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/slider/root/stateAttributesMapping.js

@@ -0,0 +1,12 @@
+const sliderStateAttributesMapping = {
+  activeThumbIndex: () => null,
+  max: () => null,
+  min: () => null,
+  minStepsBetweenValues: () => null,
+  step: () => null,
+  values: () => null
+};
+export {
+  sliderStateAttributesMapping
+};
+//# sourceMappingURL=stateAttributesMapping.js.map

package/dist/node_modules/@base-ui/react/esm/slider/root/stateAttributesMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateAttributesMapping.js","sources":["../../../../../../../node_modules/@base-ui/react/esm/slider/root/stateAttributesMapping.js"],"sourcesContent":["export const sliderStateAttributesMapping = {\n  activeThumbIndex: () => null,\n  max: () => null,\n  min: () => null,\n  minStepsBetweenValues: () => null,\n  step: () => null,\n  values: () => null\n};"],"names":[],"mappings":"AAAY,MAAC,+BAA+B;AAAA,EAC1C,kBAAkB,MAAM;AAAA,EACxB,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AAAA,EACX,uBAAuB,MAAM;AAAA,EAC7B,MAAM,MAAM;AAAA,EACZ,QAAQ,MAAM;AAChB;","x_google_ignoreList":[0]}

package/dist/node_modules/@base-ui/react/esm/slider/thumb/SliderThumb.js

@@ -0,0 +1,327 @@
+"use client";
+import * as React from "react";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { useOnMount } from "../../../../utils/esm/useOnMount.js";
+import { useMergedRefs } from "../../../../utils/esm/useMergedRefs.js";
+import { visuallyHidden } from "../../../../utils/esm/visuallyHidden.js";
+import { formatNumber } from "../../utils/formatNumber.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { valueToPercent } from "../../utils/valueToPercent.js";
+import { COMPOSITE_KEYS, HOME, END, ARROW_LEFT, ARROW_DOWN, ARROW_RIGHT, ARROW_UP } from "../../composite/composite.js";
+import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { getMidpoint } from "../utils/getMidpoint.js";
+import { getSliderValue } from "../utils/getSliderValue.js";
+import { roundValueToStep } from "../utils/roundValueToStep.js";
+import { useSliderRootContext } from "../root/SliderRootContext.js";
+import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { SliderThumbDataAttributes } from "./SliderThumbDataAttributes.js";
+import { script } from "./prehydrationScript.min.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { mergeProps } from "../../merge-props/mergeProps.js";
+const PAGE_UP = "PageUp";
+const PAGE_DOWN = "PageDown";
+const ALL_KEYS = /* @__PURE__ */ new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END, PAGE_UP, PAGE_DOWN]);
+function getDefaultAriaValueText(values, index, format, locale) {
+  if (index < 0) {
+    return void 0;
+  }
+  if (values.length === 2) {
+    if (index === 0) {
+      return `${formatNumber(values[index], locale, format)} start range`;
+    }
+    return `${formatNumber(values[index], locale, format)} end range`;
+  }
+  return format ? formatNumber(values[index], locale, format) : void 0;
+}
+function getNewValue(thumbValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+}
+const SliderThumb = /* @__PURE__ */ React.forwardRef(function SliderThumb2(componentProps, forwardedRef) {
+  const {
+    render,
+    children: childrenProp,
+    className,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    disabled: disabledProp = false,
+    getAriaLabel: getAriaLabelProp,
+    getAriaValueText: getAriaValueTextProp,
+    id: idProp,
+    index: indexProp,
+    inputRef: inputRefProp,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    tabIndex: tabIndexProp,
+    ...elementProps
+  } = componentProps;
+  const id = useBaseUiId(idProp);
+  const {
+    active: activeIndex,
+    lastUsedThumbIndex,
+    controlRef,
+    disabled: contextDisabled,
+    validation,
+    formatOptionsRef,
+    handleInputChange,
+    inset,
+    labelId,
+    largeStep,
+    locale,
+    max,
+    min,
+    minStepsBetweenValues,
+    name,
+    orientation,
+    pressedInputRef,
+    pressedThumbCenterOffsetRef,
+    pressedThumbIndexRef,
+    renderBeforeHydration,
+    setActive,
+    setIndicatorPosition,
+    state,
+    step,
+    values: sliderValues
+  } = useSliderRootContext();
+  const direction = useDirection();
+  const disabled = disabledProp || contextDisabled;
+  const range = sliderValues.length > 1;
+  const vertical = orientation === "vertical";
+  const rtl = direction === "rtl";
+  const {
+    setTouched,
+    setFocused,
+    validationMode
+  } = useFieldRootContext();
+  const thumbRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const defaultInputId = useBaseUiId();
+  const labelableId = useLabelableId();
+  const inputId = range ? defaultInputId : labelableId;
+  const thumbMetadata = React.useMemo(() => ({
+    inputId
+  }), [inputId]);
+  const {
+    ref: listItemRef,
+    index: compositeIndex
+  } = useCompositeListItem({
+    metadata: thumbMetadata
+  });
+  const index = !range ? 0 : indexProp ?? compositeIndex;
+  const last = index === sliderValues.length - 1;
+  const thumbValue = sliderValues[index];
+  const thumbValuePercent = valueToPercent(thumbValue, min, max);
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [positionPercent, setPositionPercent] = React.useState();
+  useOnMount(() => setIsMounted(true));
+  const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
+  const getInsetPosition = useStableCallback(() => {
+    const control = controlRef.current;
+    const thumb = thumbRef.current;
+    if (!control || !thumb) {
+      return;
+    }
+    const thumbRect = thumb.getBoundingClientRect();
+    const controlRect = control.getBoundingClientRect();
+    const side = vertical ? "height" : "width";
+    const controlSize = controlRect[side] - thumbRect[side];
+    const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
+    const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
+    setPositionPercent(nextPositionPercent);
+    if (index === 0) {
+      setIndicatorPosition((prevPosition) => [nextPositionPercent, prevPosition[1]]);
+    } else if (last) {
+      setIndicatorPosition((prevPosition) => [prevPosition[0], nextPositionPercent]);
+    }
+  });
+  useIsoLayoutEffect(() => {
+    if (inset) {
+      queueMicrotask(getInsetPosition);
+    }
+  }, [getInsetPosition, inset]);
+  useIsoLayoutEffect(() => {
+    if (inset) {
+      getInsetPosition();
+    }
+  }, [getInsetPosition, inset, thumbValuePercent]);
+  const getThumbStyle = React.useCallback(() => {
+    const startEdge = vertical ? "bottom" : "insetInlineStart";
+    const crossOffsetProperty = vertical ? "left" : "top";
+    let zIndex;
+    if (range) {
+      if (activeIndex === index) {
+        zIndex = 2;
+      } else if (safeLastUsedThumbIndex === index) {
+        zIndex = 1;
+      }
+    } else if (activeIndex === index) {
+      zIndex = 1;
+    }
+    if (!inset) {
+      if (!Number.isFinite(thumbValuePercent)) {
+        return visuallyHidden;
+      }
+      return {
+        position: "absolute",
+        [startEdge]: `${thumbValuePercent}%`,
+        [crossOffsetProperty]: "50%",
+        translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+        zIndex
+      };
+    }
+    return {
+      ["--position"]: `${positionPercent}%`,
+      visibility: renderBeforeHydration && !isMounted || positionPercent === void 0 ? "hidden" : void 0,
+      position: "absolute",
+      [startEdge]: "var(--position)",
+      [crossOffsetProperty]: "50%",
+      translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+      zIndex
+    };
+  }, [activeIndex, index, inset, isMounted, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
+  let cssWritingMode;
+  if (orientation === "vertical") {
+    cssWritingMode = rtl ? "vertical-rl" : "vertical-lr";
+  }
+  const inputProps = mergeProps({
+    "aria-label": typeof getAriaLabelProp === "function" ? getAriaLabelProp(index) : ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp ?? labelId,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-orientation": orientation,
+    "aria-valuenow": thumbValue,
+    "aria-valuetext": typeof getAriaValueTextProp === "function" ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? void 0), thumbValue, index) : getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? void 0, locale),
+    disabled,
+    id: inputId,
+    max,
+    min,
+    name,
+    onChange(event) {
+      handleInputChange(event.target.valueAsNumber, index, event);
+    },
+    onFocus() {
+      setActive(index);
+      setFocused(true);
+    },
+    onBlur() {
+      if (!thumbRef.current) {
+        return;
+      }
+      setActive(-1);
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === "onBlur") {
+        validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
+      }
+    },
+    onKeyDown(event) {
+      if (!ALL_KEYS.has(event.key)) {
+        return;
+      }
+      if (COMPOSITE_KEYS.has(event.key)) {
+        event.stopPropagation();
+      }
+      let newValue = null;
+      const roundedValue = roundValueToStep(thumbValue, step, min);
+      switch (event.key) {
+        case ARROW_UP:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
+          break;
+        case ARROW_RIGHT:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
+          break;
+        case ARROW_DOWN:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
+          break;
+        case ARROW_LEFT:
+          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
+          break;
+        case PAGE_UP:
+          newValue = getNewValue(roundedValue, largeStep, 1, min, max);
+          break;
+        case PAGE_DOWN:
+          newValue = getNewValue(roundedValue, largeStep, -1, min, max);
+          break;
+        case END:
+          newValue = max;
+          if (range) {
+            newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
+          }
+          break;
+        case HOME:
+          newValue = min;
+          if (range) {
+            newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
+          }
+          break;
+      }
+      if (newValue !== null) {
+        handleInputChange(newValue, index, event);
+        event.preventDefault();
+      }
+    },
+    step,
+    style: {
+      ...visuallyHidden,
+      // So that VoiceOver's focus indicator matches the thumb's dimensions
+      width: "100%",
+      height: "100%",
+      writingMode: cssWritingMode
+    },
+    tabIndex: tabIndexProp ?? void 0,
+    type: "range",
+    value: thumbValue ?? ""
+  }, validation.getInputValidationProps);
+  const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
+  const element = useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, listItemRef, thumbRef],
+    props: [{
+      [SliderThumbDataAttributes.index]: index,
+      children: /* @__PURE__ */ jsxs(React.Fragment, {
+        children: [childrenProp, /* @__PURE__ */ jsx("input", {
+          ref: mergedInputRef,
+          ...inputProps
+        }), inset && !isMounted && renderBeforeHydration && // this must be rendered with the last thumb to ensure all
+        // preceding thumbs are already rendered in the DOM
+        last && /* @__PURE__ */ jsx("script", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: script
+          },
+          suppressHydrationWarning: true
+        })]
+      }),
+      id,
+      onBlur: onBlurProp,
+      onFocus: onFocusProp,
+      onPointerDown(event) {
+        pressedThumbIndexRef.current = index;
+        if (thumbRef.current != null) {
+          const axis = orientation === "horizontal" ? "x" : "y";
+          const midpoint = getMidpoint(thumbRef.current);
+          const offset = (orientation === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
+          pressedThumbCenterOffsetRef.current = offset;
+        }
+        if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
+          pressedInputRef.current = inputRef.current;
+        }
+      },
+      style: getThumbStyle(),
+      suppressHydrationWarning: renderBeforeHydration || void 0,
+      tabIndex: -1
+    }, elementProps],
+    stateAttributesMapping: sliderStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") SliderThumb.displayName = "SliderThumb";
+export {
+  SliderThumb
+};
+//# sourceMappingURL=SliderThumb.js.map