@zag-js/slider 0.2.6 → 0.2.8

package/dist/slider.dom.d.ts

@@ -0,0 +1,48 @@
+import * as _zag_js_types from '@zag-js/types';
+import { MachineContext, Point, SharedContext } from './slider.types.js';
+import '@zag-js/core';
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getThumbId: (ctx: MachineContext) => string;
+    getControlId: (ctx: MachineContext) => string;
+    getHiddenInputId: (ctx: MachineContext) => string;
+    getOutputId: (ctx: MachineContext) => string;
+    getTrackId: (ctx: MachineContext) => string;
+    getRangeId: (ctx: MachineContext) => string;
+    getLabelId: (ctx: MachineContext) => string;
+    getMarkerId: (ctx: MachineContext, value: number) => string;
+    getRootEl: (ctx: MachineContext) => HTMLElement | null;
+    getThumbEl: (ctx: MachineContext) => HTMLElement | null;
+    getControlEl: (ctx: MachineContext) => HTMLElement | null;
+    getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
+    getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
+    dispatchChangeEvent(ctx: MachineContext): void;
+    getThumbOffset: (ctx: SharedContext) => string;
+    getControlStyle: () => _zag_js_types.JSX.CSSProperties;
+    getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
+    getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
+    getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
+    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => _zag_js_types.JSX.CSSProperties;
+    getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
+    getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
+    getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
+};
+
+export { dom };

package/dist/slider.dom.js

@@ -0,0 +1,297 @@
+"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, {
+  dom: () => dom
+});
+module.exports = __toCommonJS(slider_dom_exports);
+
+// ../../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)
+  };
+  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 import_numeric_range2 = require("@zag-js/numeric-range");
+
+// src/slider.style.ts
+var import_numeric_range = require("@zag-js/numeric-range");
+function getVerticalThumbOffset(ctx) {
+  var _a;
+  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  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) {
+  var _a;
+  const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  if (ctx.isRtl) {
+    const getValue2 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -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 getThumbOffset(ctx) {
+  const percent = (0, import_numeric_range.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 = 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 (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
+  },
+  dispatchChangeEvent(ctx) {
+    const input = dom.getHiddenInputEl(ctx);
+    if (!input)
+      return;
+    dispatchInputValueEvent(input, ctx.value);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dom
+});

package/dist/slider.dom.mjs

@@ -0,0 +1,7 @@
+import {
+  dom
+} from "./chunk-J5IGGBVE.mjs";
+import "./chunk-YREEXXZP.mjs";
+export {
+  dom
+};

package/dist/slider.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { UserDefinedContext, MachineContext, MachineState } from './slider.types.js';
+import '@zag-js/types';
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { machine };