@zag-js/slider 0.2.2 → 0.2.4

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",
+  "input",
+  "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;
@@ -405,65 +481,21 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
-
-// ../../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);
+function trackFormControl(el, options) {
+  if (!el)
+    return;
+  const { onFieldsetDisabled, onFormReset } = options;
+  const cleanups = [
+    trackFormReset(el, onFormReset),
+    trackFieldsetDisabled(el, (disabled) => {
+      if (disabled)
+        onFieldsetDisabled();
+    })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
   };
-};
+}
 
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
@@ -686,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,
@@ -696,7 +728,7 @@ 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),
@@ -712,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,
@@ -787,15 +819,16 @@ function connect(state2, send, normalize) {
       style: dom.getThumbStyle(state2.context)
     }),
     inputProps: normalize.input({
-      "data-part": "input",
+      ...parts.input.attrs,
       type: "text",
       defaultValue: state2.context.value,
       name: state2.context.name,
+      form: state2.context.form,
       id: dom.getInputId(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),
@@ -803,7 +836,7 @@ function connect(state2, send, normalize) {
       "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),
@@ -812,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),
@@ -821,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),
@@ -841,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,
@@ -852,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),
@@ -906,13 +939,13 @@ function machine(userContext) {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
         hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      activities: ["trackFormControlState", "trackThumbSize"],
       on: {
         SET_VALUE: {
           actions: "setValue"
@@ -1001,17 +1034,15 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.isVertical
       },
       activities: {
-        trackFieldsetDisabled(ctx2) {
-          return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
-            if (disabled) {
-              ctx2.disabled = disabled;
-            }
-          });
-        },
-        trackFormReset(ctx2) {
-          return trackFormReset(dom.getInputEl(ctx2), () => {
-            if (ctx2.initialValue != null) {
-              ctx2.value = ctx2.initialValue;
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              if (ctx2.initialValue != null) {
+                ctx2.value = ctx2.initialValue;
+              }
             }
           });
         },
@@ -1088,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",
+  "input",
+  "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;
@@ -377,65 +452,21 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
-
-// ../../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);
+function trackFormControl(el, options) {
+  if (!el)
+    return;
+  const { onFieldsetDisabled, onFormReset } = options;
+  const cleanups = [
+    trackFormReset(el, onFormReset),
+    trackFieldsetDisabled(el, (disabled) => {
+      if (disabled)
+        onFieldsetDisabled();
+    })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
   };
-};
+}
 
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
@@ -658,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,
@@ -668,7 +699,7 @@ 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),
@@ -684,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,
@@ -759,15 +790,16 @@ function connect(state2, send, normalize) {
       style: dom.getThumbStyle(state2.context)
     }),
     inputProps: normalize.input({
-      "data-part": "input",
+      ...parts.input.attrs,
       type: "text",
       defaultValue: state2.context.value,
       name: state2.context.name,
+      form: state2.context.form,
       id: dom.getInputId(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),
@@ -775,7 +807,7 @@ function connect(state2, send, normalize) {
       "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),
@@ -784,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),
@@ -793,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),
@@ -813,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,
@@ -824,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),
@@ -878,13 +910,13 @@ function machine(userContext) {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
         hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      activities: ["trackFormControlState", "trackThumbSize"],
       on: {
         SET_VALUE: {
           actions: "setValue"
@@ -973,17 +1005,15 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.isVertical
       },
       activities: {
-        trackFieldsetDisabled(ctx2) {
-          return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
-            if (disabled) {
-              ctx2.disabled = disabled;
-            }
-          });
-        },
-        trackFormReset(ctx2) {
-          return trackFormReset(dom.getInputEl(ctx2), () => {
-            if (ctx2.initialValue != null) {
-              ctx2.value = ctx2.initialValue;
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              if (ctx2.initialValue != null) {
+                ctx2.value = ctx2.initialValue;
+              }
             }
           });
         },
@@ -1059,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.2",
+  "version": "0.2.4",
   "description": "Core logic for the slider widget implemented as a state machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -29,15 +29,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
+    "@zag-js/anatomy": "0.1.1",
     "@zag-js/core": "0.2.2",
     "@zag-js/element-size": "0.3.0",
     "@zag-js/types": "0.3.1"
   },
   "devDependencies": {
     "@zag-js/dom-utils": "0.2.1",
-    "@zag-js/form-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",