@vllnt/ui 0.2.0 → 0.2.1-canary.73a93ee

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
+};

package/dist/components/data-list/data-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";

package/dist/components/edge-label/edge-label.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const emphasisClasses = {
+  active: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  subtle: "border-border/60 bg-background/90 text-muted-foreground"
+};
+const EdgeLabel = forwardRef(
+  ({ className, emphasis = "subtle", ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
+        emphasisClasses[emphasis],
+        className
+      ),
+      "data-emphasis": emphasis,
+      ref,
+      ...props
+    }
+  )
+);
+EdgeLabel.displayName = "EdgeLabel";
+export {
+  EdgeLabel
+};

package/dist/components/edge-label/index.js

@@ -0,0 +1,4 @@
+import { EdgeLabel } from "./edge-label";
+export {
+  EdgeLabel
+};