@vllnt/ui 0.3.0 → 0.4.0-canary.4c6891e

package/dist/components/display/display.js

@@ -0,0 +1,22 @@
+import { createElement } from "react";
+import { cn } from "../../lib/utils";
+const displayBase = "font-[family-name:var(--font-display)] [font-weight:var(--font-weight-display)] text-[length:var(--font-size-display)] leading-[var(--line-height-display)] text-balance tracking-tight text-foreground";
+const Display = ({
+  animated = false,
+  as = "div",
+  className,
+  ref,
+  ...props
+}) => createElement(as, {
+  className: cn(
+    displayBase,
+    animated && "motion-safe:animate-[vllnt-animated-text-reveal_0.6s_ease-out_both]",
+    className
+  ),
+  ref,
+  ...props
+});
+Display.displayName = "Display";
+export {
+  Display
+};

package/dist/components/display/index.js

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

package/dist/components/heading/heading.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const headingTag = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+const headingSize = {
+  1: "text-[length:var(--font-size-h1)] leading-[var(--line-height-h1)]",
+  2: "text-[length:var(--font-size-h2)] leading-[var(--line-height-h2)]",
+  3: "text-[length:var(--font-size-h3)] leading-[var(--line-height-h3)]",
+  4: "text-[length:var(--font-size-h4)] leading-[var(--line-height-h4)]",
+  5: "text-[length:var(--font-size-h5)] leading-[var(--line-height-h5)]",
+  6: "text-[length:var(--font-size-h6)] leading-[var(--line-height-h6)]"
+};
+const headingBase = "font-[family-name:var(--font-display)] [font-weight:var(--font-weight-heading)] text-balance tracking-tight text-foreground";
+const Heading = ({
+  className,
+  level = 2,
+  ref,
+  size,
+  ...props
+}) => {
+  const Tag = headingTag[level];
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(headingBase, headingSize[size ?? level], className),
+      ref,
+      ...props
+    }
+  );
+};
+Heading.displayName = "Heading";
+export {
+  Heading
+};

package/dist/components/heading/index.js

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

package/dist/components/index.js

@@ -999,6 +999,10 @@ import {
   PanelHeader,
   PanelTitle
 } from "./panel";
