@zag-js/slider 0.50.0 → 0.51.1

package/dist/index.js

@@ -1,857 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  machine: () => machine,
-  props: () => props,
-  splitProps: () => splitProps,
-  splitThumbProps: () => splitThumbProps,
-  thumbProps: () => thumbProps
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/slider.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
-  "root",
-  "label",
-  "thumb",
-  "valueText",
-  "track",
-  "range",
-  "control",
-  "markerGroup",
-  "marker"
-);
-var parts = anatomy.build();
-
-// src/slider.connect.ts
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_numeric_range4 = require("@zag-js/numeric-range");
-
-// src/slider.dom.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query = require("@zag-js/dom-query");
-var import_form_utils = require("@zag-js/form-utils");
-var import_numeric_range2 = require("@zag-js/numeric-range");
-
-// src/slider.style.ts
-var import_numeric_range = require("@zag-js/numeric-range");
-function getBounds(value) {
-  const firstValue = value[0];
-  const lastThumb = value[value.length - 1];
-  return [firstValue, lastThumb];
-}
-function getRangeOffsets(ctx) {
-  const [firstPercent, lastPercent] = getBounds(ctx.valuePercent);
-  if (ctx.valuePercent.length === 1) {
-    if (ctx.origin === "center") {
-      const isNegative = ctx.valuePercent[0] < 50;
-      const start = isNegative ? `${ctx.valuePercent[0]}%` : "50%";
-      const end = isNegative ? "50%" : `${100 - ctx.valuePercent[0]}%`;
-      return { start, end };
-    }
-    return { start: "0%", end: `${100 - lastPercent}%` };
-  }
-  return { start: `${firstPercent}%`, end: `${100 - lastPercent}%` };
-}
-function getRangeStyle(ctx) {
-  if (ctx.isVertical) {
-    return {
-      position: "absolute",
-      bottom: "var(--slider-range-start)",
-      top: "var(--slider-range-end)"
-    };
-  }
-  return {
-    position: "absolute",
-    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
-    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
-  };
-}
-function getVerticalThumbOffset(ctx) {
-  const { height = 0 } = ctx.thumbSize ?? {};
-  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
-  return parseFloat(getValue(ctx.value).toFixed(2));
-}
-function getHorizontalThumbOffset(ctx) {
-  const { width = 0 } = ctx.thumbSize ?? {};
-  if (ctx.isRtl) {
-    const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width / 2, width / 2]);
-    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
-  }
-  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-width / 2, width / 2]);
-  return parseFloat(getValue(ctx.value).toFixed(2));
-}
-function getOffset(ctx, percent) {
-  if (ctx.thumbAlignment === "center")
-    return `${percent}%`;
-  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
-  return `calc(${percent}% - ${offset}px)`;
-}
-function getThumbOffset(ctx) {
-  let percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
-  return getOffset(ctx, percent);
-}
-function getVisibility(ctx) {
-  let visibility = "visible";
-  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
-    visibility = "hidden";
-  }
-  return visibility;
-}
-function getThumbStyle(ctx, index) {
-  const placementProp = ctx.isVertical ? "bottom" : "insetInlineStart";
-  return {
-    visibility: getVisibility(ctx),
-    position: "absolute",
-    transform: "var(--slider-thumb-transform)",
-    [placementProp]: `var(--slider-thumb-offset-${index})`
-  };
-}
-function getControlStyle() {
-  return {
-    touchAction: "none",
-    userSelect: "none",
-    position: "relative"
-  };
-}
-function getRootStyle(ctx) {
-  const range = getRangeOffsets(ctx);
-  const offsetStyles = ctx.value.reduce((styles, value, index) => {
-    const offset = getThumbOffset({ ...ctx, value });
-    return { ...styles, [`--slider-thumb-offset-${index}`]: offset };
-  }, {});
-  return {
-    ...offsetStyles,
-    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : ctx.isRtl ? "translateX(50%)" : "translateX(-50%)",
-    "--slider-range-start": range.start,
-    "--slider-range-end": range.end
-  };
-}
-function getMarkerStyle(ctx, value) {
-  return {
-    // @ts-expect-error
-    visibility: getVisibility(ctx),
-    position: "absolute",
-    pointerEvents: "none",
-    // @ts-expect-error
-    [ctx.isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset({ ...ctx, value }),
-    translate: "var(--tx) var(--ty)",
-    "--tx": ctx.isHorizontal ? ctx.isRtl ? "50%" : "-50%" : "0%",
-    "--ty": !ctx.isHorizontal ? "50%" : "0%"
-  };
-}
-function getMarkerGroupStyle() {
-  return {
-    userSelect: "none",
-    pointerEvents: "none",
-    position: "relative"
-  };
-}
-var styleGetterFns = {
-  getRootStyle,
-  getControlStyle,
-  getThumbStyle,
-  getRangeStyle,
-  getMarkerStyle,
-  getMarkerGroupStyle
-};
-
-// src/slider.dom.ts
-var dom = (0, import_dom_query.createScope)({
-  ...styleGetterFns,
-  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`,
-  getHiddenInputId: (ctx, index) => `slider:${ctx.id}:input:${index}`,
-  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`,
-  getRangeId: (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getValueTextId: (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:valueText`,
-  getMarkerId: (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx, index) => dom.getById(ctx, dom.getThumbId(ctx, index)),
-  getHiddenInputEl: (ctx, index) => dom.getById(ctx, dom.getHiddenInputId(ctx, index)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getElements: (ctx) => (0, import_dom_query.queryAll)(dom.getControlEl(ctx), "[role=slider]"),
-  getFirstEl: (ctx) => dom.getElements(ctx)[0],
-  getRangeEl: (ctx) => dom.getById(ctx, dom.getRangeId(ctx)),
-  getValueFromPoint(ctx, point) {
-    const controlEl = dom.getControlEl(ctx);
-    if (!controlEl)
-      return;
-    const relativePoint = (0, import_dom_event.getRelativePoint)(point, controlEl);
-    const percent = relativePoint.getPercentValue({
-      orientation: ctx.orientation,
-      dir: ctx.dir,
-      inverted: { y: true }
-    });
-    return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
-  },
-  dispatchChangeEvent(ctx) {
-    const valueArray = Array.from(ctx.value);
-    valueArray.forEach((value, index) => {
-      const inputEl = dom.getHiddenInputEl(ctx, index);
-      if (!inputEl)
-        return;
-      (0, import_form_utils.dispatchInputValueEvent)(inputEl, { value });
-    });
-  }
-});
-
-// src/slider.utils.ts
-var import_numeric_range3 = require("@zag-js/numeric-range");
-function normalizeValues(ctx, nextValues) {
-  return nextValues.map((value, index, values) => {
-    return constrainValue({ ...ctx, value: values }, value, index);
-  });
-}
-function getRangeAtIndex(ctx, index) {
-  return (0, import_numeric_range3.getValueRanges)(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index];
-}
-function constrainValue(ctx, value, index) {
-  const range = getRangeAtIndex(ctx, index);
-  const snapValue = (0, import_numeric_range3.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
-  return (0, import_numeric_range3.clampValue)(snapValue, range.min, range.max);
-}
-function decrement(ctx, index, step) {
-  const idx = index ?? ctx.focusedIndex;
-  const range = getRangeAtIndex(ctx, idx);
-  const nextValues = (0, import_numeric_range3.getPreviousStepValue)(idx, {
-    ...range,
-    step: step ?? ctx.step,
-    values: ctx.value
-  });
-  nextValues[idx] = (0, import_numeric_range3.clampValue)(nextValues[idx], range.min, range.max);
-  return nextValues;
-}
-function increment(ctx, index, step) {
-  const idx = index ?? ctx.focusedIndex;
-  const range = getRangeAtIndex(ctx, idx);
-  const nextValues = (0, import_numeric_range3.getNextStepValue)(idx, {
-    ...range,
-    step: step ?? ctx.step,
-    values: ctx.value
-  });
-  nextValues[idx] = (0, import_numeric_range3.clampValue)(nextValues[idx], range.min, range.max);
-  return nextValues;
-}
-function getClosestIndex(ctx, pointValue) {
-  return (0, import_numeric_range3.getClosestValueIndex)(ctx.value, pointValue);
-}
-function assignArray(current, next) {
-  for (let i = 0; i < next.length; i++) {
-    const value = next[i];
-    current[i] = value;
-  }
-}
-
-// src/slider.connect.ts
-function connect(state, send, normalize) {
-  const ariaLabel = state.context["aria-label"];
-  const ariaLabelledBy = state.context["aria-labelledby"];
-  const sliderValue = state.context.value;
-  const focused = state.matches("focus");
-  const dragging = state.matches("dragging");
-  const disabled = state.context.isDisabled;
-  const invalid = state.context.invalid;
-  const interactive = state.context.isInteractive;
-  const isHorizontal = state.context.orientation === "horizontal";
-  const isVertical = state.context.orientation === "vertical";
-  function getValuePercentFn(value) {
-    return (0, import_numeric_range4.getValuePercent)(value, state.context.min, state.context.max);
-  }
-  function getPercentValueFn(percent) {
-    return (0, import_numeric_range4.getPercentValue)(percent, state.context.min, state.context.max, state.context.step);
-  }
-  return {
-    value: state.context.value,
-    dragging,
-    focused,
-    setValue(value) {
-      send({ type: "SET_VALUE", value });
-    },
-    getThumbValue(index) {
-      return sliderValue[index];
-    },
-    setThumbValue(index, value) {
-      send({ type: "SET_VALUE", index, value });
-    },
-    getValuePercent: getValuePercentFn,
-    getPercentValue: getPercentValueFn,
-    getThumbPercent(index) {
-      return getValuePercentFn(sliderValue[index]);
-    },
-    setThumbPercent(index, percent) {
-      const value = getPercentValueFn(percent);
-      send({ type: "SET_VALUE", index, value });
-    },
-    getThumbMin(index) {
-      return getRangeAtIndex(state.context, index).min;
-    },
-    getThumbMax(index) {
-      return getRangeAtIndex(state.context, index).max;
-    },
-    increment(index) {
-      send({ type: "INCREMENT", index });
-    },
-    decrement(index) {
-      send({ type: "DECREMENT", index });
-    },
-    focus() {
-      if (!interactive)
-        return;
-      send({ type: "FOCUS", index: 0 });
-    },
-    labelProps: normalize.label({
-      ...parts.label.attrs,
-      dir: state.context.dir,
-      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context, 0),
-      onClick(event) {
-        if (!interactive)
-          return;
-        event.preventDefault();
-        dom.getFirstEl(state.context)?.focus();
-      },
-      style: {
-        userSelect: "none"
-      }
-    }),
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      id: dom.getRootId(state.context),
-      dir: state.context.dir,
-      style: dom.getRootStyle(state.context)
-    }),
-    valueTextProps: normalize.element({
-      ...parts.valueText.attrs,
-      dir: state.context.dir,
-      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      id: dom.getValueTextId(state.context)
-    }),
-    trackProps: normalize.element({
-      ...parts.track.attrs,
-      dir: state.context.dir,
-      id: dom.getTrackId(state.context),
-      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-      "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-      "data-orientation": state.context.orientation,
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      style: { position: "relative" }
-    }),
-    getThumbProps(props2) {
-      const { index = 0, name } = props2;
-      const value = sliderValue[index];
-      const range = getRangeAtIndex(state.context, index);
-      const valueText = state.context.getAriaValueText?.({ value, index });
-      const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
-      const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
-      return normalize.element({
-        ...parts.thumb.attrs,
-        dir: state.context.dir,
-        "data-index": index,
-        "data-name": name,
-        id: dom.getThumbId(state.context, index),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-orientation": state.context.orientation,
-        "data-focus": (0, import_dom_query2.dataAttr)(focused && state.context.focusedIndex === index),
-        draggable: false,
-        "aria-disabled": (0, import_dom_query2.ariaAttr)(disabled),
-        "aria-label": _ariaLabel,
-        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context),
-        "aria-orientation": state.context.orientation,
-        "aria-valuemax": range.max,
-        "aria-valuemin": range.min,
-        "aria-valuenow": sliderValue[index],
-        "aria-valuetext": valueText,
-        role: "slider",
-        tabIndex: disabled ? void 0 : 0,
-        style: dom.getThumbStyle(state.context, index),
-        onPointerDown(event) {
-          if (!interactive)
-            return;
-          send({ type: "THUMB_POINTER_DOWN", index });
-          event.stopPropagation();
-        },
-        onBlur() {
-          if (!interactive)
-            return;
-          send("BLUR");
-        },
-        onFocus() {
-          if (!interactive)
-            return;
-          send({ type: "FOCUS", index });
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
-          const keyMap = {
-            ArrowUp() {
-              if (isHorizontal)
-                return;
-              send({ type: "ARROW_INC", step, src: "ArrowUp" });
-            },
-            ArrowDown() {
-              if (isHorizontal)
-                return;
-              send({ type: "ARROW_DEC", step, src: "ArrowDown" });
-            },
-            ArrowLeft() {
-              if (isVertical)
-                return;
-              send({ type: "ARROW_DEC", step, src: "ArrowLeft" });
-            },
-            ArrowRight() {
-              if (isVertical)
-                return;
-              send({ type: "ARROW_INC", step, src: "ArrowRight" });
-            },
-            PageUp() {
-              send({ type: "ARROW_INC", step, src: "PageUp" });
-            },
-            PageDown() {
-              send({ type: "ARROW_DEC", step, src: "PageDown" });
-            },
-            Home() {
-              send("HOME");
-            },
-            End() {
-              send("END");
-            }
-          };
-          const key = (0, import_dom_event2.getEventKey)(event, state.context);
-          const exec = keyMap[key];
-          if (exec) {
-            exec(event);
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        }
-      });
-    },
-    getHiddenInputProps(props2) {
-      const { index = 0, name } = props2;
-      return normalize.input({
-        name: name ?? (state.context.name ? state.context.name + (state.context.value.length > 1 ? "[]" : "") : void 0),
-        form: state.context.form,
-        type: "text",
-        hidden: true,
-        defaultValue: state.context.value[index],
-        id: dom.getHiddenInputId(state.context, index)
-      });
-    },
-    rangeProps: normalize.element({
-      id: dom.getRangeId(state.context),
-      ...parts.range.attrs,
-      dir: state.context.dir,
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-      "data-orientation": state.context.orientation,
-      style: dom.getRangeStyle(state.context)
-    }),
-    controlProps: normalize.element({
-      ...parts.control.attrs,
-      dir: state.context.dir,
-      id: dom.getControlId(state.context),
-      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-      "data-orientation": state.context.orientation,
-      "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-      "data-focus": (0, import_dom_query2.dataAttr)(focused),
-      style: dom.getControlStyle(),
-      onPointerDown(event) {
-        if (!interactive)
-          return;
-        const evt = (0, import_dom_event2.getNativeEvent)(event);
-        if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifierKey)(evt))
-          return;
-        const point = (0, import_dom_event2.getEventPoint)(evt);
-        send({ type: "POINTER_DOWN", point });
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    }),
-    markerGroupProps: normalize.element({
-      ...parts.markerGroup.attrs,
-      role: "presentation",
-      dir: state.context.dir,
-      "aria-hidden": true,
-      "data-orientation": state.context.orientation,
-      style: dom.getMarkerGroupStyle()
-    }),
-    getMarkerProps(props2) {
-      const style = dom.getMarkerStyle(state.context, props2.value);
-      let markerState;
-      const first = state.context.value[0];
-      const last = state.context.value[state.context.value.length - 1];
-      if (props2.value < first) {
-        markerState = "under-value";
-      } else if (props2.value > last) {
-        markerState = "over-value";
-      } else {
-        markerState = "at-value";
-      }
-      return normalize.element({
-        ...parts.marker.attrs,
-        id: dom.getMarkerId(state.context, props2.value),
-        role: "presentation",
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
-        "data-value": props2.value,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-state": markerState,
-        style
-      });
-    }
-  };
-}
-
-// src/slider.machine.ts
-var import_core = require("@zag-js/core");
-var import_dom_event3 = require("@zag-js/dom-event");
-var import_dom_query3 = require("@zag-js/dom-query");
-var import_element_size = require("@zag-js/element-size");
-var import_form_utils2 = require("@zag-js/form-utils");
-var import_numeric_range5 = require("@zag-js/numeric-range");
-var import_utils = require("@zag-js/utils");
-var isEqualSize = (a, b) => {
-  return a?.width === b?.width && a?.height === b?.height;
-};
-function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
-    {
-      id: "slider",
-      initial: "idle",
-      context: {
-        thumbSize: null,
-        thumbAlignment: "contain",
-        min: 0,
-        max: 100,
-        step: 1,
-        value: [0],
-        origin: "start",
-        orientation: "horizontal",
-        dir: "ltr",
-        minStepsBetweenThumbs: 0,
-        disabled: false,
-        ...ctx,
-        focusedIndex: -1,
-        fieldsetDisabled: false
-      },
-      computed: {
-        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-        isVertical: (ctx2) => ctx2.orientation === "vertical",
-        isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
-        isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.isDisabled),
-        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null,
-        valuePercent(ctx2) {
-          return ctx2.value.map((value) => 100 * (0, import_numeric_range5.getValuePercent)(value, ctx2.min, ctx2.max));
-        }
-      },
-      watch: {
-        value: ["syncInputElements"]
-      },
-      entry: ["coarseValue"],
-      activities: ["trackFormControlState", "trackThumbsSize"],
-      on: {
-        SET_VALUE: [
-          {
-            guard: "hasIndex",
-            actions: "setValueAtIndex"
-          },
-          { actions: "setValue" }
-        ],
-        INCREMENT: {
-          actions: "incrementThumbAtIndex"
-        },
-        DECREMENT: {
-          actions: "decrementThumbAtIndex"
-        }
-      },
-      states: {
-        idle: {
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
-            },
-            FOCUS: {
-              target: "focus",
-              actions: "setFocusedIndex"
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "focusActiveThumb"]
-            }
-          }
-        },
-        focus: {
-          entry: "focusActiveThumb",
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
-            },
-            THUMB_POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setFocusedIndex", "focusActiveThumb"]
-            },
-            ARROW_DEC: {
-              actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
-            },
-            ARROW_INC: {
-              actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
-            },
-            HOME: {
-              actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"]
-            },
-            END: {
-              actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"]
-            },
-            BLUR: {
-              target: "idle",
-              actions: "clearFocusedIndex"
-            }
-          }
-        },
-        dragging: {
-          entry: "focusActiveThumb",
-          activities: "trackPointerMove",
-          on: {
-            POINTER_UP: {
-              target: "focus",
-              actions: "invokeOnChangeEnd"
-            },
-            POINTER_MOVE: {
-              actions: "setPointerValue"
-            }
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        hasIndex: (_ctx, evt) => evt.index != null
-      },
-      activities: {
-        trackFormControlState(ctx2, _evt, { initialContext }) {
-          return (0, import_form_utils2.trackFormControl)(dom.getRootEl(ctx2), {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              set.value(ctx2, initialContext.value);
-            }
-          });
-        },
-        trackPointerMove(ctx2, _evt, { send }) {
-          return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
-            onPointerMove(info) {
-              send({ type: "POINTER_MOVE", point: info.point });
-            },
-            onPointerUp() {
-              send("POINTER_UP");
-            }
-          });
-        },
-        trackThumbsSize(ctx2) {
-          if (ctx2.thumbAlignment !== "contain" || ctx2.thumbSize)
-            return;
-          return (0, import_element_size.trackElementsSize)({
-            getNodes: () => dom.getElements(ctx2),
-            observeMutation: true,
-            callback(size) {
-              if (!size || isEqualSize(ctx2.thumbSize, size))
-                return;
-              ctx2.thumbSize = size;
-            }
-          });
-        }
-      },
-      actions: {
-        syncInputElements(ctx2) {
-          ctx2.value.forEach((value, index) => {
-            const inputEl = dom.getHiddenInputEl(ctx2, index);
-            dom.setValue(inputEl, value);
-          });
-        },
-        invokeOnChangeEnd(ctx2) {
-          ctx2.onValueChangeEnd?.({ value: ctx2.value });
-        },
-        setClosestThumbIndex(ctx2, evt) {
-          const pointValue = dom.getValueFromPoint(ctx2, evt.point);
-          if (pointValue == null)
-            return;
-          const focusedIndex = getClosestIndex(ctx2, pointValue);
-          set.focusedIndex(ctx2, focusedIndex);
-        },
-        setFocusedIndex(ctx2, evt) {
-          set.focusedIndex(ctx2, evt.index);
-        },
-        clearFocusedIndex(ctx2) {
-          set.focusedIndex(ctx2, -1);
-        },
-        setPointerValue(ctx2, evt) {
-          const pointerValue = dom.getValueFromPoint(ctx2, evt.point);
-          if (pointerValue == null)
-            return;
-          const value = constrainValue(ctx2, pointerValue, ctx2.focusedIndex);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, value);
-        },
-        focusActiveThumb(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            const thumbEl = dom.getThumbEl(ctx2, ctx2.focusedIndex);
-            thumbEl?.focus({ preventScroll: true });
-          });
-        },
-        decrementThumbAtIndex(ctx2, evt) {
-          const value = decrement(ctx2, evt.index, evt.step);
-          set.value(ctx2, value);
-        },
-        incrementThumbAtIndex(ctx2, evt) {
-          const value = increment(ctx2, evt.index, evt.step);
-          set.value(ctx2, value);
-        },
-        setFocusedThumbToMin(ctx2) {
-          const { min } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, min);
-        },
-        setFocusedThumbToMax(ctx2) {
-          const { max } = getRangeAtIndex(ctx2, ctx2.focusedIndex);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, max);
-        },
-        coarseValue(ctx2) {
-          const value = normalizeValues(ctx2, ctx2.value);
-          set.value(ctx2, value);
-        },
-        setValueAtIndex(ctx2, evt) {
-          const value = constrainValue(ctx2, evt.value, evt.index);
-          set.valueAtIndex(ctx2, evt.index, value);
-        },
-        setValue(ctx2, evt) {
-          const value = normalizeValues(ctx2, evt.value);
-          set.value(ctx2, value);
-        }
-      }
-    }
-  );
-}
-var invoke = {
-  change: (ctx) => {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value)
-    });
-    dom.dispatchChangeEvent(ctx);
-  },
-  focusChange: (ctx) => {
-    ctx.onFocusChange?.({
-      value: Array.from(ctx.value),
-      focusedIndex: ctx.focusedIndex
-    });
-  }
-};
-var set = {
-  valueAtIndex: (ctx, index, value) => {
-    if ((0, import_utils.isEqual)(ctx.value[index], value))
-      return;
-    ctx.value[index] = value;
-    invoke.change(ctx);
-  },
-  value: (ctx, value) => {
-    if ((0, import_utils.isEqual)(ctx.value, value))
-      return;
-    assignArray(ctx.value, value);
-    invoke.change(ctx);
-  },
-  focusedIndex: (ctx, index) => {
-    if ((0, import_utils.isEqual)(ctx.focusedIndex, index))
-      return;
-    ctx.focusedIndex = index;
-    invoke.focusChange(ctx);
-  }
-};
-
-// src/slider.props.ts
-var import_types = require("@zag-js/types");
-var import_utils2 = require("@zag-js/utils");
-var props = (0, import_types.createProps)()([
-  "aria-label",
-  "aria-labelledby",
-  "dir",
-  "disabled",
-  "form",
-  "getAriaValueText",
-  "getRootNode",
-  "id",
-  "ids",
-  "invalid",
-  "max",
-  "min",
-  "minStepsBetweenThumbs",
-  "name",
-  "onFocusChange",
-  "onValueChange",
-  "onValueChangeEnd",
-  "orientation",
-  "origin",
-  "readOnly",
-  "step",
-  "thumbAlignment",
-  "thumbAlignment",
-  "thumbSize",
-  "value"
-]);
-var splitProps = (0, import_utils2.createSplitProps)(props);
-var thumbProps = (0, import_types.createProps)()(["index", "name"]);
-var splitThumbProps = (0, import_utils2.createSplitProps)(thumbProps);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine,
-  props,
-  splitProps,
-  splitThumbProps,
-  thumbProps
-});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine,props:()=>props,splitProps:()=>splitProps,splitThumbProps:()=>splitThumbProps,thumbProps:()=>thumbProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("slider").parts("root","label","thumb","valueText","track","range","control","markerGroup","marker");var parts=anatomy.build();var import_dom_event2=require("@zag-js/dom-event");var import_dom_query2=require("@zag-js/dom-query");var import_numeric_range4=require("@zag-js/numeric-range");var import_dom_event=require("@zag-js/dom-event");var import_dom_query=require("@zag-js/dom-query");var import_form_utils=require("@zag-js/form-utils");var import_numeric_range2=require("@zag-js/numeric-range");var import_numeric_range=require("@zag-js/numeric-range");function getBounds(value){const firstValue=value[0];const lastThumb=value[value.length-1];return[firstValue,lastThumb]}function getRangeOffsets(ctx){const[firstPercent,lastPercent]=getBounds(ctx.valuePercent);if(ctx.valuePercent.length===1){if(ctx.origin==="center"){const isNegative=ctx.valuePercent[0]<50;const start=isNegative?`${ctx.valuePercent[0]}%`:"50%";const end=isNegative?"50%":`${100-ctx.valuePercent[0]}%`;return{start,end}}return{start:"0%",end:`${100-lastPercent}%`}}return{start:`${firstPercent}%`,end:`${100-lastPercent}%`}}function getRangeStyle(ctx){if(ctx.isVertical){return{position:"absolute",bottom:"var(--slider-range-start)",top:"var(--slider-range-end)"}}return{position:"absolute",[ctx.isRtl?"right":"left"]:"var(--slider-range-start)",[ctx.isRtl?"left":"right"]:"var(--slider-range-end)"}}function getVerticalThumbOffset(ctx){const{height=0}=ctx.thumbSize??{};const getValue=(0,import_numeric_range.getValueTransformer)([ctx.min,ctx.max],[-height/2,height/2]);return parseFloat(getValue(ctx.value).toFixed(2))}function getHorizontalThumbOffset(ctx){const{width=0}=ctx.thumbSize??{};if(ctx.isRtl){const getValue2=(0,import_numeric_range.getValueTransformer)([ctx.max,ctx.min],[-width/2,width/2]);return-1*parseFloat(getValue2(ctx.value).toFixed(2))}const getValue=(0,import_numeric_range.getValueTransformer)([ctx.min,ctx.max],[-width/2,width/2]);return parseFloat(getValue(ctx.value).toFixed(2))}function getOffset(ctx,percent){if(ctx.thumbAlignment==="center")return`${percent}%`;const offset=ctx.isVertical?getVerticalThumbOffset(ctx):getHorizontalThumbOffset(ctx);return`calc(${percent}% - ${offset}px)`}function getThumbOffset(ctx){let percent=(0,import_numeric_range.getValuePercent)(ctx.value,ctx.min,ctx.max)*100;return getOffset(ctx,percent)}function getVisibility(ctx){let visibility="visible";if(ctx.thumbAlignment==="contain"&&!ctx.hasMeasuredThumbSize){visibility="hidden"}return visibility}function getThumbStyle(ctx,index){const placementProp=ctx.isVertical?"bottom":"insetInlineStart";return{visibility:getVisibility(ctx),position:"absolute",transform:"var(--slider-thumb-transform)",[placementProp]:`var(--slider-thumb-offset-${index})`}}function getControlStyle(){return{touchAction:"none",userSelect:"none",position:"relative"}}function getRootStyle(ctx){const range=getRangeOffsets(ctx);const offsetStyles=ctx.value.reduce((styles,value,index)=>{const offset=getThumbOffset({...ctx,value});return{...styles,[`--slider-thumb-offset-${index}`]:offset}},{});return{...offsetStyles,"--slider-thumb-transform":ctx.isVertical?"translateY(50%)":ctx.isRtl?"translateX(50%)":"translateX(-50%)","--slider-range-start":range.start,"--slider-range-end":range.end}}function getMarkerStyle(ctx,value){return{visibility:getVisibility(ctx),position:"absolute",pointerEvents:"none",[ctx.isHorizontal?"insetInlineStart":"bottom"]:getThumbOffset({...ctx,value}),translate:"var(--tx) var(--ty)","--tx":ctx.isHorizontal?ctx.isRtl?"50%":"-50%":"0%","--ty":!ctx.isHorizontal?"50%":"0%"}}function getMarkerGroupStyle(){return{userSelect:"none",pointerEvents:"none",position:"relative"}}var styleGetterFns={getRootStyle,getControlStyle,getThumbStyle,getRangeStyle,getMarkerStyle,getMarkerGroupStyle};var dom=(0,import_dom_query.createScope)({...styleGetterFns,getRootId:ctx=>ctx.ids?.root??`slider:${ctx.id}`,getThumbId:(ctx,index)=>ctx.ids?.thumb?.(index)??`slider:${ctx.id}:thumb:${index}`,getHiddenInputId:(ctx,index)=>`slider:${ctx.id}:input:${index}`,getControlId:ctx=>ctx.ids?.control??`slider:${ctx.id}:control`,getTrackId:ctx=>ctx.ids?.track??`slider:${ctx.id}:track`,getRangeId:ctx=>ctx.ids?.range??`slider:${ctx.id}:range`,getLabelId:ctx=>ctx.ids?.label??`slider:${ctx.id}:label`,getValueTextId:ctx=>ctx.ids?.valueText??`slider:${ctx.id}:valueText`,getMarkerId:(ctx,value)=>ctx.ids?.marker?.(value)??`slider:${ctx.id}:marker:${value}`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getThumbEl:(ctx,index)=>dom.getById(ctx,dom.getThumbId(ctx,index)),getHiddenInputEl:(ctx,index)=>dom.getById(ctx,dom.getHiddenInputId(ctx,index)),getControlEl:ctx=>dom.getById(ctx,dom.getControlId(ctx)),getElements:ctx=>(0,import_dom_query.queryAll)(dom.getControlEl(ctx),"[role=slider]"),getFirstEl:ctx=>dom.getElements(ctx)[0],getRangeEl:ctx=>dom.getById(ctx,dom.getRangeId(ctx)),getValueFromPoint(ctx,point){const controlEl=dom.getControlEl(ctx);if(!controlEl)return;const relativePoint=(0,import_dom_event.getRelativePoint)(point,controlEl);const percent=relativePoint.getPercentValue({orientation:ctx.orientation,dir:ctx.dir,inverted:{y:true}});return(0,import_numeric_range2.getPercentValue)(percent,ctx.min,ctx.max,ctx.step)},dispatchChangeEvent(ctx){const valueArray=Array.from(ctx.value);valueArray.forEach((value,index)=>{const inputEl=dom.getHiddenInputEl(ctx,index);if(!inputEl)return;(0,import_form_utils.dispatchInputValueEvent)(inputEl,{value})})}});var import_numeric_range3=require("@zag-js/numeric-range");function normalizeValues(ctx,nextValues){return nextValues.map((value,index,values)=>{return constrainValue({...ctx,value:values},value,index)})}function getRangeAtIndex(ctx,index){return(0,import_numeric_range3.getValueRanges)(ctx.value,ctx.min,ctx.max,ctx.minStepsBetweenThumbs)[index]}function constrainValue(ctx,value,index){const range=getRangeAtIndex(ctx,index);const snapValue=(0,import_numeric_range3.snapValueToStep)(value,ctx.min,ctx.max,ctx.step);return(0,import_numeric_range3.clampValue)(snapValue,range.min,range.max)}function decrement(ctx,index,step){const idx=index??ctx.focusedIndex;const range=getRangeAtIndex(ctx,idx);const nextValues=(0,import_numeric_range3.getPreviousStepValue)(idx,{...range,step:step??ctx.step,values:ctx.value});nextValues[idx]=(0,import_numeric_range3.clampValue)(nextValues[idx],range.min,range.max);return nextValues}function increment(ctx,index,step){const idx=index??ctx.focusedIndex;const range=getRangeAtIndex(ctx,idx);const nextValues=(0,import_numeric_range3.getNextStepValue)(idx,{...range,step:step??ctx.step,values:ctx.value});nextValues[idx]=(0,import_numeric_range3.clampValue)(nextValues[idx],range.min,range.max);return nextValues}function getClosestIndex(ctx,pointValue){return(0,import_numeric_range3.getClosestValueIndex)(ctx.value,pointValue)}function assignArray(current,next){for(let i=0;i<next.length;i++){const value=next[i];current[i]=value}}function connect(state,send,normalize){const ariaLabel=state.context["aria-label"];const ariaLabelledBy=state.context["aria-labelledby"];const sliderValue=state.context.value;const focused=state.matches("focus");const dragging=state.matches("dragging");const disabled=state.context.isDisabled;const invalid=state.context.invalid;const interactive=state.context.isInteractive;const isHorizontal=state.context.orientation==="horizontal";const isVertical=state.context.orientation==="vertical";function getValuePercentFn(value){return(0,import_numeric_range4.getValuePercent)(value,state.context.min,state.context.max)}function getPercentValueFn(percent){return(0,import_numeric_range4.getPercentValue)(percent,state.context.min,state.context.max,state.context.step)}return{value:state.context.value,dragging,focused,setValue(value){send({type:"SET_VALUE",value})},getThumbValue(index){return sliderValue[index]},setThumbValue(index,value){send({type:"SET_VALUE",index,value})},getValuePercent:getValuePercentFn,getPercentValue:getPercentValueFn,getThumbPercent(index){return getValuePercentFn(sliderValue[index])},setThumbPercent(index,percent){const value=getPercentValueFn(percent);send({type:"SET_VALUE",index,value})},getThumbMin(index){return getRangeAtIndex(state.context,index).min},getThumbMax(index){return getRangeAtIndex(state.context,index).max},increment(index){send({type:"INCREMENT",index})},decrement(index){send({type:"DECREMENT",index})},focus(){if(!interactive)return;send({type:"FOCUS",index:0})},labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-focus":(0,import_dom_query2.dataAttr)(focused),id:dom.getLabelId(state.context),htmlFor:dom.getHiddenInputId(state.context,0),onClick(event){if(!interactive)return;event.preventDefault();dom.getFirstEl(state.context)?.focus()},style:{userSelect:"none"}}),rootProps:normalize.element({...parts.root.attrs,"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-focus":(0,import_dom_query2.dataAttr)(focused),id:dom.getRootId(state.context),dir:state.context.dir,style:dom.getRootStyle(state.context)}),valueTextProps:normalize.element({...parts.valueText.attrs,dir:state.context.dir,"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-focus":(0,import_dom_query2.dataAttr)(focused),id:dom.getValueTextId(state.context)}),trackProps:normalize.element({...parts.track.attrs,dir:state.context.dir,id:dom.getTrackId(state.context),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-orientation":state.context.orientation,"data-focus":(0,import_dom_query2.dataAttr)(focused),style:{position:"relative"}}),getThumbProps(props2){const{index=0,name}=props2;const value=sliderValue[index];const range=getRangeAtIndex(state.context,index);const valueText=state.context.getAriaValueText?.({value,index});const _ariaLabel=Array.isArray(ariaLabel)?ariaLabel[index]:ariaLabel;const _ariaLabelledBy=Array.isArray(ariaLabelledBy)?ariaLabelledBy[index]:ariaLabelledBy;return normalize.element({...parts.thumb.attrs,dir:state.context.dir,"data-index":index,"data-name":name,id:dom.getThumbId(state.context,index),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,"data-focus":(0,import_dom_query2.dataAttr)(focused&&state.context.focusedIndex===index),draggable:false,"aria-disabled":(0,import_dom_query2.ariaAttr)(disabled),"aria-label":_ariaLabel,"aria-labelledby":_ariaLabelledBy??dom.getLabelId(state.context),"aria-orientation":state.context.orientation,"aria-valuemax":range.max,"aria-valuemin":range.min,"aria-valuenow":sliderValue[index],"aria-valuetext":valueText,role:"slider",tabIndex:disabled?void 0:0,style:dom.getThumbStyle(state.context,index),onPointerDown(event){if(!interactive)return;send({type:"THUMB_POINTER_DOWN",index});event.stopPropagation()},onBlur(){if(!interactive)return;send("BLUR")},onFocus(){if(!interactive)return;send({type:"FOCUS",index})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;const step=(0,import_dom_event2.getEventStep)(event)*state.context.step;const keyMap={ArrowUp(){if(isHorizontal)return;send({type:"ARROW_INC",step,src:"ArrowUp"})},ArrowDown(){if(isHorizontal)return;send({type:"ARROW_DEC",step,src:"ArrowDown"})},ArrowLeft(){if(isVertical)return;send({type:"ARROW_DEC",step,src:"ArrowLeft"})},ArrowRight(){if(isVertical)return;send({type:"ARROW_INC",step,src:"ArrowRight"})},PageUp(){send({type:"ARROW_INC",step,src:"PageUp"})},PageDown(){send({type:"ARROW_DEC",step,src:"PageDown"})},Home(){send("HOME")},End(){send("END")}};const key=(0,import_dom_event2.getEventKey)(event,state.context);const exec=keyMap[key];if(exec){exec(event);event.preventDefault();event.stopPropagation()}}})},getHiddenInputProps(props2){const{index=0,name}=props2;return normalize.input({name:name??(state.context.name?state.context.name+(state.context.value.length>1?"[]":""):void 0),form:state.context.form,type:"text",hidden:true,defaultValue:state.context.value[index],id:dom.getHiddenInputId(state.context,index)})},rangeProps:normalize.element({id:dom.getRangeId(state.context),...parts.range.attrs,dir:state.context.dir,"data-focus":(0,import_dom_query2.dataAttr)(focused),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,style:dom.getRangeStyle(state.context)}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,id:dom.getControlId(state.context),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-focus":(0,import_dom_query2.dataAttr)(focused),style:dom.getControlStyle(),onPointerDown(event){if(!interactive)return;const evt=(0,import_dom_event2.getNativeEvent)(event);if(!(0,import_dom_event2.isLeftClick)(evt)||(0,import_dom_event2.isModifierKey)(evt))return;const point=(0,import_dom_event2.getEventPoint)(evt);send({type:"POINTER_DOWN",point});event.preventDefault();event.stopPropagation()}}),markerGroupProps:normalize.element({...parts.markerGroup.attrs,role:"presentation",dir:state.context.dir,"aria-hidden":true,"data-orientation":state.context.orientation,style:dom.getMarkerGroupStyle()}),getMarkerProps(props2){const style=dom.getMarkerStyle(state.context,props2.value);let markerState;const first=state.context.value[0];const last=state.context.value[state.context.value.length-1];if(props2.value<first){markerState="under-value"}else if(props2.value>last){markerState="over-value"}else{markerState="at-value"}return normalize.element({...parts.marker.attrs,id:dom.getMarkerId(state.context,props2.value),role:"presentation",dir:state.context.dir,"data-orientation":state.context.orientation,"data-value":props2.value,"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-state":markerState,style})}}}var import_core=require("@zag-js/core");var import_dom_event3=require("@zag-js/dom-event");var import_dom_query3=require("@zag-js/dom-query");var import_element_size=require("@zag-js/element-size");var import_form_utils2=require("@zag-js/form-utils");var import_numeric_range5=require("@zag-js/numeric-range");var import_utils=require("@zag-js/utils");var isEqualSize=(a,b)=>{return a?.width===b?.width&&a?.height===b?.height};function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core.createMachine)({id:"slider",initial:"idle",context:{thumbSize:null,thumbAlignment:"contain",min:0,max:100,step:1,value:[0],origin:"start",orientation:"horizontal",dir:"ltr",minStepsBetweenThumbs:0,disabled:false,...ctx,focusedIndex:-1,fieldsetDisabled:false},computed:{isHorizontal:ctx2=>ctx2.orientation==="horizontal",isVertical:ctx2=>ctx2.orientation==="vertical",isRtl:ctx2=>ctx2.orientation==="horizontal"&&ctx2.dir==="rtl",isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled,isInteractive:ctx2=>!(ctx2.readOnly||ctx2.isDisabled),hasMeasuredThumbSize:ctx2=>ctx2.thumbSize!=null,valuePercent(ctx2){return ctx2.value.map(value=>100*(0,import_numeric_range5.getValuePercent)(value,ctx2.min,ctx2.max))}},watch:{value:["syncInputElements"]},entry:["coarseValue"],activities:["trackFormControlState","trackThumbsSize"],on:{SET_VALUE:[{guard:"hasIndex",actions:"setValueAtIndex"},{actions:"setValue"}],INCREMENT:{actions:"incrementThumbAtIndex"},DECREMENT:{actions:"decrementThumbAtIndex"}},states:{idle:{on:{POINTER_DOWN:{target:"dragging",actions:["setClosestThumbIndex","setPointerValue","focusActiveThumb"]},FOCUS:{target:"focus",actions:"setFocusedIndex"},THUMB_POINTER_DOWN:{target:"dragging",actions:["setFocusedIndex","focusActiveThumb"]}}},focus:{entry:"focusActiveThumb",on:{POINTER_DOWN:{target:"dragging",actions:["setClosestThumbIndex","setPointerValue","focusActiveThumb"]},THUMB_POINTER_DOWN:{target:"dragging",actions:["setFocusedIndex","focusActiveThumb"]},ARROW_DEC:{actions:["decrementThumbAtIndex","invokeOnChangeEnd"]},ARROW_INC:{actions:["incrementThumbAtIndex","invokeOnChangeEnd"]},HOME:{actions:["setFocusedThumbToMin","invokeOnChangeEnd"]},END:{actions:["setFocusedThumbToMax","invokeOnChangeEnd"]},BLUR:{target:"idle",actions:"clearFocusedIndex"}}},dragging:{entry:"focusActiveThumb",activities:"trackPointerMove",on:{POINTER_UP:{target:"focus",actions:"invokeOnChangeEnd"},POINTER_MOVE:{actions:"setPointerValue"}}}}},{guards:{hasIndex:(_ctx,evt)=>evt.index!=null},activities:{trackFormControlState(ctx2,_evt,{initialContext}){return(0,import_form_utils2.trackFormControl)(dom.getRootEl(ctx2),{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){set.value(ctx2,initialContext.value)}})},trackPointerMove(ctx2,_evt,{send}){return(0,import_dom_event3.trackPointerMove)(dom.getDoc(ctx2),{onPointerMove(info){send({type:"POINTER_MOVE",point:info.point})},onPointerUp(){send("POINTER_UP")}})},trackThumbsSize(ctx2){if(ctx2.thumbAlignment!=="contain"||ctx2.thumbSize)return;return(0,import_element_size.trackElementsSize)({getNodes:()=>dom.getElements(ctx2),observeMutation:true,callback(size){if(!size||isEqualSize(ctx2.thumbSize,size))return;ctx2.thumbSize=size}})}},actions:{syncInputElements(ctx2){ctx2.value.forEach((value,index)=>{const inputEl=dom.getHiddenInputEl(ctx2,index);dom.setValue(inputEl,value)})},invokeOnChangeEnd(ctx2){ctx2.onValueChangeEnd?.({value:ctx2.value})},setClosestThumbIndex(ctx2,evt){const pointValue=dom.getValueFromPoint(ctx2,evt.point);if(pointValue==null)return;const focusedIndex=getClosestIndex(ctx2,pointValue);set.focusedIndex(ctx2,focusedIndex)},setFocusedIndex(ctx2,evt){set.focusedIndex(ctx2,evt.index)},clearFocusedIndex(ctx2){set.focusedIndex(ctx2,-1)},setPointerValue(ctx2,evt){const pointerValue=dom.getValueFromPoint(ctx2,evt.point);if(pointerValue==null)return;const value=constrainValue(ctx2,pointerValue,ctx2.focusedIndex);set.valueAtIndex(ctx2,ctx2.focusedIndex,value)},focusActiveThumb(ctx2){(0,import_dom_query3.raf)(()=>{const thumbEl=dom.getThumbEl(ctx2,ctx2.focusedIndex);thumbEl?.focus({preventScroll:true})})},decrementThumbAtIndex(ctx2,evt){const value=decrement(ctx2,evt.index,evt.step);set.value(ctx2,value)},incrementThumbAtIndex(ctx2,evt){const value=increment(ctx2,evt.index,evt.step);set.value(ctx2,value)},setFocusedThumbToMin(ctx2){const{min}=getRangeAtIndex(ctx2,ctx2.focusedIndex);set.valueAtIndex(ctx2,ctx2.focusedIndex,min)},setFocusedThumbToMax(ctx2){const{max}=getRangeAtIndex(ctx2,ctx2.focusedIndex);set.valueAtIndex(ctx2,ctx2.focusedIndex,max)},coarseValue(ctx2){const value=normalizeValues(ctx2,ctx2.value);set.value(ctx2,value)},setValueAtIndex(ctx2,evt){const value=constrainValue(ctx2,evt.value,evt.index);set.valueAtIndex(ctx2,evt.index,value)},setValue(ctx2,evt){const value=normalizeValues(ctx2,evt.value);set.value(ctx2,value)}}})}var invoke={change:ctx=>{ctx.onValueChange?.({value:Array.from(ctx.value)});dom.dispatchChangeEvent(ctx)},focusChange:ctx=>{ctx.onFocusChange?.({value:Array.from(ctx.value),focusedIndex:ctx.focusedIndex})}};var set={valueAtIndex:(ctx,index,value)=>{if((0,import_utils.isEqual)(ctx.value[index],value))return;ctx.value[index]=value;invoke.change(ctx)},value:(ctx,value)=>{if((0,import_utils.isEqual)(ctx.value,value))return;assignArray(ctx.value,value);invoke.change(ctx)},focusedIndex:(ctx,index)=>{if((0,import_utils.isEqual)(ctx.focusedIndex,index))return;ctx.focusedIndex=index;invoke.focusChange(ctx)}};var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["aria-label","aria-labelledby","dir","disabled","form","getAriaValueText","getRootNode","id","ids","invalid","max","min","minStepsBetweenThumbs","name","onFocusChange","onValueChange","onValueChangeEnd","orientation","origin","readOnly","step","thumbAlignment","thumbAlignment","thumbSize","value"]);var splitProps=(0,import_utils2.createSplitProps)(props);var thumbProps=(0,import_types.createProps)()(["index","name"]);var splitThumbProps=(0,import_utils2.createSplitProps)(thumbProps);0&&(module.exports={anatomy,connect,machine,props,splitProps,splitThumbProps,thumbProps});
 //# sourceMappingURL=index.js.map