@wallarm-org/design-system 1.31.0 → 1.33.0

package/dist/components/CodeEditor/CodeEditorRoot.d.ts

@@ -23,7 +23,7 @@ export interface CodeEditorRootProps extends CodeEditorRootNativeProps, Testable
      * document would be seeded with the previous document's text.
      */
     documentId?: string;
-    /** Focusable, selectable, searchable, copyable — but not editable by the user */
+    /** Non-editable and unfocusable content; text remains selectable, searchable and copyable */
     readOnly?: boolean;
     /** Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers */
     startingLineNumber?: number;

package/dist/components/CodeEditor/engine/SearchPanel.js

@@ -41,9 +41,20 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
             ]
         });
     };
+    const blurReadOnlyContent = ()=>{
+        if (view.state.readOnly && view.hasFocus) view.contentDOM.blur();
+    };
+    const closeSearch = ()=>{
+        closeSearchPanel(view);
+        blurReadOnlyContent();
+    };
     const handleKeyDown = (event, onEnter)=>{
         if (event.nativeEvent.isComposing || 229 === event.keyCode) return;
-        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) return void event.preventDefault();
+        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) {
+            event.preventDefault();
+            blurReadOnlyContent();
+            return;
+        }
         if ('Enter' === event.key) {
             event.preventDefault();
             onEnter(event.shiftKey);
@@ -53,7 +64,10 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
     const handleReplaceKeyDown = (event)=>handleKeyDown(event, ()=>replaceNext(view));
     const handlePanelKeyDown = (event)=>{
         if (event.target instanceof HTMLInputElement) return;
-        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) event.preventDefault();
+        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) {
+            event.preventDefault();
+            blurReadOnlyContent();
+        }
     };
     const canSearch = query.valid;
     return /*#__PURE__*/ jsxs("div", {
@@ -154,7 +168,7 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
                         className: "ml-auto",
                         "aria-label": "Close search",
                         "data-testid": slot('search-close'),
-                        onClick: ()=>closeSearchPanel(view),
+                        onClick: closeSearch,
                         children: /*#__PURE__*/ jsx(X, {})
                     })
                 ]

package/dist/components/CodeEditor/engine/completion.d.ts

