@zag-js/slider 0.2.6 → 0.2.8

package/dist/slider.machine.mjs

@@ -0,0 +1,10 @@
+import {
+  machine
+} from "./chunk-A2ZK6G4F.mjs";
+import "./chunk-SGCWELVB.mjs";
+import "./chunk-J5IGGBVE.mjs";
+import "./chunk-YREEXXZP.mjs";
+import "./chunk-DRAPR6JV.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,141 @@
+"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);
+var import_numeric_range = require("@zag-js/numeric-range");
+function getVerticalThumbOffset(ctx) {
+  var _a;
+  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const getValue = (0, import_numeric_range.getValueTransformer)([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 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+  }
+  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getThumbOffset(ctx) {
+  const percent = (0, import_numeric_range.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
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  styles
+});

package/dist/slider.style.mjs

@@ -0,0 +1,6 @@
+import {
+  styles
+} from "./chunk-YREEXXZP.mjs";
+export {
+  styles
+};

package/dist/slider.types.d.ts

@@ -0,0 +1,166 @@
+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;
+    /**
+     * @computed
+     * The value of the slider as a percentage
+     */
+    readonly valuePercent: number;
+}>;
+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,10 @@
+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 };

package/dist/slider.utils.js

@@ -0,0 +1,61 @@
+"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, {
+  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);
+}
+function decrement(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range.getPreviousStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+function increment(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range.getNextStepValue)(index, {
+    ...ctx,
+    step: step != null ? 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
+});

package/dist/slider.utils.mjs

@@ -0,0 +1,12 @@
+import {
+  clampPercent,
+  constrainValue,
+  decrement,
+  increment
+} from "./chunk-DRAPR6JV.mjs";
+export {
+  clampPercent,
+  constrainValue,
+  decrement,
+  increment
+};

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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.5",
+    "@zag-js/element-size": "0.3.1",
+    "@zag-js/numeric-range": "0.1.0",
+    "@zag-js/types": "0.3.3"
   },
   "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.3",
+    "@zag-js/form-utils": "0.2.3",
+    "@zag-js/utils": "0.3.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",