@zag-js/slider 0.2.12 → 0.2.14

package/dist/index.mjs

@@ -1,16 +1,15 @@
 import {
   connect
-} from "./chunk-X363CZYV.mjs";
+} from "./chunk-XHNKYJMN.mjs";
 import {
   anatomy
 } from "./chunk-3Y7IIPR5.mjs";
 import {
   machine
-} from "./chunk-5XVLG734.mjs";
-import "./chunk-3UP6QL6A.mjs";
+} from "./chunk-VTUEW45P.mjs";
 import {
   dom
-} from "./chunk-55KEN77D.mjs";
+} from "./chunk-5CWNUPC7.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 import "./chunk-YGFSMEUO.mjs";
 export {

package/dist/slider.connect.d.ts

@@ -3,15 +3,45 @@ import { State, Send } from './slider.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the slider is focused.
+     */
     isFocused: boolean;
+    /**
+     * Whether the slider is being dragged.
+     */
     isDragging: boolean;
+    /**
+     * The value of the slider.
+     */
     value: number;
+    /**
+     * The value of the slider as a percent.
+     */
     percent: number;
+    /**
+     * Function to set the value of the slider.
+     */
     setValue(value: number): void;
+    /**
+     * Returns the value of the slider at the given percent.
+     */
     getPercentValue: (percent: number) => number;
+    /**
+     * Returns the percent of the slider at the given value.
+     */
     getValuePercent: (value: number) => number;
+    /**
+     * Function to focus the slider.
+     */
     focus(): void;
+    /**
+     * Function to increment the value of the slider by the step.
+     */
     increment(): void;
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
     decrement(): void;
     rootProps: T["element"];
     labelProps: T["label"];

package/dist/slider.connect.js

@@ -23,137 +23,8 @@ __export(slider_connect_exports, {
   connect: () => connect
 });
 module.exports = __toCommonJS(slider_connect_exports);
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../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/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/event.ts
-function getNativeEvent(e) {
-  return e.nativeEvent ?? e;
-}
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-var isLeftClick = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
-// ../../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-event-point.ts
-var fallback = {
-  pageX: 0,
-  pageY: 0,
-  clientX: 0,
-  clientY: 0
-};
-function getEventPoint(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
-  return { x: point[`${type}X`], y: point[`${type}Y`] };
-}
-
-// ../../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/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 = {}) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  let { key } = event;
-  key = sameKeyMap[key] ?? 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
+var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_query2 = require("@zag-js/dom-query");
 var import_numeric_range3 = require("@zag-js/numeric-range");
 
 // src/slider.anatomy.ts
@@ -172,25 +43,10 @@ var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
 );
 var parts = anatomy.build();
 
-// ../../utilities/form-utils/src/input-event.ts
-function getDescriptor(el, options) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-
 // src/slider.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var import_dom_event = require("@zag-js/dom-event");
+var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
 // src/slider.style.ts
