@zag-js/slider 0.1.10 → 0.1.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,4 +1,228 @@
-export { dom as unstable__dom } from "./slider.dom";
-export { connect } from "./slider.connect";
-export { machine } from "./slider.machine";
-export type { UserDefinedContext as Context } from "./slider.types";
+import * as _zag_js_types from '@zag-js/types';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare type ElementIds = Partial<{
+    root: string;
+    thumb: string;
+    control: string;
+    track: string;
+    range: string;
+    label: string;
+    output: string;
+}>;
+declare 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;
+    /**
+     * 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";
+};
+declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
+declare 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;
+}>;
+declare type PrivateContext = Context<{}>;
+declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
+declare type MachineState = {
+    value: "unknown" | "idle" | "dragging" | "focus";
+};
+declare type State = StateMachine.State<MachineContext, MachineState>;
+declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+declare 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;
+};
+declare type Point = {
+    x: number;
+    y: number;
+};
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T_1 = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T_1 | null;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getThumbId: (ctx: MachineContext) => string;
+    getControlId: (ctx: MachineContext) => string;
+    getInputId: (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 | null;
+    getInputEl: (ctx: MachineContext) => HTMLInputElement | null;
+    getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
+    dispatchChangeEvent(ctx: MachineContext): 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;
+};
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    isFocused: boolean;
+    isDragging: boolean;
+    value: number;
+    percent: number;
+    setValue(value: number): void;
+    getPercentValue(percent: number): number;
+    focus(): void;
+    increment(): void;
+    decrement(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    thumbProps: T["element"];
+    inputProps: T["input"];
+    outputProps: T["output"];
+    trackProps: T["element"];
+    rangeProps: T["element"];
+    controlProps: T["element"];
+    markerGroupProps: T["element"];
+    getMarkerProps({ value }: {
+        value: number;
+    }): T["element"];
+};
+
+declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, connect, machine, dom as unstable__dom };

package/dist/index.js

@@ -1,25 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -44,29 +27,12 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var callAll = (...fns) => (...a) => {
   fns.forEach(function(fn) {
@@ -78,9 +44,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
@@ -94,36 +59,33 @@ function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
       var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+  return {
+    ...dom2,
+    ...helpers
+  };
 }
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
@@ -201,8 +163,7 @@ var fallback = {
   clientY: 0
 };
 function getEventPoint(event, type = "page") {
-  var _a, _b;
-  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 function getPointRelativeToNode(point, element) {
@@ -212,10 +173,9 @@ function getPointRelativeToNode(point, element) {
   return { x, y };
 }
 function getDescriptor(el, options) {
-  var _a;
   const { type, property } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
 function dispatchInputValueEvent(el, value) {
   var _a;
@@ -245,10 +205,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -285,8 +244,7 @@ function addDomEvent(target, eventName, handler, options) {
   };
 }
 function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
+  const type = getEventName(event) ?? event;
   return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
 }
 function wrapHandler(fn, filter = false) {
@@ -297,8 +255,7 @@ function wrapHandler(fn, filter = false) {
 }
 function filterPrimaryPointer(fn) {
   return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
+    const win = event.view ?? window;
     const isMouseEvent2 = event instanceof win.MouseEvent;
     const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
     if (isPrimary)
@@ -353,7 +310,7 @@ var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
 function disableTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state === "default") {
       savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -367,7 +324,7 @@ function disableTextSelection({ target, doc } = {}) {
   return () => restoreTextSelection({ target, doc: _document });
 }
 function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state !== "disabled")
       return;
@@ -387,7 +344,7 @@ function restoreTextSelection({ target, doc } = {}) {
     if (target && modifiedElementMap.has(target)) {
       let targetOldUserSelect = modifiedElementMap.get(target);
       if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+        target.style.userSelect = targetOldUserSelect ?? "";
       }
       if (target.getAttribute("style") === "") {
         target.removeAttribute("style");
@@ -396,13 +353,13 @@ function restoreTextSelection({ target, doc } = {}) {
     }
   }
 }
-function trackPointerMove(opts) {
-  const { onPointerMove, onPointerUp, ctx } = opts;
-  const { doc = document, threshold = 5 } = ctx;
+var THRESHOLD = 5;
+function trackPointerMove(doc, opts) {
+  const { onPointerMove, onPointerUp } = opts;
   const handlePointerMove = (event, info) => {
     const { point: p } = info;
-    const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
-    if (distance < threshold)
+    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
+    if (distance < THRESHOLD)
       return;
     if (isMouseEvent(event) && isLeftClick(event)) {
       onPointerUp();
@@ -414,10 +371,9 @@ function trackPointerMove(opts) {
 }
 
 // ../../utilities/number/dist/index.mjs
-var __pow2 = Math.pow;
 function round(v, t) {
   let num = valueOf(v);
-  const p = __pow2(10, t != null ? t : 10);
+  const p = 10 ** (t ?? 10);
   num = Math.round(num * p) / p;
   return t ? num.toFixed(t) : v.toString();
 }
@@ -453,7 +409,7 @@ function valueOf(v) {
 function decimalOperation(a, op, b) {
   let result = op === "+" ? a + b : a - b;
   if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
+    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;
@@ -475,14 +431,12 @@ var transform = (a, b) => {
 
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
-  var _a;
-  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { height = 0 } = ctx.thumbSize ?? {};
   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 : {};
+  const { width = 0 } = ctx.thumbSize ?? {};
   if (ctx.isRtl) {
     const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -592,45 +546,46 @@ var utils = {
     return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
   },
   decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
+    let value = decrement(ctx.value, step ?? ctx.step);
     return utils.convert(ctx, value);
   },
   increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
+    let value = increment(ctx.value, step ?? ctx.step);
     return utils.convert(ctx, value);
   }
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers(__spreadProps(__spreadValues({}, styles), {
+var dom = defineDomHelpers({
+  ...styles,
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `slider:${ctx.id}`;
   },
   getThumbId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.thumb) ?? `slider:${ctx.id}:thumb`;
   },
   getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.control) ?? `slider:${ctx.id}:control`;
   },
   getInputId: (ctx) => `slider:${ctx.id}:input`,
   getOutputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.output) ?? `slider:${ctx.id}:output`;
   },
   getTrackId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}track`;
   },
   getRangeId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}:range`;
   },
   getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `slider:${ctx.id}:label`;
   },
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
@@ -658,7 +613,7 @@ var dom = defineDomHelpers(__spreadProps(__spreadValues({}, styles), {
       return;
     dispatchInputValueEvent(input, ctx.value);
   }
-}));
+});
 
 // src/slider.connect.ts
 function connect(state2, send, normalize) {
@@ -729,7 +684,7 @@ function connect(state2, send, normalize) {
       "data-invalid": dataAttr(isInvalid),
       "aria-disabled": isDisabled || void 0,
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state2.context),
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
       "aria-orientation": state2.context.orientation,
       "aria-valuemax": state2.context.max,
       "aria-valuemin": state2.context.min,
@@ -878,7 +833,7 @@ function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "slider",
     initial: "unknown",
-    context: __spreadValues({
+    context: {
       thumbSize: null,
       thumbAlignment: "contain",
       disabled: false,
@@ -890,8 +845,9 @@ function machine(ctx) {
       value: 0,
       step: 1,
       min: 0,
-      max: 100
-    }, ctx),
+      max: 100,
+      ...ctx
+    },
     computed: {
       isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
       isVertical: (ctx2) => ctx2.orientation === "vertical",
@@ -1005,8 +961,7 @@ function machine(ctx) {
         });
       },
       trackPointerMove(ctx2, _evt, { send }) {
-        return trackPointerMove({
-          ctx: ctx2,
+        return trackPointerMove(dom.getDoc(ctx2), {
           onPointerMove(info) {
             send({ type: "POINTER_MOVE", point: info.point });
           },
@@ -1076,3 +1031,9 @@ function machine(ctx) {
     }
   });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect,
+  machine,
+  unstable__dom
+});

package/dist/index.mjs

@@ -1,47 +1,10 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
 // ../../utilities/dom/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var callAll = (...fns) => (...a) => {
   fns.forEach(function(fn) {
@@ -53,9 +16,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
@@ -69,36 +31,33 @@ function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
       var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+  return {
+    ...dom2,
+    ...helpers
+  };
 }
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
@@ -176,8 +135,7 @@ var fallback = {
   clientY: 0
 };
 function getEventPoint(event, type = "page") {
-  var _a, _b;
-  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 function getPointRelativeToNode(point, element) {
@@ -187,10 +145,9 @@ function getPointRelativeToNode(point, element) {
   return { x, y };
 }
 function getDescriptor(el, options) {
-  var _a;
   const { type, property } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
 function dispatchInputValueEvent(el, value) {
   var _a;
@@ -220,10 +177,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -260,8 +216,7 @@ function addDomEvent(target, eventName, handler, options) {
   };
 }
 function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
+  const type = getEventName(event) ?? event;
   return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
 }
 function wrapHandler(fn, filter = false) {
@@ -272,8 +227,7 @@ function wrapHandler(fn, filter = false) {
 }
 function filterPrimaryPointer(fn) {
   return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
+    const win = event.view ?? window;
     const isMouseEvent2 = event instanceof win.MouseEvent;
     const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
     if (isPrimary)
@@ -328,7 +282,7 @@ var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
 function disableTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state === "default") {
       savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -342,7 +296,7 @@ function disableTextSelection({ target, doc } = {}) {
   return () => restoreTextSelection({ target, doc: _document });
 }
 function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state !== "disabled")
       return;
@@ -362,7 +316,7 @@ function restoreTextSelection({ target, doc } = {}) {
     if (target && modifiedElementMap.has(target)) {
       let targetOldUserSelect = modifiedElementMap.get(target);
       if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+        target.style.userSelect = targetOldUserSelect ?? "";
       }
       if (target.getAttribute("style") === "") {
         target.removeAttribute("style");
@@ -371,13 +325,13 @@ function restoreTextSelection({ target, doc } = {}) {
     }
   }
 }
-function trackPointerMove(opts) {
-  const { onPointerMove, onPointerUp, ctx } = opts;
-  const { doc = document, threshold = 5 } = ctx;
+var THRESHOLD = 5;
+function trackPointerMove(doc, opts) {
+  const { onPointerMove, onPointerUp } = opts;
   const handlePointerMove = (event, info) => {
     const { point: p } = info;
-    const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
-    if (distance < threshold)
+    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
+    if (distance < THRESHOLD)
       return;
     if (isMouseEvent(event) && isLeftClick(event)) {
       onPointerUp();
@@ -389,10 +343,9 @@ function trackPointerMove(opts) {
 }
 
 // ../../utilities/number/dist/index.mjs
-var __pow2 = Math.pow;
 function round(v, t) {
   let num = valueOf(v);
-  const p = __pow2(10, t != null ? t : 10);
+  const p = 10 ** (t ?? 10);
   num = Math.round(num * p) / p;
   return t ? num.toFixed(t) : v.toString();
 }
@@ -428,7 +381,7 @@ function valueOf(v) {
 function decimalOperation(a, op, b) {
   let result = op === "+" ? a + b : a - b;
   if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
+    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;
@@ -450,14 +403,12 @@ var transform = (a, b) => {
 
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
-  var _a;
-  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { height = 0 } = ctx.thumbSize ?? {};
   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 : {};
+  const { width = 0 } = ctx.thumbSize ?? {};
   if (ctx.isRtl) {
     const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -567,45 +518,46 @@ var utils = {
     return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
   },
   decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
+    let value = decrement(ctx.value, step ?? ctx.step);
     return utils.convert(ctx, value);
   },
   increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
+    let value = increment(ctx.value, step ?? ctx.step);
     return utils.convert(ctx, value);
   }
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers(__spreadProps(__spreadValues({}, styles), {
+var dom = defineDomHelpers({
+  ...styles,
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `slider:${ctx.id}`;
   },
   getThumbId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.thumb) ?? `slider:${ctx.id}:thumb`;
   },
   getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.control) ?? `slider:${ctx.id}:control`;
   },
   getInputId: (ctx) => `slider:${ctx.id}:input`,
   getOutputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.output) ?? `slider:${ctx.id}:output`;
   },
   getTrackId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}track`;
   },
   getRangeId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}:range`;
   },
   getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `slider:${ctx.id}:label`;
   },
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
@@ -633,7 +585,7 @@ var dom = defineDomHelpers(__spreadProps(__spreadValues({}, styles), {
       return;
     dispatchInputValueEvent(input, ctx.value);
   }
-}));
+});
 
 // src/slider.connect.ts
 function connect(state2, send, normalize) {
@@ -704,7 +656,7 @@ function connect(state2, send, normalize) {
       "data-invalid": dataAttr(isInvalid),
       "aria-disabled": isDisabled || void 0,
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state2.context),
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
       "aria-orientation": state2.context.orientation,
       "aria-valuemax": state2.context.max,
       "aria-valuemin": state2.context.min,
@@ -853,7 +805,7 @@ function machine(ctx) {
   return createMachine({
     id: "slider",
     initial: "unknown",
-    context: __spreadValues({
+    context: {
       thumbSize: null,
       thumbAlignment: "contain",
       disabled: false,
@@ -865,8 +817,9 @@ function machine(ctx) {
       value: 0,
       step: 1,
       min: 0,
-      max: 100
-    }, ctx),
+      max: 100,
+      ...ctx
+    },
     computed: {
       isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
       isVertical: (ctx2) => ctx2.orientation === "vertical",
@@ -980,8 +933,7 @@ function machine(ctx) {
         });
       },
       trackPointerMove(ctx2, _evt, { send }) {
-        return trackPointerMove({
-          ctx: ctx2,
+        return trackPointerMove(dom.getDoc(ctx2), {
           onPointerMove(info) {
             send({ type: "POINTER_MOVE", point: info.point });
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,21 +29,22 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.8",
-    "@zag-js/types": "0.2.2"
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.3"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.7",
-    "@zag-js/number-utils": "0.1.2",
-    "@zag-js/utils": "0.1.2"
+    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/number-utils": "0.1.3",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
-    "build:fast": "zag build",
-    "start": "zag build --watch",
-    "build": "zag build --prod",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "start": "pnpm build --watch",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
-    "test:ci": "yarn test --ci --runInBand",
-    "test:watch": "yarn test --watch --updateSnapshot"
+    "test-ci": "pnpm test --ci --runInBand",
+    "test-watch": "pnpm test --watch -u",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/dist/slider.connect.d.ts

@@ -1,25 +0,0 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types";
-import type { Send, State } from "./slider.types";
-export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
-    isFocused: boolean;
-    isDragging: boolean;
-    value: number;
-    percent: number;
-    setValue(value: number): void;
-    getPercentValue(percent: number): number;
-    focus(): void;
-    increment(): void;
-    decrement(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    thumbProps: T["element"];
-    inputProps: T["input"];
-    outputProps: T["output"];
-    trackProps: T["element"];
-    rangeProps: T["element"];
-    controlProps: T["element"];
-    markerGroupProps: T["element"];
-    getMarkerProps({ value }: {
-        value: number;
-    }): T["element"];
-};

package/dist/slider.dom.d.ts

@@ -1,43 +0,0 @@
-import type { MachineContext as Ctx, Point } from "./slider.types";
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Document | ShadowRoot;
-    getDoc: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }) => HTMLElement;
-    getById: <T_1 = HTMLElement>(ctx: {
-        getRootNode?: () => Node | Document | ShadowRoot;
-    }, id: string) => T_1;
-} & {
-    getRootId: (ctx: Ctx) => string;
-    getThumbId: (ctx: Ctx) => string;
-    getControlId: (ctx: Ctx) => string;
-    getInputId: (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;
-    getThumbEl: (ctx: Ctx) => HTMLElement;
-    getControlEl: (ctx: Ctx) => HTMLElement;
-    getInputEl: (ctx: Ctx) => HTMLInputElement;
-    getValueFromPoint(ctx: Ctx, point: Point): number | undefined;
-    dispatchChangeEvent(ctx: Ctx): void;
-    getThumbOffset: (ctx: import("./slider.types").SharedContext) => string;
-    getControlStyle: () => import("@zag-js/types").JSX.CSSProperties;
-    getThumbStyle: (ctx: import("./slider.types").SharedContext) => import("@zag-js/types").JSX.CSSProperties;
-    getRangeStyle: (ctx: Pick<import("./slider.types").SharedContext, "isVertical" | "isRtl">) => import("@zag-js/types").JSX.CSSProperties;
-    getRootStyle: (ctx: Ctx) => import("@zag-js/types").JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<import("./slider.types").SharedContext, "isHorizontal" | "isRtl">, percent: number) => import("@zag-js/types").JSX.CSSProperties;
-    getLabelStyle: () => import("@zag-js/types").JSX.CSSProperties;
-    getTrackStyle: () => import("@zag-js/types").JSX.CSSProperties;
-    getMarkerGroupStyle: () => import("@zag-js/types").JSX.CSSProperties;
-};

package/dist/slider.machine.d.ts

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

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.types.d.ts

@@ -1,173 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
-declare type ElementIds = Partial<{
-    root: string;
-    thumb: string;
-    control: string;
-    track: string;
-    range: string;
-    label: string;
-    output: string;
-}>;
-declare 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;
-    /**
-     * 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 declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
-declare 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;
-}>;
-declare type PrivateContext = Context<{
-    /**
-     * @internal The move threshold of the slider thumb before it is considered to be moved
-     */
-    threshold: number;
-    /**
-     * @internal The slider thumb dimensions
-     */
-    thumbSize: {
-        width: number;
-        height: number;
-    } | null;
-    /**
-     * @internal
-     * The value of the slider when it was initially rendered.
-     * Used when the `form.reset(...)` is called.
-     */
-    initialValue: number | null;
-}>;
-export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
-export declare type MachineState = {
-    value: "unknown" | "idle" | "dragging" | "focus";
-};
-export declare type State = S.State<MachineContext, MachineState>;
-export declare type Send = S.Send<S.AnyEventObject>;
-export declare 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 declare type Point = {
-    x: number;
-    y: number;
-};
-export {};

package/dist/slider.utils.d.ts

@@ -1,8 +0,0 @@
-import type { MachineContext as Ctx } from "./slider.types";
-export declare const utils: {
-    fromPercent(ctx: Ctx, percent: number): number;
-    clamp(ctx: Ctx, value: number): number;
-    convert(ctx: Ctx, value: number): number;
-    decrement(ctx: Ctx, step?: number): number;
-    increment(ctx: Ctx, step?: number): number;
-};