@zag-js/slider 0.10.5 → 0.11.1

package/dist/slider.machine.mjs

@@ -1,203 +0,0 @@
-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 { getValuePercent, clampValue } from '@zag-js/numeric-range';
-import { compact } from '@zag-js/utils';
-import { dom } from './slider.dom.mjs';
-import { constrainValue, decrement, increment } from './slider.utils.mjs';
-
-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/slider.style.d.ts

@@ -1,23 +0,0 @@
-import type { Style } from "@zag-js/types";
-import type { MachineContext as Ctx, SharedContext } from "./slider.types";
-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: Ctx): Style;
-declare function getMarkerStyle(ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number): Style;
-declare function getLabelStyle(): Style;
-declare function getTrackStyle(): Style;
-declare function getMarkerGroupStyle(): Style;
-export 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 {};

package/dist/slider.style.js

@@ -1,117 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const numericRange = require('@zag-js/numeric-range');
-
-function getVerticalThumbOffset(ctx) {
-  const { height = 0 } = ctx.thumbSize ?? {};
-  const getValue = numericRange.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 = numericRange.getValueTransformer([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
-    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
-  }
-  const getValue = numericRange.getValueTransformer([ctx.min, ctx.max], [-width / 2, width / 2]);
-  return parseFloat(getValue(ctx.value).toFixed(2));
-}
-function getThumbOffset(ctx) {
-  const percent = numericRange.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
-};
-
-exports.styles = styles;

package/dist/slider.style.mjs

@@ -1,113 +0,0 @@
-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,165 +0,0 @@
-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;
-    control: string;
-    track: string;
-    range: string;
-    label: string;
-    output: string;
-    hiddenInput: 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";
-};
-export 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<{}>;
-export type MachineContext = PublicContext & ComputedContext & PrivateContext;
-export type MachineState = {
-    value: "idle" | "dragging" | "focus";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export 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;
-};
-export type Point = {
-    x: number;
-    y: number;
-};
-export {};

package/dist/slider.utils.d.ts

@@ -1,5 +0,0 @@
-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,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const numericRange = require('@zag-js/numeric-range');
-
-function constrainValue(ctx, value) {
-  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 = numericRange.getPreviousStepValue(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-function increment(ctx, step) {
-  const index = 0;
-  const values = numericRange.getNextStepValue(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-
-exports.constrainValue = constrainValue;
-exports.decrement = decrement;
-exports.increment = increment;

package/dist/slider.utils.mjs

@@ -1,26 +0,0 @@
-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 };