@zag-js/range-slider - npm Package Compare versions

Comparing version 0.0.0-dev-20220416152643 to 0.0.0-dev-20220417135151

dist/index.d.ts

 export { connect } from "./range-slider.connect";
 export { machine } from "./range-slider.machine";
-export type { MachineContext, MachineState } from "./range-slider.types";
+export type { UserDefinedContext as Context } from "./range-slider.types";
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -988,250 +988,252 @@ var __defProp = Object.defineProperty;
 var import_core = require("@zag-js/core");
-var machine = (0, import_core.createMachine)({
-  id: "range-slider",
-  initial: "unknown",
-  context: {
-    thumbSize: null,
-    uid: "",
-    threshold: 5,
-    activeIndex: -1,
-    min: 0,
-    max: 100,
-    step: 1,
-    value: [0, 100],
-    initialValue: [],
-    orientation: "horizontal",
-    dir: "ltr",
-    minStepsBetweenThumbs: 0
-  },
-  computed: {
-    isHorizontal: (ctx) => ctx.orientation === "horizontal",
-    isVertical: (ctx) => ctx.orientation === "vertical",
-    isRtl: (ctx) => ctx.orientation === "horizontal" && ctx.dir === "rtl",
-    isInteractive: (ctx) => !(ctx.readonly || ctx.disabled),
-    spacing: (ctx) => multiply(ctx.minStepsBetweenThumbs, ctx.step),
-    hasMeasuredThumbSize: (ctx) => ctx.thumbSize != null
-  },
-  watch: {
-    value: ["invokeOnChange", "dispatchChangeEvent"]
-  },
-  activities: ["trackFormReset", "trackScriptedUpdate"],
-  on: {
-    SET_VALUE: {
-      actions: "setValue"
+function machine(ctx = {}) {
+  return (0, import_core.createMachine)({
+    id: "range-slider",
+    initial: "unknown",
+    context: __spreadValues({
+      thumbSize: null,
+      uid: "",
+      threshold: 5,
+      activeIndex: -1,
+      min: 0,
+      max: 100,
+      step: 1,
+      value: [0, 100],
+      initialValue: [],
+      orientation: "horizontal",
+      dir: "ltr",
+      minStepsBetweenThumbs: 0
+    }, ctx),
+    computed: {
+      isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+      isVertical: (ctx2) => ctx2.orientation === "vertical",
+      isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
+      isInteractive: (ctx2) => !(ctx2.readonly || ctx2.disabled),
+      spacing: (ctx2) => multiply(ctx2.minStepsBetweenThumbs, ctx2.step),
+      hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize != null
     },
-    INCREMENT: {
-      actions: "incrementAtIndex"
+    watch: {
+      value: ["invokeOnChange", "dispatchChangeEvent"]
     },
-    DECREMENT: {
-      actions: "decrementAtIndex"
-    }
-  },
-  states: {
-    unknown: {
-      on: {
-        SETUP: {
-          target: "idle",
-          actions: ["setupDocument", "setThumbSize", "checkValue"]
-        }
+    activities: ["trackFormReset", "trackScriptedUpdate"],
+    on: {
+      SET_VALUE: {
+        actions: "setValue"
+      },
+      INCREMENT: {
+        actions: "incrementAtIndex"
+      },
+      DECREMENT: {
+        actions: "decrementAtIndex"
       }
     },
-    idle: {
-      on: {
-        POINTER_DOWN: {
-          target: "dragging",
-          actions: ["setActiveIndex", "invokeOnChangeStart", "setPointerValue", "focusActiveThumb"]
-        },
-        FOCUS: {
-          target: "focus",
-          actions: "setActiveIndex"
+    states: {
+      unknown: {
+        on: {
+          SETUP: {
+            target: "idle",
+            actions: ["setupDocument", "setThumbSize", "checkValue"]
+          }
         }
+      },
+      idle: {
+        on: {
+          POINTER_DOWN: {
+            target: "dragging",
+            actions: ["setActiveIndex", "invokeOnChangeStart", "setPointerValue", "focusActiveThumb"]
+          },
+          FOCUS: {
+            target: "focus",
+            actions: "setActiveIndex"
+          }
+        }
+      },
+      focus: {
+        entry: "focusActiveThumb",
+        on: {
+          POINTER_DOWN: {
+            target: "dragging",
+            actions: ["setActiveIndex", "invokeOnChangeStart", "setPointerValue", "focusActiveThumb"]
+          },
+          ARROW_LEFT: {
+            guard: "isHorizontal",
+            actions: "decrementAtIndex"
+          },
+          ARROW_RIGHT: {
+            guard: "isHorizontal",
+            actions: "incrementAtIndex"
+          },
+          ARROW_UP: {
+            guard: "isVertical",
+            actions: "incrementAtIndex"
+          },
+          ARROW_DOWN: {
+            guard: "isVertical",
+            actions: "decrementAtIndex"
+          },
+          PAGE_UP: {
+            actions: "incrementAtIndex"
+          },
+          PAGE_DOWN: {
+            actions: "decrementAtIndex"
+          },
+          HOME: {
+            actions: "setActiveThumbToMin"
+          },
+          END: {
+            actions: "setActiveThumbToMax"
+          },
+          BLUR: {
+            target: "idle",
+            actions: "clearActiveIndex"
+          }
+        }
+      },
+      dragging: {
+        entry: "focusActiveThumb",
+        activities: "trackPointerMove",
+        on: {
+          POINTER_UP: {
+            target: "focus",
+            actions: "invokeOnChangeEnd"
+          },
+          POINTER_MOVE: {
+            actions: "setPointerValue"
+          }
+        }
       }
+    }
+  }, {
+    guards: {
+      isHorizontal: (ctx2) => ctx2.isHorizontal,
+      isVertical: (ctx2) => ctx2.isVertical
     },
-    focus: {
-      entry: "focusActiveThumb",
-      on: {
-        POINTER_DOWN: {
-          target: "dragging",
-          actions: ["setActiveIndex", "invokeOnChangeStart", "setPointerValue", "focusActiveThumb"]
-        },
-        ARROW_LEFT: {
-          guard: "isHorizontal",
-          actions: "decrementAtIndex"
-        },
-        ARROW_RIGHT: {
-          guard: "isHorizontal",
-          actions: "incrementAtIndex"
-        },
-        ARROW_UP: {
-          guard: "isVertical",
-          actions: "incrementAtIndex"
-        },
-        ARROW_DOWN: {
-          guard: "isVertical",
-          actions: "decrementAtIndex"
-        },
-        PAGE_UP: {
-          actions: "incrementAtIndex"
-        },
-        PAGE_DOWN: {
-          actions: "decrementAtIndex"
-        },
-        HOME: {
-          actions: "setActiveThumbToMin"
-        },
-        END: {
-          actions: "setActiveThumbToMax"
-        },
-        BLUR: {
-          target: "idle",
-          actions: "clearActiveIndex"
-        }
+    activities: {
+      trackScriptedUpdate(ctx2, _, { send }) {
+        let cleanup = [];
+        nextTick(() => {
+          for (let i = 0; i < ctx2.value.length; i++) {
+            const el = dom.getInputEl(ctx2, i);
+            if (!el)
+              return;
+            cleanup.push(trackInputPropertyMutation(el, {
+              type: "input",
+              property: "value",
+              fn(value) {
+                send({ type: "SET_VALUE", value: parseFloat(value), index: i });
+              }
+            }));
+          }
+        });
+        return () => cleanup.forEach((fn) => fn == null ? void 0 : fn());
+      },
+      trackFormReset(ctx2) {
+        let cleanup = [];
+        nextTick(() => {
+          for (let i = 0; i < ctx2.value.length; i++) {
+            const el = dom.getInputEl(ctx2, i);
+            cleanup.push(trackFormReset(el, () => {
+              if (ctx2.initialValue[i] != null) {
+                ctx2.value[i] = ctx2.initialValue[i];
+              }
+            }));
+          }
+        });
+        return () => cleanup.forEach((fn) => fn == null ? void 0 : fn());
+      },
+      trackPointerMove(ctx2, _evt, { send }) {
+        return trackPointerMove({
+          ctx: ctx2,
+          onPointerMove(info) {
+            send({ type: "POINTER_MOVE", point: info.point });
+          },
+          onPointerUp() {
+            send("POINTER_UP");
+          }
+        });
       }
     },
-    dragging: {
-      entry: "focusActiveThumb",
-      activities: "trackPointerMove",
-      on: {
-        POINTER_UP: {
-          target: "focus",
-          actions: "invokeOnChangeEnd"
-        },
-        POINTER_MOVE: {
-          actions: "setPointerValue"
+    actions: {
+      setupDocument(ctx2, evt) {
+        if (evt.doc)
+          ctx2.doc = (0, import_core.ref)(evt.doc);
+        ctx2.uid = evt.id;
+      },
+      invokeOnChangeStart(ctx2) {
+        var _a;
+        (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+      },
+      invokeOnChangeEnd(ctx2) {
+        var _a;
+        (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+      },
+      invokeOnChange(ctx2, evt) {
+        var _a;
+        if (evt.type !== "SETUP") {
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
         }
-      }
-    }
-  }
-}, {
-  guards: {
-    isHorizontal: (ctx) => ctx.isHorizontal,
-    isVertical: (ctx) => ctx.isVertical
-  },
-  activities: {
-    trackScriptedUpdate(ctx, _, { send }) {
-      let cleanup = [];
-      nextTick(() => {
-        for (let i = 0; i < ctx.value.length; i++) {
-          const el = dom.getInputEl(ctx, i);
-          if (!el)
-            return;
-          cleanup.push(trackInputPropertyMutation(el, {
-            type: "input",
-            property: "value",
-            fn(value) {
-              send({ type: "SET_VALUE", value: parseFloat(value), index: i });
-            }
-          }));
+      },
+      dispatchChangeEvent(ctx2, evt) {
+        if (evt.type !== "SETUP") {
+          dom.dispatchChangeEvent(ctx2);
         }
-      });
-      return () => cleanup.forEach((fn) => fn == null ? void 0 : fn());
-    },
-    trackFormReset(ctx) {
-      let cleanup = [];
-      nextTick(() => {
-        for (let i = 0; i < ctx.value.length; i++) {
-          const el = dom.getInputEl(ctx, i);
-          cleanup.push(trackFormReset(el, () => {
-            if (ctx.initialValue[i] != null) {
-              ctx.value[i] = ctx.initialValue[i];
-            }
-          }));
+      },
+      setThumbSize(ctx2) {
+        raf(() => {
+          const thumbs = dom.getElements(ctx2);
+          ctx2.thumbSize = thumbs.map((thumb) => {
+            const { width, height } = getElementRect(thumb);
+            return { width, height };
+          });
+        });
+      },
+      setActiveIndex(ctx2, evt) {
+        var _a;
+        ctx2.activeIndex = (_a = evt.index) != null ? _a : getClosestIndex(ctx2, evt);
+      },
+      clearActiveIndex(ctx2) {
+        ctx2.activeIndex = -1;
+      },
+      setPointerValue(ctx2, evt) {
+        const value = dom.getValueFromPoint(ctx2, evt.point);
+        if (value == null)
+          return;
+        ctx2.value[ctx2.activeIndex] = utils.convert(ctx2, value, ctx2.activeIndex);
+      },
+      focusActiveThumb(ctx2) {
+        nextTick(() => {
+          const thumb = dom.getThumbEl(ctx2, ctx2.activeIndex);
+          thumb == null ? void 0 : thumb.focus();
+        });
+      },
+      decrementAtIndex(ctx2, evt) {
+        ctx2.value[ctx2.activeIndex] = utils.decrement(ctx2, evt.index, evt.step);
+      },
+      incrementAtIndex(ctx2, evt) {
+        ctx2.value[ctx2.activeIndex] = utils.increment(ctx2, evt.index, evt.step);
+      },
+      setActiveThumbToMin(ctx2) {
+        const { min } = utils.getRangeAtIndex(ctx2);
+        ctx2.value[ctx2.activeIndex] = min;
+      },
+      setActiveThumbToMax(ctx2) {
+        const { max } = utils.getRangeAtIndex(ctx2);
+        ctx2.value[ctx2.activeIndex] = max;
+      },
+      checkValue(ctx2) {
+        let value = utils.check(ctx2, ctx2.value);
+        Object.assign(ctx2, { value, initialValue: value.slice() });
+      },
+      setValue(ctx2, evt) {
+        if (isNumber(evt.index) && isNumber(evt.value)) {
+          ctx2.value[evt.index] = utils.convert(ctx2, evt.value, evt.index);
+          return;
         }
-      });
-      return () => cleanup.forEach((fn) => fn == null ? void 0 : fn());
-    },
-    trackPointerMove(ctx, _evt, { send }) {
-      return trackPointerMove({
-        ctx,
-        onPointerMove(info) {
-          send({ type: "POINTER_MOVE", point: info.point });
-        },
-        onPointerUp() {
-          send("POINTER_UP");
+        if (Array.isArray(evt.value)) {
+          ctx2.value = utils.check(ctx2, evt.value);
         }
-      });
-    }
-  },
-  actions: {
-    setupDocument(ctx, evt) {
-      if (evt.doc)
-        ctx.doc = (0, import_core.ref)(evt.doc);
-      ctx.uid = evt.id;
-    },
-    invokeOnChangeStart(ctx) {
-      var _a;
-      (_a = ctx.onChangeStart) == null ? void 0 : _a.call(ctx, { value: ctx.value });
-    },
-    invokeOnChangeEnd(ctx) {
-      var _a;
-      (_a = ctx.onChangeEnd) == null ? void 0 : _a.call(ctx, { value: ctx.value });
-    },
-    invokeOnChange(ctx, evt) {
-      var _a;
-      if (evt.type !== "SETUP") {
-        (_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: ctx.value });
       }
-    },
-    dispatchChangeEvent(ctx, evt) {
-      if (evt.type !== "SETUP") {
-        dom.dispatchChangeEvent(ctx);
-      }
-    },
-    setThumbSize(ctx) {
-      raf(() => {
-        const thumbs = dom.getElements(ctx);
-        ctx.thumbSize = thumbs.map((thumb) => {
-          const { width, height } = getElementRect(thumb);
-          return { width, height };
-        });
-      });
-    },
-    setActiveIndex(ctx, evt) {
-      var _a;
-      ctx.activeIndex = (_a = evt.index) != null ? _a : getClosestIndex(ctx, evt);
-    },
-    clearActiveIndex(ctx) {
-      ctx.activeIndex = -1;
-    },
-    setPointerValue(ctx, evt) {
-      const value = dom.getValueFromPoint(ctx, evt.point);
-      if (value == null)
-        return;
-      ctx.value[ctx.activeIndex] = utils.convert(ctx, value, ctx.activeIndex);
-    },
-    focusActiveThumb(ctx) {
-      nextTick(() => {
-        const thumb = dom.getThumbEl(ctx, ctx.activeIndex);
-        thumb == null ? void 0 : thumb.focus();
-      });
-    },
-    decrementAtIndex(ctx, evt) {
-      ctx.value[ctx.activeIndex] = utils.decrement(ctx, evt.index, evt.step);
-    },
-    incrementAtIndex(ctx, evt) {
-      ctx.value[ctx.activeIndex] = utils.increment(ctx, evt.index, evt.step);
-    },
-    setActiveThumbToMin(ctx) {
-      const { min } = utils.getRangeAtIndex(ctx);
-      ctx.value[ctx.activeIndex] = min;
-    },
-    setActiveThumbToMax(ctx) {
-      const { max } = utils.getRangeAtIndex(ctx);
-      ctx.value[ctx.activeIndex] = max;
-    },
-    checkValue(ctx) {
-      let value = utils.check(ctx, ctx.value);
-      Object.assign(ctx, { value, initialValue: value.slice() });
-    },
-    setValue(ctx, evt) {
-      if (isNumber(evt.index) && isNumber(evt.value)) {
-        ctx.value[evt.index] = utils.convert(ctx, evt.value, evt.index);
-        return;
-      }
-      if (Array.isArray(evt.value)) {
-        ctx.value = utils.check(ctx, evt.value);
-      }
     }
-  }
-});
+  });
+}
 //# sourceMappingURL=index.js.map

dist/range-slider.dom.d.ts

@@ -26,3 +26,3 @@ import { StateMachine } from "@zag-js/core";
     dispatchChangeEvent(ctx: Ctx): void;
-    getControlStyle: (ctx: Pick<import("@zag-js/slider").MachineContext, "isVertical">) => Style;
+    getControlStyle: (ctx: Pick<import("@zag-js/slider/dist/slider.types").MachineContext, "isVertical">) => Style;
     getThumbStyle(ctx: Ctx, index: number): Style;
@@ -29,0 +29,0 @@ getRangeStyle: typeof getRangeStyle;

dist/range-slider.machine.d.ts

@@ -1,3 +0,3 @@
-import { MachineContext, MachineState } from "./range-slider.types";
-export declare const machine: import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
+import { MachineContext, MachineState, UserDefinedContext } from "./range-slider.types";
+export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
 //# sourceMappingURL=range-slider.machine.d.ts.map

dist/range-slider.types.d.ts

 import type { StateMachine as S } from "@zag-js/core";
-import { Context } from "@zag-js/types";
-declare type IdMap = Partial<{
+import type { Context, DirectionProperty } from "@zag-js/types";
+declare type ElementIds = Partial<{
     root: string;
@@ -12,7 +12,7 @@ thumb(index: number): string;
 }>;
-export declare type MachineContext = Context<{
+declare type PublicContext = DirectionProperty & {
     /**
      * The ids of the elements in the range slider. Useful for composition.
      */
-    ids?: IdMap;
+    ids?: ElementIds;
     /**
@@ -27,13 +27,2 @@ * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
     /**
-     * @internal The slider thumbs dimensions
-     */
-    thumbSize: Array<{
-        width: number;
-        height: number;
-    }> | null;
-    /**
-     * @computed Whether the slider thumb has been measured
-     */
-    readonly hasMeasuredThumbSize: boolean;
-    /**
      * The name associated with each slider thumb (when used in a form)
@@ -47,7 +36,2 @@ */
     /**
-     * @internal The active index of the range slider. This represents
-     * the currently dragged/focused thumb.
-     */
-    activeIndex: number;
-    /**
      * The value of the range slider
@@ -70,6 +54,2 @@ */
     /**
-     * @computed Whether the slider is interactive
-     */
-    readonly isInteractive: boolean;
-    /**
      * Function invoked when the value of the slider changes
@@ -113,2 +93,20 @@ */
     /**
+     * The orientation of the slider
+     */
+    orientation: "vertical" | "horizontal";
+};
+export declare type UserDefinedContext = Partial<PublicContext>;
+declare type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * Whether the slider thumb has been measured
+     */
+    readonly hasMeasuredThumbSize: boolean;
+    /**
+     * @computed
+     * Whether the slider is interactive
+     */
+    readonly isInteractive: boolean;
+    /**
+     * @computed
      * The raw value of the space between each thumb
@@ -118,18 +116,34 @@ */
     /**
-     * The orientation of the slider
+     * @computed
+     * Whether the slider is vertical
      */
-    orientation: "vertical" | "horizontal";
-    /**
-     * @computed Whether the slider is vertical
-     */
     readonly isVertical: boolean;
     /**
-     * @computed Whether the slider is horizontal
+     * @computed
+     * Whether the slider is horizontal
      */
     readonly isHorizontal: boolean;
     /**
-     * @computed Whether the slider is in RTL mode
+     * @computed
+     * Whether the slider is in RTL mode
      */
     readonly isRtl: boolean;
 }>;
+declare type PrivateContext = Context<{
+    /**
+     * @internal
+     * The slider thumbs dimensions
+     */
+    thumbSize: Array<{
+        width: number;
+        height: number;
+    }> | null;
+    /**
+     * @internal
+     * The active index of the range slider. This represents
+     * the currently dragged/focused thumb.
+     */
+    activeIndex: number;
+}>;
+export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
 export declare type MachineState = {
@@ -136,0 +150,0 @@ value: "unknown" | "idle" | "dragging" | "focus";

package.json

 {
   "name": "@zag-js/range-slider",
-  "version": "0.0.0-dev-20220416152643",
+  "version": "0.0.0-dev-20220417135151",
   "description": "Core logic for the range-slider widget implemented as a state machine",
@@ -32,9 +32,9 @@ "keywords": [
   "dependencies": {
-    "@zag-js/core": "^0.0.0-dev-20220416152643",
-    "@zag-js/dom-utils": "^0.0.0-dev-20220416152643",
-    "@zag-js/number-utils": "^0.0.0-dev-20220416152643",
-    "@zag-js/rect-utils": "^0.0.0-dev-20220416152643",
-    "@zag-js/slider": "^0.0.0-dev-20220416152643",
-    "@zag-js/types": "^0.0.0-dev-20220416152643",
-    "@zag-js/utils": "^0.0.0-dev-20220416152643"
+    "@zag-js/core": "^0.0.0-dev-20220417135151",
+    "@zag-js/dom-utils": "^0.0.0-dev-20220417135151",
+    "@zag-js/number-utils": "^0.0.0-dev-20220417135151",
+    "@zag-js/rect-utils": "^0.0.0-dev-20220417135151",
+    "@zag-js/slider": "^0.0.0-dev-20220417135151",
+    "@zag-js/types": "^0.0.0-dev-20220417135151",
+    "@zag-js/utils": "^0.0.0-dev-20220417135151"
   },
@@ -41,0 +41,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

352746

increased by0.91%

Lines of code

2667

increased by0.68%

Dependency changes

• Updated@zag-js/core@^0.0.0-dev-20220417135151

• Updated@zag-js/dom-utils@^0.0.0-dev-20220417135151

• Updated@zag-js/number-utils@^0.0.0-dev-20220417135151

• Updated@zag-js/rect-utils@^0.0.0-dev-20220417135151

• Updated@zag-js/slider@^0.0.0-dev-20220417135151

• Updated@zag-js/types@^0.0.0-dev-20220417135151

• Updated@zag-js/utils@^0.0.0-dev-20220417135151