@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/components/copy-button/copy-button.js

@@ -0,0 +1,189 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../tooltip/tooltip";
+const FALLBACK_TIMEOUT_MS = 2e3;
+function useCopyToClipboard(options = {}) {
+  const { timeout = FALLBACK_TIMEOUT_MS } = options;
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== void 0) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const reset = useCallback(() => {
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    setCopied(false);
+  }, []);
+  const copy = useCallback(
+    async (value) => {
+      try {
+        if (typeof navigator === "undefined" || typeof navigator.clipboard?.writeText !== "function") {
+          return false;
+        }
+        await navigator.clipboard.writeText(value);
+        if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+        setCopied(true);
+        timerRef.current = setTimeout(() => {
+          setCopied(false);
+        }, timeout);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [timeout]
+  );
+  return { copied, copy, reset };
+}
+function CopyIcon({
+  className,
+  copied,
+  size
+}) {
+  const Icon = copied ? Check : Copy;
+  const sizeClass = size === "xs" ? "size-3" : "size-4";
+  return /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn(sizeClass, className) });
+}
+const ButtonTrigger = forwardRef(
+  ({
+    accessibleLabel,
+    className,
+    copied,
+    copiedText,
+    iconClassName,
+    label = "Copy",
+    onClick: _onClick,
+    onClickHandler,
+    value: _value,
+    variant = "icon",
+    ...rest
+  }, ref) => {
+    if (variant === "button") {
+      return /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "aria-label": accessibleLabel,
+          className: cn(className),
+          onClick: onClickHandler,
+          ref,
+          size: "sm",
+          type: "button",
+          variant: "outline",
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "sm" }),
+            /* @__PURE__ */ jsx("span", { children: copied ? copiedText : label })
+          ]
+        }
+      );
+    }
+    if (variant === "inline") {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": accessibleLabel,
+          className: cn(
+            "size-6 align-middle text-muted-foreground hover:text-foreground",
+            className
+          ),
+          onClick: onClickHandler,
+          ref,
+          size: "icon",
+          type: "button",
+          variant: "ghost",
+          ...rest,
+          children: /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "xs" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": accessibleLabel,
+        className: cn("size-8", className),
+        onClick: onClickHandler,
+        ref,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        ...rest,
+        children: /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "sm" })
+      }
+    );
+  }
+);
+ButtonTrigger.displayName = "CopyButton.Trigger";
+const CopyButton = forwardRef(
+  ({
+    "aria-label": ariaLabelOverride,
+    copiedLabel = "Copied!",
+    label = "Copy",
+    onClick,
+    showTooltip = true,
+    timeout = FALLBACK_TIMEOUT_MS,
+    value,
+    ...rest
+  }, ref) => {
+    const { copied, copy } = useCopyToClipboard({ timeout });
+    const handleClick = useCallback(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        void copy(value);
+      },
+      [copy, onClick, value]
+    );
+    const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
+    const tooltipText = copied ? copiedLabel : label;
+    const trigger = /* @__PURE__ */ jsx(
+      ButtonTrigger,
+      {
+        ...rest,
+        accessibleLabel,
+        copied,
+        copiedText: copiedLabel,
+        label,
+        onClickHandler: handleClick,
+        ref,
+        value
+      }
+    );
+    const liveRegion = /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: copied ? copiedLabel : "" });
+    if (!showTooltip) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        trigger,
+        liveRegion
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText })
+      ] }),
+      liveRegion
+    ] });
+  }
+);
+CopyButton.displayName = "CopyButton";
+export {
+  CopyButton,
+  useCopyToClipboard
+};

package/dist/components/copy-button/index.js

@@ -0,0 +1,8 @@
+import {
+  CopyButton,
+  useCopyToClipboard
+} from "./copy-button";
+export {
+  CopyButton,
+  useCopyToClipboard
+};

package/dist/components/countdown-timer/countdown-timer.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
@@ -73,14 +73,15 @@ function formatSegments(milliseconds) {
     { label: "Seconds", value: String(seconds).padStart(2, "0") }
   ];
 }
+const DEADLINE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  month: "short",
+  timeZoneName: "short"
+});
 function formatDeadline(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short"
-  }).format(date);
+  return DEADLINE_FORMATTER.format(date);
 }
 function getProgress(deadline, now, startedAt) {
   if (!startedAt) {

package/dist/components/credit-badge/credit-badge.js

@@ -40,13 +40,7 @@ const CreditBadge = React.forwardRef(
         ref: reference,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "h-1.5 w-1.5 rounded-full bg-current"
-            }
-          ),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
           /* @__PURE__ */ jsx("span", { children: amount ? `${amount} \u2022 ${label ?? getStatusLabel(status)}` : label ?? getStatusLabel(status) })
         ]
       }

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: "size-4 flex-shrink-0 text-green-500" });
+  }
+  if (status === "in-progress") {
+    return /* @__PURE__ */ jsx(PlayCircle, { className: "size-4 flex-shrink-0 text-primary" });
+  }
+  if (status === "locked") {
+    return /* @__PURE__ */ jsx(Lock, { className: "size-4 flex-shrink-0 text-muted-foreground" });
+  }
+  return /* @__PURE__ */ jsx(BookOpen, { className: "size-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: "size-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: "size-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: "size-3.5" }),
+            estimatedHours,
+            "h"
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "size-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: "size-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: "size-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";
@@ -17,7 +18,7 @@ const dataListVariants = cva(
   }
 );
 const dataListItemVariants = cva(
-  "grid gap-1 px-4 py-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5",
+  "grid gap-1 p-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5",
   {
     defaultVariants: {
       density: "default"

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

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Checkbox } from "../checkbox";
 import { Input } from "../input";
 import {
@@ -31,13 +31,14 @@ import {
 } from "../table";
 function SortIcon({ direction }) {
   if (direction === "asc") {
-    return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" });
   }
-  return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4" });
 }
+const EMPTY_FILTERABLE_COLUMNS = [];
 function DataTableComponent({
   caption,
   className,
@@ -47,7 +48,7 @@ function DataTableComponent({
   enableFiltering = true,
   enablePagination = true,
   enableSelection = false,
-  filterableColumns = [],
+  filterableColumns = EMPTY_FILTERABLE_COLUMNS,
   getRowId,
   pageSize = 10,
   searchPlaceholder = "Search rows...",

package/dist/components/date-picker/date-picker.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { Calendar } from "../calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 const defaultDateFormatter = new Intl.DateTimeFormat("en-US", {
@@ -25,11 +25,6 @@ const DatePicker = React.forwardRef(
       value
     );
     const selectedDate = value ?? internalValue;
-    React.useEffect(() => {
-      if (value !== void 0) {
-        setInternalValue(value);
-      }
-    }, [value]);
     const handleSelect = (nextDate) => {
       if (value === void 0) {
         setInternalValue(nextDate);
@@ -51,7 +46,7 @@ const DatePicker = React.forwardRef(
           ref: reference,
           variant: "outline",
           children: [
-            /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }),
             selectedDate ? defaultDateFormatter.format(selectedDate) : placeholder
           ]
         }

package/dist/components/dialog/dialog.js

@@ -34,7 +34,7 @@ const DialogContent = React.forwardRef(({ children, className, ...props }, refer
       children: [
         children,
         /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]