+import { Heading } from "./heading";
+import { Text, textVariants } from "./text";
+import { Display } from "./display";
+import { Prose } from "./prose";
 export {
   AIArtifact,
   AIArtifactContent,
@@ -1186,6 +1190,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  Display,
   Dock,
   DockIcon,
   DocumentSiblingNav,
@@ -1273,6 +1278,7 @@ export {
   H3,
   H4,
   HandoffBeacon,
+  Heading,
   HeatMapOverlay,
   HeatOverlay,
   Highlight,
@@ -1441,6 +1447,7 @@ export {
   PromptInput,
   PromptTemplates,
   PropertySection,
+  Prose,
   QrCode,
   Quiz,
   RadarChart,
@@ -1549,6 +1556,7 @@ export {
   TagGroupItem,
   TagsInput,
   Terminal,
+  Text,
   TextAnimate,
   TextField,
   TextReveal,
@@ -1637,6 +1645,7 @@ export {
   severityBadgeVariants,
   statCardVariants,
   statusIndicatorVariants,
+  textVariants,
   timelineVariants,
   toast,
   toggleVariants,

package/dist/components/prose/index.js

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

package/dist/components/prose/prose.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const proseStyles = cn(
+  "font-[family-name:var(--font-sans)] text-[length:var(--font-size-body)] leading-[var(--line-height-body)] text-foreground",
+  "[&>*+*]:mt-4",
+  "[&_h1]:mt-8 [&_h1]:font-[family-name:var(--font-display)] [&_h1]:[font-weight:var(--font-weight-heading)] [&_h1]:text-[length:var(--font-size-h1)] [&_h1]:leading-[var(--line-height-h1)] [&_h1]:tracking-tight",
+  "[&_h2]:mt-8 [&_h2]:font-[family-name:var(--font-display)] [&_h2]:[font-weight:var(--font-weight-heading)] [&_h2]:text-[length:var(--font-size-h2)] [&_h2]:leading-[var(--line-height-h2)] [&_h2]:tracking-tight",
+  "[&_h3]:mt-6 [&_h3]:font-[family-name:var(--font-display)] [&_h3]:[font-weight:var(--font-weight-heading)] [&_h3]:text-[length:var(--font-size-h3)] [&_h3]:leading-[var(--line-height-h3)] [&_h3]:tracking-tight",
+  "[&_h4]:mt-6 [&_h4]:font-[family-name:var(--font-display)] [&_h4]:[font-weight:var(--font-weight-heading)] [&_h4]:text-[length:var(--font-size-h4)] [&_h4]:leading-[var(--line-height-h4)] [&_h4]:tracking-tight",
+  "[&_p]:text-[length:var(--font-size-body)] [&_p]:leading-[var(--line-height-body)]",
+  "[&_ul]:my-4 [&_ul]:ml-6 [&_ul]:list-disc [&_ol]:my-4 [&_ol]:ml-6 [&_ol]:list-decimal [&_li]:mt-2",
+  "[&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4",
+  "[&_blockquote]:mt-6 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-6 [&_blockquote]:italic",
+  "[&_code]:rounded [&_code]:bg-muted [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-mono [&_code]:text-[0.9em]",
+  "[&_strong]:font-semibold"
+);
+const Prose = ({ className, ref, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(proseStyles, className), ref, ...props });
+Prose.displayName = "Prose";
+export {
+  Prose
+};

package/dist/components/sidebar/sidebar.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMounted } from "../../lib/use-mounted";
@@ -94,6 +94,151 @@ function CollapsibleSection({
     )
   ] });
 }
+const FAMILY_ROW_CLASS = "flex w-full items-center justify-between px-3 py-1.5 rounded-md text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors";
+function FamilyRowLabel({ section }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: section.title }),
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs", children: [
+      section.items.length,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" })
+    ] })
+  ] });
+}
+function FamilyList({
+  isMobile,
+  onNavigate,
+  onOpen,
+  sections
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Components" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: sections.map(
+      (section) => section.href ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: FAMILY_ROW_CLASS,
+          href: section.href,
+          onClick: () => {
+            if (isMobile) {
+              onNavigate();
+            }
+          },
+          children: /* @__PURE__ */ jsx(FamilyRowLabel, { section })
+        },
+        section.title
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: FAMILY_ROW_CLASS,
+          onClick: () => {
+            onOpen(section.title ?? "");
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(FamilyRowLabel, { section })
+        },
+        section.title
+      )
+    ) })
+  ] });
+}
+function FamilyItems({
+  isMobile,
+  onBack,
+  onNavigate,
+  pathname,
+  section
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors",
+        onClick: onBack,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3" }),
+          /* @__PURE__ */ jsx("span", { children: "All families" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-1", children: [
+      section.href ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: "text-sm font-semibold hover:underline",
+          href: section.href,
+          onClick: () => {
+            if (isMobile) {
+              onNavigate();
+            }
+          },
+          children: section.title
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: section.title }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: section.items.length })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        "aria-current": pathname === item.href ? "page" : void 0,
+        className: cn(
+          "block px-3 py-1.5 rounded-md text-sm transition-colors",
+          pathname === item.href ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+        ),
+        href: item.href,
+        onClick: () => {
+          if (isMobile) {
+            onNavigate();
+          }
+        },
+        children: item.title
+      },
+      item.href
+    )) })
+  ] });
+}
+function FamilyNav({
+  isMobile,
+  onNavigate,
+  pathname,
+  sections
+}) {
+  const activeTitle = sections.find(
+    (section) => section.href === pathname || section.items.some((item) => item.href === pathname)
+  )?.title ?? null;
+  const [routeKey, setRouteKey] = useState(pathname);
+  const [openTitle, setOpenTitle] = useState(activeTitle);
+  if (routeKey !== pathname) {
+    setRouteKey(pathname);
+    setOpenTitle(activeTitle);
+  }
+  const openSection = openTitle === null ? null : sections.find((section) => section.title === openTitle) ?? null;
+  if (openSection) {
+    return /* @__PURE__ */ jsx(
+      FamilyItems,
+      {
+        isMobile,
+        onBack: () => {
+          setOpenTitle(null);
+        },
+        onNavigate,
+        pathname,
+        section: openSection
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FamilyList,
+    {
+      isMobile,
+      onNavigate,
+      onOpen: (title) => {
+        setOpenTitle(title);
+      },
+      sections
+    }
+  );
+}
 function Sidebar({ sections }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
@@ -104,6 +249,8 @@ function Sidebar({ sections }) {
     scrollContainerReference
   );
   const collapsed = mounted && !isMobile && !open;
+  const familySections = sections.filter((section) => section.family);
+  const otherSections = sections.filter((section) => !section.family);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMobile && open ? /* @__PURE__ */ jsx(
       "div",
@@ -145,42 +292,55 @@ function Sidebar({ sections }) {
             {
               className: "flex-1 p-4 overflow-y-auto overscroll-contain h-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               ref: scrollContainerReference,
-              children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sections.map((section, sectionIndex) => {
-                const sectionItems = /* @__PURE__ */ jsx("div", { className: section.title ? "space-y-0.5" : "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx(
-                  Link,
-                  {
-                    className: cn(
-                      section.title ? "block px-3 py-1.5 rounded-md text-sm transition-colors" : "flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors",
-                      pathname === item.href || item.href === "/" && pathname === "/" ? "bg-accent text-accent-foreground" : section.title ? "text-muted-foreground hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
-                      section.title && pathname === item.href && "font-medium"
-                    ),
-                    href: item.href,
-                    onClick: () => {
-                      if (isMobile) {
-                        setOpen(false);
-                      }
+              children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                otherSections.map((section, sectionIndex) => {
+                  const sectionItems = /* @__PURE__ */ jsx("div", { className: section.title ? "space-y-0.5" : "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx(
+                    Link,
+                    {
+                      className: cn(
+                        section.title ? "block px-3 py-1.5 rounded-md text-sm transition-colors" : "flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                        pathname === item.href || item.href === "/" && pathname === "/" ? "bg-accent text-accent-foreground" : section.title ? "text-muted-foreground hover:bg-accent hover:text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                        section.title && pathname === item.href && "font-medium"
+                      ),
+                      href: item.href,
+                      onClick: () => {
+                        if (isMobile) {
+                          setOpen(false);
+                        }
+                      },
+                      children: item.title
                     },
-                    children: item.title
-                  },
-                  item.href
-                )) });
-                return /* @__PURE__ */ jsx(
-                  "div",
+                    item.href
+                  )) });
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "space-y-1",
+                      children: section.title ? /* @__PURE__ */ jsx(
+                        CollapsibleSection,
+                        {
+                          collapsible: section.collapsible,
+                          defaultOpen: section.defaultOpen ?? true,
+                          title: section.title,
+                          children: sectionItems
+                        }
+                      ) : sectionItems
+                    },
+                    section.title || sectionIndex
+                  );
+                }),
+                familySections.length > 0 ? /* @__PURE__ */ jsx(
+                  FamilyNav,
                   {
-                    className: "space-y-1",
-                    children: section.title ? /* @__PURE__ */ jsx(
-                      CollapsibleSection,
-                      {
-                        collapsible: section.collapsible,
-                        defaultOpen: section.defaultOpen ?? true,
-                        title: section.title,
-                        children: sectionItems
-                      }
-                    ) : sectionItems
-                  },
-                  section.title || sectionIndex
-                );
-              }) })
+                    isMobile,
+                    onNavigate: () => {
+                      setOpen(false);
+                    },
+                    pathname,
+                    sections: familySections
+                  }
+                ) : null
+              ] })
             }
           )
         ] })

