nextuiq
Version:
NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat
78 lines (75 loc) • 2.93 kB
JavaScript
import { j as jsxRuntimeExports } from './index46.mjs';
import { cn } from './index38.mjs';
function StepIndicator({
currentStep,
totalSteps,
completedSteps,
titles,
onStepClick
}) {
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-4 left-0 right-0 h-0.5 bg-[oklch(var(--theme-border))]" }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex justify-between", children: Array.from({ length: totalSteps }).map((_, index) => {
const isCompleted = completedSteps.includes(index);
const isCurrent = currentStep === index;
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"button",
{
onClick: () => onStepClick?.(index),
className: cn(
"flex flex-col items-center space-y-2",
"relative z-10 cursor-pointer"
),
disabled: !isCompleted && !isCurrent,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: cn(
"h-8 w-8 rounded-full",
"flex items-center justify-center",
"border-2 transition-colors",
isCompleted && "bg-[oklch(var(--theme-primary))] border-[oklch(var(--theme-primary))]",
isCurrent && "border-[oklch(var(--theme-primary))]",
!isCompleted && !isCurrent && "border-[oklch(var(--theme-border))] bg-[oklch(var(--theme-background))]"
),
children: isCompleted ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, { className: "h-4 w-4 text-[oklch(var(--theme-primary-foreground))]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(
"text-sm font-medium",
isCurrent && "text-[oklch(var(--theme-primary))]",
!isCurrent && "text-[oklch(var(--theme-muted-foreground))]"
), children: index + 1 })
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(
"text-sm font-medium",
(isCompleted || isCurrent) && "text-[oklch(var(--theme-foreground))]",
!isCompleted && !isCurrent && "text-[oklch(var(--theme-muted-foreground))]"
), children: titles[index] })
]
},
index
);
}) })
] });
}
function CheckIcon(props) {
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"svg",
{
...props,
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
strokeWidth: 3,
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M5 13l4 4L19 7"
}
)
}
);
}
export { StepIndicator };