@undp/design-system-react/dist/Stepper.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./check-DQP1Akuz.js";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
//#region src/components/ui/stepper.tsx
function i({ className: i, steps: a, currentStep: o = 0, unfinishedStepsClassName: s, finishedStepsClassName: c, activeStepsClassName: l, ...u }) {
	return /* @__PURE__ */ n("ol", {
		...u,
		className: e("flex w-full list-none items-center justify-between gap-3 text-center text-base text-content-primary", i),
		children: a.map((i, u) => /* @__PURE__ */ n("li", {
			className: e("flex grow items-center", u === a.length - 1 ? "grow-0" : "grow", u + 1 < o ? c : u + 1 === o ? l : s),
			children: /* @__PURE__ */ r("div", {
				className: "flex grow items-center gap-3",
				children: [
					/* @__PURE__ */ n("div", {
						className: e("flex h-8 w-8 shrink-0 items-center justify-center rounded-full", u + 1 < o ? "bg-info" : u + 1 === o ? "bg-foreground-soft" : "bg-surface"),
						children: u + 1 < o ? /* @__PURE__ */ n(t, { className: "h-4 w-4 shrink-0 stroke-background" }) : /* @__PURE__ */ n("div", {
							className: u + 1 === o ? "text-content-reverse text-sm" : "text-content-primary text-sm",
							children: u + 1
						})
					}),
					/* @__PURE__ */ r("div", {
						className: "flex shrink-0 flex-col",
						children: [/* @__PURE__ */ n("div", {
							className: e("text-left font-normal text-base rtl:text-right", u + 1 < o ? "text-info" : "text-content-primary"),
							children: i.title
						}), i.description ? /* @__PURE__ */ n("div", {
							className: e("text-left text-content-tertiary text-sm rtl:text-right"),
							children: i.description
						}) : null]
					}),
					u === a.length - 1 ? null : /* @__PURE__ */ n("div", { className: "h-px w-full grow bg-surface" })
				]
			})
		}, i.title))
	});
}
//#endregion
export { i as Stepper };

//# sourceMappingURL=Stepper.js.map