@zag-js/slider 1.34.1 → 1.35.1

package/dist/slider.machine.mjs

@@ -0,0 +1,354 @@
+// src/slider.machine.ts
+import { createMachine, memo } from "@zag-js/core";
+import { raf, resizeObserverBorderBox, setElementValue, trackFormControl, trackPointerMove } from "@zag-js/dom-query";
+import {
+  callAll,
+  clampValue,
+  getValuePercent,
+  getValueRanges,
+  isEqual,
+  isValueWithinRange,
+  pick,
+  setValueAtIndex,
+  snapValueToStep
+} from "@zag-js/utils";
+import * as dom from "./slider.dom.mjs";
+import {
+  constrainValue,
+  decrement,
+  getClosestIndex,
+  getRangeAtIndex,
+  increment,
+  normalizeValues,
+  resolveThumbCollision,
+  selectMovableThumb
+} from "./slider.utils.mjs";
+var isEqualSize = (a, b) => {
+  return a?.width === b?.width && a?.height === b?.height;
+};
+var normalize = (value, min, max, step, minStepsBetweenThumbs) => {
+  const ranges = getValueRanges(value, min, max, minStepsBetweenThumbs * step);
+  return ranges.map((range) => {
+    const snapValue = snapValueToStep(range.value, range.min, range.max, step);
+    const rangeValue = clampValue(snapValue, range.min, range.max);
+    if (!isValueWithinRange(rangeValue, min, max)) {
+      throw new Error(
+        "[zag-js/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid"
+      );
+    }
+    return rangeValue;
+  });
+};
+var machine = createMachine({
+  props({ props }) {
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const step = props.step ?? 1;
+    const defaultValue = props.defaultValue ?? [min];
+    const minStepsBetweenThumbs = props.minStepsBetweenThumbs ?? 0;
+    return {
+      dir: "ltr",
+      thumbAlignment: "contain",
+      origin: "start",
+      orientation: "horizontal",
+      thumbCollisionBehavior: "none",
+      minStepsBetweenThumbs,
+      ...props,
+      defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
+      value: props.value ? normalize(props.value, min, max, step, minStepsBetweenThumbs) : void 0,
+      max,
+      step,
+      min
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable, getContext }) {
+    return {
+      thumbSize: bindable(() => ({
+        defaultValue: prop("thumbSize") || null
+      })),
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        isEqual,
+        hash(a) {
+          return a.join(",");
+        },
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      })),
+      focusedIndex: bindable(() => ({
+        defaultValue: -1,
+        onChange(value) {
+          const ctx = getContext();
+          prop("onFocusChange")?.({ focusedIndex: value, value: ctx.get("value") });
+        }
+      })),
+      fieldsetDisabled: bindable(() => ({
+        defaultValue: false
+      }))
+    };
+  },
+  refs() {
+    return {
+      thumbDragOffset: null,
+      thumbDragStartValue: null
+    };
+  },
+  computed: {
+    isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+    isVertical: ({ prop }) => prop("orientation") === "vertical",
+    isRtl: ({ prop }) => prop("orientation") === "horizontal" && prop("dir") === "rtl",
+    isDisabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+    isInteractive: ({ prop, computed }) => !(prop("readOnly") || computed("isDisabled")),
+    hasMeasuredThumbSize: ({ context }) => context.get("thumbSize") != null,
+    valuePercent: memo(
+      ({ context, prop }) => [context.get("value"), prop("min"), prop("max")],
+      ([value, min, max]) => value.map((value2) => 100 * getValuePercent(value2, min, max))
+    )
+  },
+  watch({ track, action, context, computed, send }) {
+    track([() => context.hash("value")], () => {
+      action(["syncInputElements", "dispatchChangeEvent"]);
+    });
+    track([() => computed("isDisabled")], () => {
+      if (computed("isDisabled")) {
+        send({ type: "POINTER_CANCEL" });
+      }
+    });
+  },
+  effects: ["trackFormControlState", "trackThumbSize"],
+  on: {
+    SET_VALUE: [
+      {
+        guard: "hasIndex",
+        actions: ["setValueAtIndex", "invokeOnChangeEnd"]
+      },
+      {
+        actions: ["setValue", "invokeOnChangeEnd"]
+      }
+    ],
+    INCREMENT: {
+      actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"]
+    },
+    DECREMENT: {
+      actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
+        },
+        FOCUS: {
+          target: "focus",
+          actions: ["setFocusedIndex"]
+        },
+        THUMB_POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "focusActiveThumb"]
+        }
+      }
+    },
+    focus: {
+      entry: ["focusActiveThumb"],
+      on: {
+        POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setClosestThumbIndex", "setThumbDragStartValue", "setPointerValue", "focusActiveThumb"]
+        },
+        THUMB_POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setFocusedIndex", "setThumbDragOffset", "setThumbDragStartValue", "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"],
+      effects: ["trackPointerMove"],
+      on: {
+        POINTER_UP: {
+          target: "focus",
+          actions: ["invokeOnChangeEnd", "clearThumbDragOffset", "clearThumbDragStartValue"]
+        },
+        POINTER_MOVE: {
+          actions: ["setPointerValue"]
+        },
+        POINTER_CANCEL: {
+          target: "idle",
+          actions: ["clearFocusedIndex", "clearThumbDragOffset", "clearThumbDragStartValue"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      hasIndex: ({ event }) => event.index != null
+    },
+    effects: {
+      trackFormControlState({ context, scope }) {
+        return trackFormControl(dom.getRootEl(scope), {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
+          }
+        });
+      },
+      trackPointerMove({ scope, send }) {
+        return trackPointerMove(scope.getDoc(), {
+          onPointerMove(info) {
+            send({ type: "POINTER_MOVE", point: info.point });
+          },
+          onPointerUp() {
+            send({ type: "POINTER_UP" });
+          }
+        });
+      },
+      trackThumbSize({ context, scope, prop }) {
+        if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
+        const exec = (el) => {
+          const rect = dom.getOffsetRect(el);
+          const size = pick(rect, ["width", "height"]);
+          if (isEqualSize(context.get("thumbSize"), size)) return;
+          context.set("thumbSize", size);
+        };
+        const thumbEls = dom.getThumbEls(scope);
+        thumbEls.forEach(exec);
+        const cleanups = thumbEls.map((el) => resizeObserverBorderBox.observe(el, () => exec(el)));
+        return callAll(...cleanups);
+      }
+    },
+    actions: {
+      dispatchChangeEvent({ context, scope }) {
+        dom.dispatchChangeEvent(scope, context.get("value"));
+      },
+      syncInputElements({ context, scope }) {
+        context.get("value").forEach((value, index) => {
+          const inputEl = dom.getHiddenInputEl(scope, index);
+          setElementValue(inputEl, value.toString());
+        });
+      },
+      invokeOnChangeEnd({ prop, context }) {
+        queueMicrotask(() => {
+          prop("onValueChangeEnd")?.({ value: context.get("value") });
+        });
+      },
+      setClosestThumbIndex(params) {
+        const { context, event } = params;
+        const pointValue = dom.getPointValue(params, event.point);
+        if (pointValue == null) return;
+        const focusedIndex = getClosestIndex(params, pointValue);
+        context.set("focusedIndex", focusedIndex);
+      },
+      setFocusedIndex(params) {
+        const { context, event } = params;
+        const movableIndex = selectMovableThumb(params, event.index);
+        context.set("focusedIndex", movableIndex);
+      },
+      clearFocusedIndex({ context }) {
+        context.set("focusedIndex", -1);
+      },
+      setThumbDragOffset(params) {
+        const { refs, event } = params;
+        refs.set("thumbDragOffset", event.offset ?? null);
+      },
+      clearThumbDragOffset({ refs }) {
+        refs.set("thumbDragOffset", null);
+      },
+      setThumbDragStartValue({ refs, context }) {
+        refs.set("thumbDragStartValue", context.get("value").slice());
+      },
+      clearThumbDragStartValue({ refs }) {
+        refs.set("thumbDragStartValue", null);
+      },
+      setPointerValue(params) {
+        queueMicrotask(() => {
+          const { context, event, prop, refs } = params;
+          const pointValue = dom.getPointValue(params, event.point);
+          if (pointValue == null) return;
+          const focusedIndex = context.get("focusedIndex");
+          const startValues = refs.get("thumbDragStartValue");
+          const result = resolveThumbCollision(
+            prop("thumbCollisionBehavior"),
+            focusedIndex,
+            pointValue,
+            context.get("value"),
+            prop("min"),
+            prop("max"),
+            prop("step"),
+            prop("minStepsBetweenThumbs"),
+            startValues?.[focusedIndex]
+          );
+          if (result.swapped) {
+            context.set("focusedIndex", result.index);
+          }
+          context.set("value", result.values);
+        });
+      },
+      focusActiveThumb({ scope, context }) {
+        raf(() => {
+          const thumbEl = dom.getThumbEl(scope, context.get("focusedIndex"));
+          thumbEl?.focus({ preventScroll: true });
+        });
+      },
+      decrementThumbAtIndex(params) {
+        const { context, event } = params;
+        const value = decrement(params, event.index, event.step);
+        context.set("value", value);
+      },
+      incrementThumbAtIndex(params) {
+        const { context, event } = params;
+        const value = increment(params, event.index, event.step);
+        context.set("value", value);
+      },
+      setFocusedThumbToMin(params) {
+        const { context } = params;
+        const index = context.get("focusedIndex");
+        const { min } = getRangeAtIndex(params, index);
+        context.set("value", (prev) => setValueAtIndex(prev, index, min));
+      },
+      setFocusedThumbToMax(params) {
+        const { context } = params;
+        const index = context.get("focusedIndex");
+        const { max } = getRangeAtIndex(params, index);
+        context.set("value", (prev) => setValueAtIndex(prev, index, max));
+      },
+      setValueAtIndex(params) {
+        const { context, event } = params;
+        const value = constrainValue(params, event.value, event.index);
+        context.set("value", (prev) => setValueAtIndex(prev, event.index, value));
+      },
+      setValue(params) {
+        const { context, event } = params;
+        const value = normalizeValues(params, event.value);
+        context.set("value", value);
+      }
+    }
+  }
+});
+export {
+  machine
+};

