@zag-js/steps 1.34.1 → 1.35.1

package/dist/index.mjs

@@ -1,344 +1,10 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { dataAttr } from '@zag-js/dom-query';
-import { isValueWithinRange, createSplitProps, fromLength } from '@zag-js/utils';
-import { createMachine, memo } from '@zag-js/core';
-import { createProps } from '@zag-js/types';
-
-// src/steps.anatomy.ts
-var anatomy = createAnatomy("steps").parts(
-  "root",
-  "list",
-  "item",
-  "trigger",
-  "indicator",
-  "separator",
-  "content",
-  "nextTrigger",
-  "prevTrigger",
-  "progress"
-);
-var parts = anatomy.build();
-
-// src/steps.dom.ts
-var getRootId = (ctx) => ctx.ids?.root ?? `steps:${ctx.id}`;
-var getListId = (ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`;
-var getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`;
-var getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`;
-
-// src/steps.connect.ts
-function connect(service, normalize) {
-  const { context, send, computed, prop, scope } = service;
-  const step = context.get("step");
-  const count = prop("count");
-  const percent = computed("percent");
-  const hasNextStep = computed("hasNextStep");
-  const hasPrevStep = computed("hasPrevStep");
-  const isStepValid = (index) => {
-    return prop("isStepValid")?.(index) ?? true;
-  };
-  const isStepSkippable = (index) => {
-    return prop("isStepSkippable")?.(index) ?? false;
-  };
-  const getItemState = (props2) => ({
-    triggerId: getTriggerId(scope, props2.index),
-    contentId: getContentId(scope, props2.index),
-    current: props2.index === step,
-    completed: props2.index < step,
-    incomplete: props2.index > step,
-    index: props2.index,
-    first: props2.index === 0,
-    last: props2.index === count - 1,
-    skippable: isStepSkippable(props2.index),
-    isValid: () => isStepValid(props2.index)
-  });
-  const goToNextStep = () => {
-    send({ type: "STEP.NEXT", src: "next.trigger.click" });
-  };
-  const goToPrevStep = () => {
-    send({ type: "STEP.PREV", src: "prev.trigger.click" });
-  };
-  const resetStep = () => {
-    send({ type: "STEP.RESET", src: "reset.trigger.click" });
-  };
-  const setStep = (value) => {
-    send({ type: "STEP.SET", value, src: "api.setValue" });
-  };
-  return {
-    value: step,
-    count,
-    percent,
-    hasNextStep,
-    hasPrevStep,
-    isCompleted: computed("completed"),
-    isStepValid,
-    isStepSkippable,
-    goToNextStep,
-    goToPrevStep,
-    resetStep,
-    getItemState,
-    setStep,
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        id: getRootId(scope),
-        dir: prop("dir"),
-        "data-orientation": prop("orientation"),
-        style: {
-          "--percent": `${percent}%`
-        }
-      });
-    },
-    getListProps() {
-      const arr = fromLength(count);
-      const triggerIds = arr.map((_, index) => getTriggerId(scope, index));
-      return normalize.element({
-        ...parts.list.attrs,
-        dir: prop("dir"),
-        id: getListId(scope),
-        role: "tablist",
-        "aria-owns": triggerIds.join(" "),
-        "aria-orientation": prop("orientation"),
-        "data-orientation": prop("orientation")
-      });
-    },
-    getItemProps(props2) {
-      const itemState = getItemState(props2);
-      return normalize.element({
-        ...parts.item.attrs,
-        dir: prop("dir"),
-        "aria-current": itemState.current ? "step" : void 0,
-        "data-orientation": prop("orientation"),
-        "data-skippable": dataAttr(itemState.skippable)
-      });
-    },
-    getTriggerProps(props2) {
-      const itemState = getItemState(props2);
-      return normalize.button({
-        ...parts.trigger.attrs,
-        id: itemState.triggerId,
-        role: "tab",
-        dir: prop("dir"),
-        tabIndex: !prop("linear") || itemState.current ? 0 : -1,
-        "aria-selected": itemState.current,
-        "aria-controls": itemState.contentId,
-        "data-state": itemState.current ? "open" : "closed",
-        "data-orientation": prop("orientation"),
-        "data-complete": dataAttr(itemState.completed),
-        "data-current": dataAttr(itemState.current),
-        "data-incomplete": dataAttr(itemState.incomplete),
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          if (prop("linear")) return;
-          send({ type: "STEP.SET", value: props2.index, src: "trigger.click" });
-        }
-      });
-    },
-    getContentProps(props2) {
-      const itemState = getItemState(props2);
-      return normalize.element({
-        ...parts.content.attrs,
-        dir: prop("dir"),
-        id: itemState.contentId,
-        role: "tabpanel",
-        tabIndex: 0,
-        hidden: !itemState.current,
-        "data-state": itemState.current ? "open" : "closed",
-        "data-orientation": prop("orientation"),
-        "aria-labelledby": itemState.triggerId
-      });
-    },
-    getIndicatorProps(props2) {
-      const itemState = getItemState(props2);
-      return normalize.element({
-        ...parts.indicator.attrs,
-        dir: prop("dir"),
-        "aria-hidden": true,
-        "data-complete": dataAttr(itemState.completed),
-        "data-current": dataAttr(itemState.current),
-        "data-incomplete": dataAttr(itemState.incomplete)
-      });
-    },
-    getSeparatorProps(props2) {
-      const itemState = getItemState(props2);
-      return normalize.element({
-        ...parts.separator.attrs,
-        dir: prop("dir"),
-        "data-orientation": prop("orientation"),
-        "data-complete": dataAttr(itemState.completed),
-        "data-current": dataAttr(itemState.current),
-        "data-incomplete": dataAttr(itemState.incomplete)
-      });
-    },
-    getNextTriggerProps() {
-      return normalize.button({
-        ...parts.nextTrigger.attrs,
-        dir: prop("dir"),
-        type: "button",
-        disabled: !hasNextStep,
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          goToNextStep();
-        }
-      });
-    },
-    getPrevTriggerProps() {
-      return normalize.button({
-        dir: prop("dir"),
-        ...parts.prevTrigger.attrs,
-        type: "button",
-        disabled: !hasPrevStep,
-        onClick(event) {
-          if (event.defaultPrevented) return;
-          goToPrevStep();
-        }
-      });
-    },
-    getProgressProps() {
-      return normalize.element({
-        dir: prop("dir"),
-        ...parts.progress.attrs,
-        role: "progressbar",
-        "aria-valuenow": percent,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-valuetext": `${percent}% complete`,
-        "data-complete": dataAttr(percent === 100)
-      });
-    }
-  };
-}
-var machine = createMachine({
-  props({ props: props2 }) {
-    return {
-      defaultStep: 0,
-      count: 1,
-      linear: false,
-      orientation: "horizontal",
-      ...props2
-    };
-  },
-  context({ prop, bindable }) {
-    return {
-      step: bindable(() => ({
-        defaultValue: prop("defaultStep"),
-        value: prop("step"),
-        onChange(value) {
-          prop("onStepChange")?.({ step: value });
-          const completed = value == prop("count");
-          if (completed) prop("onStepComplete")?.();
-        }
-      }))
-    };
-  },
-  computed: {
-    percent: memo(
-      ({ context, prop }) => [context.get("step"), prop("count")],
-      ([step, count]) => step / count * 100
-    ),
-    hasNextStep: ({ context, prop }) => context.get("step") < prop("count"),
-    hasPrevStep: ({ context }) => context.get("step") > 0,
-    completed: ({ context, prop }) => context.get("step") === prop("count")
-  },
-  initialState() {
-    return "idle";
-  },
-  entry: ["validateStepIndex"],
-  states: {
-    idle: {
-      on: {
-        "STEP.SET": [
-          {
-            guard: "isValidStepNavigation",
-            actions: ["setStep"]
-          },
-          {
-            actions: ["invokeOnStepInvalid"]
-          }
-        ],
-        "STEP.NEXT": [
-          {
-            guard: "isCurrentStepValid",
-            actions: ["goToNextStep"]
-          },
-          {
-            actions: ["invokeOnStepInvalid"]
-          }
-        ],
-        "STEP.PREV": {
-          actions: ["goToPrevStep"]
-        },
-        "STEP.RESET": {
-          actions: ["resetStep"]
-        }
-      }
-    }
-  },
-  implementations: {
-    guards: {
-      isCurrentStepValid({ context, prop }) {
-        const current = context.get("step");
-        if (prop("isStepSkippable")?.(current)) return true;
-        const isStepValid = prop("isStepValid");
-        if (!isStepValid) return true;
-        return isStepValid(current);
-      },
-      isValidStepNavigation({ context, event, prop }) {
-        const current = context.get("step");
-        if (event.value <= current) return true;
-        if (prop("isStepSkippable")?.(current)) return true;
-        const isStepValid = prop("isStepValid");
-        if (!isStepValid) return true;
-        return isStepValid(current);
-      }
-    },
-    actions: {
-      goToNextStep({ context, prop }) {
-        const count = prop("count");
-        context.set("step", Math.min(context.get("step") + 1, count));
-      },
-      goToPrevStep({ context }) {
-        context.set("step", Math.max(context.get("step") - 1, 0));
-      },
-      resetStep({ context }) {
-        context.set("step", 0);
-      },
-      setStep({ context, event }) {
-        context.set("step", event.value);
-      },
-      validateStepIndex({ context, prop }) {
-        validateStepIndex(prop("count"), context.get("step"));
-      },
-      invokeOnStepInvalid({ context, event, prop }) {
-        prop("onStepInvalid")?.({
-          step: context.get("step"),
-          action: event.type === "STEP.NEXT" ? "next" : "set",
-          targetStep: event.value
-        });
-      }
-    }
-  }
-});
-var validateStepIndex = (count, step) => {
-  if (!isValueWithinRange(step, 0, count)) {
-    throw new RangeError(`[zag-js/steps] step index ${step} is out of bounds`);
-  }
+// src/index.ts
+import { anatomy } from "./steps.anatomy.mjs";
+import { connect } from "./steps.connect.mjs";
+import { machine } from "./steps.machine.mjs";
+export * from "./steps.props.mjs";
+export {
+  anatomy,
+  connect,
+  machine
 };
-var props = createProps()([
-  "count",
-  "defaultStep",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "isStepSkippable",
-  "isStepValid",
-  "linear",
-  "onStepChange",
-  "onStepComplete",
-  "onStepInvalid",
-  "orientation",
-  "step"
-]);
-var splitProps = createSplitProps(props);
-
-export { anatomy, connect, machine, props, splitProps };

package/dist/steps.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "nextTrigger" | "prevTrigger" | "progress">;
+declare const parts: Record<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "nextTrigger" | "prevTrigger" | "progress", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/steps.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "nextTrigger" | "prevTrigger" | "progress">;
+declare const parts: Record<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "nextTrigger" | "prevTrigger" | "progress", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/steps.anatomy.js

@@ -0,0 +1,45 @@
+"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);
+
+// src/steps.anatomy.ts
+var steps_anatomy_exports = {};
+__export(steps_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(steps_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("steps").parts(
+  "root",
+  "list",
+  "item",
+  "trigger",
+  "indicator",
+  "separator",
+  "content",
+  "nextTrigger",
+  "prevTrigger",
+  "progress"
+);
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/steps.anatomy.mjs

@@ -0,0 +1,19 @@
+// src/steps.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("steps").parts(
+  "root",
+  "list",
+  "item",
+  "trigger",
+  "indicator",
+  "separator",
+  "content",
+  "nextTrigger",
+  "prevTrigger",
+  "progress"
+);
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/steps.connect.d.mts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { StepsService, StepsApi } from './steps.types.mjs';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: StepsService, normalize: NormalizeProps<T>): StepsApi<T>;
+
+export { connect };

package/dist/steps.connect.d.ts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { StepsService, StepsApi } from './steps.types.js';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: StepsService, normalize: NormalizeProps<T>): StepsApi<T>;
+
+export { connect };

package/dist/steps.connect.js

@@ -0,0 +1,224 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/steps.connect.ts
+var steps_connect_exports = {};
+__export(steps_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(steps_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_steps = require("./steps.anatomy.cjs");
+var dom = __toESM(require("./steps.dom.cjs"));
+function connect(service, normalize) {
+  const { context, send, computed, prop, scope } = service;
+  const step = context.get("step");
+  const count = prop("count");
+  const percent = computed("percent");
+  const hasNextStep = computed("hasNextStep");
+  const hasPrevStep = computed("hasPrevStep");
+  const isStepValid = (index) => {
+    return prop("isStepValid")?.(index) ?? true;
+  };
+  const isStepSkippable = (index) => {
+    return prop("isStepSkippable")?.(index) ?? false;
+  };
+  const getItemState = (props) => ({
+    triggerId: dom.getTriggerId(scope, props.index),
+    contentId: dom.getContentId(scope, props.index),
+    current: props.index === step,
+    completed: props.index < step,
+    incomplete: props.index > step,
+    index: props.index,
+    first: props.index === 0,
+    last: props.index === count - 1,
+    skippable: isStepSkippable(props.index),
+    isValid: () => isStepValid(props.index)
+  });
+  const goToNextStep = () => {
+    send({ type: "STEP.NEXT", src: "next.trigger.click" });
+  };
+  const goToPrevStep = () => {
+    send({ type: "STEP.PREV", src: "prev.trigger.click" });
+  };
+  const resetStep = () => {
+    send({ type: "STEP.RESET", src: "reset.trigger.click" });
+  };
+  const setStep = (value) => {
+    send({ type: "STEP.SET", value, src: "api.setValue" });
+  };
+  return {
+    value: step,
+    count,
+    percent,
+    hasNextStep,
+    hasPrevStep,
+    isCompleted: computed("completed"),
+    isStepValid,
+    isStepSkippable,
+    goToNextStep,
+    goToPrevStep,
+    resetStep,
+    getItemState,
+    setStep,
+    getRootProps() {
+      return normalize.element({
+        ...import_steps.parts.root.attrs,
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        style: {
+          "--percent": `${percent}%`
+        }
+      });
+    },
+    getListProps() {
+      const arr = (0, import_utils.fromLength)(count);
+      const triggerIds = arr.map((_, index) => dom.getTriggerId(scope, index));
+      return normalize.element({
+        ...import_steps.parts.list.attrs,
+        dir: prop("dir"),
+        id: dom.getListId(scope),
+        role: "tablist",
+        "aria-owns": triggerIds.join(" "),
+        "aria-orientation": prop("orientation"),
+        "data-orientation": prop("orientation")
+      });
+    },
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_steps.parts.item.attrs,
+        dir: prop("dir"),
+        "aria-current": itemState.current ? "step" : void 0,
+        "data-orientation": prop("orientation"),
+        "data-skippable": (0, import_dom_query.dataAttr)(itemState.skippable)
+      });
+    },
+    getTriggerProps(props) {
+      const itemState = getItemState(props);
+      return normalize.button({
+        ...import_steps.parts.trigger.attrs,
+        id: itemState.triggerId,
+        role: "tab",
+        dir: prop("dir"),
+        tabIndex: !prop("linear") || itemState.current ? 0 : -1,
+        "aria-selected": itemState.current,
+        "aria-controls": itemState.contentId,
+        "data-state": itemState.current ? "open" : "closed",
+        "data-orientation": prop("orientation"),
+        "data-complete": (0, import_dom_query.dataAttr)(itemState.completed),
+        "data-current": (0, import_dom_query.dataAttr)(itemState.current),
+        "data-incomplete": (0, import_dom_query.dataAttr)(itemState.incomplete),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          if (prop("linear")) return;
+          send({ type: "STEP.SET", value: props.index, src: "trigger.click" });
+        }
+      });
+    },
+    getContentProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_steps.parts.content.attrs,
+        dir: prop("dir"),
+        id: itemState.contentId,
+        role: "tabpanel",
+        tabIndex: 0,
+        hidden: !itemState.current,
+        "data-state": itemState.current ? "open" : "closed",
+        "data-orientation": prop("orientation"),
+        "aria-labelledby": itemState.triggerId
+      });
+    },
+    getIndicatorProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_steps.parts.indicator.attrs,
+        dir: prop("dir"),
+        "aria-hidden": true,
+        "data-complete": (0, import_dom_query.dataAttr)(itemState.completed),
+        "data-current": (0, import_dom_query.dataAttr)(itemState.current),
+        "data-incomplete": (0, import_dom_query.dataAttr)(itemState.incomplete)
+      });
+    },
+    getSeparatorProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_steps.parts.separator.attrs,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        "data-complete": (0, import_dom_query.dataAttr)(itemState.completed),
+        "data-current": (0, import_dom_query.dataAttr)(itemState.current),
+        "data-incomplete": (0, import_dom_query.dataAttr)(itemState.incomplete)
+      });
+    },
+    getNextTriggerProps() {
+      return normalize.button({
+        ...import_steps.parts.nextTrigger.attrs,
+        dir: prop("dir"),
+        type: "button",
+        disabled: !hasNextStep,
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          goToNextStep();
+        }
+      });
+    },
+    getPrevTriggerProps() {
+      return normalize.button({
+        dir: prop("dir"),
+        ...import_steps.parts.prevTrigger.attrs,
+        type: "button",
+        disabled: !hasPrevStep,
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          goToPrevStep();
+        }
+      });
+    },
+    getProgressProps() {
+      return normalize.element({
+        dir: prop("dir"),
+        ...import_steps.parts.progress.attrs,
+        role: "progressbar",
+        "aria-valuenow": percent,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": `${percent}% complete`,
+        "data-complete": (0, import_dom_query.dataAttr)(percent === 100)
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});