@zag-js/slider 0.0.0-dev-20230221113221 → 0.0.0-dev-20230222181847

package/dist/chunk-5CWNUPC7.mjs

@@ -0,0 +1,50 @@
+import {
+  styles
+} from "./chunk-IJAAAKZQ.mjs";
+
+// src/slider.dom.ts
+import { createScope } from "@zag-js/dom-query";
+import { getRelativePointValue } from "@zag-js/dom-event";
+import { dispatchInputValueEvent } from "@zag-js/form-utils";
+import { getPercentValue } from "@zag-js/numeric-range";
+var dom = createScope({
+  ...styles,
+  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) => 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)),
+  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 = getRelativePointValue(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 getPercentValue(percent, ctx.min, ctx.max, ctx.step);
+  },
+  dispatchChangeEvent(ctx) {
+    const input = dom.getHiddenInputEl(ctx);
+    if (!input)
+      return;
+    dispatchInputValueEvent(input, ctx.value);
+  }
+});
+
+export {
+  dom
+};

package/dist/chunk-VTUEW45P.mjs

@@ -0,0 +1,212 @@
+import {
+  dom
+} from "./chunk-5CWNUPC7.mjs";
+import {
+  constrainValue,
+  decrement,
+  increment
+} from "./chunk-YGFSMEUO.mjs";
+
+// src/slider.machine.ts
+import { createMachine } from "@zag-js/core";
+import { trackPointerMove } from "@zag-js/dom-event";
+import { raf } from "@zag-js/dom-query";
+import { trackElementSize } from "@zag-js/element-size";
+import { trackFormControl } from "@zag-js/form-utils";
+import { clampValue, getValuePercent } from "@zag-js/numeric-range";
+import { compact } from "@zag-js/utils";
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "slider",
+      initial: "idle",
+      context: {
+        thumbSize: null,
+        thumbAlignment: "contain",
+        disabled: false,
+        threshold: 5,
+        dir: "ltr",
+        origin: "start",
+        orientation: "horizontal",
+        initialValue: null,
+        value: 0,
+        step: 1,
+        min: 0,
+        max: 100,
+        ...ctx
+      },
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical",
+        isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
+        valuePercent: (ctx2) => 100 * getValuePercent(ctx2.value, ctx2.min, ctx2.max)
+      },
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"]
+      },
+      activities: ["trackFormControlState", "trackThumbSize"],
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        INCREMENT: {
+          actions: "increment"
+        },
+        DECREMENT: {
+          actions: "decrement"
+        }
+      },
+      entry: ["checkValue"],
+      states: {
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            FOCUS: "focus"
+          }
+        },
+        focus: {
+          entry: "focusThumb",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "decrement"
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "increment"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "decrement"
+            },
+            PAGE_UP: {
+              actions: "increment"
+            },
+            PAGE_DOWN: {
+              actions: "decrement"
+            },
+            HOME: {
+              actions: "setToMin"
+            },
+            END: {
+              actions: "setToMax"
+            },
+            BLUR: "idle"
+          }
+        },
+        dragging: {
+          entry: "focusThumb",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focus",
+              actions: "invokeOnChangeEnd"
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => ctx2.isVertical
+      },
+      activities: {
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              if (ctx2.initialValue != null) {
+                ctx2.value = ctx2.initialValue;
+              }
+            }
+          });
+        },
+        trackPointerMove(ctx2, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx2), {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+            }
+          });
+        },
+        trackThumbSize(ctx2, _evt) {
+          if (ctx2.thumbAlignment !== "contain")
+            return;
+          return trackElementSize(dom.getThumbEl(ctx2), (size) => {
+            if (size)
+              ctx2.thumbSize = size;
+          });
+        }
+      },
+      actions: {
+        checkValue(ctx2) {
+          const value = constrainValue(ctx2, ctx2.value);
+          ctx2.value = value;
+          ctx2.initialValue = value;
+        },
+        invokeOnChangeStart(ctx2) {
+          ctx2.onChangeStart?.({ value: ctx2.value });
+        },
+        invokeOnChangeEnd(ctx2) {
+          ctx2.onChangeEnd?.({ value: ctx2.value });
+        },
+        invokeOnChange(ctx2) {
+          ctx2.onChange?.({ value: ctx2.value });
+        },
+        dispatchChangeEvent(ctx2) {
+          dom.dispatchChangeEvent(ctx2);
+        },
+        setPointerValue(ctx2, evt) {
+          const value = dom.getValueFromPoint(ctx2, evt.point);
+          if (value == null)
+            return;
+          ctx2.value = clampValue(value, ctx2.min, ctx2.max);
+        },
+        focusThumb(ctx2) {
+          raf(() => dom.getThumbEl(ctx2)?.focus());
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = decrement(ctx2, evt.step);
+        },
+        increment(ctx2, evt) {
+          ctx2.value = increment(ctx2, evt.step);
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min;
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = constrainValue(ctx2, evt.value);
+        }
+      }
+    }
+  );
+}
+
+export {
+  machine
+};

package/dist/{chunk-YMQNUMTS.mjs → chunk-XHNKYJMN.mjs}

@@ -1,70 +1,13 @@
 import {
   parts
 } from "./chunk-3Y7IIPR5.mjs";
-import {
-  getNativeEvent,
-  isLeftClick,
-  isModifiedEvent,
-  isTouchEvent
-} from "./chunk-3UP6QL6A.mjs";
 import {
   dom
-} from "./chunk-VPBBCP3T.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") {
-  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? 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 = {}) {
-  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;
-  }
-}
+} from "./chunk-5CWNUPC7.mjs";
 
 // src/slider.connect.ts
+import { getEventKey, getEventStep, getNativeEvent, isLeftClick, isModifiedEvent } from "@zag-js/dom-event";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
 import { getPercentValue, getValuePercent } from "@zag-js/numeric-range";
 function connect(state, send, normalize) {
   const ariaLabel = state.context["aria-label"];
@@ -82,21 +25,51 @@ function connect(state, send, normalize) {
     return 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: 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");
     },
@@ -132,9 +105,9 @@ function connect(state, send, normalize) {
       "data-orientation": state.context.orientation,
       "data-focus": dataAttr(isFocused),
       draggable: false,
-      "aria-invalid": isInvalid || void 0,
+      "aria-invalid": ariaAttr(isInvalid),
       "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": isDisabled || void 0,
+      "aria-disabled": ariaAttr(isDisabled),
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
       "aria-orientation": state.context.orientation,
@@ -248,7 +221,7 @@ function connect(state, send, normalize) {
         const evt = getNativeEvent(event);
         if (!isLeftClick(evt) || isModifiedEvent(evt))
           return;
-        const point = getEventPoint(evt);
+        const point = { x: evt.clientX, y: evt.clientY };
         send({ type: "POINTER_DOWN", point });
         event.preventDefault();
         event.stopPropagation();