@zag-js/steps 0.0.0-dev-20240630000246

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @zag-js/steps
+
+Core logic for the steps widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add @zag-js/steps
+# or
+npm i @zag-js/steps
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,135 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "title" | "description" | "nextTrigger" | "prevTrigger" | "progress">;
+
+interface StepChangeDetails {
+    step: number;
+}
+interface ElementIds {
+    root?: string;
+    list?: string;
+    triggerId?(index: number): string;
+    contentId?(index: number): string;
+}
+interface PublicContext extends DirectionProperty, CommonProperties {
+    /**
+     * The custom ids for the stepper elements
+     */
+    ids?: ElementIds;
+    /**
+     * The current value of the stepper
+     */
+    step: number;
+    /**
+     * Callback to be called when the value changes
+     */
+    onStepChange?(details: StepChangeDetails): void;
+    /**
+     * Callback to be called when a step is completed
+     */
+    onStepComplete?: VoidFunction;
+    /**
+     * If `true`, the stepper will allow you to skip steps
+     */
+    skippable?: boolean;
+    /**
+     * The orientation of the stepper
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The total number of steps
+     */
+    count: number;
+}
+interface PrivateContext {
+}
+type ComputedContext = Readonly<{
+    percent: number;
+    hasNextStep: boolean;
+    hasPrevStep: boolean;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
+    value: "idle";
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface ItemProps {
+    index: number;
+}
+interface ItemState {
+    index: number;
+    triggerId: string;
+    contentId: string;
+    current: boolean;
+    completed: boolean;
+    last: boolean;
+    first: boolean;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value of the stepper.
+     */
+    value: number;
+    /**
+     * The percentage of the stepper.
+     */
+    percent: number;
+    /**
+     * The total number of steps.
+     */
+    count: number;
+    /**
+     * Whether the stepper has a next step.
+     */
+    hasNextStep: boolean;
+    /**
+     * Whether the stepper has a previous step.
+     */
+    hasPrevStep: boolean;
+    /**
+     * Function to set the value of the stepper.
+     */
+    setValue(value: number): void;
+    /**
+     * Function to go to the next step.
+     */
+    goToNextStep(): void;
+    /**
+     * Function to go to the previous step.
+     */
+    goToPrevStep(): void;
+    /**
+     * Function to go to reset the stepper.
+     */
+    resetStep(): void;
+    /**
+     * Returns the state of the item at the given index.
+     */
+    getItemState(props: ItemProps): ItemState;
+    getRootProps(): T["element"];
+    getListProps(): T["element"];
+    getItemProps(props: ItemProps): T["element"];
+    getTriggerProps(props: ItemProps): T["element"];
+    getContentProps(props: ItemProps): T["element"];
+    getNextTriggerProps(): T["button"];
+    getPrevTriggerProps(): T["button"];
+    getProgressProps(): T["element"];
+    getIndicatorProps(props: ItemProps): T["element"];
+    getSeparatorProps(props: ItemProps): T["element"];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "skippable" | "count" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "skippable" | "count" | "getRootNode">];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.d.ts

@@ -0,0 +1,135 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "title" | "description" | "nextTrigger" | "prevTrigger" | "progress">;
+
+interface StepChangeDetails {
+    step: number;
+}
+interface ElementIds {
+    root?: string;
+    list?: string;
+    triggerId?(index: number): string;
+    contentId?(index: number): string;
+}
+interface PublicContext extends DirectionProperty, CommonProperties {
+    /**
+     * The custom ids for the stepper elements
+     */
+    ids?: ElementIds;
+    /**
+     * The current value of the stepper
+     */
+    step: number;
+    /**
+     * Callback to be called when the value changes
+     */
+    onStepChange?(details: StepChangeDetails): void;
+    /**
+     * Callback to be called when a step is completed
+     */
+    onStepComplete?: VoidFunction;
+    /**
+     * If `true`, the stepper will allow you to skip steps
+     */
+    skippable?: boolean;
+    /**
+     * The orientation of the stepper
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The total number of steps
+     */
+    count: number;
+}
+interface PrivateContext {
+}
+type ComputedContext = Readonly<{
+    percent: number;
+    hasNextStep: boolean;
+    hasPrevStep: boolean;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
+    value: "idle";
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface ItemProps {
+    index: number;
+}
+interface ItemState {
+    index: number;
+    triggerId: string;
+    contentId: string;
+    current: boolean;
+    completed: boolean;
+    last: boolean;
+    first: boolean;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value of the stepper.
+     */
+    value: number;
+    /**
+     * The percentage of the stepper.
+     */
+    percent: number;
+    /**
+     * The total number of steps.
+     */
+    count: number;
+    /**
+     * Whether the stepper has a next step.
+     */
+    hasNextStep: boolean;
+    /**
+     * Whether the stepper has a previous step.
+     */
+    hasPrevStep: boolean;
+    /**
+     * Function to set the value of the stepper.
+     */
+    setValue(value: number): void;
+    /**
+     * Function to go to the next step.
+     */
+    goToNextStep(): void;
+    /**
+     * Function to go to the previous step.
+     */
+    goToPrevStep(): void;
+    /**
+     * Function to go to reset the stepper.
+     */
+    resetStep(): void;
+    /**
+     * Returns the state of the item at the given index.
+     */
+    getItemState(props: ItemProps): ItemState;
+    getRootProps(): T["element"];
+    getListProps(): T["element"];
+    getItemProps(props: ItemProps): T["element"];
+    getTriggerProps(props: ItemProps): T["element"];
+    getContentProps(props: ItemProps): T["element"];
+    getNextTriggerProps(): T["button"];
+    getPrevTriggerProps(): T["button"];
+    getProgressProps(): T["element"];
+    getIndicatorProps(props: ItemProps): T["element"];
+    getSeparatorProps(props: ItemProps): T["element"];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "skippable" | "count" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "skippable" | "count" | "getRootNode">];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.js

@@ -0,0 +1,315 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  anatomy: () => anatomy,
+  connect: () => connect,
+  machine: () => machine,
+  props: () => props,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/steps.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("steps").parts(
+  "root",
+  "list",
+  "item",
+  "trigger",
+  "indicator",
+  "separator",
+  "content",
+  "title",
+  "description",
+  "nextTrigger",
+  "prevTrigger",
+  "progress"
+);
+var parts = anatomy.build();
+
+// src/steps.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
+  getRootId: (ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,
+  getListId: (ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,
+  getTriggerId: (ctx, index) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,
+  getContentId: (ctx, index) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`
+});
+
+// src/steps.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
+function connect(state, send, normalize) {
+  const value = state.context.step;
+  const count = state.context.count;
+  const percent = state.context.percent;
+  const hasNextStep = state.context.hasNextStep;
+  const hasPrevStep = state.context.hasPrevStep;
+  const getItemState = (props2) => ({
+    triggerId: dom.getTriggerId(state.context, props2.index),
+    contentId: dom.getContentId(state.context, props2.index),
+    current: props2.index === value,
+    completed: props2.index < value,
+    index: props2.index,
+    first: props2.index === 0,
+    last: props2.index === count - 1
+  });
+  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 setValue = (value2) => {
+    send({ type: "STEP.SET", value: value2, src: "api.setValue" });
+  };
+  return {
+    value,
+    count,
+    percent,
+    hasNextStep,
+    hasPrevStep,
+    goToNextStep,
+    goToPrevStep,
+    resetStep,
+    getItemState,
+    setValue,
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        id: dom.getRootId(state.context),
+        dir: state.context.dir,
+        "data-orientation": state.context.orientation,
+        style: {
+          "--percent": `${percent}%`
+        }
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...parts.list.attrs,
+        dir: state.context.dir,
+        id: dom.getListId(state.context),
+        role: "tablist",
+        "aria-orientation": state.context.orientation,
+        "data-orientation": state.context.orientation
+      });
+    },
+    getItemProps(props2) {
+      const itemState = getItemState(props2);
+      return normalize.element({
+        ...parts.item.attrs,
+        dir: state.context.dir,
+        "aria-current": itemState.current ? "step" : void 0,
+        "data-orientation": state.context.orientation
+      });
+    },
+    getTriggerProps(props2) {
+      const itemState = getItemState(props2);
+      return normalize.button({
+        ...parts.trigger.attrs,
+        id: itemState.triggerId,
+        role: "tab",
+        dir: state.context.dir,
+        tabIndex: state.context.skippable || itemState.current ? 0 : -1,
+        "aria-selected": itemState.current,
+        "aria-controls": itemState.contentId,
+        "data-state": itemState.current ? "open" : "closed",
+        "data-orientation": state.context.orientation,
+        "data-complete": (0, import_dom_query2.dataAttr)(itemState.completed),
+        "data-current": (0, import_dom_query2.dataAttr)(itemState.current),
+        "data-incomplete": (0, import_dom_query2.dataAttr)(!itemState.current),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          if (!state.context.skippable) return;
+          send({ type: "STEP.SET", value: props2.index, src: "trigger.click" });
+        }
+      });
+    },
+    getContentProps(props2) {
+      const itemState = getItemState(props2);
+      return normalize.element({
+        ...parts.content.attrs,
+        dir: state.context.dir,
+        id: itemState.contentId,
+        role: "tabpanel",
+        tabIndex: 0,
+        hidden: !itemState.current,
+        "data-state": itemState.current ? "open" : "closed",
+        "data-orientation": state.context.orientation,
+        "aria-labelledby": itemState.triggerId
+      });
+    },
+    getIndicatorProps(props2) {
+      const itemState = getItemState(props2);
+      return normalize.element({
+        ...parts.indicator.attrs,
+        dir: state.context.dir,
+        "aria-hidden": true,
+        "data-complete": (0, import_dom_query2.dataAttr)(itemState.completed),
+        "data-current": (0, import_dom_query2.dataAttr)(itemState.current),
+        "data-incomplete": (0, import_dom_query2.dataAttr)(!itemState.current)
+      });
+    },
+    getSeparatorProps(props2) {
+      const itemState = getItemState(props2);
+      return normalize.element({
+        ...parts.separator.attrs,
+        dir: state.context.dir,
+        "data-orientation": state.context.orientation,
+        "data-complete": (0, import_dom_query2.dataAttr)(itemState.completed),
+        "data-current": (0, import_dom_query2.dataAttr)(itemState.current),
+        "data-incomplete": (0, import_dom_query2.dataAttr)(!itemState.current)
+      });
+    },
+    getNextTriggerProps() {
+      return normalize.button({
+        ...parts.nextTrigger.attrs,
+        dir: state.context.dir,
+        type: "button",
+        disabled: !hasNextStep,
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          goToNextStep();
+        }
+      });
+    },
+    getPrevTriggerProps() {
+      return normalize.button({
+        dir: state.context.dir,
+        ...parts.prevTrigger.attrs,
+        type: "button",
+        disabled: !hasPrevStep,
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          goToPrevStep();
+        }
+      });
+    },
+    getProgressProps() {
+      return normalize.element({
+        dir: state.context.dir,
+        ...parts.progress.attrs,
+        role: "progressbar",
+        "aria-valuenow": percent,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": `${percent}% complete`,
+        "data-complete": (0, import_dom_query2.dataAttr)(percent === 100)
+      });
+    }
+  };
+}
+
+// src/steps.machine.ts
+var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
+function machine(userContext) {
+  const ctx = (0, import_utils.compact)(userContext);
+  return (0, import_core.createMachine)(
+    {
+      id: "steps",
+      initial: "idle",
+      context: {
+        step: 0,
+        count: 1,
+        ...ctx
+      },
+      computed: {
+        percent: (ctx2) => ctx2.step / ctx2.count * 100,
+        hasNextStep: (ctx2) => ctx2.step < ctx2.count,
+        hasPrevStep: (ctx2) => ctx2.step > 0
+      },
+      states: {
+        idle: {
+          on: {
+            "STEP.NEXT": {
+              actions: "goToNextStep"
+            },
+            "STEP.PREV": {
+              actions: "goToPrevStep"
+            },
+            "STEP.RESET": {
+              actions: "resetStep"
+            }
+          }
+        }
+      }
+    },
+    {
+      actions: {
+        goToNextStep(ctx2) {
+          const value = Math.min(ctx2.step + 1, ctx2.count);
+          set.value(ctx2, value);
+        },
+        goToPrevStep(ctx2) {
+          const value = Math.max(ctx2.step - 1, 0);
+          set.value(ctx2, value);
+        },
+        resetStep(ctx2) {
+          set.value(ctx2, 0);
+        },
+        setStep(ctx2, event) {
+          const value = event.value;
+          const inRange = value >= 0 && value < ctx2.count;
+          if (!inRange) throw new RangeError(`Index ${value} is out of bounds`);
+          set.value(ctx2, value);
+        }
+      }
+    }
+  );
+}
+var set = {
+  value(ctx, step) {
+    if ((0, import_utils.isEqual)(ctx.step, step)) return;
+    ctx.step = step;
+    ctx.onStepChange?.({ step });
+  }
+};
+
+// src/steps.props.ts
+var import_types = require("@zag-js/types");
+var import_utils2 = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "count",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "onStepChange",
+  "onStepComplete",
+  "orientation",
+  "skippable",
+  "step"
+]);
+var splitProps = (0, import_utils2.createSplitProps)(props);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine,
+  props,
+  splitProps
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/steps.anatomy.ts","../src/steps.dom.ts","../src/steps.connect.ts","../src/steps.machine.ts","../src/steps.props.ts"],"sourcesContent":["export { anatomy } from \"./steps.anatomy\"\nexport { connect } from \"./steps.connect\"\nexport { machine } from \"./steps.machine\"\nexport * from \"./steps.props\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  ItemProps,\n  ItemState,\n  Service,\n  StepChangeDetails,\n} from \"./steps.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"steps\").parts(\n  \"root\",\n  \"list\",\n  \"item\",\n  \"trigger\",\n  \"indicator\",\n  \"separator\",\n  \"content\",\n  \"title\",\n  \"description\",\n  \"nextTrigger\",\n  \"prevTrigger\",\n  \"progress\",\n)\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./steps.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,\n  getListId: (ctx: Ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,\n  getTriggerId: (ctx: Ctx, index: number) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,\n  getContentId: (ctx: Ctx, index: number) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`,\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport type { State, Send, ItemProps, ItemState, MachineApi } from \"./steps.types\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport { dataAttr } from \"@zag-js/dom-query\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const value = state.context.step\n  const count = state.context.count\n  const percent = state.context.percent\n  const hasNextStep = state.context.hasNextStep\n  const hasPrevStep = state.context.hasPrevStep\n\n  const getItemState = (props: ItemProps): ItemState => ({\n    triggerId: dom.getTriggerId(state.context, props.index),\n    contentId: dom.getContentId(state.context, props.index),\n    current: props.index === value,\n    completed: props.index < value,\n    index: props.index,\n    first: props.index === 0,\n    last: props.index === count - 1,\n  })\n\n  const goToNextStep = () => {\n    send({ type: \"STEP.NEXT\", src: \"next.trigger.click\" })\n  }\n\n  const goToPrevStep = () => {\n    send({ type: \"STEP.PREV\", src: \"prev.trigger.click\" })\n  }\n\n  const resetStep = () => {\n    send({ type: \"STEP.RESET\", src: \"reset.trigger.click\" })\n  }\n\n  const setValue = (value: number) => {\n    send({ type: \"STEP.SET\", value, src: \"api.setValue\" })\n  }\n\n  return {\n    value,\n    count,\n    percent,\n    hasNextStep,\n    hasPrevStep,\n    goToNextStep,\n    goToPrevStep,\n    resetStep,\n    getItemState,\n    setValue,\n\n    getRootProps() {\n      return normalize.element({\n        ...parts.root.attrs,\n        id: dom.getRootId(state.context),\n        dir: state.context.dir,\n        \"data-orientation\": state.context.orientation,\n        style: {\n          \"--percent\": `${percent}%`,\n        },\n      })\n    },\n\n    getListProps() {\n      return normalize.element({\n        ...parts.list.attrs,\n        dir: state.context.dir,\n        id: dom.getListId(state.context),\n        role: \"tablist\",\n        \"aria-orientation\": state.context.orientation,\n        \"data-orientation\": state.context.orientation,\n      })\n    },\n\n    getItemProps(props) {\n      const itemState = getItemState(props)\n      return normalize.element({\n        ...parts.item.attrs,\n        dir: state.context.dir,\n        \"aria-current\": itemState.current ? \"step\" : undefined,\n        \"data-orientation\": state.context.orientation,\n      })\n    },\n\n    getTriggerProps(props) {\n      const itemState = getItemState(props)\n      return normalize.button({\n        ...parts.trigger.attrs,\n        id: itemState.triggerId,\n        role: \"tab\",\n        dir: state.context.dir,\n        tabIndex: state.context.skippable || itemState.current ? 0 : -1,\n        \"aria-selected\": itemState.current,\n        \"aria-controls\": itemState.contentId,\n        \"data-state\": itemState.current ? \"open\" : \"closed\",\n        \"data-orientation\": state.context.orientation,\n        \"data-complete\": dataAttr(itemState.completed),\n        \"data-current\": dataAttr(itemState.current),\n        \"data-incomplete\": dataAttr(!itemState.current),\n        onClick(event) {\n          if (event.defaultPrevented) return\n          if (!state.context.skippable) return\n          send({ type: \"STEP.SET\", value: props.index, src: \"trigger.click\" })\n        },\n      })\n    },\n\n    getContentProps(props) {\n      const itemState = getItemState(props)\n      return normalize.element({\n        ...parts.content.attrs,\n        dir: state.context.dir,\n        id: itemState.contentId,\n        role: \"tabpanel\",\n        tabIndex: 0,\n        hidden: !itemState.current,\n        \"data-state\": itemState.current ? \"open\" : \"closed\",\n        \"data-orientation\": state.context.orientation,\n        \"aria-labelledby\": itemState.triggerId,\n      })\n    },\n\n    getIndicatorProps(props) {\n      const itemState = getItemState(props)\n      return normalize.element({\n        ...parts.indicator.attrs,\n        dir: state.context.dir,\n        \"aria-hidden\": true,\n        \"data-complete\": dataAttr(itemState.completed),\n        \"data-current\": dataAttr(itemState.current),\n        \"data-incomplete\": dataAttr(!itemState.current),\n      })\n    },\n\n    getSeparatorProps(props) {\n      const itemState = getItemState(props)\n      return normalize.element({\n        ...parts.separator.attrs,\n        dir: state.context.dir,\n        \"data-orientation\": state.context.orientation,\n        \"data-complete\": dataAttr(itemState.completed),\n        \"data-current\": dataAttr(itemState.current),\n        \"data-incomplete\": dataAttr(!itemState.current),\n      })\n    },\n\n    getNextTriggerProps() {\n      return normalize.button({\n        ...parts.nextTrigger.attrs,\n        dir: state.context.dir,\n        type: \"button\",\n        disabled: !hasNextStep,\n        onClick(event) {\n          if (event.defaultPrevented) return\n          goToNextStep()\n        },\n      })\n    },\n\n    getPrevTriggerProps() {\n      return normalize.button({\n        dir: state.context.dir,\n        ...parts.prevTrigger.attrs,\n        type: \"button\",\n        disabled: !hasPrevStep,\n        onClick(event) {\n          if (event.defaultPrevented) return\n          goToPrevStep()\n        },\n      })\n    },\n\n    getProgressProps() {\n      return normalize.element({\n        dir: state.context.dir,\n        ...parts.progress.attrs,\n        role: \"progressbar\",\n        \"aria-valuenow\": percent,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": 100,\n        \"aria-valuetext\": `${percent}% complete`,\n        \"data-complete\": dataAttr(percent === 100),\n      })\n    },\n  }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./steps.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"steps\",\n      initial: \"idle\",\n\n      context: {\n        step: 0,\n        count: 1,\n        ...ctx,\n      },\n\n      computed: {\n        percent: (ctx) => (ctx.step / ctx.count) * 100,\n        hasNextStep: (ctx) => ctx.step < ctx.count,\n        hasPrevStep: (ctx) => ctx.step > 0,\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"STEP.NEXT\": {\n              actions: \"goToNextStep\",\n            },\n            \"STEP.PREV\": {\n              actions: \"goToPrevStep\",\n            },\n            \"STEP.RESET\": {\n              actions: \"resetStep\",\n            },\n          },\n        },\n      },\n    },\n    {\n      actions: {\n        goToNextStep(ctx) {\n          const value = Math.min(ctx.step + 1, ctx.count)\n          set.value(ctx, value)\n        },\n        goToPrevStep(ctx) {\n          const value = Math.max(ctx.step - 1, 0)\n          set.value(ctx, value)\n        },\n        resetStep(ctx) {\n          set.value(ctx, 0)\n        },\n        setStep(ctx, event) {\n          const value = event.value\n          const inRange = value >= 0 && value < ctx.count\n          if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)\n          set.value(ctx, value)\n        },\n      },\n    },\n  )\n}\n\nconst set = {\n  value(ctx: MachineContext, step: number) {\n    if (isEqual(ctx.step, step)) return\n    ctx.step = step\n    ctx.onStepChange?.({ step })\n  },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./steps.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n  \"count\",\n  \"dir\",\n  \"getRootNode\",\n  \"id\",\n  \"ids\",\n  \"onStepChange\",\n  \"onStepComplete\",\n  \"orientation\",\n  \"skippable\",\n  \"step\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["import_dom_query","props","value","ctx","import_utils"]}