@zag-js/slider 0.2.6 → 0.2.7

package/dist/slider.machine.mjs

@@ -0,0 +1,11 @@
+import {
+  machine
+} from "./chunk-3JMGYHB3.mjs";
+import "./chunk-SGCWELVB.mjs";
+import "./chunk-MR2MUD77.mjs";
+import "./chunk-MXJ3RGFD.mjs";
+import "./chunk-FUTBDWTA.mjs";
+import "./chunk-GBYBRQZL.mjs";
+export {
+  machine
+};

package/dist/slider.style.d.ts

@@ -0,0 +1,26 @@
+import { Style } from '@zag-js/types';
+import { SharedContext, MachineContext } from './slider.types.js';
+import '@zag-js/core';
+
+declare function getThumbOffset(ctx: SharedContext): string;
+declare function getThumbStyle(ctx: SharedContext): Style;
+declare function getRangeStyle(ctx: Pick<SharedContext, "isVertical" | "isRtl">): Style;
+declare function getControlStyle(): Style;
+declare function getRootStyle(ctx: MachineContext): Style;
+declare function getMarkerStyle(ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number): Style;
+declare function getLabelStyle(): Style;
+declare function getTrackStyle(): Style;
+declare function getMarkerGroupStyle(): Style;
+declare const styles: {
+    getThumbOffset: typeof getThumbOffset;
+    getControlStyle: typeof getControlStyle;
+    getThumbStyle: typeof getThumbStyle;
+    getRangeStyle: typeof getRangeStyle;
+    getRootStyle: typeof getRootStyle;
+    getMarkerStyle: typeof getMarkerStyle;
+    getLabelStyle: typeof getLabelStyle;
+    getTrackStyle: typeof getTrackStyle;
+    getMarkerGroupStyle: typeof getMarkerGroupStyle;
+};
+
+export { styles };

package/dist/slider.style.js

