@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

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/document-sibling-nav/document-sibling-nav.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const navVariants = cva("grid w-full gap-3 text-sm sm:grid-cols-2", {
+  defaultVariants: {
+    variant: "with-title"
+  },
+  variants: {
+    variant: {
+      compact: "",
+      "with-meta": "",
+      "with-title": ""
+    }
+  }
+});
+const itemVariants = cva(
+  "group flex flex-col gap-1 rounded-lg border border-border bg-background p-4 text-foreground transition-colors hover:border-foreground/30 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    defaultVariants: {
+      side: "previous"
+    },
+    variants: {
+      side: {
+        next: "items-end text-right sm:col-start-2",
+        previous: "items-start text-left"
+      }
+    }
+  }
+);
+const DEFAULT_LABELS = {
+  navigation: "Document navigation",
+  next: "Newer",
+  previous: "Older"
+};
+function SiblingItem({
+  ariaLabel,
+  caption,
+  link,
+  side,
+  variant
+}) {
+  const { anchorProps, href, meta, title } = link;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      "aria-label": ariaLabel,
+      className: cn(itemVariants({ side })),
+      href,
+      ...anchorProps,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: caption }),
+        variant === "compact" ? null : /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm font-semibold text-foreground group-hover:underline", children: title }),
+        variant === "with-meta" && meta ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: meta }) : null
+      ]
+    }
+  );
+}
+function buildAriaLabel(caption, link, variant) {
+  if (variant === "compact" || typeof link.title !== "string") {
+    return caption;
+  }
+  return `${caption}: ${link.title}`;
+}
+const DocumentSiblingNav = forwardRef(({ className, labels, next, previous, variant, ...rest }, ref) => {
+  if (!previous && !next) return null;
+  const resolvedVariant = variant ?? "with-title";
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": resolvedLabels.navigation,
+      className: cn(navVariants({ variant: resolvedVariant }), className),
+      ref,
+      ...rest,
+      children: [
+        previous ? /* @__PURE__ */ jsx(
+          SiblingItem,
+          {
+            ariaLabel: buildAriaLabel(
+              resolvedLabels.previous,
+              previous,
+              resolvedVariant
+            ),
+            caption: resolvedLabels.previous,
+            link: previous,
+            side: "previous",
+            variant: resolvedVariant
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        next ? /* @__PURE__ */ jsx(
+          SiblingItem,
+          {
+            ariaLabel: buildAriaLabel(resolvedLabels.next, next, resolvedVariant),
+            caption: resolvedLabels.next,
+            link: next,
+            side: "next",
+            variant: resolvedVariant
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+DocumentSiblingNav.displayName = "DocumentSiblingNav";
+export {
+  DocumentSiblingNav,
+  navVariants as documentSiblingNavVariants
+};

package/dist/components/document-sibling-nav/index.js

@@ -0,0 +1,8 @@
+import {
+  DocumentSiblingNav,
+  documentSiblingNavVariants
+} from "./document-sibling-nav";
+export {
+  DocumentSiblingNav,
+  documentSiblingNavVariants
+};

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

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const emptyStateVariants = cva(
+  "flex flex-col items-center justify-center gap-3 text-center text-foreground",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "px-6 py-16",
+        md: "px-4 py-10",
+        sm: "px-3 py-6"
+      }
+    }
+  }
+);
+const titleVariants = cva("font-semibold tracking-tight", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "text-xl",
+      md: "text-lg",
+      sm: "text-base"
+    }
+  }
+});
+const descriptionVariants = cva("max-w-prose text-muted-foreground", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "text-base",
+      md: "text-sm",
+      sm: "text-xs"
+    }
+  }
+});
+const iconVariants = cva(
+  "mb-1 flex items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:h-1/2 [&_svg]:w-1/2",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "h-16 w-16",
+        md: "h-12 w-12",
+        sm: "h-8 w-8"
+      }
+    }
+  }
+);
+const EmptyState = forwardRef(
+  ({
+    children,
+    className,
+    description,
+    icon,
+    role: roleOverride,
+    size,
+    title,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(emptyStateVariants({ size }), className),
+        ref,
+        role: roleOverride ?? "status",
+        ...rest,
+        children: [
+          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(iconVariants({ size })), children: icon }) : null,
+          title ? /* @__PURE__ */ jsx("h3", { className: cn(titleVariants({ size })), children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: cn(descriptionVariants({ size })), children: description }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children }) : null
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+export {
+  EmptyState,
+  emptyStateVariants
+};

package/dist/components/empty-state/index.js

@@ -0,0 +1,8 @@
+import {
+  EmptyState,
+  emptyStateVariants
+} from "./empty-state";
+export {
+  EmptyState,
+  emptyStateVariants
+};