@wallarm-org/design-system 1.31.0 → 1.32.0

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,22 @@
+import type { FC, ReactNode, Ref } from 'react';
+import { Steps as ArkSteps } from '@ark-ui/react/steps';
+import { type TestableProps } from '../../utils/testId';
+import type { StepperStatusLabels } from './types';
+import { type StepperGuardProps, type StepperOmittedArkProps } from './useStepper';
+export interface StepperProps extends Omit<ArkSteps.RootProps, StepperOmittedArkProps | keyof StepperGuardProps | 'asChild'>, StepperGuardProps, TestableProps {
+    /** `StepperList`, then optional `StepperContent`s and `StepperPrevTrigger` / `StepperNextTrigger`. */
+    children: ReactNode;
+    /** Screen-reader-only suffixes for completed and danger steps. */
+    statusLabels?: StepperStatusLabels;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A horizontal row of numbered steps for a multi-step flow, such as a create drawer. Every step is
+ * a button, so people can move back and forward freely; the page owns each step's status
+ * (completed, danger, upcoming) and the current step is always shown as active.
+ *
+ * Compound, like Ark UI Steps: `StepperList` › `StepperItem index` › `StepperTrigger` (with
+ * `StepperIndicator`, `StepperTitle`, `StepperDescription`) and `StepperSeparator`, then optional
+ * `StepperContent index`, `StepperPrevTrigger` and `StepperNextTrigger`.
+ */
+export declare const Stepper: FC<StepperProps>;

package/dist/components/Stepper/Stepper.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Stepper/Stepper.figma.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Stepper } from "./Stepper.js";
+import { StepperDescription } from "./StepperDescription.js";
+import { StepperIndicator } from "./StepperIndicator.js";
+import { StepperItem } from "./StepperItem.js";
+import { StepperList } from "./StepperList.js";
+import { StepperSeparator } from "./StepperSeparator.js";
+import { StepperTitle } from "./StepperTitle.js";
+import { StepperTrigger } from "./StepperTrigger.js";
+const STEPPER_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12463-208988';
+const STEPPER_ITEM_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12463-208896';
+code_connect.connect(Stepper, STEPPER_URL, {
+    props: {
+        children: code_connect.children('stepper-item')
+    },
+    example: ({ children })=>/*#__PURE__*/ jsx(Stepper, {
+            count: 4,
+            step: 0,
+            onStepChange: ()=>void 0,
+            children: /*#__PURE__*/ jsx(StepperList, {
+                "aria-label": "Steps",
+                children: children
+            })
+        })
+});
+code_connect.connect(StepperItem, STEPPER_ITEM_URL, {
+    props: {
+        status: code_connect["enum"]('Type', {
+            Completed: 'completed',
+            Danger: 'danger',
+            Upcoming: 'upcoming',
+            Active: void 0
+        }),
+        title: code_connect.string('step'),
+        description: code_connect.boolean("description", {
+            true: code_connect.string("descriptionText"),
+            false: void 0
+        })
+    },
+    example: ({ status, title, description })=>/*#__PURE__*/ jsxs(StepperItem, {
+            index: 0,
+            status: status,
+            children: [
+                /*#__PURE__*/ jsxs(StepperTrigger, {
+                    children: [
+                        /*#__PURE__*/ jsx(StepperIndicator, {}),
+                        /*#__PURE__*/ jsx(StepperTitle, {
+                            children: title
+                        }),
+                        description && /*#__PURE__*/ jsx(StepperDescription, {
+                            children: description
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(StepperSeparator, {})
+            ]
+        })
+});

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { stepperVariants } from "./classes.js";
+import { StepperRootContext } from "./StepperContext.js";
+import { useStepperGuards } from "./useStepper.js";
+const Stepper = ({ children, count, step, defaultStep, onStepChange, statusLabels, className, ref, 'data-testid': testId, ...rest })=>{
+    const guarded = useStepperGuards({
+        count,
+        step,
+        defaultStep,
+        onStepChange
+    });
+    return /*#__PURE__*/ jsx(Steps.Root, {
+        ...rest,
+        ...guarded,
+        ref: ref,
+        "data-slot": "stepper",
+        "data-testid": testId,
+        className: cn(stepperVariants(), className),
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: /*#__PURE__*/ jsx(StepperRootContext.Provider, {
+                value: {
+                    statusLabels
+                },
+                children: children
+            })
+        })
+    });
+};
+Stepper.displayName = 'Stepper';
+export { Stepper };

package/dist/components/Stepper/StepperContent.d.ts

@@ -0,0 +1,16 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperContentProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    /** 0-based step this body belongs to. */
+    index: number;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The body of one step, shown only while that step is current. Every body stays mounted (hidden),
+ * so form state survives moving between steps. It is a `group` named by its `StepperTrigger`
+ * (Ark's `aria-labelledby`), so render the matching trigger in the same `Stepper`. Set trigger
+ * ids with the root `ids.triggerId` prop, not an `id` on `StepperTrigger`: the body only knows the
+ * root's ids.
+ */
+export declare const StepperContent: FC<StepperContentProps>;

package/dist/components/Stepper/StepperContent.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps, useStepsContext } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { stepperContentVariants } from "./classes.js";
+import { ARK_CONTENT_ARIA_RESET } from "./constants.js";
+import { clampStep, useStepperRootContext } from "./StepperContext.js";
+const StepperContent = ({ index, children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    useStepperRootContext('StepperContent');
+    const { value, count } = useStepsContext();
+    const current = index === clampStep(value, count);
+    const testId = useTestId(`content-${index}`, testIdProp);
+    return /*#__PURE__*/ jsx(Steps.Content, {
+        index: index,
+        ...ARK_CONTENT_ARIA_RESET,
+        role: "group",
+        ...rest,
+        ref: ref,
+        hidden: !current,
+        "data-state": current ? 'open' : 'closed',
+        "data-slot": "stepper-content",
+        "data-testid": testId,
+        className: cn(stepperContentVariants(), className),
+        children: children
+    });
+};
+StepperContent.displayName = 'StepperContent';
+export { StepperContent };

package/dist/components/Stepper/StepperContext.d.ts

@@ -0,0 +1,58 @@
+import type { StepperStatusLabels, StepperVisualStatus } from './types';
+interface StepperRootContextValue {
+    statusLabels?: StepperStatusLabels;
+}
+export declare const StepperRootContext: import("react").Context<StepperRootContextValue | undefined>;
+/**
+ * Reads the enclosing `Stepper` / `StepperRootProvider`. Called first by every root-level part, so
+ * misuse throws a `[Stepper]` error instead of Ark's internal `useStepsContext` one.
+ */
+export declare const useStepperRootContext: (part: string) => StepperRootContextValue;
+/** `true` inside a `StepperList`, so a `StepperItem` can tell it is rendered outside one. */
+export declare const StepperListContext: import("react").Context<boolean>;
+export interface StepperItemContextValue {
+    /** 0-based position, from the item's `index` prop. */
+    index: number;
+    /** This item is the current step. */
+    current: boolean;
+    /** This item is the last step: it renders no separator. */
+    last: boolean;
+    /** Rendered state: `'active'` while current, else the item's `status`. */
+    status: StepperVisualStatus;
+    /** Screen-reader-only suffix for completed and danger steps, already resolved. */
+    statusLabel?: string;
+}
+export declare const StepperItemContext: import("react").Context<StepperItemContextValue | undefined>;
+/** Reads the enclosing `StepperItem`: `{ index, current, last, status }`. */
+export declare const useStepperItemContext: () => StepperItemContextValue;
+/**
+ * The current step, clamped to `[0, count - 1]`. Zag accepts `count` as a step (its "completed"
+ * state, where no step is current) and checks the range only on mount, so a step can fall out of
+ * range; the Stepper always shows one current step.
+ */
+export declare const clampStep: (value: number, count: number) => number;
+export interface UseStepperContextReturn {
+    /** Current step, 0-based, always in `[0, count - 1]`. */
+    value: number;
+    /** Number of steps. */
+    count: number;
+    /** There is a later step. `false` on the last step. */
+    hasNextStep: boolean;
+    /** There is an earlier step. `false` on the first step. */
+    hasPrevStep: boolean;
+    /** Moves to the next step; does nothing on the last step. */
+    goToNextStep: () => void;
+    /** Moves to the previous step; does nothing on the first step. */
+    goToPrevStep: () => void;
+    /** Moves to the first step. */
+    resetStep: () => void;
+    /** Moves to `step`, clamped to `[0, count - 1]`. */
+    setStep: (step: number) => void;
+}
+/**
+ * Reads the enclosing `Stepper`. Wraps Ark's `useStepsContext`, with one difference: it never
+ * moves past the last step, so there is always a current step (Ark's "completed" state is not
+ * part of the Stepper).
+ */
+export declare const useStepperContext: () => UseStepperContextReturn;
+export {};

package/dist/components/Stepper/StepperContext.js

@@ -0,0 +1,37 @@
+import { createContext, useContext } from "react";
+import { useStepsContext } from "@ark-ui/react/steps";
+const StepperRootContext = /*#__PURE__*/ createContext(void 0);
+const useStepperRootContext = (part)=>{
+    const context = useContext(StepperRootContext);
+    if (!context) throw new Error(`[Stepper] ${part} must be used inside a Stepper or StepperRootProvider.`);
+    return context;
+};
+const StepperListContext = /*#__PURE__*/ createContext(false);
+const StepperItemContext = /*#__PURE__*/ createContext(void 0);
+const useStepperItemContext = ()=>{
+    const context = useContext(StepperItemContext);
+    if (!context) throw new Error('[Stepper] useStepperItemContext must be used inside a StepperItem.');
+    return context;
+};
+const clampStep = (value, count)=>Math.min(Math.max(value, 0), Math.max(count - 1, 0));
+const useStepperContext = ()=>{
+    useStepperRootContext('useStepperContext');
+    const api = useStepsContext();
+    const value = clampStep(api.value, api.count);
+    const hasNextStep = value < api.count - 1;
+    return {
+        value,
+        count: api.count,
+        hasNextStep,
+        hasPrevStep: value > 0,
+        goToNextStep: ()=>{
+            if (hasNextStep) api.setStep(value + 1);
+        },
+        goToPrevStep: ()=>{
+            if (value > 0) api.setStep(value - 1);
+        },
+        resetStep: api.resetStep,
+        setStep: (step)=>api.setStep(clampStep(step, api.count))
+    };
+};
+export { StepperItemContext, StepperListContext, StepperRootContext, clampStep, useStepperContext, useStepperItemContext, useStepperRootContext };

package/dist/components/Stepper/StepperDescription.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperDescriptionProps extends HTMLAttributes<HTMLSpanElement>, TestableProps {
+    children: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+/** An optional second line under the title, e.g. 'Optional' or 'Request · Lua · HMAC auth'. One line, ellipsis at 320px, with the full text in a tooltip when it overflows. */
+export declare const StepperDescription: FC<StepperDescriptionProps>;

package/dist/components/Stepper/StepperDescription.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { stepperDescriptionVariants } from "./classes.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const StepperDescription = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { status } = useStepperItemContext();
+    const testId = useTestId("description", testIdProp);
+    return /*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                ref: ref,
+                children: /*#__PURE__*/ jsx("span", {
+                    ...rest,
+                    "data-slot": "stepper-description",
+                    "data-status": status,
+                    "data-testid": testId,
+                    className: cn(stepperDescriptionVariants(), className),
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    });
+};
+StepperDescription.displayName = "StepperDescription";
+export { StepperDescription };

package/dist/components/Stepper/StepperIndicator.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperIndicatorProps extends HTMLAttributes<HTMLSpanElement>, TestableProps {
+    /** Replaces the default content: the step number, `!` for danger, a check for completed. */
+    children?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The step badge. Decorative: Ark marks it `aria-hidden`, the title names the step. */
+export declare const StepperIndicator: FC<StepperIndicatorProps>;

package/dist/components/Stepper/StepperIndicator.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { Check } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { stepperIndicatorVariants } from "./classes.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const renderDefault = (status, index)=>{
+    if ('completed' === status) return /*#__PURE__*/ jsx(Check, {
+        size: "sm"
+    });
+    if ('danger' === status) return '!';
+    return index + 1;
+};
+const StepperIndicator = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { index, status } = useStepperItemContext();
+    const testId = useTestId('indicator', testIdProp);
+    return /*#__PURE__*/ jsx(Steps.Indicator, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx("span", {
+            ...rest,
+            ref: ref,
+            "data-slot": "stepper-indicator",
+            "data-status": status,
+            "data-testid": testId,
+            className: cn(stepperIndicatorVariants({
+                status
+            }), className),
+            children: children ?? renderDefault(status, index)
+        })
+    });
+};
+StepperIndicator.displayName = 'StepperIndicator';
+export { StepperIndicator };

package/dist/components/Stepper/StepperItem.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type LiHTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import type { StepperItemStatus } from './types';
+export interface StepperItemProps extends LiHTMLAttributes<HTMLLIElement>, TestableProps {
+    /** 0-based position of this step. Required, like Ark's `Steps.Item`. */
+    index: number;
+    /** Status set by the page. Ignored while this item is the current step. Default `'upcoming'`. */
+    status?: StepperItemStatus;
+    /** Overrides the root `statusLabels` suffix for this item. */
+    statusLabel?: string;
+    /** `StepperTrigger`, then `StepperSeparator`. */
+    children: ReactNode;
+    ref?: Ref<HTMLLIElement>;
+}
+/**
+ * One step: an `<li>` holding the step's `StepperTrigger` and its `StepperSeparator`. It resolves
+ * the rendered status (active while current, else `status`) for the parts inside it.
+ */
+export declare const StepperItem: FC<StepperItemProps>;

package/dist/components/Stepper/StepperItem.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Steps, useStepsContext } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { stepperItemVariants } from "./classes.js";
+import { ARK_ITEM_ARIA_RESET, DEFAULT_STEPPER_STATUS_LABELS } from "./constants.js";
+import { StepperItemContext, StepperListContext, clampStep, useStepperRootContext } from "./StepperContext.js";
+const StepperItem = ({ index, status, statusLabel, children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { statusLabels } = useStepperRootContext('StepperItem');
+    const inList = useContext(StepperListContext);
+    if ('production' !== process.env.NODE_ENV && !inList) console.warn('[Stepper] StepperItem must be rendered inside a StepperList: an <li> outside the <ol> loses the list semantics.');
+    const { value, count } = useStepsContext();
+    const currentStep = clampStep(value, count);
+    const current = index === currentStep;
+    if ('production' !== process.env.NODE_ENV && current && value !== currentStep) console.warn(`[Stepper] current step ${value} is out of range [0, ${count - 1}]; showing step ${currentStep}.`);
+    const testId = useTestId(`item-${index}`, testIdProp);
+    const visual = current ? 'active' : status ?? 'upcoming';
+    const context = {
+        index,
+        current,
+        last: index === count - 1,
+        status: visual,
+        statusLabel: 'completed' === visual || 'danger' === visual ? statusLabel ?? statusLabels?.[visual] ?? DEFAULT_STEPPER_STATUS_LABELS[visual] : void 0
+    };
+    return /*#__PURE__*/ jsx(Steps.Item, {
+        index: index,
+        asChild: true,
+        ...ARK_ITEM_ARIA_RESET,
+        children: /*#__PURE__*/ jsx("li", {
+            ...rest,
+            ref: ref,
+            "data-slot": "stepper-item",
+            "data-status": visual,
+            "data-testid": testId,
+            className: cn(stepperItemVariants(), className),
+            children: /*#__PURE__*/ jsx(StepperItemContext.Provider, {
+                value: context,
+                children: /*#__PURE__*/ jsx(TestIdProvider, {
+                    value: testId,
+                    children: children
+                })
+            })
+        })
+    });
+};
+StepperItem.displayName = 'StepperItem';
+export { StepperItem };

package/dist/components/Stepper/StepperList.d.ts

@@ -0,0 +1,12 @@
+import type { FC, OlHTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperListProps extends OlHTMLAttributes<HTMLOListElement>, TestableProps {
+    /** `StepperItem`s, each with its `index`. */
+    children: ReactNode;
+    ref?: Ref<HTMLOListElement>;
+}
+/**
+ * The step bar: an `<ol>` with the Figma bottom border and padding. Name it with `aria-label` or
+ * `aria-labelledby`.
+ */
+export declare const StepperList: FC<StepperListProps>;

package/dist/components/Stepper/StepperList.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { stepperListVariants } from "./classes.js";
+import { ARK_LIST_ARIA_RESET } from "./constants.js";
+import { StepperListContext, useStepperRootContext } from "./StepperContext.js";
+const StepperList = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    useStepperRootContext('StepperList');
+    const testId = useTestId('list', testIdProp);
+    return /*#__PURE__*/ jsx(Steps.List, {
+        asChild: true,
+        ...ARK_LIST_ARIA_RESET,
+        children: /*#__PURE__*/ jsx("ol", {
+            ...rest,
+            ref: ref,
+            "data-slot": "stepper-list",
+            "data-testid": testId,
+            className: cn(stepperListVariants(), className),
+            children: /*#__PURE__*/ jsx(StepperListContext.Provider, {
+                value: true,
+                children: children
+            })
+        })
+    });
+};
+StepperList.displayName = 'StepperList';
+export { StepperList };

package/dist/components/Stepper/StepperNextTrigger.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperNextTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement>, TestableProps {
+    /** Render the child (e.g. a `Button`) as the trigger instead of a plain `<button>`. */
+    asChild?: boolean;
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * Moves to the next step. Disabled on the last step, where the page renders its own submit
+ * button instead: Ark would otherwise move to its "completed" state, with no current step. A
+ * `disabled` on an `asChild` child is folded in, so the last step still disables it.
+ */
+export declare const StepperNextTrigger: FC<StepperNextTriggerProps>;

package/dist/components/Stepper/StepperNextTrigger.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps, useStepsContext } from "@ark-ui/react/steps";
+import { useTestId } from "../../utils/testId.js";
+import { clampStep, useStepperRootContext } from "./StepperContext.js";
+import { takeAsChildDisabled } from "./takeAsChildDisabled.js";
+const StepperNextTrigger = ({ asChild, children, disabled, onClick, ref, 'data-testid': testIdProp, ...rest })=>{
+    useStepperRootContext('StepperNextTrigger');
+    const { value, count } = useStepsContext();
+    const atLast = clampStep(value, count) >= count - 1;
+    const testId = useTestId('next-trigger', testIdProp);
+    const child = takeAsChildDisabled(asChild, children);
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (atLast) event.preventDefault();
+    };
+    return /*#__PURE__*/ jsx(Steps.NextTrigger, {
+        ...rest,
+        asChild: asChild,
+        ref: ref,
+        disabled: atLast || disabled || child.childDisabled || void 0,
+        onClick: handleClick,
+        "data-slot": "stepper-next-trigger",
+        "data-testid": testId,
+        children: child.children
+    });
+};
+StepperNextTrigger.displayName = 'StepperNextTrigger';
+export { StepperNextTrigger };

package/dist/components/Stepper/StepperPrevTrigger.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperPrevTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement>, TestableProps {
+    /** Render the child (e.g. a `Button`) as the trigger instead of a plain `<button>`. */
+    asChild?: boolean;
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * Moves to the previous step. Disabled on the first step. Use `asChild` with a `Button`; a
+ * `disabled` on that child is folded in, so the first step still disables it.
+ */
+export declare const StepperPrevTrigger: FC<StepperPrevTriggerProps>;

package/dist/components/Stepper/StepperPrevTrigger.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps, useStepsContext } from "@ark-ui/react/steps";
+import { useTestId } from "../../utils/testId.js";
+import { clampStep, useStepperRootContext } from "./StepperContext.js";
+import { takeAsChildDisabled } from "./takeAsChildDisabled.js";
+const StepperPrevTrigger = ({ asChild, children, disabled, onClick, ref, 'data-testid': testIdProp, ...rest })=>{
+    useStepperRootContext('StepperPrevTrigger');
+    const { value, count, setStep } = useStepsContext();
+    const current = clampStep(value, count);
+    const atFirst = 0 === current;
+    const testId = useTestId('prev-trigger', testIdProp);
+    const child = takeAsChildDisabled(asChild, children);
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        if (!atFirst) setStep(current - 1);
+    };
+    return /*#__PURE__*/ jsx(Steps.PrevTrigger, {
+        ...rest,
+        asChild: asChild,
+        ref: ref,
+        disabled: atFirst || disabled || child.childDisabled || void 0,
+        onClick: handleClick,
+        "data-slot": "stepper-prev-trigger",
+        "data-testid": testId,
+        children: child.children
+    });
+};
+StepperPrevTrigger.displayName = 'StepperPrevTrigger';
+export { StepperPrevTrigger };

