@lssm/example.learning-journey-ui-onboarding 0.0.0-canary-20251216035145 → 0.0.0-canary-20251216062412

package/dist/JourneyMap-C6APUTsI.mjs

@@ -1,120 +0,0 @@
-import { useState } from "react";
-import { Button } from "@lssm/lib.design-system";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
-
-//#region src/components/StepChecklist.tsx
-function StepChecklist({ step, stepNumber, isCompleted, isCurrent, isExpanded, onToggle, onComplete }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "flex w-full items-center gap-4 p-4 text-left",
-			onClick: onToggle,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
-					children: isCompleted ? "✓" : stepNumber
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
-						children: step.title
-					}), !isExpanded && step.description && /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground truncate text-sm",
-						children: step.description
-					})]
-				}),
-				step.xpReward && /* @__PURE__ */ jsxs("span", {
-					className: cn("shrink-0 rounded-full px-2 py-1 text-xs font-semibold", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
-					children: [
-						"+",
-						step.xpReward,
-						" XP"
-					]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
-					children: "▼"
-				})
-			]
-		}), isExpanded && /* @__PURE__ */ jsxs("div", {
-			className: "border-t px-4 py-4",
-			children: [
-				step.description && /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mb-4",
-					children: step.description
-				}),
-				step.instructions && /* @__PURE__ */ jsxs("div", {
-					className: "bg-muted mb-4 rounded-lg p-4",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "mb-2 text-sm font-medium",
-						children: "Instructions:"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-sm",
-						children: step.instructions
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap gap-2",
-					children: [step.actionUrl && /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => window.open(step.actionUrl, "_blank"),
-						children: step.actionLabel ?? "Try it"
-					}), !isCompleted && /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						onClick: onComplete,
-						children: "Mark as Complete"
-					})]
-				})
-			]
-		})]
-	});
-}
-
-//#endregion
-//#region src/components/JourneyMap.tsx
-const SURFACE_ICONS = {
-	templates: "📋",
-	"spec-editor": "✏️",
-	regenerator: "🔄",
-	playground: "🎮",
-	evolution: "🤖",
-	dashboard: "📊",
-	settings: "⚙️",
-	default: "📍"
-};
-function JourneyMap({ steps, completedStepIds, currentStepId }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative overflow-x-auto pb-4",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-max items-center gap-2",
-			children: steps.map((step, index) => {
-				const isCompleted = completedStepIds.includes(step.id);
-				const isCurrent = step.id === currentStepId;
-				const icon = SURFACE_ICONS[step.metadata?.surface ?? "default"] ?? SURFACE_ICONS.default;
-				return /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col items-center gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: cn("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all", isCompleted && "border-green-500 bg-green-500/10", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20", !isCompleted && !isCurrent && "border-muted bg-muted/50"),
-							children: isCompleted ? "✓" : icon
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-center",
-							children: /* @__PURE__ */ jsx("p", {
-								className: cn("max-w-[100px] truncate text-xs font-medium", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
-								children: step.title
-							})
-						})]
-					}), index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn("mx-2 h-1 w-8 rounded-full transition-colors", completedStepIds.includes(steps[index + 1]?.id ?? "") ? "bg-green-500" : isCompleted ? "bg-green-500/50" : "bg-muted") })]
-				}, step.id);
-			})
-		})
-	});
-}
-
-//#endregion
-export { StepChecklist as n, JourneyMap as t };