@zag-js/slider 0.2.5 → 0.2.7

package/dist/chunk-MR2MUD77.mjs

@@ -0,0 +1,179 @@
+import {
+  styles
+} from "./chunk-MXJ3RGFD.mjs";
+import {
+  utils
+} from "./chunk-FUTBDWTA.mjs";
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// ../../utilities/dom/src/get-element-offset.ts
+function getElementOffset(element) {
+  let left = 0;
+  let top = 0;
+  let el = element;
+  if (el.parentNode) {
+    do {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+    } while ((el = el.offsetParent) && el.nodeType < 9);
+    el = element;
+    do {
+      left -= el.scrollLeft;
+      top -= el.scrollTop;
+    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
+  }
+  return {
+    top,
+    right: innerWidth - left - element.offsetWidth,
+    bottom: innerHeight - top - element.offsetHeight,
+    left
+  };
+}
+
+// ../../utilities/dom/src/get-point-relative-to-element.ts
+function getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  const y = point.y - offset.top;
+  return { x, y };
+}
+
+// ../../utilities/form-utils/src/input-event.ts
+function getDescriptor(el, options) {
+  var _a;
+  const { type, property = "value" } = options;
+  const proto = getWindow(el)[type].prototype;
+  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
+
+// src/slider.dom.ts
+var dom = defineDomHelpers({
+  ...styles,
+  getRootId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
+  },
+  getThumbId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
+  },
+  getControlId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
+  },
+  getHiddenInputId: (ctx) => `slider:${ctx.id}:input`,
+  getOutputId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
+  },
+  getTrackId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
+  },
+  getRangeId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
+  },
+  getLabelId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `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.getById(ctx, dom.getControlId(ctx)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getValueFromPoint(ctx, point) {
+    const el = dom.getControlEl(ctx);
+    if (!el)
+      return;
+    const relativePoint = getPointRelativeToNode(point, el);
+    const percentX = relativePoint.x / el.offsetWidth;
+    const percentY = relativePoint.y / el.offsetHeight;
+    let percent;
+    if (ctx.isHorizontal) {
+      percent = ctx.isRtl ? 1 - percentX : percentX;
+    } else {
+      percent = 1 - percentY;
+    }
+    return utils.fromPercent(ctx, percent);
+  },
+  dispatchChangeEvent(ctx) {
+    const input = dom.getHiddenInputEl(ctx);
+    if (!input)
+      return;
+    dispatchInputValueEvent(input, ctx.value);
+  }
+});
+
+export {
+  dom
+};

package/dist/chunk-MXJ3RGFD.mjs

@@ -0,0 +1,125 @@
+import {
+  valueToPercent
+} from "./chunk-GBYBRQZL.mjs";
+
+// ../../utilities/number/src/transform.ts
+var transform = (a, b) => {
+  const i = { min: a[0], max: a[1] };
+  const o = { min: b[0], max: b[1] };
+  return (v) => {
+    if (i.min === i.max || o.min === o.max)
+      return o.min;
+    const ratio = (o.max - o.min) / (i.max - i.min);
+    return o.min + ratio * (v - i.min);
+  };
+};
+
+// src/slider.style.ts
+function getVerticalThumbOffset(ctx) {
+  var _a;
+  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getHorizontalThumbOffset(ctx) {
+  var _a;
+  const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  if (ctx.isRtl) {
+    const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+  }
+  const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getThumbOffset(ctx) {
+  const percent = valueToPercent(ctx.value, ctx);
+  if (ctx.thumbAlignment === "center")
+    return `${percent}%`;
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getThumbStyle(ctx) {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  return {
+    visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: "var(--slider-thumb-offset)"
+  };
+}
+function getRangeOffsets(ctx) {
+  const percent = valueToPercent(ctx.value, ctx);
+  let start = "0%";
+  let end = `${100 - percent}%`;
+  if (ctx.origin === "center") {
+    const isNegative = percent < 50;
+    start = isNegative ? `${percent}%` : "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 ? 100 - percent : percent}%`
+  };
+}
+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
+};
+
+export {
+  styles
+};

package/dist/chunk-SGCWELVB.mjs

@@ -0,0 +1,44 @@
+// ../../utilities/core/src/guard.ts
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../../utilities/dom/src/platform.ts
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+var isIos = () => isApple() && !isMac();
+
+// ../../utilities/dom/src/event.ts
+function getNativeEvent(e) {
+  var _a;
+  return (_a = e.nativeEvent) != null ? _a : e;
+}
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
+var supportsMouseEvent = () => isDom() && window.onmousedown === null;
+var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
+var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
+var isLeftClick = (v) => v.button === 0;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+
+export {
+  isObject,
+  hasProp,
+  isIos,
+  getNativeEvent,
+  supportsPointerEvent,
+  supportsTouchEvent,
+  supportsMouseEvent,
+  isMouseEvent,
+  isTouchEvent,
+  isLeftClick,
+  isModifiedEvent
+};

package/dist/chunk-YCRSV2RE.mjs

@@ -0,0 +1,288 @@
+import {
+  parts
+} from "./chunk-3Y7IIPR5.mjs";
+import {
+  getNativeEvent,
+  isLeftClick,
+  isModifiedEvent,
+  isTouchEvent
+} from "./chunk-SGCWELVB.mjs";
+import {
+  dom
+} from "./chunk-MR2MUD77.mjs";
+import {
+  percentToValue,
+  valueToPercent
+} from "./chunk-GBYBRQZL.mjs";
+
+// ../../utilities/dom/src/attrs.ts
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+
+// ../../utilities/dom/src/get-event-point.ts
+var fallback = {
+  pageX: 0,
+  pageY: 0,
+  clientX: 0,
+  clientY: 0
+};
+function getEventPoint(event, type = "page") {
+  var _a, _b;
+  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+
+// ../../utilities/dom/src/keyboard-event.ts
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft"
+};
+var sameKeyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+function getEventKey(event, options = {}) {
+  var _a;
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let { key } = event;
+  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) {
+    key = rtlKeyMap[key];
+  }
+  return key;
+}
+var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
+var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+function getEventStep(event) {
+  if (event.ctrlKey || event.metaKey) {
+    return 0.1;
+  } else {
+    const isPageKey = PAGE_KEYS.has(event.key);
+    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
+    return isSkipKey ? 10 : 1;
+  }
+}
+
+// src/slider.connect.ts
+function connect(state, send, normalize) {
+  var _a, _b;
+  const ariaLabel = state.context["aria-label"];
+  const ariaLabelledBy = state.context["aria-labelledby"];
+  const ariaValueText = (_b = (_a = state.context).getAriaValueText) == null ? void 0 : _b.call(_a, 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;
+  return {
+    isFocused,
+    isDragging,
+    value: state.context.value,
+    percent: valueToPercent(state.context.value, state.context),
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    getPercentValue(percent) {
+      return percentToValue(percent, state.context);
+    },
+    focus() {
+      var _a2;
+      (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
+    },
+    increment() {
+      send("INCREMENT");
+    },
+    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) {
+        var _a2;
+        if (!isInteractive)
+          return;
+        event.preventDefault();
+        (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.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": isInvalid || void 0,
+      "data-invalid": dataAttr(isInvalid),
+      "aria-disabled": isDisabled || void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? 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 = valueToPercent(value, state.context);
+      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,
+        role: "presentation",
+        "data-orientation": state.context.orientation,
+        id: dom.getMarkerId(state.context, value),
+        "data-value": value,
+        "data-disabled": dataAttr(isDisabled),
+        "data-state": markerState,
+        style
+      });
+    }
+  };
+}
+
+export {
+  connect
+};