@zag-js/slider 0.2.9 → 0.2.11

package/dist/{chunk-SGCWELVB.mjs → chunk-3UP6QL6A.mjs}

@@ -6,9 +6,8 @@ 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;
+  return agent?.platform ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
@@ -18,8 +17,7 @@ var isIos = () => isApple() && !isMac();
 
 // ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var supportsTouchEvent = () => isDom() && window.ontouchstart === null;

package/dist/{chunk-J5IGGBVE.mjs → chunk-55KEN77D.mjs}

@@ -1,37 +1,29 @@
 import {
   styles
-} from "./chunk-YREEXXZP.mjs";
+} from "./chunk-IJAAAKZQ.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]";
+  return 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;
+  return el?.ownerDocument ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return el?.ownerDocument.defaultView ?? 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;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -75,20 +67,18 @@ function getPointRelativeToNode(point, element) {
 
 // ../../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 : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
 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);
+  desc.set?.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
@@ -97,35 +87,14 @@ function dispatchInputValueEvent(el, value) {
 import { getPercentValue } from "@zag-js/numeric-range";
 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`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
+  getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getControlId: (ctx) => ctx.ids?.control ?? `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`;
-  },
+  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
+  getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `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)),

package/dist/{chunk-A2ZK6G4F.mjs → chunk-5XVLG734.mjs}

@@ -8,15 +8,15 @@ import {
   supportsMouseEvent,
   supportsPointerEvent,
   supportsTouchEvent
-} from "./chunk-SGCWELVB.mjs";
+} from "./chunk-3UP6QL6A.mjs";
 import {
   dom
-} from "./chunk-J5IGGBVE.mjs";
+} from "./chunk-55KEN77D.mjs";
 import {
   constrainValue,
   decrement,
   increment
-} from "./chunk-DRAPR6JV.mjs";
+} from "./chunk-YGFSMEUO.mjs";
 
 // src/slider.machine.ts
 import { createMachine } from "@zag-js/core";
@@ -24,11 +24,11 @@ import { createMachine } from "@zag-js/core";
 // ../../utilities/core/src/functions.ts
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var callAll = (...fns) => (...a) => {
   fns.forEach(function(fn) {
-    fn == null ? void 0 : fn(...a);
+    fn?.(...a);
   });
 };
 
@@ -55,14 +55,13 @@ function extractInfo(event, type = "page") {
 }
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  node?.addEventListener(eventName, handler, options);
   return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+    node?.removeEventListener(eventName, handler, options);
   };
 }
 function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
