@zag-js/slider 0.2.3 → 0.2.5

package/dist/index.js

@@ -20,12 +20,29 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  anatomy: () => anatomy,
   connect: () => connect,
   machine: () => machine,
   unstable__dom: () => dom
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/slider.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
+  "root",
+  "label",
+  "thumb",
+  "hiddenInput",
+  "output",
+  "track",
+  "range",
+  "control",
+  "markerGroup",
+  "marker"
+);
+var parts = anatomy.build();
+
 // ../../utilities/dom/dist/index.mjs
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
@@ -342,6 +359,65 @@ function trackPointerMove(doc, opts) {
   );
 }
 
+// ../../utilities/number/dist/index.mjs
+function round(v, t) {
+  let num = valueOf(v);
+  const p = 10 ** (t != null ? t : 10);
+  num = Math.round(num * p) / p;
+  return t ? num.toFixed(t) : v.toString();
+}
+var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
+var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
+function snapToStep(value, step) {
+  const num = valueOf(value);
+  const p = countDecimals(step);
+  const v = Math.round(num / step) * step;
+  return round(v, p);
+}
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    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;
+    result /= multiplier;
+  }
+  return result;
+}
+var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
+var transform = (a, b) => {
+  const i = { min: a[0], max: a[1] };
+  const o = { min: b[0], max: b[1] };
+  return (v) => {
+    if (i.min === i.max || o.min === o.max)
+      return o.min;
+    const ratio = (o.max - o.min) / (i.max - i.min);
+    return o.min + ratio * (v - i.min);
+  };
+};
+
 // ../../utilities/form-utils/dist/index.mjs
 function getWindow(el) {
   var _a;
@@ -421,65 +497,6 @@ function trackFormControl(el, options) {
   };
 }
 
-// ../../utilities/number/dist/index.mjs
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (t != null ? t : 10);
-  num = Math.round(num * p) / p;
-  return t ? num.toFixed(t) : v.toString();
-}
-var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
-var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
-function clamp(v, o) {
-  return Math.min(Math.max(valueOf(v), o.min), o.max);
-}
-function countDecimals(value) {
-  if (!Number.isFinite(value))
-    return 0;
-  let e = 1, p = 0;
-  while (Math.round(value * e) / e !== value) {
-    e *= 10;
-    p += 1;
-  }
-  return p;
-}
-var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
-var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
-function snapToStep(value, step) {
-  const num = valueOf(value);
-  const p = countDecimals(step);
-  const v = Math.round(num / step) * step;
-  return round(v, p);
-}
-function valueOf(v) {
-  if (typeof v === "number")
-    return v;
-  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
-  return !Number.isNaN(num) ? num : 0;
-}
-function decimalOperation(a, op, b) {
-  let result = op === "+" ? a + b : a - b;
-  if (a % 1 !== 0 || b % 1 !== 0) {
-    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;
-    result /= multiplier;
-  }
-  return result;
-}
-var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
-var transform = (a, b) => {
-  const i = { min: a[0], max: a[1] };
-  const o = { min: b[0], max: b[1] };
-  return (v) => {
-    if (i.min === i.max || o.min === o.max)
-      return o.min;
-    const ratio = (o.max - o.min) / (i.max - i.min);
-    return o.min + ratio * (v - i.min);
-  };
-};
-
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
   var _a;
