@contractspec/example.learning-journey-ui-gamified 1.56.1 → 1.58.0

package/dist/views/Steps.js

@@ -1,56 +1,158 @@
-'use client';
-
-import { FlashCard } from "../components/FlashCard.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+// @bun
+// src/components/FlashCard.tsx
+import { useState } from "react";
+import { Button } from "@contractspec/lib.design-system";
+import { Card, CardContent } from "@contractspec/lib.ui-kit-web/ui/card";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function FlashCard({
+  step,
+  isCompleted,
+  isCurrent,
+  onComplete
+}) {
+  const [isFlipped, setIsFlipped] = useState(false);
+  return /* @__PURE__ */ jsxDEV(Card, {
+    className: cn("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-primary ring-2", isCompleted && "opacity-60"),
+    onClick: () => !isCompleted && setIsFlipped(!isFlipped),
+    children: /* @__PURE__ */ jsxDEV(CardContent, {
+      className: "p-6",
+      children: [
+        /* @__PURE__ */ jsxDEV("div", {
+          className: cn("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
+          children: [
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "flex items-start justify-between",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "flex-1",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("h3", {
+                      className: "text-lg font-semibold",
+                      children: step.title
+                    }, undefined, false, undefined, this),
+                    step.description && /* @__PURE__ */ jsxDEV("p", {
+                      className: "text-muted-foreground mt-1 text-sm",
+                      children: step.description
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                step.xpReward && /* @__PURE__ */ jsxDEV("span", {
+                  className: "rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500",
+                  children: [
+                    "+",
+                    step.xpReward,
+                    " XP"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            isCompleted && /* @__PURE__ */ jsxDEV("div", {
+              className: "flex items-center gap-2 text-green-500",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  children: "\u2713"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "text-sm font-medium",
+                  children: "Completed"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            isCurrent && !isCompleted && /* @__PURE__ */ jsxDEV("p", {
+              className: "text-muted-foreground text-xs",
+              children: "Tap to reveal action"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        isFlipped && !isCompleted && /* @__PURE__ */ jsxDEV("div", {
+          className: "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6",
+          children: [
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "text-center text-sm",
+              children: step.instructions ?? "Complete this step to earn XP"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "flex gap-2",
+              children: [
+                /* @__PURE__ */ jsxDEV(Button, {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => setIsFlipped(false),
+                  children: "Back"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV(Button, {
+                  size: "sm",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onComplete?.();
+                  },
+                  children: "Mark Complete"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
 
-//#region src/views/Steps.tsx
+// src/views/Steps.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
 function Steps({ track, progress, onStepComplete }) {
-	const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "text-center",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-bold",
-					children: "Complete Your Challenges"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground",
-					children: "Tap each card to reveal the action, then mark as complete"
-				})]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "grid gap-4 md:grid-cols-2",
-				children: track.steps.map((step, index) => {
-					return /* @__PURE__ */ jsx(FlashCard, {
-						step,
-						isCompleted: progress.completedStepIds.includes(step.id),
-						isCurrent: index === currentStepIndex,
-						onComplete: () => onStepComplete?.(step.id)
-					}, step.id);
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground text-center text-sm",
-				children: [
-					progress.completedStepIds.length,
-					" of ",
-					track.steps.length,
-					" completed",
-					track.completionRewards?.xpBonus && /* @__PURE__ */ jsxs("span", {
-						className: "ml-2 text-green-500",
-						children: [
-							"(+",
-							track.completionRewards.xpBonus,
-							" XP bonus on completion)"
-						]
-					})
-				]
-			})
-		]
-	});
+  const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-xl font-bold",
+            children: "Complete Your Challenges"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Tap each card to reveal the action, then mark as complete"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: track.steps.map((step, index) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = index === currentStepIndex;
+          return /* @__PURE__ */ jsxDEV2(FlashCard, {
+            step,
+            isCompleted,
+            isCurrent,
+            onComplete: () => onStepComplete?.(step.id)
+          }, step.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "text-muted-foreground text-center text-sm",
+        children: [
+          progress.completedStepIds.length,
+          " of ",
+          track.steps.length,
+          " completed",
+          track.completionRewards?.xpBonus && /* @__PURE__ */ jsxDEV2("span", {
+            className: "ml-2 text-green-500",
+            children: [
+              "(+",
+              track.completionRewards.xpBonus,
+              " XP bonus on completion)"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-
-//#endregion
-export { Steps };
-//# sourceMappingURL=Steps.js.map
+export {
+  Steps
+};

package/dist/views/Timeline.d.ts

@@ -1,11 +1,3 @@
-import { LearningViewProps } from "@contractspec/example.learning-journey-ui-shared";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-
-//#region src/views/Timeline.d.ts
-declare function Timeline({
-  track,
-  progress
-}: LearningViewProps): react_jsx_runtime5.JSX.Element;
-//#endregion
-export { Timeline };
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+export declare function Timeline({ track, progress }: LearningViewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Timeline.d.ts.map

package/dist/views/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","names":[],"sources":["../../src/views/Timeline.tsx"],"sourcesContent":[],"mappings":";;;;iBAWgB,QAAA;;;GAA8B,oBAAiB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/views/Timeline.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAE1F,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAyL9D"}

package/dist/views/Timeline.js

@@ -1,133 +1,236 @@
-'use client';
-
-import { DayCalendar } from "../components/DayCalendar.js";
-import { Card, CardContent, CardHeader, CardTitle } from "@contractspec/lib.ui-kit-web/ui/card";
-import { jsx, jsxs } from "react/jsx-runtime";
+// @bun
+// src/components/DayCalendar.tsx
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function DayCalendar({
+  totalDays,
+  currentDay,
+  completedDays
+}) {
+  const days = Array.from({ length: totalDays }, (_, i) => i + 1);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "grid grid-cols-7 gap-2",
+    children: days.map((day) => {
+      const isCompleted = completedDays.includes(day);
+      const isCurrent = day === currentDay;
+      const isLocked = day > currentDay;
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: cn("flex h-12 w-12 flex-col items-center justify-center rounded-lg border text-sm font-medium transition-all", isCompleted && "border-green-500 bg-green-500/10 text-green-500", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50", isLocked && "border-muted bg-muted/50 text-muted-foreground", !isCompleted && !isCurrent && !isLocked && "border-border bg-card"),
+        children: isCompleted ? /* @__PURE__ */ jsxDEV("span", {
+          className: "text-lg",
+          children: "\u2713"
+        }, undefined, false, undefined, this) : isLocked ? /* @__PURE__ */ jsxDEV("span", {
+          className: "text-lg",
+          children: "\uD83D\uDD12"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV("span", {
+              className: "text-muted-foreground text-xs",
+              children: "Day"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("span", {
+              children: day
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, day, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
 
-//#region src/views/Timeline.tsx
+// src/views/Timeline.tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "@contractspec/lib.ui-kit-web/ui/card";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
 function Timeline({ track, progress }) {
-	if (track.steps.some((s) => s.availability?.unlockOnDay !== void 0)) {
-		const totalDays = Math.max(...track.steps.map((s) => s.availability?.unlockOnDay ?? 1), 7);
-		const completedDays = track.steps.filter((s) => progress.completedStepIds.includes(s.id)).map((s) => s.availability?.unlockOnDay ?? 1);
-		const currentDay = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.availability?.unlockOnDay ?? 1;
-		return /* @__PURE__ */ jsxs("div", {
-			className: "space-y-6",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "text-center",
-					children: [/* @__PURE__ */ jsx("h2", {
-						className: "text-xl font-bold",
-						children: track.name
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground",
-						children: "Complete each day's challenge to progress"
-					})]
-				}),
-				/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("span", { children: "📅" }), /* @__PURE__ */ jsx("span", { children: "Your Journey" })]
-				}) }), /* @__PURE__ */ jsx(CardContent, {
-					className: "flex justify-center",
-					children: /* @__PURE__ */ jsx(DayCalendar, {
-						totalDays,
-						currentDay,
-						completedDays
-					})
-				})] }),
-				/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("span", { children: "📝" }), /* @__PURE__ */ jsx("span", { children: "Daily Challenges" })]
-				}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
-					className: "space-y-3",
-					children: track.steps.map((step) => {
-						const day = step.availability?.unlockOnDay ?? 1;
-						const isCompleted = progress.completedStepIds.includes(step.id);
-						const isLocked = day > currentDay;
-						return /* @__PURE__ */ jsxs("div", {
-							className: `flex items-start gap-4 rounded-lg border p-4 ${isLocked ? "opacity-50" : ""}`,
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: "bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold",
-									children: isCompleted ? "✓" : isLocked ? "🔒" : day
-								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "flex-1",
-									children: [/* @__PURE__ */ jsx("h4", {
-										className: "font-semibold",
-										children: step.title
-									}), /* @__PURE__ */ jsx("p", {
-										className: "text-muted-foreground text-sm",
-										children: step.description
-									})]
-								}),
-								step.xpReward && /* @__PURE__ */ jsxs("span", {
-									className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
-									children: [
-										"+",
-										step.xpReward,
-										" XP"
-									]
-								})
-							]
-						}, step.id);
-					})
-				}) })] })
-			]
-		});
-	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "text-center",
-			children: [/* @__PURE__ */ jsx("h2", {
-				className: "text-xl font-bold",
-				children: "Learning Path"
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: "Follow the steps to master this skill"
-			})]
-		}), /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
-			className: "p-6",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 left-5 h-full w-0.5" }), /* @__PURE__ */ jsx("div", {
-					className: "space-y-6",
-					children: track.steps.map((step, index) => {
-						const isCompleted = progress.completedStepIds.includes(step.id);
-						const isCurrent = !isCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
-						return /* @__PURE__ */ jsxs("div", {
-							className: "relative flex gap-4 pl-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: `relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 ${isCompleted ? "border-green-500 bg-green-500 text-white" : isCurrent ? "border-violet-500 bg-violet-500 text-white" : "border-border bg-background"}`,
-								children: isCompleted ? "✓" : index + 1
-							}), /* @__PURE__ */ jsx("div", {
-								className: "flex-1 pb-4",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex items-start justify-between gap-2",
-									children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
-										className: `font-semibold ${isCompleted ? "text-foreground" : isCurrent ? "text-violet-500" : "text-muted-foreground"}`,
-										children: step.title
-									}), /* @__PURE__ */ jsx("p", {
-										className: "text-muted-foreground mt-1 text-sm",
-										children: step.description
-									})] }), step.xpReward && /* @__PURE__ */ jsxs("span", {
-										className: `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"
-										]
-									})]
-								})
-							})]
-						}, step.id);
-					})
-				})]
-			})
-		}) })]
-	});
+  const hasQuestDays = track.steps.some((s) => s.availability?.unlockOnDay !== undefined);
+  if (hasQuestDays) {
+    const totalDays = Math.max(...track.steps.map((s) => s.availability?.unlockOnDay ?? 1), 7);
+    const completedDays = track.steps.filter((s) => progress.completedStepIds.includes(s.id)).map((s) => s.availability?.unlockOnDay ?? 1);
+    const currentDay = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.availability?.unlockOnDay ?? 1;
+    return /* @__PURE__ */ jsxDEV2("div", {
+      className: "space-y-6",
+      children: [
+        /* @__PURE__ */ jsxDEV2("div", {
+          className: "text-center",
+          children: [
+            /* @__PURE__ */ jsxDEV2("h2", {
+              className: "text-xl font-bold",
+              children: track.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("p", {
+              className: "text-muted-foreground",
+              children: "Complete each day's challenge to progress"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Card, {
+          children: [
+            /* @__PURE__ */ jsxDEV2(CardHeader, {
+              children: /* @__PURE__ */ jsxDEV2(CardTitle, {
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "\uD83D\uDCC5"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "Your Journey"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(CardContent, {
+              className: "flex justify-center",
+              children: /* @__PURE__ */ jsxDEV2(DayCalendar, {
+                totalDays,
+                currentDay,
+                completedDays
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Card, {
+          children: [
+            /* @__PURE__ */ jsxDEV2(CardHeader, {
+              children: /* @__PURE__ */ jsxDEV2(CardTitle, {
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "\uD83D\uDCDD"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "Daily Challenges"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(CardContent, {
+              children: /* @__PURE__ */ jsxDEV2("div", {
+                className: "space-y-3",
+                children: track.steps.map((step) => {
+                  const day = step.availability?.unlockOnDay ?? 1;
+                  const isCompleted = progress.completedStepIds.includes(step.id);
+                  const isLocked = day > currentDay;
+                  return /* @__PURE__ */ jsxDEV2("div", {
+                    className: `flex items-start gap-4 rounded-lg border p-4 ${isLocked ? "opacity-50" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold",
+                        children: isCompleted ? "\u2713" : isLocked ? "\uD83D\uDD12" : day
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "flex-1",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("h4", {
+                            className: "font-semibold",
+                            children: step.title
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("p", {
+                            className: "text-muted-foreground text-sm",
+                            children: step.description
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      step.xpReward && /* @__PURE__ */ jsxDEV2("span", {
+                        className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
+                        children: [
+                          "+",
+                          step.xpReward,
+                          " XP"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, step.id, true, undefined, this);
+                })
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-xl font-bold",
+            children: "Learning Path"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Follow the steps to master this skill"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2(Card, {
+        children: /* @__PURE__ */ jsxDEV2(CardContent, {
+          className: "p-6",
+          children: /* @__PURE__ */ jsxDEV2("div", {
+            className: "relative",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-border absolute top-0 left-5 h-full w-0.5"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "space-y-6",
+                children: track.steps.map((step, index) => {
+                  const isCompleted = progress.completedStepIds.includes(step.id);
+                  const isCurrent = !isCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
+                  return /* @__PURE__ */ jsxDEV2("div", {
+                    className: "relative flex gap-4 pl-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: `relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 ${isCompleted ? "border-green-500 bg-green-500 text-white" : isCurrent ? "border-violet-500 bg-violet-500 text-white" : "border-border bg-background"}`,
+                        children: isCompleted ? "\u2713" : index + 1
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "flex-1 pb-4",
+                        children: /* @__PURE__ */ jsxDEV2("div", {
+                          className: "flex items-start justify-between gap-2",
+                          children: [
+                            /* @__PURE__ */ jsxDEV2("div", {
+                              children: [
+                                /* @__PURE__ */ jsxDEV2("h4", {
+                                  className: `font-semibold ${isCompleted ? "text-foreground" : isCurrent ? "text-violet-500" : "text-muted-foreground"}`,
+                                  children: step.title
+                                }, undefined, false, undefined, this),
+                                /* @__PURE__ */ jsxDEV2("p", {
+                                  className: "text-muted-foreground mt-1 text-sm",
+                                  children: step.description
+                                }, undefined, false, undefined, this)
+                              ]
+                            }, undefined, true, undefined, this),
+                            step.xpReward && /* @__PURE__ */ jsxDEV2("span", {
+                              className: `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"
+                              ]
+                            }, undefined, true, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, step.id, true, undefined, this);
+                })
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-
-//#endregion
-export { Timeline };
-//# sourceMappingURL=Timeline.js.map
+export {
+  Timeline
+};

package/dist/views/index.d.ts

@@ -1,5 +1,5 @@
-import { Overview } from "./Overview.js";
-import { Steps } from "./Steps.js";
-import { Progress } from "./Progress.js";
-import { Timeline } from "./Timeline.js";
-export { Overview, Progress, Steps, Timeline };
+export { Overview } from './Overview';
+export { Steps } from './Steps';
+export { Progress } from './Progress';
+export { Timeline } from './Timeline';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/views/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}