package/dist/slider.props.d.mts

@@ -0,0 +1,12 @@
+import { SliderProps, MarkerProps, ThumbProps } from './slider.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof SliderProps)[];
+declare const splitProps: <Props extends Partial<SliderProps>>(props: Props) => [Partial<SliderProps>, Omit<Props, keyof SliderProps>];
+declare const thumbProps: (keyof ThumbProps)[];
+declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
+declare const markerProps: "value"[];
+declare const splitMarkerProps: <Props extends MarkerProps>(props: Props) => [MarkerProps, Omit<Props, "value">];
+
+export { markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };

package/dist/slider.props.d.ts

@@ -0,0 +1,12 @@
+import { SliderProps, MarkerProps, ThumbProps } from './slider.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof SliderProps)[];
+declare const splitProps: <Props extends Partial<SliderProps>>(props: Props) => [Partial<SliderProps>, Omit<Props, keyof SliderProps>];
+declare const thumbProps: (keyof ThumbProps)[];
+declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
+declare const markerProps: "value"[];
+declare const splitMarkerProps: <Props extends MarkerProps>(props: Props) => [MarkerProps, Omit<Props, "value">];
+
+export { markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };

package/dist/slider.props.js

@@ -0,0 +1,74 @@
+"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/slider.props.ts
+var slider_props_exports = {};
+__export(slider_props_exports, {
+  markerProps: () => markerProps,
+  props: () => props,
+  splitMarkerProps: () => splitMarkerProps,
+  splitProps: () => splitProps,
+  splitThumbProps: () => splitThumbProps,
+  thumbProps: () => thumbProps
+});
+module.exports = __toCommonJS(slider_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = 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",
+  "thumbCollisionBehavior",
+  "thumbSize",
+  "value",
+  "defaultValue"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+var thumbProps = (0, import_types.createProps)()(["index", "name"]);
+var splitThumbProps = (0, import_utils.createSplitProps)(thumbProps);
+var markerProps = (0, import_types.createProps)()(["value"]);
+var splitMarkerProps = (0, import_utils.createSplitProps)(markerProps);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  markerProps,
+  props,
+  splitMarkerProps,
+  splitProps,
+  splitThumbProps,
+  thumbProps
+});