@@ -0,0 +1,156 @@
+"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);
+
+// src/slider.style.ts
+var slider_style_exports = {};
+__export(slider_style_exports, {
+  styles: () => styles
+});
+module.exports = __toCommonJS(slider_style_exports);
+
+// ../../utilities/number/src/number.ts
+var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+
+// ../../utilities/number/src/transform.ts
+var transform = (a, b) => {
+  const i = { min: a[0], max: a[1] };
+  const o = { min: b[0], max: b[1] };
+  return (v) => {
+    if (i.min === i.max || o.min === o.max)
+      return o.min;
+    const ratio = (o.max - o.min) / (i.max - i.min);
+    return o.min + ratio * (v - i.min);
+  };
+};
+
+// src/slider.style.ts
+function getVerticalThumbOffset(ctx) {
+  var _a;
+  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const getValue = transform([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 : {};
+  if (ctx.isRtl) {
+    const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+  }
+  const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getThumbOffset(ctx) {
+  const percent = valueToPercent(ctx.value, ctx);
+  if (ctx.thumbAlignment === "center")
+    return `${percent}%`;
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getThumbStyle(ctx) {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  return {
+    visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: "var(--slider-thumb-offset)"
+  };
+}
+function getRangeOffsets(ctx) {
+  const percent = valueToPercent(ctx.value, ctx);
+  let start = "0%";
+  let end = `${100 - percent}%`;
+  if (ctx.origin === "center") {
+    const isNegative = percent < 50;
+    start = isNegative ? `${percent}%` : "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 ? 100 - percent : percent}%`
+  };
+}
+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
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  styles
+});

package/dist/slider.style.mjs

@@ -0,0 +1,7 @@
+import {
+  styles
+} from "./chunk-MXJ3RGFD.mjs";
+import "./chunk-GBYBRQZL.mjs";
+export {
+  styles
+};

package/dist/slider.types.d.ts

@@ -0,0 +1,161 @@
+import { StateMachine } from '@zag-js/core';
+import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
+
+type ElementIds = Partial<{
+    root: string;
+    thumb: string;
+    control: string;
+    track: string;
+    range: string;
+    label: string;
+    output: string;
+}>;
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The ids of the elements in the slider. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * The value of the slider
+     */
+    value: number;
+    /**
+     * The name associated with the slider (when used in a form)
+     */
+    name?: string;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string;
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the slider is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the slider value is invalid
+     */
+    invalid?: boolean;
+    /**
+     * The minimum value of the slider
+     */
+    min: number;
+    /**
+     * The maximum value of the slider
+     */
+    max: number;
+    /**
+     * The step value of the slider
+     */
+    step: number;
+    /**
+     * The orientation of the slider
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * - "start": Useful when the value represents an absolute value
+     * - "center": Useful when the value represents an offset (relative)
+     */
+    origin?: "start" | "center";
+    /**
+     * The aria-label of the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-label"?: string;
+    /**
+     * The `id` of the element that labels the slider. Useful for providing an accessible name to the slider
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Whether to focus the slider thumb after interaction (scrub and keyboard)
+     */
+    focusThumbOnChange?: boolean;
+    /**
+     * Function that returns a human readable value for the slider
+     */
+    getAriaValueText?(value: number): string;
+    /**
+     * Function invoked when the value of the slider changes
+     */
+    onChange?(details: {
+        value: number;
+    }): void;
+    /**
+     * Function invoked when the slider value change is done
+     */
+    onChangeEnd?(details: {
+        value: number;
+    }): void;
+    /**
+     * Function invoked when the slider value change is started
+     */
+    onChangeStart?(details: {
+        value: number;
+    }): void;
+    /**
+     * The alignment of the slider thumb relative to the track
+     * - `center`: the thumb will extend beyond the bounds of the slider track.
+     * - `contain`: the thumb will be contained within the bounds of the track.
+     */
+    thumbAlignment?: "contain" | "center";
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * Whether the slider is interactive
+     */
+    readonly isInteractive: boolean;
+    /**
+     * @computed
+     * Whether the thumb size has been measured
+     */
+    readonly hasMeasuredThumbSize: boolean;
+    /**
+     * @computed
+     * Whether the slider is horizontal
+     */
+    readonly isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the slider is vertical
+     */
+    readonly isVertical: boolean;
+    /**
+     * @computed
+     * Whether the slider is in RTL mode
+     */
+    readonly isRtl: boolean;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "unknown" | "idle" | "dragging" | "focus";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type SharedContext = {
+    min: number;
+    max: number;
+    step: number;
+    dir?: "ltr" | "rtl";
+    isRtl: boolean;
+    isVertical: boolean;
+    isHorizontal: boolean;
+    value: number;
+    thumbSize: {
+        width: number;
+        height: number;
+    } | null;
+    thumbAlignment?: "contain" | "center";
+    orientation?: "horizontal" | "vertical";
+    readonly hasMeasuredThumbSize: boolean;
+};
+type Point = {
+    x: number;
+    y: number;
+};
+
+export { MachineContext, MachineState, Point, Send, SharedContext, State, UserDefinedContext };

package/dist/slider.types.js

@@ -0,0 +1,18 @@
+"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);

package/dist/slider.utils.d.ts

@@ -0,0 +1,13 @@
+import { MachineContext } from './slider.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const utils: {
+    fromPercent(ctx: MachineContext, percent: number): number;
+    clamp(ctx: MachineContext, value: number): number;
+    convert(ctx: MachineContext, value: number): number;
+    decrement(ctx: MachineContext, step?: number): number;
+    increment(ctx: MachineContext, step?: number): number;
+};
+
+export { utils };

package/dist/slider.utils.js

@@ -0,0 +1,98 @@
+"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);
+
+// src/slider.utils.ts
+var slider_utils_exports = {};
+__export(slider_utils_exports, {
+  utils: () => utils
+});
+module.exports = __toCommonJS(slider_utils_exports);
+
+// ../../utilities/number/src/number.ts
+function round(v, t) {
+  let num = valueOf(v);
+  const p = 10 ** (t != null ? t : 10);
+  num = Math.round(num * p) / p;
+  return t ? num.toFixed(t) : v.toString();
+}
+var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
+function snapToStep(value, step) {
+  const num = valueOf(value);
+  const p = countDecimals(step);
+  const v = Math.round(num / step) * step;
+  return round(v, p);
+}
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+}
+
+// src/slider.utils.ts
+var utils = {
+  fromPercent(ctx, percent) {
+    percent = clamp(percent, { min: 0, max: 1 });
+    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
+  },
+  clamp(ctx, value) {
+    return clamp(value, ctx);
+  },
+  convert(ctx, value) {
+    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
+  },
+  decrement(ctx, step) {
+    let value = decrement(ctx.value, step != null ? step : ctx.step);
+    return utils.convert(ctx, value);
+  },
+  increment(ctx, step) {
+    let value = increment(ctx.value, step != null ? step : ctx.step);
+    return utils.convert(ctx, value);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  utils
+});

package/dist/slider.utils.mjs

@@ -0,0 +1,7 @@
+import {
+  utils
+} from "./chunk-FUTBDWTA.mjs";
+import "./chunk-GBYBRQZL.mjs";
+export {
+  utils
+};

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Core logic for the slider widget implemented as a state machine",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "machine",
@@ -29,21 +26,34 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.1.2",
-    "@zag-js/core": "0.2.3",
-    "@zag-js/element-size": "0.3.0",
-    "@zag-js/types": "0.3.1"
+    "@zag-js/anatomy": "0.1.3",
+    "@zag-js/core": "0.2.4",
+    "@zag-js/element-size": "0.3.1",
+    "@zag-js/types": "0.3.2"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.2.1",
-    "@zag-js/form-utils": "0.2.2",
-    "@zag-js/utils": "0.3.1",
-    "@zag-js/number-utils": "0.2.1"
+    "clean-package": "2.2.0",
+    "@zag-js/dom-utils": "0.2.2",
+    "@zag-js/form-utils": "0.2.3",
+    "@zag-js/utils": "0.3.2",
+    "@zag-js/number-utils": "0.2.2"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "build-fast": "tsup src",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build": "tsup src --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand",