@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/prompt-templates/prompt-templates.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useId,
   useMemo,
@@ -353,42 +352,43 @@ function TemplateGrid({ controller, labels }) {
     template.id
   )) });
 }
-const PromptTemplates = forwardRef(
-  (props, ref) => {
-    const { categories, className, labels, onSelect, templates, ...rest } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const controller = usePromptTemplatesController(templates, onSelect);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        className: cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className
+const PromptTemplates = ({
+  ref,
+  ...props
+}) => {
+  const { categories, className, labels, onSelect, templates, ...rest } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const controller = usePromptTemplatesController(templates, onSelect);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          FilterBar,
+          {
+            categories: categories ?? [],
+            labels: resolvedLabels,
+            onCategoryChange: controller.handleCategoryChange,
+            onQueryChange: controller.handleQueryChange,
+            query: controller.query,
+            searchId: controller.searchId,
+            selectedCategory: controller.selectedCategory
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            FilterBar,
-            {
-              categories: categories ?? [],
-              labels: resolvedLabels,
-              onCategoryChange: controller.handleCategoryChange,
-              onQueryChange: controller.handleQueryChange,
-              query: controller.query,
-              searchId: controller.searchId,
-              selectedCategory: controller.selectedCategory
-            }
-          ),
-          /* @__PURE__ */ jsx(TemplateGrid, { controller, labels: resolvedLabels })
-        ]
-      }
-    );
-  }
-);
+        /* @__PURE__ */ jsx(TemplateGrid, { controller, labels: resolvedLabels })
+      ]
+    }
+  );
+};
 PromptTemplates.displayName = "PromptTemplates";
 export {
   PromptTemplates

package/dist/components/property-section/property-section.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: "Properties"
@@ -68,33 +65,34 @@ const Body = (props) => {
     grid
   ] });
 };
-const PropertySection = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      collapsible = false,
-      entries,
-      labels,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return /* @__PURE__ */ jsx(
-      "section",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "rounded-lg border bg-background text-foreground",
-          className
-        ),
-        "data-property-section": true,
-        ref,
-        ...rest,
-        children: /* @__PURE__ */ jsx(Body, { collapsible, entries, title })
-      }
-    );
-  }
-);
+const PropertySection = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    collapsible = false,
+    entries,
+    labels,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "rounded-lg border bg-background text-foreground",
+        className
+      ),
+      "data-property-section": true,
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsx(Body, { collapsible, entries, title })
+    }
+  );
+};
 PropertySection.displayName = "PropertySection";
 export {
   PropertySection

package/dist/components/qr-code/index.js

@@ -0,0 +1,4 @@
+import { QrCode } from "./qr-code";
+export {
+  QrCode
+};

package/dist/components/qr-code/qr-code.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { create } from "qrcode";
+import { cn } from "../../lib/utils";
+function buildPath(data, count, margin) {
+  return Array.from({ length: count * count }).reduce(
+    (path, _cell, index) => {
+      if (data[index] !== 1) return path;
+      const x = index % count + margin;
+      const y = Math.floor(index / count) + margin;
+      return `${path}M${x} ${y}h1v1h-1z`;
+    },
+    ""
+  );
+}
+const QrCode = ({
+  className,
+  level = "M",
+  margin = 4,
+  ref,
+  size = 160,
+  title = "QR code",
+  value,
+  ...props
+}) => {
+  const modules = value ? create(value, { errorCorrectionLevel: level }).modules : null;
+  const count = modules?.size ?? 0;
+  const dimension = count + margin * 2;
+  const path = modules ? buildPath(modules.data, count, margin) : "";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-label": title,
+      className: cn("text-foreground", className),
+      height: size,
+      ref,
+      role: "img",
+      shapeRendering: "crispEdges",
+      viewBox: `0 0 ${dimension} ${dimension}`,
+      width: size,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: path, fill: "currentColor" })
+    }
+  );
+};
+QrCode.displayName = "QrCode";
+export {
+  QrCode
+};

package/dist/components/radar-chart/index.js

@@ -0,0 +1,6 @@
+import {
+  RadarChart
+} from "./radar-chart";
+export {
+  RadarChart
+};

package/dist/components/radar-chart/radar-chart.js

