@zag-js/slider 0.10.5 → 0.11.1

package/dist/slider.connect.mjs

@@ -1,251 +0,0 @@
-import { getEventStep, getEventKey, getNativeEvent, isLeftClick, isModifiedEvent, getEventPoint } from '@zag-js/dom-event';
-import { dataAttr, ariaAttr } from '@zag-js/dom-query';
-import { getValuePercent, getPercentValue } from '@zag-js/numeric-range';
-import { parts } from './slider.anatomy.mjs';
-import { dom } from './slider.dom.mjs';
-
-function connect(state, send, normalize) {
-  const ariaLabel = state.context["aria-label"];
-  const ariaLabelledBy = state.context["aria-labelledby"];
-  const ariaValueText = state.context.getAriaValueText?.(state.context.value);
-  const isFocused = state.matches("focus");
-  const isDragging = state.matches("dragging");
-  const isDisabled = state.context.disabled;
-  const isInteractive = state.context.isInteractive;
-  const isInvalid = state.context.invalid;
-  function getPercentValueFn(percent) {
-    return getPercentValue(percent, state.context.min, state.context.max, state.context.step);
-  }
-  function getValuePercentFn(value) {
-    return getValuePercent(value, state.context.min, state.context.max);
-  }
-  return {
-    /**
-     * Whether the slider is focused.
-     */
-    isFocused,
-    /**
-     * Whether the slider is being dragged.
-     */
-    isDragging,
-    /**
-     * The value of the slider.
-     */
-    value: state.context.value,
-    /**
-     * The value of the slider as a percent.
-     */
-    percent: getValuePercent(state.context.value, state.context.min, state.context.max),
-    /**
-     * Function to set the value of the slider.
-     */
-    setValue(value) {
-      send({ type: "SET_VALUE", value });
-    },
-    /**
-     * Returns the value of the slider at the given percent.
-     */
-    getPercentValue: getPercentValueFn,
-    /**
-     * Returns the percent of the slider at the given value.
-     */
-    getValuePercent: getValuePercentFn,
-    /**
-     * Function to focus the slider.
-     */
-    focus() {
-      dom.getThumbEl(state.context)?.focus();
-    },
-    /**
-     * Function to increment the value of the slider by the step.
-     */
-    increment() {
-      send("INCREMENT");
-    },
-    /**
-     * Function to decrement the value of the slider by the step.
-     */
-    decrement() {
-      send("DECREMENT");
-    },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-orientation": state.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      id: dom.getRootId(state.context),
-      dir: state.context.dir,
-      style: dom.getRootStyle(state.context)
-    }),
-    labelProps: normalize.label({
-      ...parts.label.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
-      id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
-      onClick(event) {
-        if (!isInteractive)
-          return;
-        event.preventDefault();
-        dom.getThumbEl(state.context)?.focus();
-      },
-      style: dom.getLabelStyle()
-    }),
-    thumbProps: normalize.element({
-      ...parts.thumb.attrs,
-      id: dom.getThumbId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      draggable: false,
-      "aria-invalid": ariaAttr(isInvalid),
-      "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": ariaAttr(isDisabled),
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
-      "aria-orientation": state.context.orientation,
-      "aria-valuemax": state.context.max,
-      "aria-valuemin": state.context.min,
-      "aria-valuenow": state.context.value,
-      "aria-valuetext": ariaValueText,
-      role: "slider",
-      tabIndex: isDisabled ? void 0 : 0,
-      onBlur() {
-        if (!isInteractive)
-          return;
-        send("BLUR");
-      },
-      onFocus() {
-        if (!isInteractive)
-          return;
-        send("FOCUS");
-      },
-      onKeyDown(event) {
-        if (!isInteractive)
-          return;
-        const step = getEventStep(event) * state.context.step;
-        let prevent = true;
-        const keyMap = {
-          ArrowUp() {
-            send({ type: "ARROW_UP", step });
-            prevent = state.context.isVertical;
-          },
-          ArrowDown() {
-            send({ type: "ARROW_DOWN", step });
-            prevent = state.context.isVertical;
-          },
-          ArrowLeft() {
-            send({ type: "ARROW_LEFT", step });
-            prevent = state.context.isHorizontal;
-          },
-          ArrowRight() {
-            send({ type: "ARROW_RIGHT", step });
-            prevent = state.context.isHorizontal;
-          },
-          PageUp() {
-            send({ type: "PAGE_UP", step });
-          },
-          PageDown() {
-            send({ type: "PAGE_DOWN", step });
-          },
-          Home() {
-            send("HOME");
-          },
-          End() {
-            send("END");
-          }
-        };
-        const key = getEventKey(event, state.context);
-        const exec = keyMap[key];
-        if (!exec)
-          return;
-        exec(event);
-        if (prevent) {
-          event.preventDefault();
-        }
-      },
-      style: dom.getThumbStyle(state.context)
-    }),
-    hiddenInputProps: normalize.input({
-      ...parts.hiddenInput.attrs,
-      type: "text",
-      defaultValue: state.context.value,
-      name: state.context.name,
-      form: state.context.form,
-      id: dom.getHiddenInputId(state.context),
-      hidden: true
-    }),
-    outputProps: normalize.output({
-      ...parts.output.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      id: dom.getOutputId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
-      "aria-live": "off"
-    }),
-    trackProps: normalize.element({
-      ...parts.track.attrs,
-      id: dom.getTrackId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-invalid": dataAttr(isInvalid),
-      "data-orientation": state.context.orientation,
-      style: dom.getTrackStyle()
-    }),
-    rangeProps: normalize.element({
-      ...parts.range.attrs,
-      id: dom.getRangeId(state.context),
-      "data-focus": dataAttr(isFocused),
-      "data-invalid": dataAttr(isInvalid),
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state.context.orientation,
-      style: dom.getRangeStyle(state.context)
-    }),
-    controlProps: normalize.element({
-      ...parts.control.attrs,
-      id: dom.getControlId(state.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-orientation": state.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      onPointerDown(event) {
-        if (!isInteractive)
-          return;
-        const evt = getNativeEvent(event);
-        if (!isLeftClick(evt) || isModifiedEvent(evt))
-          return;
-        const point = getEventPoint(evt);
-        send({ type: "POINTER_DOWN", point });
-        event.preventDefault();
-        event.stopPropagation();
-      },
-      style: dom.getControlStyle()
-    }),
-    markerGroupProps: normalize.element({
-      ...parts.markerGroup.attrs,
-      role: "presentation",
-      "aria-hidden": true,
-      "data-orientation": state.context.orientation,
-      style: dom.getMarkerGroupStyle()
-    }),
-    getMarkerProps({ value }) {
-      const percent = getValuePercentFn(value);
-      const style = dom.getMarkerStyle(state.context, percent);
-      const markerState = value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value";
-      return normalize.element({
-        ...parts.marker.attrs,
-        id: dom.getMarkerId(state.context, value),
-        role: "presentation",
-        "data-orientation": state.context.orientation,
-        "data-value": value,
-        "data-disabled": dataAttr(isDisabled),
-        "data-state": markerState,
-        style
-      });
-    }
-  };
-}
-
-export { connect };