package/dist/components/Stepper/StepperRootProvider.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode, Ref } from 'react';
+import { Steps as ArkSteps } from '@ark-ui/react/steps';
+import { type TestableProps } from '../../utils/testId';
+import type { StepperStatusLabels } from './types';
+import type { UseStepperReturn } from './useStepper';
+export interface StepperRootProviderProps extends Omit<ArkSteps.RootProviderProps, 'value' | 'asChild'>, TestableProps {
+    /** The machine from `useStepper()`, so the page can drive the steps from outside. */
+    value: UseStepperReturn;
+    children: ReactNode;
+    /** Screen-reader-only suffixes for completed and danger steps. */
+    statusLabels?: StepperStatusLabels;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The `Stepper` root for a machine created with `useStepper()`: the same parts, with the step
+ * state owned by the page (e.g. to move steps from a header action).
+ */
+export declare const StepperRootProvider: FC<StepperRootProviderProps>;

package/dist/components/Stepper/StepperRootProvider.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { stepperVariants } from "./classes.js";
+import { StepperRootContext } from "./StepperContext.js";
+const StepperRootProvider = ({ value, children, statusLabels, className, ref, 'data-testid': testId, ...rest })=>/*#__PURE__*/ jsx(Steps.RootProvider, {
+        ...rest,
+        value: value,
+        ref: ref,
+        "data-slot": "stepper",
+        "data-testid": testId,
+        className: cn(stepperVariants(), className),
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: /*#__PURE__*/ jsx(StepperRootContext.Provider, {
+                value: {
+                    statusLabels
+                },
+                children: children
+            })
+        })
+    });
+StepperRootProvider.displayName = 'StepperRootProvider';
+export { StepperRootProvider };

