@zag-js/slider 0.10.2 → 0.10.4

package/dist/slider.machine.js

@@ -1,216 +1,20 @@
-"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.machine.ts
-var slider_machine_exports = {};
-__export(slider_machine_exports, {
-  machine: () => machine
-});
-module.exports = __toCommonJS(slider_machine_exports);
-var import_core = require("@zag-js/core");
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_element_size = require("@zag-js/element-size");
-var import_form_utils2 = require("@zag-js/form-utils");
-var import_numeric_range4 = require("@zag-js/numeric-range");
-var import_utils = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/slider.dom.ts
-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");
+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');
 
-// 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
-};
-
-// src/slider.dom.ts
-var dom = (0, import_dom_query.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 = (0, import_dom_event.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);
-  },
-  dispatchChangeEvent(ctx) {
-    const input = dom.getHiddenInputEl(ctx);
-    if (!input)
-      return;
-    (0, import_form_utils.dispatchInputValueEvent)(input, { value: ctx.value });
-  }
-});
-
-// src/slider.utils.ts
-var import_numeric_range3 = require("@zag-js/numeric-range");
-function constrainValue(ctx, value) {
-  const snapValue = (0, import_numeric_range3.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
-  return (0, import_numeric_range3.clampValue)(snapValue, ctx.min, ctx.max);
-}
-function decrement(ctx, step) {
-  const index = 0;
-  const values = (0, import_numeric_range3.getPreviousStepValue)(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-function increment(ctx, step) {
-  const index = 0;
-  const values = (0, import_numeric_range3.getNextStepValue)(index, {
-    ...ctx,
-    step: step ?? ctx.step,
-    values: [ctx.value]
-  });
-  return values[index];
-}
-
-// src/slider.machine.ts
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "slider",
       initial: "idle",
@@ -235,7 +39,7 @@ function machine(userContext) {
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
         isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
         hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
-        valuePercent: (ctx2) => 100 * (0, import_numeric_range4.getValuePercent)(ctx2.value, ctx2.min, ctx2.max)
+        valuePercent: (ctx2) => 100 * numericRange.getValuePercent(ctx2.value, ctx2.min, ctx2.max)
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
@@ -323,7 +127,7 @@ function machine(userContext) {
       },
       activities: {
         trackFormControlState(ctx2) {
-          return (0, import_form_utils2.trackFormControl)(dom.getHiddenInputEl(ctx2), {
+          return formUtils.trackFormControl(slider_dom.dom.getHiddenInputEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
@@ -335,7 +139,7 @@ function machine(userContext) {
           });
         },
         trackPointerMove(ctx2, _evt, { send }) {
-          return (0, import_dom_event2.trackPointerMove)(dom.getDoc(ctx2), {
+          return domEvent.trackPointerMove(slider_dom.dom.getDoc(ctx2), {
             onPointerMove(info) {
               send({ type: "POINTER_MOVE", point: info.point });
             },
@@ -347,7 +151,7 @@ function machine(userContext) {
         trackThumbSize(ctx2, _evt) {
           if (ctx2.thumbAlignment !== "contain")
             return;
-          return (0, import_element_size.trackElementSize)(dom.getThumbEl(ctx2), (size) => {
+          return elementSize.trackElementSize(slider_dom.dom.getThumbEl(ctx2), (size) => {
             if (size)
               ctx2.thumbSize = size;
           });
@@ -355,7 +159,7 @@ function machine(userContext) {
       },
       actions: {
         checkValue(ctx2) {
-          const value = constrainValue(ctx2, ctx2.value);
+          const value = slider_utils.constrainValue(ctx2, ctx2.value);
           ctx2.value = value;
           ctx2.initialValue = value;
         },
@@ -369,22 +173,22 @@ function machine(userContext) {
           ctx2.onChange?.({ value: ctx2.value });
         },
         dispatchChangeEvent(ctx2) {
-          dom.dispatchChangeEvent(ctx2);
+          slider_dom.dom.dispatchChangeEvent(ctx2);
         },
         setPointerValue(ctx2, evt) {
-          const value = dom.getValueFromPoint(ctx2, evt.point);
+          const value = slider_dom.dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)
             return;
-          ctx2.value = (0, import_numeric_range4.clampValue)(value, ctx2.min, ctx2.max);
+          ctx2.value = numericRange.clampValue(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
-          (0, import_dom_query2.raf)(() => dom.getThumbEl(ctx2)?.focus());
+          domQuery.raf(() => slider_dom.dom.getThumbEl(ctx2)?.focus());
         },
         decrement(ctx2, evt) {
-          ctx2.value = decrement(ctx2, evt.step);
+          ctx2.value = slider_utils.decrement(ctx2, evt.step);
         },
         increment(ctx2, evt) {
-          ctx2.value = increment(ctx2, evt.step);
+          ctx2.value = slider_utils.increment(ctx2, evt.step);
         },
         setToMin(ctx2) {
           ctx2.value = ctx2.min;
@@ -393,13 +197,11 @@ function machine(userContext) {
           ctx2.value = ctx2.max;
         },
         setValue(ctx2, evt) {
-          ctx2.value = constrainValue(ctx2, evt.value);
+          ctx2.value = slider_utils.constrainValue(ctx2, evt.value);
         }
       }
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;

package/dist/slider.machine.mjs

@@ -1,9 +1,203 @@
-import {
-  machine
-} from "./chunk-OCT2YBMN.mjs";
-import "./chunk-NYN3VIY4.mjs";
-import "./chunk-IJAAAKZQ.mjs";
-import "./chunk-YGFSMEUO.mjs";
-export {
-  machine
-};
+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,17 +1,15 @@
-import { Style } from '@zag-js/types';
-import { SharedContext, MachineContext } from './slider.types.js';
-import '@zag-js/core';
-
+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: MachineContext): 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;
-declare const styles: {
+export declare const styles: {
     getThumbOffset: typeof getThumbOffset;
     getControlStyle: typeof getControlStyle;
     getThumbStyle: typeof getThumbStyle;
@@ -22,5 +20,4 @@ declare const styles: {
     getTrackStyle: typeof getTrackStyle;
     getMarkerGroupStyle: typeof getMarkerGroupStyle;
 };
-
-export { styles };
+export {};

package/dist/slider.style.js

@@ -1,45 +1,25 @@
-"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';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const numericRange = require('@zag-js/numeric-range');
 
-// src/slider.style.ts
-var slider_style_exports = {};
-__export(slider_style_exports, {
-  styles: () => styles
-});
-module.exports = __toCommonJS(slider_style_exports);
-var import_numeric_range = require("@zag-js/numeric-range");
 function getVerticalThumbOffset(ctx) {
   const { height = 0 } = ctx.thumbSize ?? {};
-  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
+  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 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    const getValue2 = numericRange.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]);
+  const getValue = numericRange.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;
+  const percent = numericRange.getValuePercent(ctx.value, ctx.min, ctx.max) * 100;
   if (ctx.thumbAlignment === "center") {
     return `${percent}%`;
   }
@@ -122,7 +102,7 @@ function getMarkerGroupStyle() {
     position: "relative"
   };
 }
-var styles = {
+const styles = {
   getThumbOffset,
   getControlStyle,
   getThumbStyle,
@@ -133,7 +113,5 @@ var styles = {
   getTrackStyle,
   getMarkerGroupStyle
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  styles
-});
+
+exports.styles = styles;