package/dist/slider.dom.d.ts

@@ -1,47 +0,0 @@
-import type { JSX } from '@zag-js/types';
-import type { SharedContext, MachineContext as Ctx,  Point } from './slider.types';
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => ShadowRoot | Document;
-    getDoc: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => HTMLElement | null;
-    getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }, id: string) => T | null;
-    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }, id: string) => T_1;
-} & {
-    getRootId: (ctx: Ctx) => string;
-    getThumbId: (ctx: Ctx) => string;
-    getControlId: (ctx: Ctx) => string;
-    getHiddenInputId: (ctx: Ctx) => string;
-    getOutputId: (ctx: Ctx) => string;
-    getTrackId: (ctx: Ctx) => string;
-    getRangeId: (ctx: Ctx) => string;
-    getLabelId: (ctx: Ctx) => string;
-    getMarkerId: (ctx: Ctx, value: number) => string;
-    getRootEl: (ctx: Ctx) => HTMLElement | null;
-    getThumbEl: (ctx: Ctx) => HTMLElement | null;
-    getControlEl: (ctx: Ctx) => HTMLElement;
-    getHiddenInputEl: (ctx: Ctx) => HTMLInputElement | null;
-    getValueFromPoint(ctx: Ctx, point: Point): number | undefined;
-    dispatchChangeEvent(ctx: Ctx): void;
-    getThumbOffset: (ctx: SharedContext) => string;
-    getControlStyle: () => JSX.CSSProperties;
-    getThumbStyle: (ctx: SharedContext) => JSX.CSSProperties;
-    getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => JSX.CSSProperties;
-    getRootStyle: (ctx: Ctx) => JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => JSX.CSSProperties;
-    getLabelStyle: () => JSX.CSSProperties;
-    getTrackStyle: () => JSX.CSSProperties;
-    getMarkerGroupStyle: () => JSX.CSSProperties;
-};