package/dist/components/text/index.js

@@ -0,0 +1,5 @@
+import { Text, textVariants } from "./text";
+export {
+  Text,
+  textVariants
+};

package/dist/components/text/text.js

@@ -0,0 +1,48 @@
+import { createElement } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const textVariants = cva(
+  "font-[family-name:var(--font-sans)] text-foreground",
+  {
+    defaultVariants: {
+      size: "base",
+      tone: "default",
+      weight: "normal"
+    },
+    variants: {
+      size: {
+        base: "text-[length:var(--font-size-body)] leading-[var(--line-height-body)]",
+        caption: "text-[length:var(--font-size-caption)] leading-[var(--line-height-caption)]",
+        lead: "text-[length:var(--font-size-body-lg)] leading-[var(--line-height-body-lg)]",
+        small: "text-[length:var(--font-size-body-sm)] leading-[var(--line-height-body-sm)]"
+      },
+      tone: {
+        default: "",
+        muted: "text-muted-foreground"
+      },
+      weight: {
+        medium: "font-medium",
+        normal: "font-normal",
+        semibold: "font-semibold"
+      }
+    }
+  }
+);
+const Text = ({
+  as = "p",
+  className,
+  ref,
+  size,
+  tone,
+  weight,
+  ...props
+}) => createElement(as, {
+  className: cn(textVariants({ size, tone, weight }), className),
+  ref,
+  ...props
+});
+Text.displayName = "Text";
+export {
+  Text,
+  textVariants
+};