@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
48 lines • 1.57 kB
TypeScript
import * as React from "react";
/**
* Represents the configurable props for the {@link Stepper} component.
*
* @remarks
* Extends native `<div>` attributes so step progress indicators can expose data
* attributes, testing hooks, and ARIA metadata while remaining layout-flexible.
*/
interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Labels for each step in the progress sequence.
*/
steps: ReadonlyArray<string>;
/**
* Zero-based index of the currently active step.
*/
activeStep: number;
/**
* Visual orientation of the stepper layout.
*
* @default "horizontal"
*/
orientation?: "horizontal" | "vertical";
}
/**
* Displays a multi-step progress indicator for wizard-like workflows.
*
* @remarks
* **Rendering Context**: Server- and client-compatible presentational component.
*
* Renders a semantic list of steps and marks each item as completed, active, or upcoming
* based on the supplied zero-based active index. Use it to communicate progress across
* onboarding flows, checkout funnels, or multi-step forms.
*
* @example
* ```tsx
* <Stepper
* steps={["Account", "Profile", "Review"]}
* activeStep={1}
* />
* ```
*
* @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/progressbar/progressbar.html | WAI progress indicator guidance}
*/
declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
export { Stepper };
export type { StepperProps };
//# sourceMappingURL=stepper.d.ts.map