@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/navigation-menu/navigation-menu.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+const NavigationMenu = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  NavigationMenuPrimitive.Root,
+  {
+    className: cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+    ]
+  }
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+const NavigationMenuList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.List,
+  {
+    className: cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+);
+const NavigationMenuTrigger = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  NavigationMenuPrimitive.Trigger,
+  {
+    className: cn(navigationMenuTriggerStyle(), "group", className),
+    ref,
+    ...props,
+    children: [
+      children,
+      " ",
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+        }
+      )
+    ]
+  }
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+const NavigationMenuContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Content,
+  {
+    className: cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+const NavigationMenuViewport = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Viewport,
+  {
+    className: cn(
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      className
+    ),
+    ref,
+    ...props
+  }
+) }));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+const NavigationMenuIndicator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Indicator,
+  {
+    className: cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+  }
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle
+};

package/dist/components/pagination/index.js

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

package/dist/components/pagination/pagination.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Button } from "../button/button";
+function Pagination({
+  baseUrl,
+  className,
+  currentPage,
+  totalPages
+}) {
+  if (totalPages <= 1) return null;
+  const maxVisiblePages = 5;
+  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+  const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+  if (endPage - startPage + 1 < maxVisiblePages) {
+    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+  }
+  const previousButton = currentPage > 1 ? /* @__PURE__ */ jsx(Link, { href: `${baseUrl}?page=${currentPage - 1}`, children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u2039" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous" })
+  ] }) }, "prev") : null;
+  const pageNumbers = Array.from(
+    { length: endPage - startPage + 1 },
+    (_, index) => {
+      const pageNumber = startPage + index;
+      return /* @__PURE__ */ jsx(Link, { href: `${baseUrl}?page=${pageNumber}`, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: pageNumber === currentPage ? "default" : "outline",
+          children: pageNumber
+        }
+      ) }, pageNumber);
+    }
+  );
+  const nextButton = currentPage < totalPages ? /* @__PURE__ */ jsx(Link, { href: `${baseUrl}?page=${currentPage + 1}`, children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", children: [
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next" }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u203A" })
+  ] }) }, "next") : null;
+  const pages = [previousButton, ...pageNumbers, nextButton].filter(Boolean);
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center gap-2 ${className}`, children: pages });
+}
+export {
+  Pagination
+};

package/dist/components/popover/index.js

@@ -0,0 +1,12 @@
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger
+} from "./popover";
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger
+};

package/dist/components/popover/popover.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../lib/utils";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    align,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger
+};

package/dist/components/pro-tip/index.js

@@ -0,0 +1,8 @@
+import {
+  CommonMistake,
+  ProTip
+} from "./pro-tip";
+export {
+  CommonMistake,
+  ProTip
+};

package/dist/components/pro-tip/pro-tip.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const variantStyles = {
+  advanced: {
+    className: "border-purple-500/50 bg-purple-500/10 text-purple-700 dark:text-purple-300",
+    defaultTitle: "Advanced"
+  },
+  "best-practice": {
+    className: "border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+    defaultTitle: "Best Practice"
+  },
+  expert: {
+    className: "border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    defaultTitle: "Expert Tip"
+  },
+  gotcha: {
+    className: "border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300",
+    defaultTitle: "Common Gotcha"
+  },
+  performance: {
+    className: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-300",
+    defaultTitle: "Performance"
+  },
+  tip: {
+    className: "border-primary/50 bg-primary/10 text-primary",
+    defaultTitle: "Pro Tip"
+  }
+};
+function ProTip({
+  children,
+  className,
+  icon,
+  title,
+  variant = "tip"
+}) {
+  const config = variantStyles[variant];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("my-6 rounded-lg border p-4", config.className, className),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-current/10 flex-shrink-0", children: icon ? /* @__PURE__ */ jsx("span", { className: "h-4 w-4", children: icon }) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-4 w-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-sm mb-1", children: title || config.defaultTitle }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm [&>p]:mb-0 opacity-90", children })
+        ] })
+      ] })
+    }
+  );
+}
+function CommonMistake({
+  children,
+  className,
+  fix,
+  fixIcon,
+  icon,
+  title = "Common Mistake"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "my-6 rounded-lg border border-red-500/50 bg-red-500/5 overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 text-red-500 flex-shrink-0 mt-0.5", children: icon }) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-5 w-5 text-red-500 flex-shrink-0 mt-0.5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-sm text-red-700 dark:text-red-300 mb-1", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-0", children })
+          ] })
+        ] }) }),
+        fix ? /* @__PURE__ */ jsx("div", { className: "border-t border-red-500/30 bg-green-500/5 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          fixIcon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5", children: fixIcon }) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-sm text-green-700 dark:text-green-300 mb-1", children: "The Fix" }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-0", children: fix })
+          ] })
+        ] }) }) : null
+      ]
+    }
+  );
+}
+export {
+  CommonMistake,
+  ProTip
+};

package/dist/components/profile-section/index.js

@@ -0,0 +1,4 @@
+import { ProfileSection } from "./profile-section";
+export {
+  ProfileSection
+};

package/dist/components/profile-section/profile-section.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "../button/button";
+function ProfileSection({
+  compact = false,
+  dict,
+  imageAlt,
+  imageSource = "/profile.png",
+  socialLinks
+}) {
+  const displayImageAlt = imageAlt ?? `${dict.profile.name} Profile`;
+  const showImage = !compact && Boolean(imageSource);
+  const showSocialLinks = !compact && Boolean(socialLinks && socialLinks.length > 0);
+  return /* @__PURE__ */ jsxs("div", { className: "text-center space-y-4", children: [
+    showImage ? /* @__PURE__ */ jsx("div", { className: "relative w-24 h-24 mx-auto overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
+      Image,
+      {
+        alt: displayImageAlt,
+        className: "w-full h-full object-cover rounded-md",
+        height: 96,
+        priority: true,
+        src: imageSource,
+        width: 96
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: `font-semibold ${compact ? "text-lg" : "text-xl"}`, children: dict.profile.name }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: compact ? dict.profile.tagline : `> ${dict.profile.tagline}` })
+    ] }),
+    showSocialLinks ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center items-center gap-2", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: link.href,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: /* @__PURE__ */ jsx(Button, { className: "w-32", size: "sm", variant: "outline", children: link.label })
+      },
+      link.href
+    )) }) : null
+  ] });
+}
+export {
+  ProfileSection
+};

package/dist/components/progress-bar/index.js

@@ -0,0 +1,4 @@
+import { ProgressBar } from "./progress-bar";
+export {
+  ProgressBar
+};

package/dist/components/progress-bar/progress-bar.js

@@ -0,0 +1,56 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function ProgressBar({
+  className,
+  completedLabel,
+  currentLabel,
+  isComplete = false,
+  isLoading = false,
+  max,
+  showLabels = true,
+  value
+}) {
+  const percent = max > 0 ? Math.round(value / max * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border rounded-lg p-4 transition-colors",
+        isLoading && "border-border bg-muted/30",
+        !isLoading && isComplete && "border-green-500/50 bg-green-500/5",
+        !isLoading && !isComplete && "border-border bg-muted/30",
+        className
+      ),
+      children: [
+        showLabels ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2 h-5", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "h-5 w-16 bg-muted rounded animate-pulse" }),
+          /* @__PURE__ */ jsx("span", { className: "h-5 w-24 bg-muted rounded animate-pulse" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-5", children: currentLabel ?? (isComplete ? "Complete" : "Progress") }),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground leading-5", children: [
+            value,
+            " / ",
+            max,
+            " ",
+            completedLabel ?? ""
+          ] })
+        ] }) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full transition-all duration-300",
+              isLoading && "w-0",
+              !isLoading && isComplete && "bg-green-500",
+              !isLoading && !isComplete && "bg-primary"
+            ),
+            style: isLoading ? void 0 : { width: `${percent}%` }
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  ProgressBar
+};

package/dist/components/progress-card/index.js

@@ -0,0 +1,6 @@
+import {
+  ContentCard
+} from "./progress-card";
+export {
+  ContentCard as ProgressCard
+};

package/dist/components/progress-card/progress-card.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import { useMounted } from "../../lib/use-mounted";
+import { Badge } from "../badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+function DefaultLink({
+  children,
+  className,
+  href
+}) {
+  return /* @__PURE__ */ jsx("a", { className, href, children });
+}
+function ContentCardImpl({
+  badgeLabel,
+  badgeVariant = "default",
+  description,
+  getProgress,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  metadata = [],
+  progressLabel = "completed",
+  tags = [],
+  title
+}) {
+  const [progress, setProgress] = useState(null);
+  const isHydrated = useMounted();
+  useEffect(() => {
+    if (getProgress) {
+      const result = getProgress();
+      requestAnimationFrame(() => {
+        setProgress(result);
+      });
+    }
+  }, [getProgress]);
+  const showProgress = isHydrated && progress && progress.completedCount > 0;
+  return /* @__PURE__ */ jsx(LinkComponent, { className: "block h-full", href, children: /* @__PURE__ */ jsxs(Card, { className: "h-full flex flex-col hover:shadow-lg transition-shadow cursor-pointer", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx(Badge, { className: "text-xs capitalize", variant: badgeVariant, children: badgeLabel }),
+        showProgress ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          progress.completedCount,
+          "/",
+          progress.totalSections,
+          " ",
+          progressLabel
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "line-clamp-2 text-lg", children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { className: "line-clamp-3", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "mt-auto space-y-2", children: [
+      metadata.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: metadata.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+        index > 0 ? /* @__PURE__ */ jsx("span", { className: "mr-2", children: "\u2022" }) : null,
+        item
+      ] }, index)) }) : null,
+      tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: tag }, tag)) }) : null
+    ] })
+  ] }) });
+}
+const ContentCard = memo(ContentCardImpl);
+ContentCard.displayName = "ContentCard";
+export {
+  ContentCard
+};

package/dist/components/quiz/index.js

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