package/dist/slider.props.mjs

@@ -0,0 +1,44 @@
+// src/slider.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = 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",
+  "thumbCollisionBehavior",
+  "thumbSize",
+  "value",
+  "defaultValue"
+]);
+var splitProps = createSplitProps(props);
+var thumbProps = createProps()(["index", "name"]);
+var splitThumbProps = createSplitProps(thumbProps);
+var markerProps = createProps()(["value"]);
+var splitMarkerProps = createSplitProps(markerProps);
+export {
+  markerProps,
+  props,
+  splitMarkerProps,
+  splitProps,
+  splitThumbProps,
+  thumbProps
+};

package/dist/slider.style.d.mts

@@ -0,0 +1,19 @@
+import { Params } from '@zag-js/core';
+import { Style } from '@zag-js/types';
+import { SliderSchema } from './slider.types.mjs';
+
+type Ctx = Params<SliderSchema>;
+declare function getRangeOffsets(params: Pick<Ctx, "prop" | "computed">): {
+    start: string;
+    end: string;
+};
+declare function getRangeStyle(params: Pick<Ctx, "computed">): Style;
+declare function getThumbOffset(params: Pick<Ctx, "computed" | "context" | "prop">, value: number): string;
+declare function getVisibility(params: Pick<Ctx, "computed" | "prop">): "hidden" | "visible";
+declare function getThumbStyle(params: Pick<Ctx, "computed" | "context" | "prop">, index: number): Style;
+declare function getControlStyle(): Style;
+declare function getRootStyle(params: Pick<Ctx, "context" | "computed" | "prop">): Style;
+declare function getMarkerStyle(params: Pick<Ctx, "computed" | "context" | "prop">, value: number): Style;
+declare function getMarkerGroupStyle(): Style;
+
+export { getControlStyle, getMarkerGroupStyle, getMarkerStyle, getRangeOffsets, getRangeStyle, getRootStyle, getThumbOffset, getThumbStyle, getVisibility };

