@payfit/unity-components/dist/esm/components/stepper/parts/Step.js

import { Text as e } from "../../text/Text.js";
import { useStepperContext as t } from "../Stepper.context.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { Icon as o } from "@payfit/unity-icons";
//#region src/components/stepper/parts/Step.tsx
var s = r({
	slots: {
		base: "uy:flex uy:flex-1 uy:flex-col uy:gap-75",
		bar: "uy:h-50 uy:w-full uy:rounded-full uy:transition-all",
		labelRow: "uy:flex uy:flex-row uy:items-center uy:gap-50",
		text: "uy:typography-body-strong",
		statusIcon: "uy:starting:scale-0 uy:scale-100 uy:transition-transform uy:duration-150"
	},
	variants: { stepStatus: {
		current: { bar: "uy:bg-surface-primary" },
		completed: { bar: "uy:bg-surface-primary" },
		uncompleted: { bar: "uy:bg-surface-neutral-lowest" }
	} }
}), c = n(({ label: n, stepNumber: r, ...c }, l) => {
	let { currentStep: u } = t(), d = u === r ? "current" : u > r ? "completed" : "uncompleted", { base: f, bar: p, labelRow: m, text: h, statusIcon: g } = s({ stepStatus: d });
	return /* @__PURE__ */ a("li", {
		ref: l,
		className: f(),
		"aria-current": d === "current" ? "step" : void 0,
		...c,
		children: [/* @__PURE__ */ i("div", {
			className: p(),
			"aria-hidden": "true"
		}), /* @__PURE__ */ a("div", {
			className: m(),
			children: [/* @__PURE__ */ i(e, {
				className: h(),
				children: `${r}. ${n}`
			}), d === "completed" && /* @__PURE__ */ i(o, {
				src: "CheckCircleOutlined",
				color: "content.success",
				size: 20,
				className: g()
			})]
		})]
	});
});
c.displayName = "Step";
//#endregion
export { c as Step };