@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! ⚡
41 lines (40 loc) • 1.8 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utilities.js";
import stepper_module from "./stepper.module.js";
import * as __rspack_external_react from "react";
const Stepper = /*#__PURE__*/ __rspack_external_react.forwardRef(({ steps, activeStep, orientation = "horizontal", className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
role: "list",
"aria-label": "Progress",
"data-orientation": orientation,
className: cn(stepper_module.stepper, "vertical" === orientation && stepper_module.vertical, className),
...props,
children: steps.map((label, index)=>{
let state = "upcoming";
if (index < activeStep) state = "completed";
else if (index === activeStep) state = "active";
return /*#__PURE__*/ jsxs("div", {
role: "listitem",
className: stepper_module.step,
"data-state": state,
children: [
/*#__PURE__*/ jsx("div", {
className: stepper_module.indicator,
"aria-hidden": "true",
children: "completed" === state ? "✓" : index + 1
}),
index < steps.length - 1 ? /*#__PURE__*/ jsx("div", {
className: stepper_module.connector,
"aria-hidden": "true"
}) : null,
/*#__PURE__*/ jsx("span", {
className: stepper_module.label,
children: label
})
]
}, `${label}-${index}`);
})
}));
Stepper.displayName = "Stepper";
export { Stepper };
//# sourceMappingURL=stepper.js.map