@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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/cursor/cursor.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePointerPosition() {
+  const [point, setPoint] = React.useState();
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const onMove = (event) => {
+      setPoint({ x: event.clientX, y: event.clientY });
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+    };
+  }, []);
+  return point;
+}
+const Cursor = React.forwardRef(
+  ({ className, size = 24, style, ...props }, ref) => {
+    const point = usePointerPosition();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none fixed left-0 top-0 z-50 -translate-x-1/2 -translate-y-1/2 rounded-full border border-foreground bg-foreground/20 backdrop-invert transition-transform duration-100 ease-out motion-reduce:transition-none",
+          point ? "opacity-100" : "opacity-0",
+          className
+        ),
+        ref,
+        style: {
+          height: `${size}px`,
+          transform: point ? `translate(${point.x}px, ${point.y}px) translate(-50%, -50%)` : void 0,
+          width: `${size}px`,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Cursor.displayName = "Cursor";
+export {
+  Cursor
+};

package/dist/components/cursor/index.js

@@ -0,0 +1,4 @@
+import { Cursor } from "./cursor";
+export {
+  Cursor
+};

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,16 +11,16 @@ import {
 } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
-import { Checkbox } from "../checkbox";
-import { Input } from "../input";
+import { Button } from "../button/button";
+import { Checkbox } from "../checkbox/checkbox";
+import { Input } from "../input/input";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "../select";
+} from "../select/select";
 import {
   Table,
   TableBody,
@@ -28,16 +28,17 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "../table";
+} from "../table/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-field/date-field.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarDays } from "lucide-react";
+import { cn } from "../../lib/utils";
+const DateField = React.forwardRef(
+  ({ className, defaultValue = "", onValueChange, value, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = value ?? internalValue;
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(CalendarDays, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background py-2 pl-9 pr-3 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&::-webkit-calendar-picker-indicator]:opacity-60",
+            className
+          ),
+          onChange: (event) => {
+            if (value === void 0) {
+              setInternalValue(event.target.value);
+            }
+            onValueChange?.(event.target.value);
+          },
+          ref,
+          type: "date",
+          value: currentValue
+        }
+      )
+    ] });
+  }
+);
+DateField.displayName = "DateField";
+export {
+  DateField
+};

package/dist/components/date-field/index.js

@@ -0,0 +1,4 @@
+import { DateField } from "./date-field";
+export {
+  DateField
+};

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

@@ -3,9 +3,9 @@ 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 { Calendar } from "../calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Button } from "../button/button";
+import { Calendar } from "../calendar/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
 const defaultDateFormatter = new Intl.DateTimeFormat("en-US", {
   day: "numeric",
   month: "long",
@@ -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/date-range-picker/date-range-picker.js

@@ -0,0 +1,74 @@
+"use client";
+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/button";
+import { Calendar } from "../calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+const rangeFormatter = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+function formatRange(range) {
+  if (!range?.from) {
+    return void 0;
+  }
+  if (!range.to) {
+    return rangeFormatter.format(range.from);
+  }
+  return `${rangeFormatter.format(range.from)} \u2013 ${rangeFormatter.format(range.to)}`;
+}
+const DateRangePicker = React.forwardRef(
+  ({
+    buttonClassName,
+    className,
+    defaultValue,
+    numberOfMonths = 2,
+    onValueChange,
+    placeholder = "Pick a date range",
+    value
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const selected = value ?? internalValue;
+    const label = formatRange(selected);
+    const handleSelect = (range) => {
+      if (value === void 0) {
+        setInternalValue(range);
+      }
+      onValueChange?.(range);
+    };
+    return /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: cn(
+            "w-full justify-start text-left font-normal",
+            !label && "text-muted-foreground",
+            buttonClassName
+          ),
+          ref,
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }),
+            label ?? placeholder
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn("w-auto p-0", className), children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "range",
+          numberOfMonths,
+          onSelect: handleSelect,
+          selected
+        }
+      ) })
+    ] });
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+export {
+  DateRangePicker
+};

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

@@ -0,0 +1,6 @@
+import {
+  DateRangePicker
+} from "./date-range-picker";
+export {
+  DateRangePicker
+};

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" })
         ] })
       ]