+  const type = getEventName(event) ?? event;
   return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
 }
 function wrapHandler(fn, filter = false) {
@@ -73,8 +72,7 @@ function wrapHandler(fn, filter = false) {
 }
 function filterPrimaryPointer(fn) {
   return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
+    const win = event.view ?? window;
     const isMouseEvent2 = event instanceof win.MouseEvent;
     const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
     if (isPrimary)
@@ -150,7 +148,7 @@ var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
 function disableTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state === "default") {
       savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -164,7 +162,7 @@ function disableTextSelection({ target, doc } = {}) {
   return () => restoreTextSelection({ target, doc: _document });
 }
 function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state !== "disabled")
       return;
@@ -184,7 +182,7 @@ function restoreTextSelection({ target, doc } = {}) {
     if (target && modifiedElementMap.has(target)) {
       let targetOldUserSelect = modifiedElementMap.get(target);
       if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+        target.style.userSelect = targetOldUserSelect ?? "";
       }
       if (target.getAttribute("style") === "") {
         target.removeAttribute("style");
@@ -235,13 +233,13 @@ function trackFormReset(el, callback) {
   if (!el)
     return;
   const form = getClosestForm(el);
-  form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
+  form?.addEventListener("reset", callback, { passive: true });
   return () => {
-    form == null ? void 0 : form.removeEventListener("reset", callback);
+    form?.removeEventListener("reset", callback);
   };
 }
 function trackFieldsetDisabled(el, callback) {
-  const fieldset = el == null ? void 0 : el.closest("fieldset");
+  const fieldset = el?.closest("fieldset");
   if (!fieldset)
     return;
   callback(fieldset.disabled);
@@ -259,7 +257,7 @@ function trackFormControl(el, options) {
     })
   ];
   return () => {
-    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+    cleanups.forEach((cleanup) => cleanup?.());
   };
 }
 
@@ -270,7 +268,7 @@ function machine(userContext) {
   return createMachine(
     {
       id: "slider",
-      initial: "unknown",
+      initial: "idle",
       context: {
         thumbSize: null,
         thumbAlignment: "contain",
@@ -309,15 +307,8 @@ function machine(userContext) {
           actions: "decrement"
         }
       },
+      entry: ["checkValue"],
       states: {
-        unknown: {
-          on: {
-            SETUP: {
-              target: "idle",
-              actions: ["checkValue"]
-            }
-          }
-        },
         idle: {
           on: {
             POINTER_DOWN: {
@@ -424,16 +415,13 @@ function machine(userContext) {
           ctx2.initialValue = value;
         },
         invokeOnChangeStart(ctx2) {
-          var _a;
-          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChangeStart?.({ value: ctx2.value });
         },
         invokeOnChangeEnd(ctx2) {
-          var _a;
-          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChangeEnd?.({ value: ctx2.value });
         },
         invokeOnChange(ctx2) {
-          var _a;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChange?.({ value: ctx2.value });
         },
         dispatchChangeEvent(ctx2) {
           dom.dispatchChangeEvent(ctx2);
@@ -445,10 +433,7 @@ function machine(userContext) {
           ctx2.value = clampValue(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getThumbEl(ctx2)?.focus());
         },
         decrement(ctx2, evt) {
           ctx2.value = decrement(ctx2, evt.step);

package/dist/{chunk-YREEXXZP.mjs → chunk-IJAAAKZQ.mjs}

@@ -1,14 +1,12 @@
 // src/slider.style.ts
 import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
 function getVerticalThumbOffset(ctx) {
-  var _a;
-  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { height = 0 } = ctx.thumbSize ?? {};
   const getValue = 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 : {};
+  const { width = 0 } = ctx.thumbSize ?? {};
   if (ctx.isRtl) {
     const getValue2 = getValueTransformer([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));

package/dist/{chunk-WMQQQRK5.mjs → chunk-X363CZYV.mjs}

@@ -6,10 +6,10 @@ import {
   isLeftClick,
   isModifiedEvent,
   isTouchEvent
-} from "./chunk-SGCWELVB.mjs";
+} from "./chunk-3UP6QL6A.mjs";
 import {
   dom
-} from "./chunk-J5IGGBVE.mjs";
+} from "./chunk-55KEN77D.mjs";
 
 // ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
@@ -24,8 +24,7 @@ var fallback = {
   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;
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 
@@ -44,10 +43,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -69,16 +67,21 @@ function getEventStep(event) {
 // src/slider.connect.ts
 import { getPercentValue, getValuePercent } from "@zag-js/numeric-range";
 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 ariaValueText = state.context.getAriaValueText?.(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;
-  const api = {
+  function getPercentValueFn(percent) {
+    return getPercentValue(percent, state.context.min, state.context.max, state.context.step);
+  }
+  function getValuePercentFn(value) {
+    return getValuePercent(value, state.context.min, state.context.max);
+  }
+  return {
     isFocused,
     isDragging,
     value: state.context.value,
@@ -86,15 +89,10 @@ function connect(state, send, normalize) {
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
-    getPercentValue(percent) {
-      return getPercentValue(percent, state.context.min, state.context.max, state.context.step);
-    },
-    getValuePercent(value) {
-      return getValuePercent(value, state.context.min, state.context.max);
-    },
+    getPercentValue: getPercentValueFn,
+    getValuePercent: getValuePercentFn,
     focus() {
-      var _a2;
-      (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
+      dom.getThumbEl(state.context)?.focus();
     },
     increment() {
       send("INCREMENT");
@@ -120,11 +118,10 @@ function connect(state, send, normalize) {
       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();
+        dom.getThumbEl(state.context)?.focus();
       },
       style: dom.getLabelStyle()
     }),
@@ -139,7 +136,7 @@ function connect(state, send, normalize) {
       "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-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
       "aria-orientation": state.context.orientation,
       "aria-valuemax": state.context.max,
       "aria-valuemin": state.context.min,
@@ -266,7 +263,7 @@ function connect(state, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = api.getValuePercent(value);
+      const percent = getValuePercentFn(value);
       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({
@@ -281,7 +278,6 @@ function connect(state, send, normalize) {
       });
     }
   };
-  return api;
 }
 
 export {

package/dist/{chunk-DRAPR6JV.mjs → chunk-YGFSMEUO.mjs}

@@ -11,7 +11,7 @@ function decrement(ctx, step) {
   const index = 0;
   const values = getPreviousStepValue(index, {
     ...ctx,
-    step: step != null ? step : ctx.step,
+    step: step ?? ctx.step,
     values: [ctx.value]
   });
   return values[index];
@@ -20,7 +20,7 @@ function increment(ctx, step) {
   const index = 0;
   const values = getNextStepValue(index, {
     ...ctx,
-    step: step != null ? step : ctx.step,
+    step: step ?? ctx.step,
     values: [ctx.value]
   });
   return values[index];