@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/command/command.js

@@ -1,11 +1,14 @@
 "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(
+const Command = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   CommandPrimitive,
   {
     className: cn(
@@ -15,7 +18,7 @@ const Command = React.forwardRef(({ className, ...props }, reference) => /* @__P
     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: [
@@ -23,7 +26,11 @@ const CommandDialog = ({ children, ...props }) => {
     /* @__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) => (
+const CommandInput = ({
+  className,
+  ref: reference,
+  ...props
+}) => (
   // 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 size-4 shrink-0 opacity-50" }),
@@ -39,27 +46,38 @@ const CommandInput = React.forwardRef(({ className, ...props }, reference) => (
       }
     )
   ] })
-));
+);
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-const CommandList = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const CommandList = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__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(
+const CommandEmpty = ({
+  ref: reference,
+  ...props
+}) => /* @__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(
+const CommandGroup = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   CommandPrimitive.Group,
   {
     className: cn(
@@ -69,18 +87,27 @@ const CommandGroup = React.forwardRef(({ className, ...props }, reference) => /*
     ref: reference,
     ...props
   }
-));
+);
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-const CommandSeparator = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const CommandSeparator = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__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(
+const CommandItem = ({
+  className,
+  disabled,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   CommandPrimitive.Item,
   {
     className: cn(
@@ -92,7 +119,7 @@ const CommandItem = React.forwardRef(({ className, disabled, ...props }, referen
     ref: reference,
     ...props
   }
-));
+);
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 const CommandShortcut = ({
   className,

package/dist/components/comment-pin/comment-pin.js

@@ -1,8 +1,5 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   region: "Comment",
@@ -40,64 +37,65 @@ const PinBody = (props) => {
     ) : null
   ] });
 };
-const CommentPin = forwardRef(
-  (props, ref) => {
-    const {
+const CommentPin = ({
+  ref,
+  ...props
+}) => {
+  const {
+    authorInitial,
+    className,
+    color,
+    labels,
+    onActivate,
+    state = "open",
+    unread,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const showBadge = typeof unread === "number" && unread > 0;
+  const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
+  const handleActivateComment = () => {
+    onActivate?.();
+  };
+  const body = /* @__PURE__ */ jsx(
+    PinBody,
+    {
+      accent: color,
       authorInitial,
-      className,
-      color,
-      labels,
-      onActivate,
-      state = "open",
-      unread,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const showBadge = typeof unread === "number" && unread > 0;
-    const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
-    const handleActivateComment = () => {
-      onActivate?.();
-    };
-    const body = /* @__PURE__ */ jsx(
-      PinBody,
-      {
-        accent: color,
-        authorInitial,
-        state,
-        unread
-      }
-    );
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-label": ariaLabel,
-        className: cn(
-          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
-          className
-        ),
-        "data-comment-pin": true,
-        "data-comment-pin-state": state,
-        ref,
-        role: "img",
-        style: { left: x, top: y },
-        ...rest,
-        children: onActivate ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            "aria-label": ariaLabel,
-            className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "data-comment-pin-trigger": true,
-            onClick: handleActivateComment,
-            type: "button",
-            children: body
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: body })
-      }
-    );
-  }
-);
+      state,
+      unread
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+        className
+      ),
+      "data-comment-pin": true,
+      "data-comment-pin-state": state,
+      ref,
+      role: "img",
+      style: { left: x, top: y },
+      ...rest,
+      children: onActivate ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": ariaLabel,
+          className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "data-comment-pin-trigger": true,
+          onClick: handleActivateComment,
+          type: "button",
+          children: body
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: body })
+    }
+  );
+};
 CommentPin.displayName = "CommentPin";
 export {
   CommentPin

package/dist/components/connector-edge/connector-edge.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 import { EdgeLabel } from "../edge-label/edge-label";
 const strokeClasses = {
@@ -7,59 +6,65 @@ const strokeClasses = {
   blocked: "stroke-amber-500",
   idle: "stroke-muted-foreground/60"
 };
-const ConnectorEdge = forwardRef(
-  ({ className, end, label, start, state = "idle", ...props }, ref) => {
-    const width = Math.max(Math.abs(end.x - start.x), 32);
-    const height = Math.max(Math.abs(end.y - start.y), 32);
-    const midX = width / 2;
-    const startX = start.x <= end.x ? 4 : width - 4;
-    const endX = start.x <= end.x ? width - 4 : 4;
-    const startY = start.y <= end.y ? 4 : height - 4;
-    const endY = start.y <= end.y ? height - 4 : 4;
-    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
-    const style = {
-      height,
-      width
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn("relative inline-flex", className),
-        ref,
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "overflow-visible",
-              height,
-              viewBox: `0 0 ${width} ${height}`,
-              width,
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  className: cn("fill-none stroke-[2.5]", strokeClasses[state]),
-                  d: path,
-                  strokeDasharray: state === "blocked" ? "4 4" : void 0,
-                  strokeLinecap: "round"
-                }
-              )
-            }
-          ),
-          label ? /* @__PURE__ */ jsx(
-            EdgeLabel,
-            {
-              className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-              emphasis: state === "active" ? "active" : "subtle",
-              children: label
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+const ConnectorEdge = ({
+  className,
+  end,
+  label,
+  ref,
+  start,
+  state = "idle",
+  ...props
+}) => {
+  const width = Math.max(Math.abs(end.x - start.x), 32);
+  const height = Math.max(Math.abs(end.y - start.y), 32);
+  const midX = width / 2;
+  const startX = start.x <= end.x ? 4 : width - 4;
+  const endX = start.x <= end.x ? width - 4 : 4;
+  const startY = start.y <= end.y ? 4 : height - 4;
+  const endY = start.y <= end.y ? height - 4 : 4;
+  const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+  const style = {
+    height,
+    width
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative inline-flex", className),
+      ref,
+      style,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "overflow-visible",
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            width,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: cn("fill-none stroke-[2.5]", strokeClasses[state]),
+                d: path,
+                strokeDasharray: state === "blocked" ? "4 4" : void 0,
+                strokeLinecap: "round"
+              }
+            )
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          EdgeLabel,
+          {
+            className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+            emphasis: state === "active" ? "active" : "subtle",
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
 ConnectorEdge.displayName = "ConnectorEdge";
 export {
   ConnectorEdge

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

@@ -9,6 +9,9 @@ const DEFAULT_LABELS = {
   tableOfContentsLabel: "Table of Contents"
 };
 const EMPTY_CONTENT_INTRO_LABELS = {};
+function ContentIntroBody({ source }) {
+  return source();
+}
 function ContentIntroImpl({
   additionalContent,
   completedSections,
@@ -45,7 +48,7 @@ function ContentIntroImpl({
     /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-500 pb-24", children: [
       /* @__PURE__ */ jsxs("section", { className: "py-6", children: [
         /* @__PURE__ */ jsx(TitleHeading, { className: "text-2xl md:text-3xl font-semibold mb-6", children: title }),
-        /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: renderIntroContent() })
+        /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: /* @__PURE__ */ jsx(ContentIntroBody, { source: renderIntroContent }) })
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "mt-8 py-6 border-t border-border", children: [
         /* @__PURE__ */ jsx(TocHeading, { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),

package/dist/components/context-lens/context-lens.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   region: "Context lens"
@@ -15,83 +15,84 @@ const clamp01 = (value) => {
   return value;
 };
 const safeRadius = (value) => value < 0 ? 0 : value;
-const ContextLens = forwardRef(
-  (props, ref) => {
-    const { className, focus, labels, opacity = 0.55, ...rest } = props;
-    const maskId = useId();
-    if (!focus) {
-      return null;
-    }
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const inner = safeRadius(focus.inner);
-    const outer = safeRadius(Math.max(focus.outer, inner));
-    const fillOpacity = clamp01(opacity);
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        "aria-hidden": "true",
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "pointer-events-none absolute inset-0 z-20 h-full w-full",
-          className
+const ContextLens = ({
+  ref,
+  ...props
+}) => {
+  const { className, focus, labels, opacity = 0.55, ...rest } = props;
+  const maskId = useId();
+  if (!focus) {
+    return null;
+  }
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inner = safeRadius(focus.inner);
+  const outer = safeRadius(Math.max(focus.outer, inner));
+  const fillOpacity = clamp01(opacity);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "pointer-events-none absolute inset-0 z-20 h-full w-full",
+        className
+      ),
+      "data-context-lens": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "radialGradient",
+          {
+            cx: focus.cx,
+            cy: focus.cy,
+            "data-context-lens-gradient": true,
+            gradientUnits: "userSpaceOnUse",
+            id: maskId,
+            r: outer === 0 ? 1 : outer,
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "black", stopOpacity: 0 }),
+              /* @__PURE__ */ jsx(
+                "stop",
+                {
+                  offset: outer === 0 ? "100%" : `${inner / outer * 100}%`,
+                  stopColor: "black",
+                  stopOpacity: 0
+                }
+              ),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black", stopOpacity: 1 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-context-lens-dim": true,
+            fill: "black",
+            fillOpacity,
+            height: "100%",
+            mask: `url(#${maskId}-mask)`,
+            width: "100%",
+            x: 0,
+            y: 0
+          }
         ),
-        "data-context-lens": true,
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-            "radialGradient",
+        /* @__PURE__ */ jsxs("mask", { id: `${maskId}-mask`, children: [
+          /* @__PURE__ */ jsx("rect", { fill: "white", height: "100%", width: "100%", x: 0, y: 0 }),
+          /* @__PURE__ */ jsx(
+            "circle",
             {
               cx: focus.cx,
               cy: focus.cy,
-              "data-context-lens-gradient": true,
-              gradientUnits: "userSpaceOnUse",
-              id: maskId,
-              r: outer === 0 ? 1 : outer,
-              children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "black", stopOpacity: 0 }),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: outer === 0 ? "100%" : `${inner / outer * 100}%`,
-                    stopColor: "black",
-                    stopOpacity: 0
-                  }
-                ),
-                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black", stopOpacity: 1 })
-              ]
+              fill: `url(#${maskId})`,
+              r: outer
             }
-          ) }),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-context-lens-dim": true,
-              fill: "black",
-              fillOpacity,
-              height: "100%",
-              mask: `url(#${maskId}-mask)`,
-              width: "100%",
-              x: 0,
-              y: 0
-            }
-          ),
-          /* @__PURE__ */ jsxs("mask", { id: `${maskId}-mask`, children: [
-            /* @__PURE__ */ jsx("rect", { fill: "white", height: "100%", width: "100%", x: 0, y: 0 }),
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: focus.cx,
-                cy: focus.cy,
-                fill: `url(#${maskId})`,
-                r: outer
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
+          )
+        ] })
+      ]
+    }
+  );
+};
 ContextLens.displayName = "ContextLens";
 export {
   ContextLens