@zag-js/slider 0.10.2 → 0.10.4

package/dist/slider.style.mjs

@@ -1,6 +1,113 @@
-import {
-  styles
-} from "./chunk-IJAAAKZQ.mjs";
-export {
-  styles
+import { getValuePercent, getValueTransformer } from '@zag-js/numeric-range';
+
+function getVerticalThumbOffset(ctx) {
+  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) {
+  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));
+  }
+  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getThumbOffset(ctx) {
+  const percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
+  if (ctx.thumbAlignment === "center") {
+    return `${percent}%`;
+  }
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getVisibility(ctx) {
+  let visibility = "visible";
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden";
+  }
+  return visibility;
+}
+function getThumbStyle(ctx) {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  return {
+    visibility: getVisibility(ctx),
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: "var(--slider-thumb-offset)"
+  };
+}
+function getRangeOffsets(ctx) {
+  let start = "0%";
+  let end = `${100 - ctx.valuePercent}%`;
+  if (ctx.origin === "center") {
+    const isNegative = ctx.valuePercent < 50;
+    start = isNegative ? `${ctx.valuePercent}%` : "50%";
+    end = isNegative ? "50%" : end;
+  }
+  return { start, end };
+}
+function getRangeStyle(ctx) {
+  if (ctx.isVertical) {
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)"
+    };
+  }
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+  };
+}
+function getControlStyle() {
+  return {
+    touchAction: "none",
+    userSelect: "none",
+    position: "relative"
+  };
+}
+function getRootStyle(ctx) {
+  const range = getRangeOffsets(ctx);
+  return {
+    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
+    "--slider-thumb-offset": getThumbOffset(ctx),
+    "--slider-range-start": range.start,
+    "--slider-range-end": range.end
+  };
+}
+function getMarkerStyle(ctx, percent) {
+  return {
+    position: "absolute",
+    pointerEvents: "none",
+    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
+  };
+}
+function getLabelStyle() {
+  return { userSelect: "none" };
+}
+function getTrackStyle() {
+  return { position: "relative" };
+}
+function getMarkerGroupStyle() {
+  return {
+    userSelect: "none",
+    pointerEvents: "none",
+    position: "relative"
+  };
+}
+const styles = {
+  getThumbOffset,
+  getControlStyle,
+  getThumbStyle,
+  getRangeStyle,
+  getRootStyle,
+  getMarkerStyle,
+  getLabelStyle,
+  getTrackStyle,
+  getMarkerGroupStyle
 };
+
+export { styles };

package/dist/slider.types.d.ts