@@ -306,7 +162,7 @@ var styles = {
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers({
+var dom = (0, import_dom_query.createScope)({
   ...styles,
   getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
   getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
@@ -325,7 +181,7 @@ var dom = defineDomHelpers({
     const el = dom.getControlEl(ctx);
     if (!el)
       return;
-    const relativePoint = getPointRelativeToNode(point, el);
+    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
     const percentX = relativePoint.x / el.offsetWidth;
     const percentY = relativePoint.y / el.offsetHeight;
     let percent;
@@ -340,7 +196,7 @@ var dom = defineDomHelpers({
     const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
-    dispatchInputValueEvent(input, ctx.value);
+    (0, import_form_utils.dispatchInputValueEvent)(input, ctx.value);
   }
 });
 
@@ -361,39 +217,69 @@ function connect(state, send, normalize) {
     return (0, import_numeric_range3.getValuePercent)(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: (0, import_numeric_range3.getValuePercent)(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-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
+      "data-invalid": (0, import_dom_query2.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),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       id: dom.getLabelId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
       onClick(event) {
@@ -407,13 +293,13 @@ function connect(state, send, normalize) {
     thumbProps: normalize.element({
       ...parts.thumb.attrs,
       id: dom.getThumbId(state.context),
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       draggable: false,
-      "aria-invalid": isInvalid || void 0,
-      "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": isDisabled || void 0,
+      "aria-invalid": (0, import_dom_query2.ariaAttr)(isInvalid),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "aria-disabled": (0, import_dom_query2.ariaAttr)(isDisabled),
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
       "aria-orientation": state.context.orientation,
@@ -436,7 +322,7 @@ function connect(state, send, normalize) {
       onKeyDown(event) {
         if (!isInteractive)
           return;
-        const step = getEventStep(event) * state.context.step;
+        const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
         let prevent = true;
         const keyMap = {
           ArrowUp() {
@@ -468,7 +354,7 @@ function connect(state, send, normalize) {
             send("END");
           }
         };
-        const key = getEventKey(event, state.context);
+        const key = (0, import_dom_event2.getEventKey)(event, state.context);
         const exec = keyMap[key];
         if (!exec)
           return;
@@ -490,8 +376,8 @@ function connect(state, send, normalize) {
     }),
     outputProps: normalize.output({
       ...parts.output.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
       id: dom.getOutputId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
       "aria-live": "off"
@@ -499,35 +385,35 @@ function connect(state, send, normalize) {
     trackProps: normalize.element({
       ...parts.track.attrs,
       id: dom.getTrackId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-invalid": (0, import_dom_query2.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-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "data-disabled": (0, import_dom_query2.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-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
       "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       onPointerDown(event) {
         if (!isInteractive)
           return;
-        const evt = getNativeEvent(event);
-        if (!isLeftClick(evt) || isModifiedEvent(evt))
+        const evt = (0, import_dom_event2.getNativeEvent)(event);
+        if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
           return;
-        const point = getEventPoint(evt);
+        const point = { x: evt.clientX, y: evt.clientY };
         send({ type: "POINTER_DOWN", point });
         event.preventDefault();
         event.stopPropagation();
@@ -551,7 +437,7 @@ function connect(state, send, normalize) {
         "data-orientation": state.context.orientation,
         id: dom.getMarkerId(state.context, value),
         "data-value": value,
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
         "data-state": markerState,
         style
       });

package/dist/slider.connect.mjs

@@ -1,9 +1,8 @@
 import {
   connect
-} from "./chunk-X363CZYV.mjs";
+} from "./chunk-XHNKYJMN.mjs";
 import "./chunk-3Y7IIPR5.mjs";
-import "./chunk-3UP6QL6A.mjs";
-import "./chunk-55KEN77D.mjs";
+import "./chunk-5CWNUPC7.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 export {
   connect

package/dist/slider.dom.d.ts

@@ -4,20 +4,23 @@ import '@zag-js/core';
 
 declare const dom: {
     getRootNode: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
     getDoc: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document;
     getWin: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Window & typeof globalThis;
     getActiveElement: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => HTMLElement | null;
-    getById: <T = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    getById: <T extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T | null;
+    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T_1;
 } & {
     getRootId: (ctx: MachineContext) => string;
     getThumbId: (ctx: MachineContext) => string;

package/dist/slider.dom.js

@@ -23,89 +23,9 @@ __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?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? 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) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-
-// src/slider.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var import_dom_event = require("@zag-js/dom-event");
+var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
 // src/slider.style.ts
@@ -221,7 +141,7 @@ var styles = {
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers({
+var dom = (0, import_dom_query.createScope)({
   ...styles,
   getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
   getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
@@ -240,7 +160,7 @@ var dom = defineDomHelpers({
     const el = dom.getControlEl(ctx);
     if (!el)
       return;
-    const relativePoint = getPointRelativeToNode(point, el);
+    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
     const percentX = relativePoint.x / el.offsetWidth;
     const percentY = relativePoint.y / el.offsetHeight;
     let percent;
@@ -255,7 +175,7 @@ var dom = defineDomHelpers({
     const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
-    dispatchInputValueEvent(input, ctx.value);
+    (0, import_form_utils.dispatchInputValueEvent)(input, ctx.value);
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/slider.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-55KEN77D.mjs";
+} from "./chunk-5CWNUPC7.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 export {
   dom