package/dist/slider.style.d.ts

@@ -0,0 +1,19 @@
+import { Params } from '@zag-js/core';
+import { Style } from '@zag-js/types';
+import { SliderSchema } from './slider.types.js';
+
+type Ctx = Params<SliderSchema>;
+declare function getRangeOffsets(params: Pick<Ctx, "prop" | "computed">): {
+    start: string;
+    end: string;
+};
+declare function getRangeStyle(params: Pick<Ctx, "computed">): Style;
+declare function getThumbOffset(params: Pick<Ctx, "computed" | "context" | "prop">, value: number): string;
+declare function getVisibility(params: Pick<Ctx, "computed" | "prop">): "hidden" | "visible";
+declare function getThumbStyle(params: Pick<Ctx, "computed" | "context" | "prop">, index: number): Style;
+declare function getControlStyle(): Style;
+declare function getRootStyle(params: Pick<Ctx, "context" | "computed" | "prop">): Style;
+declare function getMarkerStyle(params: Pick<Ctx, "computed" | "context" | "prop">, value: number): Style;
+declare function getMarkerGroupStyle(): Style;
+
+export { getControlStyle, getMarkerGroupStyle, getMarkerStyle, getRangeOffsets, getRangeStyle, getRootStyle, getThumbOffset, getThumbStyle, getVisibility };