@vllnt/ui 0.1.3 → 0.1.6

package/dist/components/tutorial-mdx/tutorial-mdx.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { lazy, memo, Suspense, use, useMemo } from "react";
+import { evaluate } from "@mdx-js/mdx";
+import * as runtime from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import { cn } from "../../lib/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "../accordion";
+import { Callout } from "../callout";
+import { Checklist } from "../checklist";
+import { CodePlayground, FileTree } from "../code-playground";
+import { BeforeAfter, Comparison } from "../comparison";
+import { Exercise } from "../exercise";
+import { FAQ, FAQItem } from "../faq";
+import { Glossary, KeyConcept } from "../key-concept";
+import {
+  LearningObjectives,
+  Prerequisites,
+  Summary
+} from "../learning-objectives";
+import { CommonMistake, ProTip } from "../pro-tip";
+import { Quiz } from "../quiz";
+import { Step, StepByStep } from "../step-by-step";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import { SimpleTerminal, Terminal } from "../terminal";
+import { VideoEmbed } from "../video-embed";
+const LazyFlowDiagram = lazy(
+  () => import("../flow-diagram").then((module_) => ({
+    default: module_.FlowDiagram
+  }))
+);
+function FlowDiagramWithSuspense(props) {
+  return /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": "Loading diagram...",
+          className: "h-96 bg-muted animate-pulse rounded-lg"
+        }
+      ),
+      children: /* @__PURE__ */ jsx(LazyFlowDiagram, { ...props })
+    }
+  );
+}
+const mdxComponents = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  BeforeAfter,
+  Callout,
+  Checklist,
+  CodePlayground,
+  CommonMistake,
+  Comparison,
+  Exercise,
+  FAQ,
+  FAQItem,
+  FileTree,
+  FlowDiagram: FlowDiagramWithSuspense,
+  Glossary,
+  KeyConcept,
+  LearningObjectives,
+  Prerequisites,
+  ProTip,
+  Quiz,
+  SimpleTerminal,
+  Step,
+  StepByStep,
+  Summary,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Terminal,
+  VideoEmbed
+};
+const markdownComponents = {
+  a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "text-primary underline underline-offset-4 hover:text-primary/80 font-medium",
+      href,
+      ...props,
+      children
+    }
+  ),
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      ...props,
+      children
+    }
+  ),
+  code: ({ children, className, ...props }) => {
+    const isBlock = className?.includes("language-");
+    if (isBlock) {
+      return /* @__PURE__ */ jsx("code", { className: cn("font-mono text-sm", className), ...props, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: "bg-muted px-1.5 py-0.5 rounded text-sm font-mono",
+        ...props,
+        children
+      }
+    );
+  },
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-base font-bold mt-3 mb-2", ...props, children }),
+  hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
+  li: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: "mb-2 leading-relaxed text-muted-foreground text-sm pl-2",
+      ...props,
+      children
+    }
+  ),
+  ol: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: "list-decimal list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm",
+      ...props,
+      children
+    }
+  ),
+  p: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "mb-4 leading-relaxed text-muted-foreground text-sm",
+      ...props,
+      children
+    }
+  ),
+  pre: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "pre",
+    {
+      className: "bg-zinc-950 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 border border-zinc-800 shadow-lg font-mono text-sm",
+      ...props,
+      children
+    }
+  ),
+  strong: ({ children, ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold text-foreground", ...props, children }),
+  table: ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-6 overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "w-full border-collapse border border-border", ...props, children }) }),
+  td: ({ children, ...props }) => /* @__PURE__ */ jsx("td", { className: "border border-border p-2 text-sm", ...props, children }),
+  th: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: "border border-border bg-muted p-2 text-left font-medium text-sm",
+      ...props,
+      children
+    }
+  ),
+  ul: ({ children, ...props }) => /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "list-disc list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm",
+      ...props,
+      children
+    }
+  )
+};
+const allComponents = {
+  ...markdownComponents,
+  ...mdxComponents
+};
+function hasJSXComponents(content) {
+  const contentWithoutCodeBlocks = content.replaceAll(/```[\S\s]*?```/g, "");
+  return /<[A-Z][A-Za-z]*[\s/>]/.test(contentWithoutCodeBlocks);
+}
+function MDXWithSuspense({ className, content }) {
+  const mdxPromise = useMemo(
+    () => evaluate(content, {
+      ...runtime,
+      baseUrl: import.meta.url
+    }),
+    [content]
+  );
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(MDXLoadingFallback, {}), children: /* @__PURE__ */ jsx(MDXContent, { mdxPromise }) }) });
+}
+function MarkdownOnly({ className, content }) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: markdownComponents, children: content }) });
+}
+function MDXContent({
+  mdxPromise
+}) {
+  const { default: Component } = use(mdxPromise);
+  return /* @__PURE__ */ jsx(Component, { components: allComponents });
+}
+function MDXLoadingFallback() {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "min-h-[100px]" });
+}
+function TutorialMDXImpl({
+  className,
+  content
+}) {
+  const hasJSX = hasJSXComponents(content);
+  if (hasJSX) {
+    return /* @__PURE__ */ jsx(MDXWithSuspense, { className, content });
+  }
+  return /* @__PURE__ */ jsx(MarkdownOnly, { className, content });
+}
+const TutorialMDX = memo(TutorialMDXImpl);
+TutorialMDX.displayName = "TutorialMDX";
+export {
+  TutorialMDX,
+  mdxComponents
+};

package/dist/components/video-embed/index.js

@@ -0,0 +1,4 @@
+import { VideoEmbed } from "./video-embed";
+export {
+  VideoEmbed
+};

package/dist/components/video-embed/video-embed.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Play, Video } from "lucide-react";
+import { cn } from "../../lib/utils";
+function getEmbedUrl(source, type) {
+  if (type === "youtube") {
+    const videoId = /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&?]+)/.exec(
+      source
+    )?.[1];
+    return videoId ? `https://www.youtube.com/embed/${videoId}` : source;
+  }
+  if (type === "vimeo") {
+    const videoId = /vimeo\.com\/(\d+)/.exec(source)?.[1];
+    return videoId ? `https://player.vimeo.com/video/${videoId}` : source;
+  }
+  return source;
+}
+function VideoEmbed({
+  aspectRatio = "16/9",
+  src,
+  thumbnail,
+  title,
+  type = "youtube"
+}) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const embedUrl = getEmbedUrl(src, type);
+  const aspectClass = aspectRatio === "16/9" ? "aspect-video" : aspectRatio === "4/3" ? "aspect-[4/3]" : "aspect-square";
+  return /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative rounded-lg overflow-hidden bg-muted border",
+          aspectClass
+        ),
+        children: isPlaying ? /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+            allowFullScreen: true,
+            className: "absolute inset-0 w-full h-full",
+            src: `${embedUrl}?autoplay=1`,
+            title
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "absolute inset-0 w-full h-full flex items-center justify-center group",
+            onClick: () => {
+              setIsPlaying(true);
+            },
+            type: "button",
+            children: [
+              thumbnail ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  alt: title,
+                  className: "absolute inset-0 w-full h-full object-cover",
+                  src: thumbnail
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-muted to-muted-foreground/20" }),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform group-hover:scale-110", children: /* @__PURE__ */ jsx(Play, { className: "h-6 w-6 ml-1" }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-center text-muted-foreground flex items-center justify-center gap-1", children: [
+      /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" }),
+      title
+    ] })
+  ] });
+}
+export {
+  VideoEmbed
+};