@@ -1,6 +1,5 @@
-import { StateMachine } from '@zag-js/core';
-import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
-
+import type { StateMachine as S } from "@zag-js/core";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
 type ElementIds = Partial<{
     root: string;
     thumb: string;
@@ -102,7 +101,7 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     thumbAlignment?: "contain" | "center";
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+export type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
      * @computed
@@ -136,13 +135,13 @@ type ComputedContext = Readonly<{
     readonly valuePercent: number;
 }>;
 type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & ComputedContext & PrivateContext;
-type MachineState = {
+export type MachineContext = PublicContext & ComputedContext & PrivateContext;
+export type MachineState = {
     value: "idle" | "dragging" | "focus";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type SharedContext = {
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send<S.AnyEventObject>;
+export type SharedContext = {
     min: number;
     max: number;
     step: number;
@@ -159,9 +158,8 @@ type SharedContext = {
     orientation?: "horizontal" | "vertical";
     readonly hasMeasuredThumbSize: boolean;
 };
-type Point = {
+export type Point = {
     x: number;
     y: number;
 };
-
-export { MachineContext, MachineState, Point, Send, SharedContext, State, UserDefinedContext };
+export {};

package/dist/slider.utils.d.ts

@@ -1,10 +1,5 @@
-import { MachineContext } from './slider.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare function clampPercent(percent: number): number;
-declare function constrainValue(ctx: MachineContext, value: number): number;
-declare function decrement(ctx: MachineContext, step?: number): number;
-declare function increment(ctx: MachineContext, step?: number): number;
-
-export { clampPercent, constrainValue, decrement, increment };
+import type { MachineContext as Ctx } from "./slider.types";
+export declare function clampPercent(percent: number): number;
+export declare function constrainValue(ctx: Ctx, value: number): number;
+export declare function decrement(ctx: Ctx, step?: number): number;
+export declare function increment(ctx: Ctx, step?: number): number;

package/dist/slider.utils.js

@@ -1,42 +1,16 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const numericRange = require('@zag-js/numeric-range');
 
-// src/slider.utils.ts
-var slider_utils_exports = {};
-__export(slider_utils_exports, {
-  clampPercent: () => clampPercent,
-  constrainValue: () => constrainValue,
-  decrement: () => decrement,
-  increment: () => increment
-});
-module.exports = __toCommonJS(slider_utils_exports);
-var import_numeric_range = require("@zag-js/numeric-range");
-function clampPercent(percent) {
-  return (0, import_numeric_range.clampValue)(percent, 0, 1);
-}
 function constrainValue(ctx, value) {
-  const snapValue = (0, import_numeric_range.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
-  return (0, import_numeric_range.clampValue)(snapValue, ctx.min, ctx.max);
+  const snapValue = numericRange.snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+  return numericRange.clampValue(snapValue, ctx.min, ctx.max);
 }
 function decrement(ctx, step) {
   const index = 0;
-  const values = (0, import_numeric_range.getPreviousStepValue)(index, {
+  const values = numericRange.getPreviousStepValue(index, {
     ...ctx,
     step: step ?? ctx.step,
     values: [ctx.value]
@@ -45,17 +19,14 @@ function decrement(ctx, step) {
 }
 function increment(ctx, step) {
   const index = 0;
-  const values = (0, import_numeric_range.getNextStepValue)(index, {
+  const values = numericRange.getNextStepValue(index, {
     ...ctx,
     step: step ?? ctx.step,
     values: [ctx.value]
   });
   return values[index];
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  clampPercent,
-  constrainValue,
-  decrement,
-  increment
-});
+
+exports.constrainValue = constrainValue;
+exports.decrement = decrement;
+exports.increment = increment;

package/dist/slider.utils.mjs

@@ -1,12 +1,26 @@
-import {
-  clampPercent,
-  constrainValue,
-  decrement,
-  increment
-} from "./chunk-YGFSMEUO.mjs";
-export {
-  clampPercent,
-  constrainValue,
-  decrement,
-  increment
-};
+import { snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue } from '@zag-js/numeric-range';
+
+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 { constrainValue, decrement, increment };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,15 +27,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/core": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/dom-event": "0.10.2",
-    "@zag-js/form-utils": "0.10.2",
-    "@zag-js/utils": "0.10.2",
-    "@zag-js/element-size": "0.10.2",
-    "@zag-js/numeric-range": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/anatomy": "0.10.4",
+    "@zag-js/core": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/dom-event": "0.10.4",
+    "@zag-js/form-utils": "0.10.4",
+    "@zag-js/utils": "0.10.4",
+    "@zag-js/element-size": "0.10.4",
+    "@zag-js/numeric-range": "0.10.4",
+    "@zag-js/types": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -53,13 +53,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/chunk-3Y7IIPR5.mjs

@@ -1,20 +0,0 @@
-// src/slider.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
-var anatomy = createAnatomy("slider").parts(
-  "root",
-  "label",
-  "thumb",
-  "hiddenInput",
-  "output",
-  "track",
-  "range",
-  "control",
-  "markerGroup",
-  "marker"
-);
-var parts = anatomy.build();
-
-export {
-  anatomy,
-  parts
-};

package/dist/chunk-IJAAAKZQ.mjs

@@ -1,115 +0,0 @@
-// src/slider.style.ts
-import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range";
-function getVerticalThumbOffset(ctx) {
-  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) {
-  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));
-  }
-  const getValue = getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
-  return parseFloat(getValue(ctx.value).toFixed(2));
-}
-function getThumbOffset(ctx) {
-  const percent = getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
-  if (ctx.thumbAlignment === "center") {
-    return `${percent}%`;
-  }
-  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
-  return `calc(${percent}% - ${offset}px)`;
-}
-function getVisibility(ctx) {
-  let visibility = "visible";
-  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
-    visibility = "hidden";
-  }
-  return visibility;
-}
-function getThumbStyle(ctx) {
-  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
-  return {
-    visibility: getVisibility(ctx),
-    position: "absolute",
-    transform: "var(--slider-thumb-transform)",
-    [placementProp]: "var(--slider-thumb-offset)"
-  };
-}
-function getRangeOffsets(ctx) {
-  let start = "0%";
-  let end = `${100 - ctx.valuePercent}%`;
-  if (ctx.origin === "center") {
-    const isNegative = ctx.valuePercent < 50;
-    start = isNegative ? `${ctx.valuePercent}%` : "50%";
-    end = isNegative ? "50%" : end;
-  }
-  return { start, end };
-}
-function getRangeStyle(ctx) {
-  if (ctx.isVertical) {
-    return {
-      position: "absolute",
-      bottom: "var(--slider-range-start)",
-      top: "var(--slider-range-end)"
-    };
-  }
-  return {
-    position: "absolute",
-    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
-    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
-  };
-}
-function getControlStyle() {
-  return {
-    touchAction: "none",
-    userSelect: "none",
-    position: "relative"
-  };
-}
-function getRootStyle(ctx) {
-  const range = getRangeOffsets(ctx);
-  return {
-    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
-    "--slider-thumb-offset": getThumbOffset(ctx),
-    "--slider-range-start": range.start,
-    "--slider-range-end": range.end
-  };
-}
-function getMarkerStyle(ctx, percent) {
-  return {
-    position: "absolute",
-    pointerEvents: "none",
-    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
-  };
-}
-function getLabelStyle() {
-  return { userSelect: "none" };
-}
-function getTrackStyle() {
-  return { position: "relative" };
-}
-function getMarkerGroupStyle() {
-  return {
-    userSelect: "none",
-    pointerEvents: "none",
-    position: "relative"
-  };
-}
-var styles = {
-  getThumbOffset,
-  getControlStyle,
-  getThumbStyle,
-  getRangeStyle,
-  getRootStyle,
-  getMarkerStyle,
-  getLabelStyle,
-  getTrackStyle,
-  getMarkerGroupStyle
-};
-
-export {
-  styles
-};

package/dist/chunk-NYN3VIY4.mjs

@@ -1,44 +0,0 @@
-import {
-  styles
-} from "./chunk-IJAAAKZQ.mjs";
-
-// src/slider.dom.ts
-import { getRelativePoint } from "@zag-js/dom-event";
-import { createScope } from "@zag-js/dom-query";
-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) => ctx.ids?.hiddenInput ?? `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.queryById(ctx, dom.getControlId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
-  getValueFromPoint(ctx, point) {
-    const relativePoint = getRelativePoint(point, dom.getControlEl(ctx));
-    const percent = relativePoint.getPercentValue({
-      orientation: ctx.orientation,
-      dir: ctx.dir,
-      inverted: { y: true }
-    });
-    return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
-  },
-  dispatchChangeEvent(ctx) {
-    const input = dom.getHiddenInputEl(ctx);
-    if (!input)
-      return;
-    dispatchInputValueEvent(input, { value: ctx.value });
-  }
-});
-
-export {
-  dom
-};