package/dist/components/Stepper/StepperSeparator.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperSeparatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>, TestableProps {
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The line after a step, on its first row. Decorative, and renders nothing on the last step. */
+export declare const StepperSeparator: FC<StepperSeparatorProps>;

package/dist/components/Stepper/StepperSeparator.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { stepperSeparatorLineClassNames, stepperSeparatorVariants } from "./classes.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const StepperSeparator = ({ className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { last, status } = useStepperItemContext();
+    const testId = useTestId('separator', testIdProp);
+    if (last) return null;
+    return /*#__PURE__*/ jsx(Steps.Separator, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx("span", {
+            ...rest,
+            ref: ref,
+            "aria-hidden": "true",
+            "data-slot": "stepper-separator",
+            "data-status": status,
+            "data-testid": testId,
+            className: cn(stepperSeparatorVariants(), className),
+            children: /*#__PURE__*/ jsx("span", {
+                className: stepperSeparatorLineClassNames
+            })
+        })
+    });
+};
+StepperSeparator.displayName = 'StepperSeparator';
+export { StepperSeparator };

package/dist/components/Stepper/StepperTitle.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperTitleProps extends HTMLAttributes<HTMLSpanElement>, TestableProps {
+    children: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The step name: one line, ellipsis at 320px, with the full text in a tooltip when it overflows. */
+export declare const StepperTitle: FC<StepperTitleProps>;