@zag-js/slider 0.10.2 → 0.10.4

package/dist/chunk-OCT2YBMN.mjs

@@ -1,212 +0,0 @@
-import {
-  dom
-} from "./chunk-NYN3VIY4.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-T6GXNUP7.mjs

@@ -1,265 +0,0 @@
-import {
-  parts
-} from "./chunk-3Y7IIPR5.mjs";
-import {
-  dom
-} from "./chunk-NYN3VIY4.mjs";
-
-// src/slider.connect.ts
-import {
-  getEventKey,
-  getEventPoint,
-  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"];
-  const ariaLabelledBy = state.context["aria-labelledby"];
-  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;
-  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 {
-    /**
-     * 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");
-    },
-    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) {
-        if (!isInteractive)
-          return;
-        event.preventDefault();
-        dom.getThumbEl(state.context)?.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": ariaAttr(isInvalid),
-      "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": ariaAttr(isDisabled),
-      "aria-label": ariaLabel,
-      "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,
-      "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 = 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({
-        ...parts.marker.attrs,
-        id: dom.getMarkerId(state.context, value),
-        role: "presentation",
-        "data-orientation": state.context.orientation,
-        "data-value": value,
-        "data-disabled": dataAttr(isDisabled),
-        "data-state": markerState,
-        style
-      });
-    }
-  };
-}
-
-export {
-  connect
-};

package/dist/chunk-YGFSMEUO.mjs

@@ -1,34 +0,0 @@
-// src/slider.utils.ts
-import { clampValue, getNextStepValue, getPreviousStepValue, snapValueToStep } from "@zag-js/numeric-range";
-function clampPercent(percent) {
-  return clampValue(percent, 0, 1);
-}
-function constrainValue(ctx, value) {
-  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
-  return clampValue(snapValue, ctx.min, ctx.max);
-}
-function decrement(ctx, step) {
-  const index = 0;
-  const values = getPreviousStepValue(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-function increment(ctx, step) {
-  const index = 0;
-  const values = getNextStepValue(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-
-export {
-  clampPercent,
-  constrainValue,
-  decrement,
-  increment
-};

package/dist/slider.types.js

@@ -1,18 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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.types.ts
-var slider_types_exports = {};
-module.exports = __toCommonJS(slider_types_exports);