@wallarm-org/design-system 1.31.0 → 1.33.0

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>;

package/dist/components/Stepper/StepperTitle.js

@@ -0,0 +1,32 @@
+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 { stepperTitleVariants } from "./classes.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const StepperTitle = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { status } = useStepperItemContext();
+    const testId = useTestId('title', testIdProp);
+    return /*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                ref: ref,
+                children: /*#__PURE__*/ jsx("span", {
+                    ...rest,
+                    "data-slot": "stepper-title",
+                    "data-status": status,
+                    "data-testid": testId,
+                    className: cn(stepperTitleVariants({
+                        status
+                    }), className),
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    });
+};
+StepperTitle.displayName = 'StepperTitle';
+export { StepperTitle };

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

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>, TestableProps {
+    /** `StepperIndicator`, `StepperTitle` and an optional `StepperDescription`. */
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * The step's button: a click makes the step current. Carries `aria-current="step"` while
+ * current, a screen-reader-only status suffix (", Completed" / ", Has errors") and every
+ * consumer attribute, so analytics land on the real `<button>`.
+ *
+ * Set its `id` with the root `ids.triggerId` prop: `StepperContent` is named by the root's trigger
+ * id, so an `id` passed here leaves the body's `aria-labelledby` pointing at nothing.
+ */
+export declare const StepperTrigger: FC<StepperTriggerProps>;

package/dist/components/Stepper/StepperTrigger.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { stepperTriggerVariants } from "./classes.js";
+import { ARK_TAB_ARIA_RESET } from "./constants.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const StepperTrigger = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { current, status, statusLabel } = useStepperItemContext();
+    const testId = useTestId('trigger', testIdProp);
+    if ('production' !== process.env.NODE_ENV && void 0 !== rest.id) console.warn(`[Stepper] id="${rest.id}" on StepperTrigger: set trigger ids with the root \`ids.triggerId\` prop, or StepperContent's aria-labelledby points at nothing.`);
+    return /*#__PURE__*/ jsxs(Steps.Trigger, {
+        ...ARK_TAB_ARIA_RESET,
+        "aria-current": current ? 'step' : void 0,
+        ...rest,
+        ref: ref,
+        type: "button",
+        "data-slot": "stepper-trigger",
+        "data-status": status,
+        "data-testid": testId,
+        className: cn(stepperTriggerVariants(), className),
+        children: [
+            children,
+            statusLabel && /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: `, ${statusLabel}`
+            })
+        ]
+    });
+};
+StepperTrigger.displayName = 'StepperTrigger';
+export { StepperTrigger };

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

