@zag-js/steps 1.34.1 → 1.35.0

package/dist/index.js

@@ -1,350 +1,39 @@
-'use strict';
-
-var anatomy$1 = require('@zag-js/anatomy');
-var domQuery = require('@zag-js/dom-query');
-var utils = require('@zag-js/utils');
-var core = require('@zag-js/core');
-var types = require('@zag-js/types');
-
-// src/steps.anatomy.ts
-var anatomy = anatomy$1.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 = utils.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": domQuery.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": domQuery.dataAttr(itemState.completed),
-        "data-current": domQuery.dataAttr(itemState.current),
-        "data-incomplete": domQuery.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": domQuery.dataAttr(itemState.completed),
-        "data-current": domQuery.dataAttr(itemState.current),
-        "data-incomplete": domQuery.dataAttr(itemState.incomplete)
-      });
-    },
-    getSeparatorProps(props2) {
-      const itemState = getItemState(props2);
-      return normalize.element({
-        ...parts.separator.attrs,
-        dir: prop("dir"),
-        "data-orientation": prop("orientation"),
-        "data-complete": domQuery.dataAttr(itemState.completed),
-        "data-current": domQuery.dataAttr(itemState.current),
-        "data-incomplete": domQuery.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": domQuery.dataAttr(percent === 100)
-      });
-    }
-  };
-}
-var machine = core.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: 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 (!utils.isValueWithinRange(step, 0, count)) {
-    throw new RangeError(`[zag-js/steps] step index ${step} is out of bounds`);
+"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 props = types.createProps()([
-  "count",
-  "defaultStep",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "isStepSkippable",
-  "isStepValid",
-  "linear",
-  "onStepChange",
-  "onStepComplete",
-  "onStepInvalid",
-  "orientation",
-  "step"
-]);
-var splitProps = utils.createSplitProps(props);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-exports.anatomy = anatomy;
-exports.connect = connect;
-exports.machine = machine;
-exports.props = props;
-exports.splitProps = splitProps;
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  anatomy: () => import_steps.anatomy,
+  connect: () => import_steps2.connect,
+  machine: () => import_steps3.machine
+});
+module.exports = __toCommonJS(index_exports);
+var import_steps = require("./steps.anatomy.cjs");
+var import_steps2 = require("./steps.connect.cjs");
+var import_steps3 = require("./steps.machine.cjs");
+__reExport(index_exports, require("./steps.props.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine,
+  ...require("./steps.props.cjs")
+});