@vllnt/ui 0.1.4 → 0.1.6

package/dist/components/command/command.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent, DialogTitle } from "../dialog/dialog";
+const Command = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  CommandPrimitive,
+  {
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ref: reference,
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+const CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Command Menu" }),
+    /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+  ] }) });
+};
+const CommandInput = React.forwardRef(({ className, ...props }, reference) => (
+  // eslint-disable-next-line react/no-unknown-property
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsx(
+      CommandPrimitive.Input,
+      {
+        className: cn(
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: reference,
+        ...props
+      }
+    )
+  ] })
+));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  CommandPrimitive.List,
+  {
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ref: reference,
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef((props, reference) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Empty,
+  {
+    className: "py-6 text-center text-sm",
+    ref: reference,
+    ...props
+  }
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Group,
+  {
+    className: cn(
+      "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ref: reference,
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Separator,
+  {
+    className: cn("-mx-1 h-px bg-border", className),
+    ref: reference,
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, disabled, ...props }, reference) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Item,
+  {
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:opacity-50",
+      disabled && "pointer-events-none",
+      className
+    ),
+    disabled,
+    ref: reference,
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};

package/dist/components/command/index.js

@@ -0,0 +1,22 @@
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+} from "./command";
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};

package/dist/components/comparison/comparison.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight, Check, Minus, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const variantConfig = {
+  bad: {
+    className: "border-red-500/30 bg-red-500/5",
+    headerClass: "bg-red-500/10 text-red-700 dark:text-red-300",
+    icon: X,
+    iconClass: "text-red-500"
+  },
+  good: {
+    className: "border-green-500/30 bg-green-500/5",
+    headerClass: "bg-green-500/10 text-green-700 dark:text-green-300",
+    icon: Check,
+    iconClass: "text-green-500"
+  },
+  neutral: {
+    className: "border-border bg-muted/30",
+    headerClass: "bg-muted text-muted-foreground",
+    icon: Minus,
+    iconClass: "text-muted-foreground"
+  }
+};
+function Comparison({ after, before, title }) {
+  const beforeConfig = variantConfig[before.variant || "bad"];
+  const afterConfig = variantConfig[after.variant || "good"];
+  const BeforeIcon = beforeConfig.icon;
+  const AfterIcon = afterConfig.icon;
+  return /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
+    title ? /* @__PURE__ */ jsx("h4", { className: "font-semibold mb-3", children: title }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", beforeConfig.className), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "px-4 py-2 rounded-t-lg font-medium text-sm",
+              beforeConfig.headerClass
+            ),
+            children: before.title
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(
+            BeforeIcon,
+            {
+              className: cn(
+                "h-4 w-4 mt-0.5 flex-shrink-0",
+                beforeConfig.iconClass
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: item })
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", afterConfig.className), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "px-4 py-2 rounded-t-lg font-medium text-sm",
+              afterConfig.headerClass
+            ),
+            children: after.title
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(
+            AfterIcon,
+            {
+              className: cn(
+                "h-4 w-4 mt-0.5 flex-shrink-0",
+                afterConfig.iconClass
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: item })
+        ] }, index)) })
+      ] })
+    ] })
+  ] });
+}
+function BeforeAfter({ after, before, title }) {
+  return /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
+    title ? /* @__PURE__ */ jsx("h4", { className: "font-semibold mb-3", children: title }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-500/30 bg-red-500/5 overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-red-500/10 text-red-700 dark:text-red-300 font-medium text-sm flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          "Before"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: before })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-6 w-6 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-green-500/30 bg-green-500/5 overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-green-500/10 text-green-700 dark:text-green-300 font-medium text-sm flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+          "After"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: after })
+      ] })
+    ] })
+  ] });
+}
+export {
+  BeforeAfter,
+  Comparison
+};

package/dist/components/comparison/index.js

@@ -0,0 +1,8 @@
+import {
+  BeforeAfter,
+  Comparison
+} from "./comparison";
+export {
+  BeforeAfter,
+  Comparison
+};