@@ -0,0 +1,14 @@
+export declare const stepperVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperIndicatorVariants: (props?: ({
+    status?: "active" | "completed" | "danger" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const stepperTitleVariants: (props?: ({
+    status?: "active" | "completed" | "danger" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const stepperDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperSeparatorLineClassNames = "block h-px w-full bg-border-primary";
+export declare const stepperContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Stepper/classes.js

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const stepperVariants = cva('min-w-0');
+const stepperListVariants = cva('m-0 flex min-w-0 list-none items-start border-b-1 border-border-primary-light px-24 py-8');
+const stepperItemVariants = cva('flex min-w-0 items-start');
+const stepperTriggerVariants = cva(cn('grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] grid-rows-[20px] items-start gap-x-4 bg-transparent p-0 text-left', 'rounded-6 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'));
+const stepperIndicatorVariants = cva("col-start-1 row-span-2 row-start-1 inline-flex h-20 min-w-16 shrink-0 items-center justify-center rounded-full font-mono font-medium text-xs [font-feature-settings:'liga'_0]", {
+    variants: {
+        status: {
+            active: 'bg-states-brand-active px-4 py-2 text-text-brand',
+            danger: 'bg-states-danger-active px-4 py-2 text-text-danger',
+            completed: 'bg-states-primary-active px-2 py-2 text-icon-primary',
+            upcoming: 'border-1 border-border-primary bg-component-outline-button-bg px-3 py-1 text-text-primary'
+        }
+    },
+    defaultVariants: {
+        status: 'upcoming'
+    }
+});
+const stepperTitleVariants = cva('col-start-2 row-start-1 block min-w-0 max-w-320 truncate font-sans font-normal text-sm', {
+    variants: {
+        status: {
+            active: 'text-text-brand',
+            danger: 'text-text-danger',
+            completed: 'text-text-primary',
+            upcoming: 'text-text-primary'
+        }
+    },
+    defaultVariants: {
+        status: 'upcoming'
+    }
+});
+const stepperDescriptionVariants = cva('col-start-2 row-start-2 -mt-2 block min-w-0 max-w-320 truncate font-sans text-text-secondary text-xs');
+const stepperSeparatorVariants = cva('flex h-20 w-32 shrink-0 items-center px-8');
+const stepperSeparatorLineClassNames = 'block h-px w-full bg-border-primary';
+const stepperContentVariants = cva('min-w-0');
+export { stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperItemVariants, stepperListVariants, stepperSeparatorLineClassNames, stepperSeparatorVariants, stepperTitleVariants, stepperTriggerVariants, stepperVariants };

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

@@ -0,0 +1,22 @@
+export declare const ARK_LIST_ARIA_RESET: {
+    readonly role: undefined;
+    readonly 'aria-owns': undefined;
+    readonly 'aria-orientation': undefined;
+};
+export declare const ARK_ITEM_ARIA_RESET: {
+    readonly 'aria-current': undefined;
+};
+export declare const ARK_TAB_ARIA_RESET: {
+    readonly role: undefined;
+    readonly 'aria-selected': undefined;
+    readonly 'aria-controls': undefined;
+};
+export declare const ARK_CONTENT_ARIA_RESET: {
+    readonly tabIndex: undefined;
+};
+/** The design supports up to six steps; more logs a dev warning. */
+export declare const STEPPER_MAX_STEPS = 6;
+export declare const DEFAULT_STEPPER_STATUS_LABELS: {
+    readonly completed: 'Completed';
+    readonly danger: 'Has errors';
+};

package/dist/components/Stepper/constants.js

@@ -0,0 +1,23 @@
+const REMOVE = null;
+const ARK_LIST_ARIA_RESET = {
+    role: REMOVE,
+    'aria-owns': REMOVE,
+    'aria-orientation': REMOVE
+};
+const ARK_ITEM_ARIA_RESET = {
+    'aria-current': REMOVE
+};
+const ARK_TAB_ARIA_RESET = {
+    role: REMOVE,
+    'aria-selected': REMOVE,
+    'aria-controls': REMOVE
+};
+const ARK_CONTENT_ARIA_RESET = {
+    tabIndex: REMOVE
+};
+const STEPPER_MAX_STEPS = 6;
+const DEFAULT_STEPPER_STATUS_LABELS = {
+    completed: 'Completed',
+    danger: 'Has errors'
+};
+export { ARK_CONTENT_ARIA_RESET, ARK_ITEM_ARIA_RESET, ARK_LIST_ARIA_RESET, ARK_TAB_ARIA_RESET, DEFAULT_STEPPER_STATUS_LABELS, STEPPER_MAX_STEPS };

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

@@ -0,0 +1,15 @@
+export { Stepper, type StepperProps } from './Stepper';
+export { StepperContent, type StepperContentProps } from './StepperContent';
+export { type StepperItemContextValue, type UseStepperContextReturn, useStepperContext, useStepperItemContext, } from './StepperContext';
+export { StepperDescription, type StepperDescriptionProps } from './StepperDescription';
+export { StepperIndicator, type StepperIndicatorProps } from './StepperIndicator';
+export { StepperItem, type StepperItemProps } from './StepperItem';
+export { StepperList, type StepperListProps } from './StepperList';
+export { StepperNextTrigger, type StepperNextTriggerProps } from './StepperNextTrigger';
+export { StepperPrevTrigger, type StepperPrevTriggerProps } from './StepperPrevTrigger';
+export { StepperRootProvider, type StepperRootProviderProps } from './StepperRootProvider';
+export { StepperSeparator, type StepperSeparatorProps } from './StepperSeparator';
+export { StepperTitle, type StepperTitleProps } from './StepperTitle';
+export { StepperTrigger, type StepperTriggerProps } from './StepperTrigger';
+export type { StepperItemStatus, StepperStatusLabels, StepperVisualStatus } from './types';
+export { type UseStepperProps, type UseStepperReturn, useStepper } from './useStepper';

package/dist/components/Stepper/index.js

@@ -0,0 +1,14 @@
+export { Stepper } from "./Stepper.js";
+export { StepperContent } from "./StepperContent.js";
+export { useStepperContext, useStepperItemContext } from "./StepperContext.js";
+export { StepperDescription } from "./StepperDescription.js";
+export { StepperIndicator } from "./StepperIndicator.js";
+export { StepperItem } from "./StepperItem.js";
+export { StepperList } from "./StepperList.js";
+export { StepperNextTrigger } from "./StepperNextTrigger.js";
+export { StepperPrevTrigger } from "./StepperPrevTrigger.js";
+export { StepperRootProvider } from "./StepperRootProvider.js";
+export { StepperSeparator } from "./StepperSeparator.js";
+export { StepperTitle } from "./StepperTitle.js";
+export { StepperTrigger } from "./StepperTrigger.js";
+export { useStepper } from "./useStepper.js";

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+/**
+ * With `asChild`, Ark merges the child's props over the trigger's, so a child `disabled={false}`
+ * (e.g. `<Button disabled={isSaving}>`) would re-enable Next on the last step or Prev on the first.
+ * This takes the child's `disabled` out, for the trigger to fold into its own, so the trigger's
+ * computed value always wins.
+ */
+export declare const takeAsChildDisabled: (asChild: boolean | undefined, children: ReactNode) => {
+    children: ReactNode;
+    childDisabled?: boolean;
+};

package/dist/components/Stepper/takeAsChildDisabled.js

@@ -0,0 +1,17 @@
+import { cloneElement, isValidElement } from "react";
+const takeAsChildDisabled = (asChild, children)=>{
+    if (!asChild || !isValidElement(children)) return {
+        children
+    };
+    const { disabled } = children.props;
+    if (void 0 === disabled) return {
+        children
+    };
+    return {
+        children: cloneElement(children, {
+            disabled: void 0
+        }),
+        childDisabled: disabled
+    };
+};
+export { takeAsChildDisabled };

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

@@ -0,0 +1,11 @@
+/** Status set by the page. `'active'` is never passed: it is derived from the current step. */
+export type StepperItemStatus = 'upcoming' | 'completed' | 'danger';
+/** Rendered state, exposed as `data-status`. */
+export type StepperVisualStatus = 'active' | StepperItemStatus;
+/** Screen-reader-only status suffixes (i18n). */
+export interface StepperStatusLabels {
+    /** Default `'Completed'`. */
+    completed?: string;
+    /** Default `'Has errors'`. */
+    danger?: string;
+}

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

@@ -0,0 +1,38 @@
+import { type UseStepsProps, type UseStepsReturn } from '@ark-ui/react/steps';
+/** Ark props the Stepper does not support: it never blocks a step and is horizontal only. */
+export type StepperOmittedArkProps = 'linear' | 'isStepValid' | 'isStepSkippable' | 'onStepInvalid' | 'onStepComplete' | 'orientation';
+export interface StepperGuardProps {
+    /** Number of steps, 1–6. Required: each `StepperItem` and `StepperContent` takes its `index`. */
+    count: number;
+    /** Controlled current step, 0-based. Clamped to `[0, count - 1]`. */
+    step?: number;
+    /** Uncontrolled initial step. Default `0`. Clamped to `[0, count - 1]`. */
+    defaultStep?: number;
+    /**
+     * Fires when a click changes the step, back or forward: `({ step }) => void`. A click on the
+     * current step does not fire it; use the trigger's `onClick` to observe that.
+     */
+    onStepChange?: UseStepsProps['onStepChange'];
+}
+/**
+ * The root guards shared by `Stepper` and `useStepper`: clamps `step` / `defaultStep`, warns in
+ * development, and never reports a step past the last one (Ark's "completed" state).
+ */
+export declare const useStepperGuards: ({ count, step, defaultStep, onStepChange }: StepperGuardProps) => {
+    count: number;
+    step?: number | undefined;
+    defaultStep?: number | undefined;
+    onStepChange: ((details: {
+        step: number;
+    }) => void) | undefined;
+};
+export interface UseStepperProps extends Omit<UseStepsProps, StepperOmittedArkProps | keyof StepperGuardProps>, StepperGuardProps {
+}
+export type UseStepperReturn = UseStepsReturn;
+/**
+ * Creates the Stepper machine outside the component, for `StepperRootProvider`. Wraps Ark's
+ * `useSteps` with the same guards as `Stepper` and `useStepperContext`: the step is clamped to
+ * `[0, count - 1]`, `setStep` clamps too, and Next / Back move from the shown step, so the machine
+ * never reaches Ark's "completed" state (`isCompleted` is always `false`).
+ */
+export declare const useStepper: ({ count, step, defaultStep, onStepChange, ...rest }: UseStepperProps) => UseStepperReturn;