@zag-js/slider 0.10.4 → 0.11.0

package/dist/index.mjs

@@ -1,4 +1,657 @@
-export { anatomy } from './slider.anatomy.mjs';
-export { connect } from './slider.connect.mjs';
-export { dom as unstable__dom } from './slider.dom.mjs';
-export { machine } from './slider.machine.mjs';
+// src/slider.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("slider").parts(
+  "root",
+  "label",
+  "thumb",
+  "hiddenInput",
+  "output",
+  "track",
+  "range",
+  "control",
+  "markerGroup",
+  "marker"
+);
+var parts = anatomy.build();
+
+// src/slider.connect.ts
+import {
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  getNativeEvent,
+  isLeftClick,
+  isModifiedEvent
+} from "@zag-js/dom-event";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+import { getPercentValue as getPercentValue2, getValuePercent as getValuePercent2 } from "@zag-js/numeric-range";
+
+// src/slider.dom.ts
+import { getRelativePoint } from "@zag-js/dom-event";
+import { createScope } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/form-utils";
+import { getPercentValue } from "@zag-js/numeric-range";
+
+// src/slider.style.ts
+import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
+function getVerticalThumbOffset(ctx) {
+  const { height = 0 } = ctx.thumbSize ?? {};
+  const getValue = 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 = getValueTransformer([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+  }
+  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getThumbOffset(ctx) {
+  const percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
+  if (ctx.thumbAlignment === "center") {
+    return `${percent}%`;
+  }
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getVisibility(ctx) {
+  let visibility = "visible";
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden";
+  }
+  return visibility;
+}
+function getThumbStyle(ctx) {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  return {
+    visibility: getVisibility(ctx),
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: "var(--slider-thumb-offset)"
+  };
+}
+function getRangeOffsets(ctx) {
+  let start = "0%";
+  let end = `${100 - ctx.valuePercent}%`;
+  if (ctx.origin === "center") {
+    const isNegative = ctx.valuePercent < 50;
+    start = isNegative ? `${ctx.valuePercent}%` : "50%";
+    end = isNegative ? "50%" : end;
+  }
+  return { start, end };
+}
+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 getControlStyle() {
+  return {
+    touchAction: "none",
+    userSelect: "none",
+    position: "relative"
+  };
+}
+function getRootStyle(ctx) {
+  const range = getRangeOffsets(ctx);
+  return {
+    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
+    "--slider-thumb-offset": getThumbOffset(ctx),
+    "--slider-range-start": range.start,
+    "--slider-range-end": range.end
+  };
+}
+function getMarkerStyle(ctx, percent) {
+  return {
+    position: "absolute",
+    pointerEvents: "none",
+    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
+  };
+}
+function getLabelStyle() {
+  return { userSelect: "none" };
+}
+function getTrackStyle() {
+  return { position: "relative" };
+}
+function getMarkerGroupStyle() {
+  return {
+    userSelect: "none",
+    pointerEvents: "none",
+    position: "relative"
+  };
+}
+var styles = {
+  getThumbOffset,
+  getControlStyle,
+  getThumbStyle,
+  getRangeStyle,
+  getRootStyle,
+  getMarkerStyle,
+  getLabelStyle,
+  getTrackStyle,
+  getMarkerGroupStyle
+};
+
+// src/slider.dom.ts
+var dom = createScope({
+  ...styles,
+  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
+  getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `slider:${ctx.id}:input`,
+  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
+  getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
+  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
+  getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getValueFromPoint(ctx, point) {
+    const relativePoint = getRelativePoint(point, dom.getControlEl(ctx));
+    const percent = relativePoint.getPercentValue({
+      orientation: ctx.orientation,
+      dir: ctx.dir,
+      inverted: { y: true }
+    });
+    return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
+  },
+  dispatchChangeEvent(ctx) {
+    const input = dom.getHiddenInputEl(ctx);
+    if (!input)
+      return;
+    dispatchInputValueEvent(input, { value: ctx.value });
+  }
+});
+
+// src/slider.connect.ts
+function connect(state, send, normalize) {
+  const ariaLabel = state.context["aria-label"];
+  const ariaLabelledBy = state.context["aria-labelledby"];
+  const ariaValueText = state.context.getAriaValueText?.(state.context.value);
+  const isFocused = state.matches("focus");
+  const isDragging = state.matches("dragging");
+  const isDisabled = state.context.disabled;
+  const isInteractive = state.context.isInteractive;
+  const isInvalid = state.context.invalid;
+  function getPercentValueFn(percent) {
+    return getPercentValue2(percent, state.context.min, state.context.max, state.context.step);
+  }
+  function getValuePercentFn(value) {
+    return getValuePercent2(value, state.context.min, state.context.max);
+  }
+  return {
+    /**
+     * Whether the slider is focused.
+     */
+    isFocused,
+    /**
+     * Whether the slider is being dragged.
+     */
+    isDragging,
+    /**
+     * The value of the slider.
+     */
+    value: state.context.value,
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: getValuePercent2(state.context.value, state.context.min, state.context.max),
+    /**
+     * Function to set the value of the slider.
+     */
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    /**
+     * Returns the value of the slider at the given percent.
+     */
+    getPercentValue: getPercentValueFn,
+    /**
+     * Returns the percent of the slider at the given value.
+     */
+    getValuePercent: getValuePercentFn,
+    /**
+     * Function to focus the slider.
+     */
+    focus() {
+      dom.getThumbEl(state.context)?.focus();
+    },
+    /**
+     * Function to increment the value of the slider by the step.
+     */
+    increment() {
+      send("INCREMENT");
+    },
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
+    decrement() {
+      send("DECREMENT");
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
+      "data-orientation": state.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: dom.getRootStyle(state.context)
+    }),
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
+      onClick(event) {
+        if (!isInteractive)
+          return;
+        event.preventDefault();
+        dom.getThumbEl(state.context)?.focus();
+      },
+      style: dom.getLabelStyle()
+    }),
+    thumbProps: normalize.element({
+      ...parts.thumb.attrs,
+      id: dom.getThumbId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      draggable: false,
+      "aria-invalid": ariaAttr(isInvalid),
+      "data-invalid": dataAttr(isInvalid),
+      "aria-disabled": ariaAttr(isDisabled),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
+      "aria-orientation": state.context.orientation,
+      "aria-valuemax": state.context.max,
+      "aria-valuemin": state.context.min,
+      "aria-valuenow": state.context.value,
+      "aria-valuetext": ariaValueText,
+      role: "slider",
+      tabIndex: isDisabled ? void 0 : 0,
+      onBlur() {
+        if (!isInteractive)
+          return;
+        send("BLUR");
+      },
+      onFocus() {
+        if (!isInteractive)
+          return;
+        send("FOCUS");
+      },
+      onKeyDown(event) {
+        if (!isInteractive)
+          return;
+        const step = getEventStep(event) * state.context.step;
+        let prevent = true;
+        const keyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step });
+            prevent = state.context.isVertical;
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step });
+            prevent = state.context.isVertical;
+          },
+          ArrowLeft() {
+            send({ type: "ARROW_LEFT", step });
+            prevent = state.context.isHorizontal;
+          },
+          ArrowRight() {
+            send({ type: "ARROW_RIGHT", step });
+            prevent = state.context.isHorizontal;
+          },
+          PageUp() {
+            send({ type: "PAGE_UP", step });
+          },
+          PageDown() {
+            send({ type: "PAGE_DOWN", step });
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          }
+        };
+        const key = getEventKey(event, state.context);
+        const exec = keyMap[key];
+        if (!exec)
+          return;
+        exec(event);
+        if (prevent) {
+          event.preventDefault();
+        }
+      },
+      style: dom.getThumbStyle(state.context)
+    }),
+    hiddenInputProps: normalize.input({
+      ...parts.hiddenInput.attrs,
+      type: "text",
+      defaultValue: state.context.value,
+      name: state.context.name,
+      form: state.context.form,
+      id: dom.getHiddenInputId(state.context),
+      hidden: true
+    }),
+    outputProps: normalize.output({
+      ...parts.output.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getOutputId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
+      "aria-live": "off"
+    }),
+    trackProps: normalize.element({
+      ...parts.track.attrs,
+      id: dom.getTrackId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
+      "data-invalid": dataAttr(isInvalid),
+      "data-orientation": state.context.orientation,
+      style: dom.getTrackStyle()
+    }),
+    rangeProps: normalize.element({
+      ...parts.range.attrs,
+      id: dom.getRangeId(state.context),
+      "data-focus": dataAttr(isFocused),
+      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state.context.orientation,
+      style: dom.getRangeStyle(state.context)
+    }),
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      id: dom.getControlId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      onPointerDown(event) {
+        if (!isInteractive)
+          return;
+        const evt = getNativeEvent(event);
+        if (!isLeftClick(evt) || isModifiedEvent(evt))
+          return;
+        const point = getEventPoint(evt);
+        send({ type: "POINTER_DOWN", point });
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      style: dom.getControlStyle()
+    }),
+    markerGroupProps: normalize.element({
+      ...parts.markerGroup.attrs,
+      role: "presentation",
+      "aria-hidden": true,
+      "data-orientation": state.context.orientation,
+      style: dom.getMarkerGroupStyle()
+    }),
+    getMarkerProps({ value }) {
+      const percent = getValuePercentFn(value);
+      const style = dom.getMarkerStyle(state.context, percent);
+      const markerState = value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value";
+      return normalize.element({
+        ...parts.marker.attrs,
+        id: dom.getMarkerId(state.context, value),
+        role: "presentation",
+        "data-orientation": state.context.orientation,
+        "data-value": value,
+        "data-disabled": dataAttr(isDisabled),
+        "data-state": markerState,
+        style
+      });
+    }
+  };
+}
+
+// src/slider.machine.ts
+import { createMachine } from "@zag-js/core";
+import { trackPointerMove } from "@zag-js/dom-event";
+import { raf } from "@zag-js/dom-query";
+import { trackElementSize } from "@zag-js/element-size";
+import { trackFormControl } from "@zag-js/form-utils";
+import { clampValue as clampValue2, getValuePercent as getValuePercent3 } from "@zag-js/numeric-range";
+import { compact } from "@zag-js/utils";
+
+// src/slider.utils.ts
+import { clampValue, getNextStepValue, getPreviousStepValue, snapValueToStep } from "@zag-js/numeric-range";
+function constrainValue(ctx, value) {
+  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+  return clampValue(snapValue, ctx.min, ctx.max);
+}
+function decrement(ctx, step) {
+  const index = 0;
+  const values = getPreviousStepValue(index, {
+    ...ctx,
+    step: step ?? ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+function increment(ctx, step) {
+  const index = 0;
+  const values = getNextStepValue(index, {
+    ...ctx,
+    step: step ?? ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+
+// src/slider.machine.ts
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "slider",
+      initial: "idle",
+      context: {
+        thumbSize: null,
+        thumbAlignment: "contain",
+        disabled: false,
+        threshold: 5,
+        dir: "ltr",
+        origin: "start",
+        orientation: "horizontal",
+        initialValue: null,
+        value: 0,
+        step: 1,
+        min: 0,
+        max: 100,
+        ...ctx
+      },
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical",
+        isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
+        valuePercent: (ctx2) => 100 * getValuePercent3(ctx2.value, ctx2.min, ctx2.max)
+      },
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"]
+      },
+      activities: ["trackFormControlState", "trackThumbSize"],
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        INCREMENT: {
+          actions: "increment"
+        },
+        DECREMENT: {
+          actions: "decrement"
+        }
+      },
+      entry: ["checkValue"],
+      states: {
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            FOCUS: "focus"
+          }
+        },
+        focus: {
+          entry: "focusThumb",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "decrement"
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "increment"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "decrement"
+            },
+            PAGE_UP: {
+              actions: "increment"
+            },
+            PAGE_DOWN: {
+              actions: "decrement"
+            },
+            HOME: {
+              actions: "setToMin"
+            },
+            END: {
+              actions: "setToMax"
+            },
+            BLUR: "idle"
+          }
+        },
+        dragging: {
+          entry: "focusThumb",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focus",
+              actions: "invokeOnChangeEnd"
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => ctx2.isVertical
+      },
+      activities: {
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              if (ctx2.initialValue != null) {
+                ctx2.value = ctx2.initialValue;
+              }
+            }
+          });
+        },
+        trackPointerMove(ctx2, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx2), {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+            }
+          });
+        },
+        trackThumbSize(ctx2, _evt) {
+          if (ctx2.thumbAlignment !== "contain")
+            return;
+          return trackElementSize(dom.getThumbEl(ctx2), (size) => {
+            if (size)
+              ctx2.thumbSize = size;
+          });
+        }
+      },
+      actions: {
+        checkValue(ctx2) {
+          const value = constrainValue(ctx2, ctx2.value);
+          ctx2.value = value;
+          ctx2.initialValue = value;
+        },
+        invokeOnChangeStart(ctx2) {
+          ctx2.onChangeStart?.({ value: ctx2.value });
+        },
+        invokeOnChangeEnd(ctx2) {
+          ctx2.onChangeEnd?.({ value: ctx2.value });
+        },
+        invokeOnChange(ctx2) {
+          ctx2.onChange?.({ value: ctx2.value });
+        },
+        dispatchChangeEvent(ctx2) {
+          dom.dispatchChangeEvent(ctx2);
+        },
+        setPointerValue(ctx2, evt) {
+          const value = dom.getValueFromPoint(ctx2, evt.point);
+          if (value == null)
+            return;
+          ctx2.value = clampValue2(value, ctx2.min, ctx2.max);
+        },
+        focusThumb(ctx2) {
+          raf(() => dom.getThumbEl(ctx2)?.focus());
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = decrement(ctx2, evt.step);
+        },
+        increment(ctx2, evt) {
+          ctx2.value = increment(ctx2, evt.step);
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min;
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = constrainValue(ctx2, evt.value);
+        }
+      }
+    }
+  );
+}
+export {
+  anatomy,
+  connect,
+  machine,
+  dom as unstable__dom
+};
+//# sourceMappingURL=index.mjs.map