laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
224 lines (223 loc) • 5.34 kB
JavaScript
"use client";
import { jsx as l, jsxs as s } from "react/jsx-runtime";
import { Stepper as V, StepperNav as S, StepperItem as b, StepperTrigger as N, StepperIndicator as w, StepperTitle as C, StepperSeparator as I, StepperPanel as T, StepperContent as j } from "./stepper.js";
import { cva as t } from "../../node_modules/class-variance-authority/dist/index.js";
const k = t("", {
variants: {
align: {
horizontal: "flex w-full flex-col",
vertical: "flex items-start gap-8"
}
},
defaultVariants: {
align: "horizontal"
}
}), y = t(
"rounded-lg p-6 shadow w-full max-w-6xl",
{
variants: {
align: {
horizontal: "mt-6",
vertical: "mt-1"
}
},
defaultVariants: {
align: "horizontal"
}
}
), A = t("", {
variants: {
align: {
horizontal: "flex flex-col gap-3",
vertical: "flex flex-row gap-3 items-center"
}
},
defaultVariants: {
align: "horizontal"
}
}), W = t("relative", {
variants: {
align: {
horizontal: "flex-1 items-start",
vertical: "flex items-start"
}
},
defaultVariants: {
align: "horizontal"
}
}), q = t("", {
variants: {
align: {
horizontal: "w-full",
vertical: "relative flex flex-col py-2"
}
},
defaultVariants: {
align: "horizontal"
}
}), B = t("", {
variants: {
size: {
sm: "w-6 h-6 text-sm font-medium",
md: "w-8 h-8 text-base font-bold"
}
},
defaultVariants: {
size: "sm"
}
}), D = t("", {
variants: {
size: {
sm: "text-sm font-medium",
md: "text-base font-bold"
}
},
defaultVariants: {
size: "sm"
}
}), E = t(
"group-data-[state=completed]/step:bg-d-primary",
{
variants: {
align: {
horizontal: "absolute left-1/2 h-0.5",
vertical: "!w-0.5"
},
size: {
sm: "top-2.5 ml-2 w-[calc(100%-1rem)]",
md: "top-3.5 ml-4 w-[calc(100%-2rem)]"
}
},
compoundVariants: [
{
align: "vertical",
size: "sm",
class: "ml-2.5"
},
{
align: "vertical",
size: "md",
class: "ml-3.5"
}
],
defaultVariants: {
align: "horizontal",
size: "sm"
}
}
), F = t("flex flex-1", {
variants: {
align: {
horizontal: "justify-center",
vertical: "flex-grow"
}
},
defaultVariants: {
align: "horizontal"
}
}), G = t("flex flex-1 flex-col", {
variants: {
align: {
horizontal: "items-center",
vertical: ""
}
},
defaultVariants: {
align: "horizontal"
}
});
function L({
steps: i,
align: e = "horizontal",
size: n = "sm",
showSeparators: f = !0,
defaultStep: u,
allowStepNavigation: c = !0,
allowClickOnlyCompleted: d = !1,
onStepClick: p,
indicators: h,
id: v,
"data-testid": x,
...o
}) {
const g = (a, r) => {
if (p) {
p(a, r);
return;
}
c && !a.disabled && (!d || a.completed) && o.onValueChange?.(a.id);
}, z = o.value ?? u ?? i[0]?.id;
return /* @__PURE__ */ l(
V,
{
...o,
value: z,
orientation: e,
indicators: h,
children: /* @__PURE__ */ s(
"div",
{
id: v,
"data-testid": x,
className: k({ align: e }),
children: [
/* @__PURE__ */ l(S, { className: q({ align: e }), children: i.map((a, r) => {
const m = c && !a.disabled && (!d || a.completed);
return /* @__PURE__ */ s(
b,
{
step: a.id,
completed: a.completed,
disabled: a.disabled,
loading: a.loading,
className: W({ align: e }),
children: [
/* @__PURE__ */ s(
N,
{
className: A({ align: e }),
onClick: () => g(a, r),
style: { cursor: m ? "pointer" : "default" },
"data-testid": a["data-testid"],
children: [
/* @__PURE__ */ l(
w,
{
className: B({ size: n }),
children: a.id
}
),
/* @__PURE__ */ l(C, { className: D({ size: n }), children: a.label })
]
}
),
f && r < i.length - 1 && /* @__PURE__ */ l(
I,
{
className: E({ align: e, size: n })
}
)
]
},
a.id
);
}) }),
/* @__PURE__ */ l(T, { className: F({ align: e }), children: i.map((a) => /* @__PURE__ */ l(
j,
{
value: a.id,
className: G({ align: e }),
children: /* @__PURE__ */ l("div", { className: y({ align: e }), children: a.component })
},
a.id
)) })
]
}
)
}
);
}
export {
L as AppStepper,
L as default
};