@@ -4,9 +4,9 @@ import type { CodeEditorCompletionContext, CodeEditorCompletionSource, CodeEdito
 /** Public, engine-free view of a CodeMirror completion request (spec §4). */
 export declare const buildCompletionContext: (ctx: CompletionContext, language: CodeEditorLanguage, startingLineNumber: number) => CodeEditorCompletionContext;
 /**
- * Autocomplete (spec §7.14): built-in HTTP source for `http`, the JSON Schema source when
- * `schema` is set, then consumer sources, all through `override` (language-data sources are
- * off). `completionKeymap` comes with `defaultKeymap: true` at `Prec.highest`, so Enter,
+ * Autocomplete: HTTP and JSON Schema sources, consumer sources, then language keywords and
+ * document words, all through `override` (language-data sources are off).
+ * `completionKeymap` comes with `defaultKeymap: true` at `Prec.highest`, so Enter,
  * arrows and Escape reach the open list before `indentWithTab` / fullscreen Escape.
  */
 export declare const completionExtension: (config: {

package/dist/components/CodeEditor/engine/completion.js

@@ -1,4 +1,4 @@
-import { autocompletion } from "@codemirror/autocomplete";
+import { autocompletion, completeAnyWord, completeFromList } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
 import { cn } from "../../../utils/cn.js";
 import { dropdownMenuItemVariants } from "../../DropdownMenu/classes.js";
@@ -106,13 +106,153 @@ const adaptSource = (source, language, startingLineNumber)=>(ctx)=>{
         }
     };
 const reopensAfter = (completion)=>'string' == typeof completion.apply && completion.apply.endsWith(': ');
+const LANGUAGE_KEYWORDS = {
+    json: [
+        'true',
+        'false',
+        'null'
+    ],
+    yaml: [
+        'true',
+        'false',
+        'null'
+    ],
+    bash: [
+        'echo',
+        'export',
+        'if',
+        'then',
+        'else',
+        'fi',
+        'for',
+        'in',
+        'do',
+        'done',
+        'function'
+    ],
+    javascript: [
+        'const',
+        'let',
+        'var',
+        'function',
+        'return',
+        'if',
+        'else',
+        'for',
+        'while',
+        'class',
+        'import',
+        'export',
+        'from',
+        'async',
+        'await',
+        'true',
+        'false',
+        'null',
+        'undefined'
+    ],
+    typescript: [
+        'const',
+        'let',
+        'function',
+        'return',
+        'if',
+        'else',
+        'class',
+        'import',
+        'export',
+        'from',
+        'async',
+        'await',
+        'interface',
+        'type',
+        'enum',
+        'extends',
+        'implements',
+        'public',
+        'private',
+        'readonly',
+        'true',
+        'false',
+        'null',
+        'undefined'
+    ],
+    python: [
+        'def',
+        'class',
+        'return',
+        'if',
+        'elif',
+        'else',
+        'for',
+        'while',
+        'in',
+        'import',
+        'from',
+        'as',
+        'async',
+        'await',
+        'try',
+        'except',
+        'with',
+        'True',
+        'False',
+        'None'
+    ],
+    lua: [
+        'function',
+        'local',
+        'return',
+        'if',
+        'then',
+        'elseif',
+        'else',
+        'end',
+        'for',
+        'while',
+        'do',
+        'repeat',
+        'until',
+        'true',
+        'false',
+        'nil'
+    ]
+};
+const isInsideQuotedString = (text)=>{
+    let quoted = false;
+    for(let i = 0; i < text.length; i++)if ('\\' === text[i]) i++;
+    else if ('"' === text[i]) quoted = !quoted;
+    return quoted;
+};
+const builtInSources = (language)=>{
+    const keywords = LANGUAGE_KEYWORDS[language];
+    if (!keywords) return [
+        completeAnyWord
+    ];
+    const completeKeywords = completeFromList(keywords.map((label)=>({
+            label,
+            type: 'keyword'
+        })));
+    if ('json' === language) return [
+        (ctx)=>{
+            const line = ctx.state.doc.lineAt(ctx.pos);
+            const before = line.text.slice(0, ctx.pos - line.from);
+            if (isInsideQuotedString(before)) return completeAnyWord(ctx);
+            return /(?:^|[:,\[])[\s\w]*$/.test(before) ? completeKeywords(ctx) : null;
+        }
+    ];
+    return [
+        completeKeywords,
+        completeAnyWord
+    ];
+};
 const completionExtension = (config)=>{
     const { language, schema, sources, startingLineNumber } = config;
     const override = [];
     if ('http' === language) override.push(adaptSource(httpCompletions, language, startingLineNumber));
     if (void 0 !== schema && isJsonLike(language)) override.push(schemaCompletionSource(()=>schema, (state)=>jsonRegion(state, language)));
     for (const source of sources)override.push(adaptSource(source, language, startingLineNumber));
-    if (0 === override.length) return [];
+    override.push(...builtInSources(language));
     return [
         autocompletion({
             override,

package/dist/components/CodeEditor/engine/index.js

@@ -79,7 +79,8 @@ const SLOT_DEPS = {
     ],
     contentAttributes: [
         'contentAttributes',
-        'testId'
+        'testId',
+        'readOnly'
     ],
     cspNonce: [
         'cspNonce'
@@ -184,6 +185,7 @@ const featureExtensions = (options, callbacks)=>({
     });
 const contentAttributesFor = (options)=>{
     const attrs = sanitizeContentAttributes(options.contentAttributes);
+    if (options.readOnly) delete attrs.tabindex;
     if (options.testId) attrs['data-testid'] = `${options.testId}--editor`;
     return attrs;
 };
@@ -225,7 +227,10 @@ const gutterAria = [
 ];
 const slotExtensions = (options, callbacks)=>({
         language: ()=>languageExtension(options.language),
-        readOnly: ()=>EditorState.readOnly.of(options.readOnly),
+        readOnly: ()=>[
+                EditorState.readOnly.of(options.readOnly),
+                EditorView.editable.of(!options.readOnly)
+            ],
         wrap: ()=>options.wrapLines ? EditorView.lineWrapping : [],
         maxHeight: ()=>maxHeightTheme(options.maxHeight),
         contentAttributes: ()=>EditorView.contentAttributes.of(contentAttributesFor(options)),
@@ -298,6 +303,10 @@ const createEditor = (parent, initialOptions, callbacks)=>{
         state: createState(initialOptions.value, initialOptions),
         parent
     });
+    const preventReadOnlyMouseFocus = (event)=>{
+        if (view.state.readOnly && event.target instanceof Node && view.contentDOM.contains(event.target)) event.stopPropagation();
+    };
+    view.dom.addEventListener('mousedown', preventReadOnlyMouseFocus, true);
     const ensureLazyLanguage = (lang)=>{
         if (!isLazyLanguage(lang)) return;
         loadLanguageExtension(lang).then((extension)=>{
@@ -346,13 +355,20 @@ const createEditor = (parent, initialOptions, callbacks)=>{
     const update = (next)=>{
         const prev = options;
         options = next;
-        if (next.documentId !== prev.documentId) return void swapDocument(prev, next);
+        if (next.documentId !== prev.documentId) {
+            swapDocument(prev, next);
+            if (next.readOnly && view.hasFocus) view.contentDOM.blur();
+            return;
+        }
         reconfigure(prev, next);
+        if (next.readOnly && view.hasFocus) view.contentDOM.blur();
         if (next.language !== prev.language) ensureLazyLanguage(next.language);
         syncValue(next.value);
     };
     const api = {
-        focus: ()=>view.focus(),
+        focus: ()=>{
+            if (!view.state.readOnly) view.focus();
+        },
         getValue: ()=>view.state.doc.toString(),
         insertText: (text)=>{
             if (view.state.readOnly) return;
@@ -380,6 +396,7 @@ const createEditor = (parent, initialOptions, callbacks)=>{
         destroy: ()=>{
             destroyed = true;
             cache.clear();
+            view.dom.removeEventListener('mousedown', preventReadOnlyMouseFocus, true);
             view.destroy();
         }
     };

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