package/dist/slider.dom.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const formUtils = require('@zag-js/form-utils');
-const numericRange = require('@zag-js/numeric-range');
-const slider_style = require('./slider.style.js');
-
-const dom = domQuery.createScope({
-  ...slider_style.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 = domEvent.getRelativePoint(point, dom.getControlEl(ctx));
-    const percent = relativePoint.getPercentValue({
-      orientation: ctx.orientation,
-      dir: ctx.dir,
-      inverted: { y: true }
-    });
-    return numericRange.getPercentValue(percent, ctx.min, ctx.max, ctx.step);
-  },
-  dispatchChangeEvent(ctx) {
-    const input = dom.getHiddenInputEl(ctx);
-    if (!input)
-      return;
-    formUtils.dispatchInputValueEvent(input, { value: ctx.value });
-  }
-});
-
-exports.dom = dom;

package/dist/slider.dom.mjs

@@ -1,39 +0,0 @@
-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';
-import { styles } from './slider.style.mjs';
-
-const 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 };

package/dist/slider.machine.d.ts

@@ -1,3 +0,0 @@
-import type { Machine, StateMachine } from '@zag-js/core';
-import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types";
-export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;

package/dist/slider.machine.js

@@ -1,207 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const core = require('@zag-js/core');
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const elementSize = require('@zag-js/element-size');
-const formUtils = require('@zag-js/form-utils');
-const numericRange = require('@zag-js/numeric-range');
-const utils = require('@zag-js/utils');
-const slider_dom = require('./slider.dom.js');
-const slider_utils = require('./slider.utils.js');
-
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.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 * numericRange.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 formUtils.trackFormControl(slider_dom.dom.getHiddenInputEl(ctx2), {
-            onFieldsetDisabled() {
-              ctx2.disabled = true;
-            },
-            onFormReset() {
-              if (ctx2.initialValue != null) {
-                ctx2.value = ctx2.initialValue;
-              }
-            }
-          });
-        },
-        trackPointerMove(ctx2, _evt, { send }) {
-          return domEvent.trackPointerMove(slider_dom.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 elementSize.trackElementSize(slider_dom.dom.getThumbEl(ctx2), (size) => {
-            if (size)
-              ctx2.thumbSize = size;
-          });
-        }
-      },
-      actions: {
-        checkValue(ctx2) {
-          const value = slider_utils.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) {
-          slider_dom.dom.dispatchChangeEvent(ctx2);
-        },
-        setPointerValue(ctx2, evt) {
-          const value = slider_dom.dom.getValueFromPoint(ctx2, evt.point);
-          if (value == null)
-            return;
-          ctx2.value = numericRange.clampValue(value, ctx2.min, ctx2.max);
-        },
-        focusThumb(ctx2) {
-          domQuery.raf(() => slider_dom.dom.getThumbEl(ctx2)?.focus());
-        },
-        decrement(ctx2, evt) {
-          ctx2.value = slider_utils.decrement(ctx2, evt.step);
-        },
-        increment(ctx2, evt) {
-          ctx2.value = slider_utils.increment(ctx2, evt.step);
-        },
-        setToMin(ctx2) {
-          ctx2.value = ctx2.min;
-        },
-        setToMax(ctx2) {
-          ctx2.value = ctx2.max;
-        },
-        setValue(ctx2, evt) {
-          ctx2.value = slider_utils.constrainValue(ctx2, evt.value);
-        }
-      }
-    }
-  );
-}
-
-exports.machine = machine;