@achs/webkit
Version:
Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las
55 lines (54 loc) • 2.03 kB
JavaScript
import { jsx as e, jsxs as i } from "react/jsx-runtime";
import { forwardRef as N } from "react";
import a from "./Stepper.module.scss.mjs";
import '../../../assets/node_modules/.pnpm/bootstrap-icons@1.13.1/node_modules/bootstrap-icons/font/bootstrap-icons.css';/* empty css */
const b = N(({
steps: c,
current: l = 0,
orientation: n = "horizontal",
color: o = "primary",
className: d,
...m
}, p) => {
const h = (r) => r < l ? "completed" : r === l ? "current" : "upcoming";
return /* @__PURE__ */ e(
"div",
{
ref: p,
className: `${a.stepper} ${d ?? ""}`.trim(),
"data-orientation": n,
"data-color": o,
role: "list",
"aria-label": "Progreso",
...m,
children: c.map((r, s) => {
const t = h(s), u = s === c.length - 1;
return /* @__PURE__ */ i(
"div",
{
className: a.step,
"data-status": t,
role: "listitem",
"aria-current": t === "current" ? "step" : void 0,
children: [
/* @__PURE__ */ i("div", { className: a.indicatorWrap, children: [
/* @__PURE__ */ e("span", { className: a.indicator, children: t === "completed" ? /* @__PURE__ */ e("i", { className: "bi bi-check-lg", "aria-hidden": "true" }) : /* @__PURE__ */ e("span", { className: a.number, children: s + 1 }) }),
!u && /* @__PURE__ */ e("span", { className: a.connector, "aria-hidden": "true" })
] }),
/* @__PURE__ */ i("div", { className: a.body, children: [
/* @__PURE__ */ e("span", { className: a.label, children: r.label }),
r.description && /* @__PURE__ */ e("span", { className: a.description, children: r.description })
] })
]
},
s
);
})
}
);
});
b.displayName = "Stepper";
export {
b as Stepper,
b as default
};