@@ -0,0 +1,180 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_SIZE = 240;
+const DEFAULT_LEVELS = 4;
+const LABEL_MARGIN = 26;
+const TAU = Math.PI * 2;
+function vertex(spoke) {
+  const angle = -Math.PI / 2 + spoke.index / spoke.count * TAU;
+  return {
+    x: spoke.center.x + spoke.radius * Math.cos(angle),
+    y: spoke.center.y + spoke.radius * Math.sin(angle)
+  };
+}
+function toPolygon(points) {
+  return points.map((point) => `${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(" ");
+}
+function anchorFor(cosine) {
+  if (cosine > 0.2) return "start";
+  if (cosine < -0.2) return "end";
+  return "middle";
+}
+function RadarGrid({
+  center,
+  count,
+  levels,
+  radius
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: levels }, (_unused, level) => {
+    const ringRadius = (level + 1) / levels * radius;
+    const ring = Array.from(
+      { length: count },
+      (_inner, index) => vertex({ center, count, index, radius: ringRadius })
+    );
+    return /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        className: "stroke-border",
+        fill: "none",
+        points: toPolygon(ring),
+        strokeWidth: 1
+      },
+      `ring-${level}`
+    );
+  }) });
+}
+function RadarAxes({
+  center,
+  data,
+  radius
+}) {
+  const count = data.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: data.map((point, index) => {
+    const tip = vertex({ center, count, index, radius });
+    const label = vertex({
+      center,
+      count,
+      index,
+      radius: radius + LABEL_MARGIN / 2
+    });
+    const angle = -Math.PI / 2 + index / count * TAU;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          className: "stroke-border",
+          strokeWidth: 1,
+          x1: center.x,
+          x2: tip.x,
+          y1: center.y,
+          y2: tip.y
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "fill-muted-foreground text-[10px]",
+          dominantBaseline: "middle",
+          textAnchor: anchorFor(Math.cos(angle)),
+          x: label.x,
+          y: label.y,
+          children: point.label
+        }
+      )
+    ] }, `axis-${point.label}-${index}`);
+  }) });
+}
+function RadarShape({
+  color,
+  data,
+  points
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        fill: color,
+        fillOpacity: 0.2,
+        points: toPolygon(points),
+        stroke: color,
+        strokeLinejoin: "round",
+        strokeWidth: 2
+      }
+    ),
+    points.map((point, index) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: point.x,
+        cy: point.y,
+        fill: color,
+        r: 3,
+        children: /* @__PURE__ */ jsx("title", { children: `${data[index]?.label ?? ""}: ${(data[index]?.value ?? 0).toLocaleString()}` })
+      },
+      `dot-${index}`
+    ))
+  ] });
+}
+const RadarChart = ({
+  className,
+  color = "currentColor",
+  data,
+  levels = DEFAULT_LEVELS,
+  max,
+  ref,
+  size = DEFAULT_SIZE,
+  ...props
+}) => {
+  const count = data.length;
+  const scaleMax = max ?? Math.max(...data.map((point) => point.value), 0);
+  if (count < 3 || scaleMax <= 0) return null;
+  const center = { x: size / 2, y: size / 2 };
+  const radius = size / 2 - LABEL_MARGIN;
+  const points = data.map(
+    (point, index) => vertex({
+      center,
+      count,
+      index,
+      radius: point.value / scaleMax * radius
+    })
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-background/40 p-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-label": "Radar chart",
+          className: "h-full w-full",
+          height: size,
+          role: "img",
+          viewBox: `0 0 ${size} ${size}`,
+          width: size,
+          children: [
+            /* @__PURE__ */ jsx(
+              RadarGrid,
+              {
+                center,
+                count,
+                levels: Math.max(1, levels),
+                radius
+              }
+            ),
+            /* @__PURE__ */ jsx(RadarAxes, { center, data, radius }),
+            /* @__PURE__ */ jsx(RadarShape, { color, data, points })
+          ]
+        }
+      )
+    }
+  );
+};
+RadarChart.displayName = "RadarChart";
+export {
+  RadarChart
+};

package/dist/components/radio-group/radio-group.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 import { cn } from "../../lib/utils";
-const RadioGroup = forwardRef(({ className, ...props }, ref) => {
+const RadioGroup = ({
+  className,
+  ref,
+  ...props
+}) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -13,9 +16,13 @@ const RadioGroup = forwardRef(({ className, ...props }, ref) => {
       ref
     }
   );
-});
+};
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
+const RadioGroupItem = ({
+  className,
+  ref,
+  ...props
+}) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -28,7 +35,7 @@ const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
       children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "size-2.5 fill-current text-current" }) })
     }
   );
-});
+};
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export {
   RadioGroup,

package/dist/components/range-calendar/index.js

@@ -0,0 +1,4 @@
+import { RangeCalendar } from "./range-calendar";
+export {
+  RangeCalendar
+};

package/dist/components/range-calendar/range-calendar.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Calendar } from "../calendar";
+function RangeCalendar({
+  className,
+  defaultValue,
+  numberOfMonths = 2,
+  onValueChange,
+  value
+}) {
+  const [internalValue, setInternalValue] = useState(
+    defaultValue
+  );
+  const selected = value ?? internalValue;
+  const handleSelect = (range) => {
+    if (value === void 0) {
+      setInternalValue(range);
+    }
+    onValueChange?.(range);
+  };
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      className,
+      mode: "range",
+      numberOfMonths,
+      onSelect: handleSelect,
+      selected
+    }
+  );
+}
+export {
+  RangeCalendar
+};

package/dist/components/reasoning/index.js

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

package/dist/components/reasoning/reasoning.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useState } from "react";
+import { Brain, ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+function ReasoningTrigger({
+  contentId,
+  duration,
+  isOpen,
+  isStreaming,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-controls": contentId,
+      "aria-expanded": isOpen,
+      className: "flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground",
+      onClick: onToggle,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx(Brain, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+          isStreaming ? "Reasoning" : "Reasoned",
+          typeof duration === "number" ? ` for ${duration}s` : null
+        ] }),
+        isStreaming ? /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "\u2026" }) : null,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "ml-auto size-4 shrink-0 transition-transform",
+              isOpen ? "rotate-180" : "rotate-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ReasoningContent({
+  children,
+  contentId,
+  isStreaming,
+  steps
+}) {
+  const hasSteps = steps !== void 0 && steps.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "border-t border-border px-3 py-2 text-sm text-muted-foreground",
+      id: contentId,
+      children: [
+        hasSteps ? /* @__PURE__ */ jsx("ol", { className: "list-decimal space-y-1 pl-4", children: steps.map((step, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "whitespace-pre-wrap",
+            children: step
+          },
+          `${index}-${step.slice(0, 12)}`
+        )) }) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children }),
+        isStreaming ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ml-0.5 animate-pulse", children: "\u258B" }) : null
+      ]
+    }
+  );
+}
+const Reasoning = ({
+  children,
+  className,
+  duration,
+  isStreaming = false,
+  onOpenChange,
+  ref,
+  steps
+}) => {
+  const [isOpen, setIsOpen] = useState(isStreaming);
+  const contentId = useId();
+  useEffect(() => {
+    if (isStreaming) {
+      requestAnimationFrame(() => {
+        setIsOpen(true);
+      });
+    }
+  }, [isStreaming]);
+  const handleToggle = useCallback(() => {
+    setIsOpen((previous) => {
+      const next = !previous;
+      onOpenChange?.(next);
+      return next;
+    });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("rounded-lg border border-border bg-muted/30", className),
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          ReasoningTrigger,
+          {
+            contentId,
+            duration,
+            isOpen,
+            isStreaming,
+            onToggle: handleToggle
+          }
+        ),
+        isOpen ? /* @__PURE__ */ jsx(
+          ReasoningContent,
+          {
+            contentId,
+            isStreaming,
+            steps,
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+};
+Reasoning.displayName = "Reasoning";
+export {
+  Reasoning
+};

package/dist/components/relationship-inspector/relationship-inspector.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   empty: "No relationships",
@@ -63,7 +60,10 @@ const Group = (props) => {
     /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: edges.map((edge) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, { edge }) }, edge.id)) })
   ] });
 };
-const RelationshipInspector = forwardRef((props, ref) => {
+const RelationshipInspector = ({
+  ref,
+  ...props
+}) => {
   const { className, edges, labels, title = "Relationships", ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const inbound = edges.filter((edge) => edge.direction === "inbound");
@@ -95,7 +95,7 @@ const RelationshipInspector = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 RelationshipInspector.displayName = "RelationshipInspector";
 export {
   RelationshipInspector

package/dist/components/reveal-text/index.js

@@ -0,0 +1,6 @@
+import {
+  RevealText
+} from "./reveal-text";
+export {
+  RevealText
+};