@zag-js/slider 0.10.2 → 0.10.4

package/dist/slider.connect.mjs

@@ -1,9 +1,251 @@
-import {
-  connect
-} from "./chunk-T6GXNUP7.mjs";
-import "./chunk-3Y7IIPR5.mjs";
-import "./chunk-NYN3VIY4.mjs";
-import "./chunk-IJAAAKZQ.mjs";
-export {
-  connect
-};
+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,8 +1,6 @@
-import * as _zag_js_types from '@zag-js/types';
-import { MachineContext, Point, SharedContext } from './slider.types.js';
-import '@zag-js/core';
-
-declare const dom: {
+import { JSX } from '@zag-js/types';
+import { SharedContext, MachineContext as Ctx, Point } from './slider.types';
+export declare const dom: {
     getRootNode: (ctx: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
@@ -22,30 +20,28 @@ declare const dom: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T_1;
 } & {
-    getRootId: (ctx: MachineContext) => string;
-    getThumbId: (ctx: MachineContext) => string;
-    getControlId: (ctx: MachineContext) => string;
-    getHiddenInputId: (ctx: MachineContext) => string;
-    getOutputId: (ctx: MachineContext) => string;
-    getTrackId: (ctx: MachineContext) => string;
-    getRangeId: (ctx: MachineContext) => string;
-    getLabelId: (ctx: MachineContext) => string;
-    getMarkerId: (ctx: MachineContext, value: number) => string;
-    getRootEl: (ctx: MachineContext) => HTMLElement | null;
-    getThumbEl: (ctx: MachineContext) => HTMLElement | null;
-    getControlEl: (ctx: MachineContext) => HTMLElement;
-    getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
-    getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
-    dispatchChangeEvent(ctx: MachineContext): void;
+    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: () => _zag_js_types.JSX.CSSProperties;
-    getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
-    getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
-    getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<SharedContext, "isHorizontal" | "isRtl">, percent: number) => _zag_js_types.JSX.CSSProperties;
-    getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
-    getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
-    getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
+    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;
 };
-
-export { dom };

package/dist/slider.dom.js

@@ -1,148 +1,15 @@
-"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';
 
-// src/slider.dom.ts
-var slider_dom_exports = {};
-__export(slider_dom_exports, {
-  dom: () => dom
-});
-module.exports = __toCommonJS(slider_dom_exports);
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query = require("@zag-js/dom-query");
-var import_form_utils = require("@zag-js/form-utils");
-var import_numeric_range2 = require("@zag-js/numeric-range");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/slider.style.ts
-var import_numeric_range = require("@zag-js/numeric-range");
-function getVerticalThumbOffset(ctx) {
-  const { height = 0 } = ctx.thumbSize ?? {};
-  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) {
-  const { width = 0 } = ctx.thumbSize ?? {};
-  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
-};
+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');
 
-// src/slider.dom.ts
-var dom = (0, import_dom_query.createScope)({
-  ...styles,
+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`,
@@ -157,22 +24,20 @@ var dom = (0, import_dom_query.createScope)({
   getControlEl: (ctx) => dom.queryById(ctx, dom.getControlId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const relativePoint = (0, import_dom_event.getRelativePoint)(point, dom.getControlEl(ctx));
+    const relativePoint = domEvent.getRelativePoint(point, dom.getControlEl(ctx));
     const percent = relativePoint.getPercentValue({
       orientation: ctx.orientation,
       dir: ctx.dir,
       inverted: { y: true }
     });
-    return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
+    return numericRange.getPercentValue(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {
     const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
-    (0, import_form_utils.dispatchInputValueEvent)(input, { value: ctx.value });
+    formUtils.dispatchInputValueEvent(input, { value: ctx.value });
   }
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/slider.dom.mjs

@@ -1,7 +1,39 @@
-import {
-  dom
-} from "./chunk-NYN3VIY4.mjs";
-import "./chunk-IJAAAKZQ.mjs";
-export {
-  dom
-};
+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,7 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { UserDefinedContext, MachineContext, MachineState } from './slider.types.js';
-import '@zag-js/types';
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-export { machine };
+import { 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>;