@zag-js/steps 1.34.1 → 1.35.1

package/dist/steps.connect.mjs

@@ -0,0 +1,189 @@
+// src/steps.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+import { fromLength } from "@zag-js/utils";
+import { parts } from "./steps.anatomy.mjs";
+import * as dom from "./steps.dom.mjs";
+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({
+        ...parts.root.attrs,
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        style: {
+          "--percent": `${percent}%`
+        }
+      });
+    },
+    getListProps() {
+      const arr = fromLength(count);
+      const triggerIds = arr.map((_, index) => dom.getTriggerId(scope, index));
+      return normalize.element({
+        ...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({
+        ...parts.item.attrs,
+        dir: prop("dir"),
+        "aria-current": itemState.current ? "step" : void 0,
+        "data-orientation": prop("orientation"),
+        "data-skippable": dataAttr(itemState.skippable)
+      });
+    },
+    getTriggerProps(props) {
+      const itemState = getItemState(props);
+      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: props.index, src: "trigger.click" });
+        }
+      });
+    },
+    getContentProps(props) {
+      const itemState = getItemState(props);
+      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(props) {
+      const itemState = getItemState(props);
+      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(props) {
+      const itemState = getItemState(props);
+      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)
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/steps.dom.d.mts

@@ -0,0 +1,8 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getListId: (ctx: Scope) => any;
+declare const getTriggerId: (ctx: Scope, index: number) => any;
+declare const getContentId: (ctx: Scope, index: number) => any;
+
+export { getContentId, getListId, getRootId, getTriggerId };

package/dist/steps.dom.d.ts

@@ -0,0 +1,8 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getListId: (ctx: Scope) => any;
+declare const getTriggerId: (ctx: Scope, index: number) => any;
+declare const getContentId: (ctx: Scope, index: number) => any;
+
+export { getContentId, getListId, getRootId, getTriggerId };

package/dist/steps.dom.js

@@ -0,0 +1,39 @@
+"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.dom.ts
+var steps_dom_exports = {};
+__export(steps_dom_exports, {
+  getContentId: () => getContentId,
+  getListId: () => getListId,
+  getRootId: () => getRootId,
+  getTriggerId: () => getTriggerId
+});
+module.exports = __toCommonJS(steps_dom_exports);
+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}`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getContentId,
+  getListId,
+  getRootId,
+  getTriggerId
+});

package/dist/steps.dom.mjs

@@ -0,0 +1,11 @@
+// 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}`;
+export {
+  getContentId,
+  getListId,
+  getRootId,
+  getTriggerId
+};

package/dist/steps.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { StepsSchema } from './steps.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<StepsSchema>;
+
+export { machine };

package/dist/steps.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { StepsSchema } from './steps.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<StepsSchema>;
+
+export { machine };

package/dist/steps.machine.js

@@ -0,0 +1,147 @@
+"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.machine.ts
+var steps_machine_exports = {};
+__export(steps_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(steps_machine_exports);
+var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
+var machine = (0, import_core.createMachine)({
+  props({ props }) {
+    return {
+      defaultStep: 0,
+      count: 1,
+      linear: false,
+      orientation: "horizontal",
+      ...props
+    };
+  },
+  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: (0, import_core.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 (!(0, import_utils.isValueWithinRange)(step, 0, count)) {
+    throw new RangeError(`[zag-js/steps] step index ${step} is out of bounds`);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  machine
+});

package/dist/steps.machine.mjs

@@ -0,0 +1,122 @@
+// src/steps.machine.ts
+import { createMachine, memo } from "@zag-js/core";
+import { isValueWithinRange } from "@zag-js/utils";
+var machine = createMachine({
+  props({ props }) {
+    return {
+      defaultStep: 0,
+      count: 1,
+      linear: false,
+      orientation: "horizontal",
+      ...props
+    };
+  },
+  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`);
+  }
+};
+export {
+  machine
+};

package/dist/steps.props.d.mts

@@ -0,0 +1,8 @@
+import { StepsProps } from './steps.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof StepsProps)[];
+declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
+
+export { props, splitProps };

package/dist/steps.props.d.ts

@@ -0,0 +1,8 @@
+import { StepsProps } from './steps.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof StepsProps)[];
+declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
+
+export { props, splitProps };

package/dist/steps.props.js

@@ -0,0 +1,50 @@
+"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.props.ts
+var steps_props_exports = {};
+__export(steps_props_exports, {
+  props: () => props,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(steps_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "count",
+  "defaultStep",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "isStepSkippable",
+  "isStepValid",
+  "linear",
+  "onStepChange",
+  "onStepComplete",
+  "onStepInvalid",
+  "orientation",
+  "step"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  props,
+  splitProps
+});

package/dist/steps.props.mjs

@@ -0,0 +1,24 @@
+// src/steps.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "count",
+  "defaultStep",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "isStepSkippable",
+  "isStepValid",
+  "linear",
+  "onStepChange",
+  "onStepComplete",
+  "onStepInvalid",
+  "orientation",
+  "step"
+]);
+var splitProps = createSplitProps(props);
+export {
+  props,
+  splitProps
+};