@vllnt/ui 0.2.1-canary.9c473e0 → 0.2.1-canary.9e6a7be

package/dist/components/checklist/checklist.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
+const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
 function ChecklistItemRow({
   isChecked,
   item,
@@ -133,6 +134,11 @@ function Checklist({
           `checklist:${persistKey}`,
           JSON.stringify([...newChecked])
         );
+        window.dispatchEvent(
+          new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
+            detail: { persistKey }
+          })
+        );
       } catch {
       }
     }
@@ -177,5 +183,6 @@ function Checklist({
   ] });
 }
 export {
+  CHECKLIST_PROGRESS_EVENT,
   Checklist
 };

package/dist/components/checklist/index.js

@@ -1,6 +1,8 @@
 import {
-  Checklist
+  Checklist,
+  CHECKLIST_PROGRESS_EVENT
 } from "./checklist";
 export {
+  CHECKLIST_PROGRESS_EVENT,
   Checklist
 };

package/dist/components/curriculum/curriculum.js

@@ -0,0 +1,349 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import {
+  BookOpen,
+  CheckCircle2,
+  ChevronDown,
+  Clock,
+  GraduationCap,
+  Link2,
+  Lock,
+  PlayCircle
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+const CurriculumContext = createContext(null);
+function useCurriculumContext() {
+  const ctx = useContext(CurriculumContext);
+  if (!ctx) {
+    throw new Error("CurriculumModule must be used within a Curriculum");
+  }
+  return ctx;
+}
+function summarizeLessonProgress(children) {
+  let completed = 0;
+  let total = 0;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (child.type === CurriculumLesson) {
+      total += 1;
+      if (child.props.status === "completed") {
+        completed += 1;
+      }
+      return;
+    }
+    const nested = summarizeLessonProgress(child.props.children);
+    total += nested.total;
+    completed += nested.completed;
+  });
+  return { completed, total };
+}
+function statusLabel(status) {
+  if (status === "completed") return "Completed";
+  if (status === "in-progress") return "In progress";
+  if (status === "locked") return "Locked";
+  return "Available";
+}
+function statusIcon(status) {
+  if (status === "completed") {
+    return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 flex-shrink-0 text-green-500" });
+  }
+  if (status === "in-progress") {
+    return /* @__PURE__ */ jsx(PlayCircle, { className: "h-4 w-4 flex-shrink-0 text-primary" });
+  }
+  if (status === "locked") {
+    return /* @__PURE__ */ jsx(Lock, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" });
+  }
+  return /* @__PURE__ */ jsx(BookOpen, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" });
+}
+const difficultyStyles = {
+  advanced: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  beginner: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  intermediate: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+};
+function ProgressBar({
+  completed,
+  progressPct,
+  total
+}) {
+  if (total === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 max-w-[120px] flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full rounded-full bg-primary transition-all",
+        style: { width: `${progressPct}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      completed,
+      "/",
+      total
+    ] })
+  ] });
+}
+function LessonMeta({
+  difficulty,
+  duration,
+  prerequisites
+}) {
+  const prerequisitesLabel = prerequisites?.length ? `Requires: ${prerequisites.join(", ")}` : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [
+    prerequisitesLabel ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-label": prerequisitesLabel,
+        className: "flex items-center gap-1 text-xs text-muted-foreground",
+        title: prerequisitesLabel,
+        children: /* @__PURE__ */ jsx(Link2, { "aria-hidden": "true", className: "h-3 w-3" })
+      }
+    ) : null,
+    difficulty ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "rounded px-1.5 py-0.5 text-xs font-medium capitalize",
+          difficultyStyles[difficulty]
+        ),
+        children: difficulty
+      }
+    ) : null,
+    duration ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+      duration
+    ] }) : null
+  ] });
+}
+function ModuleTrigger({
+  completed,
+  description,
+  estimatedHours,
+  id,
+  isExpanded,
+  progressPct,
+  title,
+  toggle,
+  total
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-controls": `module-content-${id}`,
+      "aria-expanded": isExpanded,
+      className: cn(
+        "w-full flex items-start justify-between gap-3 rounded-md px-6 py-4 text-left transition-colors",
+        "hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+        isExpanded && "bg-muted/30"
+      ),
+      onClick: toggle,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: title }),
+          description ? /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-xs text-muted-foreground", children: description }) : null,
+          /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              completed,
+              progressPct,
+              total
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-shrink-0 items-center gap-3", children: [
+          estimatedHours === void 0 ? null : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
+            estimatedHours,
+            "h"
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                isExpanded && "rotate-180"
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CurriculumRoot({
+  children,
+  className,
+  defaultExpandedModules,
+  title,
+  totalHours
+}) {
+  const [expandedModules, setExpandedModules] = useState(
+    () => new Set(defaultExpandedModules ?? [])
+  );
+  const toggleModule = useCallback((id) => {
+    setExpandedModules((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+  const contextValue = useMemo(
+    () => ({ expandedModules, toggleModule }),
+    [expandedModules, toggleModule]
+  );
+  return /* @__PURE__ */ jsx(CurriculumContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "my-6 rounded-lg border bg-card text-card-foreground shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-6 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(GraduationCap, { className: "h-5 w-5 text-primary" }),
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title })
+          ] }),
+          totalHours === void 0 ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              totalHours,
+              "h total"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { "aria-label": title, className: "divide-y", children })
+      ]
+    }
+  ) });
+}
+function CurriculumModule({
+  children,
+  className,
+  description,
+  estimatedHours,
+  id,
+  title
+}) {
+  const { expandedModules, toggleModule } = useCurriculumContext();
+  const isExpanded = expandedModules.has(id);
+  const { completed, total } = useMemo(
+    () => summarizeLessonProgress(children),
+    [children]
+  );
+  const progressPct = total > 0 ? Math.round(completed / total * 100) : 0;
+  return /* @__PURE__ */ jsxs("section", { className, children: [
+    /* @__PURE__ */ jsx(
+      ModuleTrigger,
+      {
+        completed,
+        description,
+        estimatedHours,
+        id,
+        isExpanded,
+        progressPct,
+        title,
+        toggle: () => {
+          toggleModule(id);
+        },
+        total
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": !isExpanded,
+        className: cn(
+          "overflow-hidden transition-all duration-200",
+          isExpanded ? "max-h-[9999px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        hidden: !isExpanded,
+        id: `module-content-${id}`,
+        children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/50 pb-2", children })
+      }
+    )
+  ] });
+}
+function CurriculumLesson({
+  className,
+  difficulty,
+  duration,
+  href,
+  prerequisites,
+  status = "available",
+  title
+}) {
+  const isLocked = status === "locked";
+  const inner = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": isLocked || void 0,
+      className: cn(
+        "flex items-center gap-3 px-6 py-3 pl-10 text-sm transition-colors",
+        isLocked ? "cursor-not-allowed opacity-60" : "",
+        !isLocked && href ? "cursor-pointer hover:bg-muted/40" : "",
+        className
+      ),
+      children: [
+        statusIcon(status),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel(status) }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "min-w-0 flex-1 truncate",
+              status === "completed" && "text-muted-foreground line-through",
+              status === "in-progress" && "font-medium"
+            ),
+            children: [
+              title,
+              isLocked ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (Locked)" }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LessonMeta,
+          {
+            difficulty,
+            duration,
+            prerequisites
+          }
+        )
+      ]
+    }
+  );
+  if (href && !isLocked) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "block rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+        href,
+        children: inner
+      }
+    );
+  }
+  return inner;
+}
+const Curriculum = Object.assign(CurriculumRoot, {
+  Lesson: CurriculumLesson,
+  Module: CurriculumModule
+});
+export {
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule
+};

package/dist/components/curriculum/index.js

@@ -0,0 +1,10 @@
+import {
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule
+} from "./curriculum";
+export {
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule
+};