@astra-kit/ui 1.0.0 → 1.2.1

package/dist/components/stepper.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+import type { StepperDetails, StepperMessages, StepperOrientation, StepperStatus } from "../constants/stepper.js";
+export type { StepperDetails, StepperMessages, StepperOrientation, StepperStatus };
+export type StepperStep = {
+    /** Stable key, so each step keeps its own motion when the list changes. */
+    id: string;
+    label: string;
+    /** A short hint under the label. */
+    description?: string;
+    /** Marks the step as failed: the marker morphs into an alert and this message replaces the description. */
+    error?: string;
+};
+export type StepperProps = Omit<HTMLAttributes<HTMLElement>, "children" | "role"> & {
+    /** Steps in order. */
+    steps: StepperStep[];
+    /** Index of the step in progress. `steps.length` marks the whole flow complete. */
+    current: number;
+    /** Layout direction. Defaults to `"horizontal"`. */
+    orientation?: StepperOrientation;
+    /** Called with the index of a completed step when it is chosen. Without it the stepper is read only. */
+    onStepSelect?: (index: number) => void;
+    /** `"current"` shows only the active step's description. Errors always show. Defaults to `"all"`. */
+    details?: StepperDetails;
+    /** Markers only. Horizontal steppers switch to this below 30rem on their own. */
+    compact?: boolean;
+    /** Accessible name of the stepper. Defaults to "Progreso". */
+    label?: string;
+    /** Announced, and shown in the compact caption, once every step is complete. Defaults to "Todos los pasos completados". */
+    completeLabel?: string;
+    /** Replaces any of the Spanish screen-reader statuses and the step announcement. */
+    messages?: Partial<StepperMessages>;
+};
+/**
+ * A horizontal or vertical steps indicator driven by the current index, with optional navigation back to completed steps.
+ * @param props - Steps, current index, orientation, selection callback, copy and native attributes.
+ * @returns The stepper: a labelled `nav` when interactive, otherwise a `role="group"`.
+ */
+declare function Stepper({ steps, current, orientation, onStepSelect, details, compact, label, completeLabel, messages, className, ...props }: StepperProps): import("react").JSX.Element;
+export { Stepper };