package/dist/components/completion-dialog/completion-dialog.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef } from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+function DialogContent({
+  cancelLabel = "Skip",
+  cancelShortcut = "S",
+  className,
+  closeIcon,
+  confirmLabel = "Done",
+  confirmShortcut = "D",
+  description,
+  onCancel,
+  onClose,
+  onConfirm,
+  title
+}) {
+  const confirmButtonRef = useRef(null);
+  useEffect(() => {
+    confirmButtonRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative z-10 w-full max-w-md mx-4 p-6 bg-background border border-border rounded-lg shadow-lg",
+        "animate-in fade-in-0 zoom-in-95 duration-200",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 transition-opacity",
+            onClick: onClose,
+            type: "button",
+            children: closeIcon ?? /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-4 w-4",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M6 18L18 6M6 6l12 12",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "completion-dialog-title", children: title }),
+          description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1.5", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { className: "flex-1 gap-2", onClick: onCancel, variant: "outline", children: [
+            /* @__PURE__ */ jsx("span", { children: cancelLabel }),
+            cancelShortcut ? /* @__PURE__ */ jsx("kbd", { className: "hidden md:inline-flex px-1.5 py-0.5 text-[10px] font-mono bg-muted rounded", children: cancelShortcut }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "flex-1 gap-2",
+              onClick: onConfirm,
+              ref: confirmButtonRef,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: confirmLabel }),
+                confirmShortcut ? /* @__PURE__ */ jsx("kbd", { className: "hidden md:inline-flex px-1.5 py-0.5 text-[10px] font-mono bg-primary-foreground/20 rounded", children: confirmShortcut }) : null
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CompletionDialogImpl({
+  cancelLabel,
+  cancelShortcut = "S",
+  className,
+  closeIcon,
+  confirmLabel,
+  confirmShortcut = "D",
+  description,
+  isOpen,
+  onCancel,
+  onClose,
+  onConfirm,
+  title
+}) {
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!isOpen) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+      if (event.key === "Enter" || event.key.toLowerCase() === confirmShortcut.toLowerCase()) {
+        event.preventDefault();
+        event.stopPropagation();
+        onConfirm();
+        return;
+      }
+      if (event.key.toLowerCase() === cancelShortcut.toLowerCase()) {
+        event.preventDefault();
+        event.stopPropagation();
+        onCancel();
+      }
+    },
+    [isOpen, onClose, onConfirm, onCancel, confirmShortcut, cancelShortcut]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [isOpen, handleKeyDown]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": "completion-dialog-title",
+      "aria-modal": "true",
+      className: "absolute inset-0 z-[100] flex items-center justify-center",
+      role: "dialog",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute inset-0 bg-background/80 backdrop-blur-sm",
+              "animate-in fade-in-0 duration-200"
+            ),
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DialogContent,
+          {
+            cancelLabel,
+            cancelShortcut,
+            className,
+            closeIcon,
+            confirmLabel,
+            confirmShortcut,
+            description,
+            onCancel,
+            onClose,
+            onConfirm,
+            title
+          }
+        )
+      ]
+    }
+  );
+}
+const CompletionDialog = memo(CompletionDialogImpl);
+CompletionDialog.displayName = "CompletionDialog";
+export {
+  CompletionDialog
+};

package/dist/components/completion-dialog/index.js

@@ -0,0 +1,6 @@
+import {
+  CompletionDialog
+} from "./completion-dialog";
+export {
+  CompletionDialog
+};

package/dist/components/content-intro/content-intro.js

@@ -0,0 +1,144 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect } from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+const DEFAULT_LABELS = {
+  continueLabel: "Continue Tutorial",
+  startLabel: "Start Tutorial",
+  tableOfContentsLabel: "Table of Contents"
+};
+function ContentIntroImpl({
+  additionalContent,
+  completedSections,
+  estimatedTime,
+  isLoading = false,
+  labels = {},
+  onGoToSection,
+  onStart,
+  renderIntroContent,
+  sections,
+  title
+}) {
+  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+  const hasProgress = completedSections.size > 0;
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onStart();
+      }
+    },
+    [onStart]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-500 pb-24", children: [
+      /* @__PURE__ */ jsxs("section", { className: "py-6", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
+        /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: renderIntroContent() })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-8 py-6 border-t border-border", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
+        /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: sections.map((section, index) => {
+          const isCompleted = !isLoading && completedSections.has(section.id);
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "w-full flex items-center gap-3 p-2 -m-2 rounded-lg hover:bg-muted/50 transition-colors text-left",
+              onClick: () => {
+                onGoToSection(index);
+              },
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
+                      isLoading && "animate-pulse bg-muted",
+                      !isLoading && isCompleted && "bg-foreground text-background",
+                      !isLoading && !isCompleted && "bg-muted"
+                    ),
+                    children: isCompleted ? /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "h-3 w-3",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M5 13l4 4L19 7",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2
+                          }
+                        )
+                      }
+                    ) : index + 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm",
+                      isCompleted && "line-through text-muted-foreground"
+                    ),
+                    children: section.title
+                  }
+                )
+              ]
+            }
+          ) }, `${section.id}-${index}`);
+        }) })
+      ] }),
+      additionalContent
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: hasProgress ? `${completedSections.size}/${sections.length} completed` : `${sections.length} sections \xB7 ${estimatedTime}` }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: "flex-1 sm:flex-none px-8 py-6 text-lg font-medium gap-2",
+          onClick: onStart,
+          size: "lg",
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-5 w-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M5 3l14 9-14 9V3z",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: hasProgress ? mergedLabels.continueLabel : mergedLabels.startLabel }),
+            /* @__PURE__ */ jsx("kbd", { className: "hidden md:inline-flex ml-1 px-1.5 py-0.5 text-xs font-mono bg-primary-foreground/20 rounded", children: "\u21B5" })
+          ]
+        }
+      )
+    ] }) }) })
+  ] });
+}
+const ContentIntro = memo(ContentIntroImpl);
+ContentIntro.displayName = "ContentIntro";
+export {
+  ContentIntro
+};

package/dist/components/content-intro/index.js

@@ -0,0 +1,6 @@
+import {
+  ContentIntro
+} from "./content-intro";
+export {
+  ContentIntro
+};