@@ -623,7 +640,7 @@ var dom = defineDomHelpers({
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
   },
-  getInputId: (ctx) => `slider:${ctx.id}:input`,
+  getHiddenInputId: (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`;
@@ -644,7 +661,7 @@ var dom = defineDomHelpers({
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
     const el = dom.getControlEl(ctx);
     if (!el)
@@ -661,7 +678,7 @@ var dom = defineDomHelpers({
     return utils.fromPercent(ctx, percent);
   },
   dispatchChangeEvent(ctx) {
-    const input = dom.getInputEl(ctx);
+    const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
     dispatchInputValueEvent(input, ctx.value);
@@ -701,7 +718,7 @@ function connect(state2, send, normalize) {
       send("DECREMENT");
     },
     rootProps: normalize.element({
-      "data-part": "root",
+      ...parts.root.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
       "data-orientation": state2.context.orientation,
@@ -711,12 +728,12 @@ function connect(state2, send, normalize) {
       style: dom.getRootStyle(state2.context)
     }),
     labelProps: normalize.label({
-      "data-part": "label",
+      ...parts.label.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
       id: dom.getLabelId(state2.context),
-      htmlFor: dom.getInputId(state2.context),
+      htmlFor: dom.getHiddenInputId(state2.context),
       onClick(event) {
         var _a2;
         if (!isInteractive)
@@ -727,7 +744,7 @@ function connect(state2, send, normalize) {
       style: dom.getLabelStyle()
     }),
     thumbProps: normalize.element({
-      "data-part": "thumb",
+      ...parts.thumb.attrs,
       id: dom.getThumbId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state2.context.orientation,
@@ -801,25 +818,25 @@ function connect(state2, send, normalize) {
       },
       style: dom.getThumbStyle(state2.context)
     }),
-    inputProps: normalize.input({
-      "data-part": "input",
+    hiddenInputProps: normalize.input({
+      ...parts.hiddenInput.attrs,
       type: "text",
       defaultValue: state2.context.value,
       name: state2.context.name,
       form: state2.context.form,
-      id: dom.getInputId(state2.context),
+      id: dom.getHiddenInputId(state2.context),
       hidden: true
     }),
     outputProps: normalize.output({
-      "data-part": "output",
+      ...parts.output.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
       id: dom.getOutputId(state2.context),
-      htmlFor: dom.getInputId(state2.context),
+      htmlFor: dom.getHiddenInputId(state2.context),
       "aria-live": "off"
     }),
     trackProps: normalize.element({
-      "data-part": "track",
+      ...parts.track.attrs,
       id: dom.getTrackId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
@@ -828,7 +845,7 @@ function connect(state2, send, normalize) {
       style: dom.getTrackStyle()
     }),
     rangeProps: normalize.element({
-      "data-part": "range",
+      ...parts.range.attrs,
       id: dom.getRangeId(state2.context),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
@@ -837,7 +854,7 @@ function connect(state2, send, normalize) {
       style: dom.getRangeStyle(state2.context)
     }),
     controlProps: normalize.element({
-      "data-part": "control",
+      ...parts.control.attrs,
       id: dom.getControlId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
@@ -857,7 +874,7 @@ function connect(state2, send, normalize) {
       style: dom.getControlStyle()
     }),
     markerGroupProps: normalize.element({
-      "data-part": "marker-group",
+      ...parts.markerGroup.attrs,
       role: "presentation",
       "aria-hidden": true,
       "data-orientation": state2.context.orientation,
@@ -868,7 +885,7 @@ function connect(state2, send, normalize) {
       const style = dom.getMarkerStyle(state2.context, percent);
       const markerState = value > state2.context.value ? "over-value" : value < state2.context.value ? "under-value" : "at-value";
       return normalize.element({
-        "data-part": "marker",
+        ...parts.marker.attrs,
         role: "presentation",
         "data-orientation": state2.context.orientation,
         id: dom.getMarkerId(state2.context, value),
@@ -1018,7 +1035,7 @@ function machine(userContext) {
       },
       activities: {
         trackFormControlState(ctx2) {
-          return trackFormControl(dom.getInputEl(ctx2), {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
@@ -1102,6 +1119,7 @@ function machine(userContext) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  anatomy,
   connect,
   machine,
   unstable__dom

package/dist/index.mjs

@@ -1,3 +1,19 @@
+// src/slider.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("slider").parts(
+  "root",
+  "label",
+  "thumb",
+  "hiddenInput",
+  "output",
+  "track",
+  "range",
+  "control",
+  "markerGroup",
+  "marker"
+);
+var parts = anatomy.build();
+
 // ../../utilities/dom/dist/index.mjs
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
@@ -314,6 +330,65 @@ function trackPointerMove(doc, opts) {
   );
 }
 
+// ../../utilities/number/dist/index.mjs
+function round(v, t) {
+  let num = valueOf(v);
+  const p = 10 ** (t != null ? t : 10);
+  num = Math.round(num * p) / p;
+  return t ? num.toFixed(t) : v.toString();
+}
+var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
+var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
+function snapToStep(value, step) {
+  const num = valueOf(value);
+  const p = countDecimals(step);
+  const v = Math.round(num / step) * step;
+  return round(v, p);
+}
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    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;
+    result /= multiplier;
+  }
+  return result;
+}
+var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
+var transform = (a, b) => {
+  const i = { min: a[0], max: a[1] };
+  const o = { min: b[0], max: b[1] };
+  return (v) => {
+    if (i.min === i.max || o.min === o.max)
+      return o.min;
+    const ratio = (o.max - o.min) / (i.max - i.min);
+    return o.min + ratio * (v - i.min);
+  };
+};
+
 // ../../utilities/form-utils/dist/index.mjs
 function getWindow(el) {
   var _a;
@@ -393,65 +468,6 @@ function trackFormControl(el, options) {
   };
 }
 
-// ../../utilities/number/dist/index.mjs
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (t != null ? t : 10);
-  num = Math.round(num * p) / p;
-  return t ? num.toFixed(t) : v.toString();
-}
-var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
-var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
-function clamp(v, o) {
-  return Math.min(Math.max(valueOf(v), o.min), o.max);
-}
-function countDecimals(value) {
-  if (!Number.isFinite(value))
-    return 0;
-  let e = 1, p = 0;
-  while (Math.round(value * e) / e !== value) {
-    e *= 10;
-    p += 1;
-  }
-  return p;
-}
-var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
-var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
-function snapToStep(value, step) {
-  const num = valueOf(value);
-  const p = countDecimals(step);
-  const v = Math.round(num / step) * step;
-  return round(v, p);
-}
-function valueOf(v) {
-  if (typeof v === "number")
-    return v;
-  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
-  return !Number.isNaN(num) ? num : 0;
-}
-function decimalOperation(a, op, b) {
-  let result = op === "+" ? a + b : a - b;
-  if (a % 1 !== 0 || b % 1 !== 0) {
-    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;
-    result /= multiplier;
-  }
-  return result;
-}
-var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
-var transform = (a, b) => {
-  const i = { min: a[0], max: a[1] };
-  const o = { min: b[0], max: b[1] };
-  return (v) => {
-    if (i.min === i.max || o.min === o.max)
-      return o.min;
-    const ratio = (o.max - o.min) / (i.max - i.min);
-    return o.min + ratio * (v - i.min);
-  };
-};
-
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
   var _a;
@@ -595,7 +611,7 @@ var dom = defineDomHelpers({
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
   },
-  getInputId: (ctx) => `slider:${ctx.id}:input`,
+  getHiddenInputId: (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`;
@@ -616,7 +632,7 @@ var dom = defineDomHelpers({
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getValueFromPoint(ctx, point) {
     const el = dom.getControlEl(ctx);
     if (!el)
@@ -633,7 +649,7 @@ var dom = defineDomHelpers({
     return utils.fromPercent(ctx, percent);
   },
   dispatchChangeEvent(ctx) {
-    const input = dom.getInputEl(ctx);
+    const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
     dispatchInputValueEvent(input, ctx.value);
@@ -673,7 +689,7 @@ function connect(state2, send, normalize) {
       send("DECREMENT");
     },
     rootProps: normalize.element({
-      "data-part": "root",
+      ...parts.root.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
       "data-orientation": state2.context.orientation,
@@ -683,12 +699,12 @@ function connect(state2, send, normalize) {
       style: dom.getRootStyle(state2.context)
     }),
     labelProps: normalize.label({
-      "data-part": "label",
+      ...parts.label.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
       id: dom.getLabelId(state2.context),
-      htmlFor: dom.getInputId(state2.context),
+      htmlFor: dom.getHiddenInputId(state2.context),
       onClick(event) {
         var _a2;
         if (!isInteractive)
@@ -699,7 +715,7 @@ function connect(state2, send, normalize) {
       style: dom.getLabelStyle()
     }),
     thumbProps: normalize.element({
-      "data-part": "thumb",
+      ...parts.thumb.attrs,
       id: dom.getThumbId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state2.context.orientation,
@@ -773,25 +789,25 @@ function connect(state2, send, normalize) {
       },
       style: dom.getThumbStyle(state2.context)
     }),
-    inputProps: normalize.input({
-      "data-part": "input",
+    hiddenInputProps: normalize.input({
+      ...parts.hiddenInput.attrs,
       type: "text",
       defaultValue: state2.context.value,
       name: state2.context.name,
       form: state2.context.form,
-      id: dom.getInputId(state2.context),
+      id: dom.getHiddenInputId(state2.context),
       hidden: true
     }),
     outputProps: normalize.output({
-      "data-part": "output",
+      ...parts.output.attrs,
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
       id: dom.getOutputId(state2.context),
-      htmlFor: dom.getInputId(state2.context),
+      htmlFor: dom.getHiddenInputId(state2.context),
       "aria-live": "off"
     }),
     trackProps: normalize.element({
-      "data-part": "track",
+      ...parts.track.attrs,
       id: dom.getTrackId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
@@ -800,7 +816,7 @@ function connect(state2, send, normalize) {
       style: dom.getTrackStyle()
     }),
     rangeProps: normalize.element({
-      "data-part": "range",
+      ...parts.range.attrs,
       id: dom.getRangeId(state2.context),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
@@ -809,7 +825,7 @@ function connect(state2, send, normalize) {
       style: dom.getRangeStyle(state2.context)
     }),
     controlProps: normalize.element({
-      "data-part": "control",
+      ...parts.control.attrs,
       id: dom.getControlId(state2.context),
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
@@ -829,7 +845,7 @@ function connect(state2, send, normalize) {
       style: dom.getControlStyle()
     }),
     markerGroupProps: normalize.element({
-      "data-part": "marker-group",
+      ...parts.markerGroup.attrs,
       role: "presentation",
       "aria-hidden": true,
       "data-orientation": state2.context.orientation,
@@ -840,7 +856,7 @@ function connect(state2, send, normalize) {
       const style = dom.getMarkerStyle(state2.context, percent);
       const markerState = value > state2.context.value ? "over-value" : value < state2.context.value ? "under-value" : "at-value";
       return normalize.element({
-        "data-part": "marker",
+        ...parts.marker.attrs,
         role: "presentation",
         "data-orientation": state2.context.orientation,
         id: dom.getMarkerId(state2.context, value),
@@ -990,7 +1006,7 @@ function machine(userContext) {
       },
       activities: {
         trackFormControlState(ctx2) {
-          return trackFormControl(dom.getInputEl(ctx2), {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
@@ -1073,6 +1089,7 @@ function machine(userContext) {
   );
 }
 export {
+  anatomy,
   connect,
   machine,
   dom as unstable__dom

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Core logic for the slider widget implemented as a state machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -29,7 +29,8 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.2.2",
+    "@zag-js/anatomy": "0.1.1",
+    "@zag-js/core": "0.2.3",
     "@zag-js/element-size": "0.3.0",
     "@zag-js/types": "0.3.1"
   },
@@ -37,7 +38,7 @@
     "@zag-js/dom-utils": "0.2.1",
     "@zag-js/form-utils": "0.2.2",
     "@zag-js/utils": "0.3.1",
-    "@zag-js/number-utils": "0.2.0"
+    "@zag-js/number-utils": "0.2.1"
   },
   "scripts": {
     "build-fast": "tsup src/index.ts --format=esm,cjs",