@zag-js/slider 1.34.0 → 1.35.0

package/dist/slider.connect.mjs

@@ -0,0 +1,334 @@
+// src/slider.connect.ts
+import {
+  ariaAttr,
+  dataAttr,
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  isLeftClick,
+  isModifierKey
+} from "@zag-js/dom-query";
+import { first, getPercentValue, getValuePercent, last } from "@zag-js/utils";
+import { parts } from "./slider.anatomy.mjs";
+import * as dom from "./slider.dom.mjs";
+import {
+  getControlStyle,
+  getMarkerGroupStyle,
+  getMarkerStyle,
+  getRangeStyle,
+  getRootStyle,
+  getThumbStyle
+} from "./slider.style.mjs";
+import { getRangeAtIndex } from "./slider.utils.mjs";
+function connect(service, normalize) {
+  const { state, send, context, prop, computed, scope } = service;
+  const ariaLabel = prop("aria-label");
+  const ariaLabelledBy = prop("aria-labelledby");
+  const sliderValue = context.get("value");
+  const focusedIndex = context.get("focusedIndex");
+  const focused = state.matches("focus");
+  const dragging = state.matches("dragging");
+  const disabled = computed("isDisabled");
+  const invalid = prop("invalid");
+  const interactive = computed("isInteractive");
+  const isHorizontal = prop("orientation") === "horizontal";
+  const isVertical = prop("orientation") === "vertical";
+  function getValuePercentFn(value) {
+    return getValuePercent(value, prop("min"), prop("max"));
+  }
+  function getPercentValueFn(percent) {
+    return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
+  }
+  return {
+    value: sliderValue,
+    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(service, index).min;
+    },
+    getThumbMax(index) {
+      return getRangeAtIndex(service, index).max;
+    },
+    increment(index) {
+      send({ type: "INCREMENT", index });
+    },
+    decrement(index) {
+      send({ type: "DECREMENT", index });
+    },
+    focus() {
+      if (!interactive) return;
+      send({ type: "FOCUS", index: 0 });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        "data-invalid": dataAttr(invalid),
+        "data-dragging": dataAttr(dragging),
+        "data-focus": dataAttr(focused),
+        id: dom.getLabelId(scope),
+        htmlFor: dom.getHiddenInputId(scope, 0),
+        onClick(event) {
+          if (!interactive) return;
+          event.preventDefault();
+          dom.getFirstThumbEl(scope)?.focus();
+        },
+        style: {
+          userSelect: "none",
+          WebkitUserSelect: "none"
+        }
+      });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        "data-dragging": dataAttr(dragging),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        style: getRootStyle(service)
+      });
+    },
+    getValueTextProps() {
+      return normalize.element({
+        ...parts.valueText.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        id: dom.getValueTextId(scope)
+      });
+    },
+    getTrackProps() {
+      return normalize.element({
+        ...parts.track.attrs,
+        dir: prop("dir"),
+        id: dom.getTrackId(scope),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-dragging": dataAttr(dragging),
+        "data-orientation": prop("orientation"),
+        "data-focus": dataAttr(focused),
+        style: { position: "relative" }
+      });
+    },
+    getThumbProps(props) {
+      const { index = 0, name } = props;
+      const value = sliderValue[index];
+      const range = getRangeAtIndex(service, index);
+      const valueText = prop("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: prop("dir"),
+        "data-index": index,
+        "data-name": name,
+        id: dom.getThumbId(scope, index),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        "data-focus": dataAttr(focused && focusedIndex === index),
+        "data-dragging": dataAttr(dragging && focusedIndex === index),
+        draggable: false,
+        "aria-disabled": ariaAttr(disabled),
+        "aria-label": _ariaLabel,
+        "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(scope),
+        "aria-orientation": prop("orientation"),
+        "aria-valuemax": range.max,
+        "aria-valuemin": range.min,
+        "aria-valuenow": sliderValue[index],
+        "aria-valuetext": valueText,
+        role: "slider",
+        tabIndex: disabled ? void 0 : 0,
+        style: getThumbStyle(service, index),
+        onPointerDown(event) {
+          if (!interactive) return;
+          if (!isLeftClick(event)) return;
+          const thumbEl = event.currentTarget;
+          const rect = thumbEl.getBoundingClientRect();
+          const midpoint = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+          };
+          const offset = {
+            x: event.clientX - midpoint.x,
+            y: event.clientY - midpoint.y
+          };
+          send({ type: "THUMB_POINTER_DOWN", index, offset });
+          event.stopPropagation();
+        },
+        onBlur() {
+          if (!interactive) return;
+          send({ type: "BLUR" });
+        },
+        onFocus() {
+          if (!interactive) return;
+          send({ type: "FOCUS", index });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          const step = getEventStep(event) * prop("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({ type: "HOME" });
+            },
+            End() {
+              send({ type: "END" });
+            }
+          };
+          const key = getEventKey(event, {
+            dir: prop("dir"),
+            orientation: prop("orientation")
+          });
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      });
+    },
+    getHiddenInputProps(props) {
+      const { index = 0, name } = props;
+      return normalize.input({
+        name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
+        form: prop("form"),
+        type: "text",
+        hidden: true,
+        defaultValue: sliderValue[index],
+        id: dom.getHiddenInputId(scope, index)
+      });
+    },
+    getRangeProps() {
+      return normalize.element({
+        id: dom.getRangeId(scope),
+        ...parts.range.attrs,
+        dir: prop("dir"),
+        "data-dragging": dataAttr(dragging),
+        "data-focus": dataAttr(focused),
+        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        style: getRangeStyle(service)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: prop("dir"),
+        id: dom.getControlId(scope),
+        "data-dragging": dataAttr(dragging),
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        style: getControlStyle(),
+        onPointerDown(event) {
+          if (!interactive) return;
+          if (!isLeftClick(event)) return;
+          if (isModifierKey(event)) return;
+          const point = getEventPoint(event);
+          send({ type: "POINTER_DOWN", point });
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      });
+    },
+    getMarkerGroupProps() {
+      return normalize.element({
+        ...parts.markerGroup.attrs,
+        role: "presentation",
+        dir: prop("dir"),
+        "aria-hidden": true,
+        "data-orientation": prop("orientation"),
+        style: getMarkerGroupStyle()
+      });
+    },
+    getMarkerProps(props) {
+      const style = getMarkerStyle(service, props.value);
+      let markerState;
+      if (props.value < first(sliderValue)) {
+        markerState = "under-value";
+      } else if (props.value > last(sliderValue)) {
+        markerState = "over-value";
+      } else {
+        markerState = "at-value";
+      }
+      return normalize.element({
+        ...parts.marker.attrs,
+        id: dom.getMarkerId(scope, props.value),
+        role: "presentation",
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        "data-value": props.value,
+        "data-disabled": dataAttr(disabled),
+        "data-state": markerState,
+        style
+      });
+    },
+    getDraggingIndicatorProps(props) {
+      const { index = 0 } = props;
+      const isDragging = index === focusedIndex && dragging;
+      return normalize.element({
+        ...parts.draggingIndicator.attrs,
+        role: "presentation",
+        dir: prop("dir"),
+        hidden: !isDragging,
+        "data-orientation": prop("orientation"),
+        "data-state": isDragging ? "open" : "closed",
+        style: getThumbStyle(service, index)
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/slider.dom.d.mts

@@ -0,0 +1,30 @@
+import { Scope, Params } from '@zag-js/core';
+import { Point } from '@zag-js/types';
+import { SliderSchema } from './slider.types.mjs';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getThumbId: (ctx: Scope, index: number) => any;
+declare const getHiddenInputId: (ctx: Scope, index: number) => any;
+declare const getControlId: (ctx: Scope) => any;
+declare const getTrackId: (ctx: Scope) => any;
+declare const getRangeId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getValueTextId: (ctx: Scope) => any;
+declare const getMarkerId: (ctx: Scope, value: number) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getThumbEl: (ctx: Scope, index: number) => HTMLElement | null;
+declare const getThumbEls: (ctx: Scope) => HTMLElement[];
+declare const getFirstThumbEl: (ctx: Scope) => HTMLElement;
+declare const getHiddenInputEl: (ctx: Scope, index: number) => HTMLInputElement | null;
+declare const getControlEl: (ctx: Scope) => HTMLElement | null;
+declare const getRangeEl: (ctx: Scope) => HTMLElement | null;
+declare const getPointValue: (params: Params<SliderSchema>, point: Point) => number | undefined;
+declare const dispatchChangeEvent: (ctx: Scope, value: number[]) => void;
+declare const getOffsetRect: (el: HTMLElement | undefined) => {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+
+export { dispatchChangeEvent, getControlEl, getControlId, getFirstThumbEl, getHiddenInputEl, getHiddenInputId, getLabelId, getMarkerId, getOffsetRect, getPointValue, getRangeEl, getRangeId, getRootEl, getRootId, getThumbEl, getThumbEls, getThumbId, getTrackId, getValueTextId };

package/dist/slider.dom.d.ts

@@ -0,0 +1,30 @@
+import { Scope, Params } from '@zag-js/core';
+import { Point } from '@zag-js/types';
+import { SliderSchema } from './slider.types.js';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getThumbId: (ctx: Scope, index: number) => any;
+declare const getHiddenInputId: (ctx: Scope, index: number) => any;
+declare const getControlId: (ctx: Scope) => any;
+declare const getTrackId: (ctx: Scope) => any;
+declare const getRangeId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getValueTextId: (ctx: Scope) => any;
+declare const getMarkerId: (ctx: Scope, value: number) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getThumbEl: (ctx: Scope, index: number) => HTMLElement | null;
+declare const getThumbEls: (ctx: Scope) => HTMLElement[];
+declare const getFirstThumbEl: (ctx: Scope) => HTMLElement;
+declare const getHiddenInputEl: (ctx: Scope, index: number) => HTMLInputElement | null;
+declare const getControlEl: (ctx: Scope) => HTMLElement | null;
+declare const getRangeEl: (ctx: Scope) => HTMLElement | null;
+declare const getPointValue: (params: Params<SliderSchema>, point: Point) => number | undefined;
+declare const dispatchChangeEvent: (ctx: Scope, value: number[]) => void;
+declare const getOffsetRect: (el: HTMLElement | undefined) => {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+
+export { dispatchChangeEvent, getControlEl, getControlId, getFirstThumbEl, getHiddenInputEl, getHiddenInputId, getLabelId, getMarkerId, getOffsetRect, getPointValue, getRangeEl, getRangeId, getRootEl, getRootId, getThumbEl, getThumbEls, getThumbId, getTrackId, getValueTextId };

package/dist/slider.dom.js

@@ -0,0 +1,144 @@
+"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.dom.ts
+var slider_dom_exports = {};
+__export(slider_dom_exports, {
+  dispatchChangeEvent: () => dispatchChangeEvent,
+  getControlEl: () => getControlEl,
+  getControlId: () => getControlId,
+  getFirstThumbEl: () => getFirstThumbEl,
+  getHiddenInputEl: () => getHiddenInputEl,
+  getHiddenInputId: () => getHiddenInputId,
+  getLabelId: () => getLabelId,
+  getMarkerId: () => getMarkerId,
+  getOffsetRect: () => getOffsetRect,
+  getPointValue: () => getPointValue,
+  getRangeEl: () => getRangeEl,
+  getRangeId: () => getRangeId,
+  getRootEl: () => getRootEl,
+  getRootId: () => getRootId,
+  getThumbEl: () => getThumbEl,
+  getThumbEls: () => getThumbEls,
+  getThumbId: () => getThumbId,
+  getTrackId: () => getTrackId,
+  getValueTextId: () => getValueTextId
+});
+module.exports = __toCommonJS(slider_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+var getThumbEls = (ctx) => (0, import_dom_query.queryAll)(getControlEl(ctx), "[role=slider]");
+var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
+var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
+var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getRangeEl = (ctx) => ctx.getById(getRangeId(ctx));
+var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+  const isContain = thumbAlignment === "contain";
+  const isVertical = orientation === "vertical";
+  return isContain ? (isVertical ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
+var getPointValue = (params, point) => {
+  const { context, prop, scope, refs } = params;
+  const controlEl = getControlEl(scope);
+  if (!controlEl) return;
+  const offset = refs.get("thumbDragOffset");
+  const adjustedPoint = {
+    x: point.x - (offset?.x ?? 0),
+    y: point.y - (offset?.y ?? 0)
+  };
+  const thumbInset = getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"));
+  const relativePoint = getRelativePointWithInset(adjustedPoint, controlEl, thumbInset);
+  const percent = relativePoint.getPercentValue({
+    orientation: prop("orientation"),
+    dir: prop("dir"),
+    inverted: { y: true }
+  });
+  return (0, import_utils.getPercentValue)(percent, prop("min"), prop("max"), prop("step"));
+};
+function getRelativePointWithInset(point, element, inset) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const effectiveWidth = width - inset * 2;
+  const effectiveHeight = height - inset * 2;
+  const effectiveLeft = left + inset;
+  const effectiveTop = top + inset;
+  const offset = {
+    x: point.x - effectiveLeft,
+    y: point.y - effectiveTop
+  };
+  const percent = {
+    x: effectiveWidth > 0 ? (0, import_utils.clampPercent)(offset.x / effectiveWidth) : 0,
+    y: effectiveHeight > 0 ? (0, import_utils.clampPercent)(offset.y / effectiveHeight) : 0
+  };
+  function getPercentValue2(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+    }
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue: getPercentValue2 };
+}
+var dispatchChangeEvent = (ctx, value) => {
+  value.forEach((value2, index) => {
+    const inputEl = getHiddenInputEl(ctx, index);
+    if (!inputEl) return;
+    (0, import_dom_query.dispatchInputValueEvent)(inputEl, { value: value2 });
+  });
+};
+var getOffsetRect = (el) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dispatchChangeEvent,
+  getControlEl,
+  getControlId,
+  getFirstThumbEl,
+  getHiddenInputEl,
+  getHiddenInputId,
+  getLabelId,
+  getMarkerId,
+  getOffsetRect,
+  getPointValue,
+  getRangeEl,
+  getRangeId,
+  getRootEl,
+  getRootId,
+  getThumbEl,
+  getThumbEls,
+  getThumbId,
+  getTrackId,
+  getValueTextId
+});

package/dist/slider.dom.mjs

@@ -0,0 +1,101 @@
+// src/slider.dom.ts
+import { dispatchInputValueEvent, queryAll } from "@zag-js/dom-query";
+import { clampPercent, getPercentValue } from "@zag-js/utils";
+var getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+var getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
+var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
+var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
+var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getRangeEl = (ctx) => ctx.getById(getRangeId(ctx));
+var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+  const isContain = thumbAlignment === "contain";
+  const isVertical = orientation === "vertical";
+  return isContain ? (isVertical ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
+var getPointValue = (params, point) => {
+  const { context, prop, scope, refs } = params;
+  const controlEl = getControlEl(scope);
+  if (!controlEl) return;
+  const offset = refs.get("thumbDragOffset");
+  const adjustedPoint = {
+    x: point.x - (offset?.x ?? 0),
+    y: point.y - (offset?.y ?? 0)
+  };
+  const thumbInset = getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"));
+  const relativePoint = getRelativePointWithInset(adjustedPoint, controlEl, thumbInset);
+  const percent = relativePoint.getPercentValue({
+    orientation: prop("orientation"),
+    dir: prop("dir"),
+    inverted: { y: true }
+  });
+  return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
+};
+function getRelativePointWithInset(point, element, inset) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const effectiveWidth = width - inset * 2;
+  const effectiveHeight = height - inset * 2;
+  const effectiveLeft = left + inset;
+  const effectiveTop = top + inset;
+  const offset = {
+    x: point.x - effectiveLeft,
+    y: point.y - effectiveTop
+  };
+  const percent = {
+    x: effectiveWidth > 0 ? clampPercent(offset.x / effectiveWidth) : 0,
+    y: effectiveHeight > 0 ? clampPercent(offset.y / effectiveHeight) : 0
+  };
+  function getPercentValue2(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+    }
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue: getPercentValue2 };
+}
+var dispatchChangeEvent = (ctx, value) => {
+  value.forEach((value2, index) => {
+    const inputEl = getHiddenInputEl(ctx, index);
+    if (!inputEl) return;
+    dispatchInputValueEvent(inputEl, { value: value2 });
+  });
+};
+var getOffsetRect = (el) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
+export {
+  dispatchChangeEvent,
+  getControlEl,
+  getControlId,
+  getFirstThumbEl,
+  getHiddenInputEl,
+  getHiddenInputId,
+  getLabelId,
+  getMarkerId,
+  getOffsetRect,
+  getPointValue,
+  getRangeEl,
+  getRangeId,
+  getRootEl,
+  getRootId,
+  getThumbEl,
+  getThumbEls,
+  getThumbId,
+  getTrackId,
+  getValueTextId
+};

package/dist/slider.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { SliderSchema } from './slider.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<SliderSchema>;
+
+export { machine };

package/dist/slider.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { SliderSchema } from './slider.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<SliderSchema>;
+
+export { machine };