@zag-js/steps 1.34.1 → 1.35.1

package/dist/steps.types.d.mts

@@ -0,0 +1,201 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+interface StepChangeDetails {
+    step: number;
+}
+interface StepInvalidDetails {
+    step: number;
+    action: "next" | "set";
+    targetStep?: number;
+}
+interface ElementIds {
+    root?: string | undefined;
+    list?: string | undefined;
+    triggerId?: ((index: number) => string) | undefined;
+    contentId?: ((index: number) => string) | undefined;
+}
+interface StepsProps extends DirectionProperty, CommonProperties {
+    /**
+     * The custom ids for the stepper elements
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The controlled value of the stepper
+     */
+    step?: number | undefined;
+    /**
+     * The initial value of the stepper when rendered.
+     * Use when you don't need to control the value of the stepper.
+     */
+    defaultStep?: number | undefined;
+    /**
+     * Callback to be called when the value changes
+     */
+    onStepChange?: ((details: StepChangeDetails) => void) | undefined;
+    /**
+     * Callback to be called when a step is completed
+     */
+    onStepComplete?: VoidFunction | undefined;
+    /**
+     * If `true`, the stepper requires the user to complete the steps in order
+     */
+    linear?: boolean | undefined;
+    /**
+     * The orientation of the stepper
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The total number of steps
+     */
+    count?: number | undefined;
+    /**
+     * Whether a step is valid. Invalid steps block forward navigation in linear mode.
+     * @default () => true
+     */
+    isStepValid?: ((index: number) => boolean) | undefined;
+    /**
+     * Whether a step can be skipped during navigation.
+     * Skippable steps are bypassed when using next/prev.
+     * @default () => false
+     */
+    isStepSkippable?: ((index: number) => boolean) | undefined;
+    /**
+     * Called when navigation is blocked due to an invalid step.
+     */
+    onStepInvalid?: ((details: StepInvalidDetails) => void) | undefined;
+}
+type PropsWithDefault = "orientation" | "linear" | "count";
+interface PrivateContext {
+    step: number;
+}
+type ComputedContext = Readonly<{
+    percent: number;
+    hasNextStep: boolean;
+    hasPrevStep: boolean;
+    completed: boolean;
+}>;
+interface StepsSchema {
+    props: RequiredBy<StepsProps, PropsWithDefault>;
+    context: PrivateContext;
+    computed: ComputedContext;
+    state: "idle";
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type StepsService = Service<StepsSchema>;
+type StepsMachine = Machine<StepsSchema>;
+interface ItemProps {
+    index: number;
+}
+interface ItemState {
+    /**
+     * The index of the step
+     */
+    index: number;
+    /**
+     * The id of the trigger element
+     */
+    triggerId: string;
+    /**
+     * The id of the content element
+     */
+    contentId: string;
+    /**
+     * Whether the step is the current step
+     */
+    current: boolean;
+    /**
+     * Whether the step is completed (index < current step)
+     */
+    completed: boolean;
+    /**
+     * Whether the step is incomplete (index > current step)
+     */
+    incomplete: boolean;
+    /**
+     * Whether the step is the last step
+     */
+    last: boolean;
+    /**
+     * Whether the step is the first step
+     */
+    first: boolean;
+    /**
+     * Whether the step can be skipped (based on `isStepSkippable` callback)
+     */
+    skippable: boolean;
+    /**
+     * Lazy validation check - only evaluated when called
+     */
+    isValid: () => boolean;
+}
+interface StepsApi<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;
+    /**
+     * Whether the stepper is completed.
+     */
+    isCompleted: boolean;
+    /**
+     * Check if a specific step is valid (lazy evaluation)
+     */
+    isStepValid: (index: number) => boolean;
+    /**
+     * Check if a specific step can be skipped
+     */
+    isStepSkippable: (index: number) => boolean;
+    /**
+     * Function to set the value of the stepper.
+     */
+    setStep: (step: number) => void;
+    /**
+     * Function to go to the next step.
+     */
+    goToNextStep: VoidFunction;
+    /**
+     * Function to go to the previous step.
+     */
+    goToPrevStep: VoidFunction;
+    /**
+     * Function to go to reset the stepper.
+     */
+    resetStep: VoidFunction;
+    /**
+     * 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"];
+}
+
+export type { ElementIds, ItemProps, ItemState, StepChangeDetails, StepInvalidDetails, StepsApi, StepsMachine, StepsProps, StepsSchema, StepsService };

package/dist/steps.types.d.ts

@@ -0,0 +1,201 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+interface StepChangeDetails {
+    step: number;
+}
+interface StepInvalidDetails {
+    step: number;
+    action: "next" | "set";
+    targetStep?: number;
+}
+interface ElementIds {
+    root?: string | undefined;
+    list?: string | undefined;
+    triggerId?: ((index: number) => string) | undefined;
+    contentId?: ((index: number) => string) | undefined;
+}
+interface StepsProps extends DirectionProperty, CommonProperties {
+    /**
+     * The custom ids for the stepper elements
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The controlled value of the stepper
+     */
+    step?: number | undefined;
+    /**
+     * The initial value of the stepper when rendered.
+     * Use when you don't need to control the value of the stepper.
+     */
+    defaultStep?: number | undefined;
+    /**
+     * Callback to be called when the value changes
+     */
+    onStepChange?: ((details: StepChangeDetails) => void) | undefined;
+    /**
+     * Callback to be called when a step is completed
+     */
+    onStepComplete?: VoidFunction | undefined;
+    /**
+     * If `true`, the stepper requires the user to complete the steps in order
+     */
+    linear?: boolean | undefined;
+    /**
+     * The orientation of the stepper
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The total number of steps
+     */
+    count?: number | undefined;
+    /**
+     * Whether a step is valid. Invalid steps block forward navigation in linear mode.
+     * @default () => true
+     */
+    isStepValid?: ((index: number) => boolean) | undefined;
+    /**
+     * Whether a step can be skipped during navigation.
+     * Skippable steps are bypassed when using next/prev.
+     * @default () => false
+     */
+    isStepSkippable?: ((index: number) => boolean) | undefined;
+    /**
+     * Called when navigation is blocked due to an invalid step.
+     */
+    onStepInvalid?: ((details: StepInvalidDetails) => void) | undefined;
+}
+type PropsWithDefault = "orientation" | "linear" | "count";
+interface PrivateContext {
+    step: number;
+}
+type ComputedContext = Readonly<{
+    percent: number;
+    hasNextStep: boolean;
+    hasPrevStep: boolean;
+    completed: boolean;
+}>;
+interface StepsSchema {
+    props: RequiredBy<StepsProps, PropsWithDefault>;
+    context: PrivateContext;
+    computed: ComputedContext;
+    state: "idle";
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type StepsService = Service<StepsSchema>;
+type StepsMachine = Machine<StepsSchema>;
+interface ItemProps {
+    index: number;
+}
+interface ItemState {
+    /**
+     * The index of the step
+     */
+    index: number;
+    /**
+     * The id of the trigger element
+     */
+    triggerId: string;
+    /**
+     * The id of the content element
+     */
+    contentId: string;
+    /**
+     * Whether the step is the current step
+     */
+    current: boolean;
+    /**
+     * Whether the step is completed (index < current step)
+     */
+    completed: boolean;
+    /**
+     * Whether the step is incomplete (index > current step)
+     */
+    incomplete: boolean;
+    /**
+     * Whether the step is the last step
+     */
+    last: boolean;
+    /**
+     * Whether the step is the first step
+     */
+    first: boolean;
+    /**
+     * Whether the step can be skipped (based on `isStepSkippable` callback)
+     */
+    skippable: boolean;
+    /**
+     * Lazy validation check - only evaluated when called
+     */
+    isValid: () => boolean;
+}
+interface StepsApi<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;
+    /**
+     * Whether the stepper is completed.
+     */
+    isCompleted: boolean;
+    /**
+     * Check if a specific step is valid (lazy evaluation)
+     */
+    isStepValid: (index: number) => boolean;
+    /**
+     * Check if a specific step can be skipped
+     */
+    isStepSkippable: (index: number) => boolean;
+    /**
+     * Function to set the value of the stepper.
+     */
+    setStep: (step: number) => void;
+    /**
+     * Function to go to the next step.
+     */
+    goToNextStep: VoidFunction;
+    /**
+     * Function to go to the previous step.
+     */
+    goToPrevStep: VoidFunction;
+    /**
+     * Function to go to reset the stepper.
+     */
+    resetStep: VoidFunction;
+    /**
+     * 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"];
+}
+
+export type { ElementIds, ItemProps, ItemState, StepChangeDetails, StepInvalidDetails, StepsApi, StepsMachine, StepsProps, StepsSchema, StepsService };

package/dist/steps.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.types.ts
+var steps_types_exports = {};
+module.exports = __toCommonJS(steps_types_exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/steps",
-  "version": "1.34.1",
+  "version": "1.35.1",
   "description": "Core logic for the steps widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,16 +27,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.34.1",
-    "@zag-js/core": "1.34.1",
-    "@zag-js/dom-query": "1.34.1",
-    "@zag-js/utils": "1.34.1",
-    "@zag-js/types": "1.34.1"
+    "@zag-js/anatomy": "1.35.1",
+    "@zag-js/core": "1.35.1",
+    "@zag-js/dom-query": "1.35.1",
+    "@zag-js/utils": "1.35.1",
+    "@zag-js/types": "1.35.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
-  "clean-package": "../../../clean-package.config.json",
+  "clean-package": "./clean-package.config.json",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
@@ -50,6 +50,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/steps.anatomy.d.mts",
+        "default": "./dist/steps.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/steps.anatomy.d.ts",
+        "default": "./dist/steps.anatomy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {