@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+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 = forwardRef(
+  ({
+    className,
+    level = "M",
+    margin = 4,
+    size = 160,
+    title = "QR code",
+    value,
+    ...props
+  }, ref) => {
+    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/quiz/quiz.js

@@ -32,7 +32,7 @@ function QuizOptionButton({
           showResult ? option.correct ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4 text-green-500",
+              className: "size-4 text-green-500",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -49,7 +49,7 @@ function QuizOptionButton({
           ) : /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4 text-red-500",
+              className: "size-4 text-red-500",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -67,7 +67,7 @@ function QuizOptionButton({
           submitted && !isSelected && option.correct ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4 text-green-500/50",
+              className: "size-4 text-green-500/50",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -118,6 +118,7 @@ function QuizResult({
   );
 }
 function Quiz({
+  as: Heading = "h4",
   className,
   explanation,
   hint,
@@ -144,7 +145,7 @@ function Quiz({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary flex-shrink-0 mt-0.5",
+          className: "size-5 text-primary flex-shrink-0 mt-0.5",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -159,7 +160,7 @@ function Quiz({
           )
         }
       ),
-      /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: question })
+      /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: question })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", children: options.map((opt, index) => /* @__PURE__ */ jsx(
       QuizOptionButton,
@@ -172,7 +173,7 @@ function Quiz({
         selectedIndex,
         submitted
       },
-      index
+      `quiz-option-${index}-${opt.label}`
     )) }),
     hint && !submitted ? /* @__PURE__ */ jsx(
       QuizHint,

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,181 @@
+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 = React.forwardRef(
+  ({
+    className,
+    color = "currentColor",
+    data,
+    levels = DEFAULT_LEVELS,
+    max,
+    size = DEFAULT_SIZE,
+    ...props
+  }, ref) => {
+    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

@@ -20,12 +20,12 @@ const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
     RadioGroupPrimitive.Item,
     {
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "size-2.5 fill-current text-current" }) })
     }
   );
 });

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/rating/rating.js

@@ -4,9 +4,9 @@ import { useMemo, useState } from "react";
 import { Star } from "lucide-react";
 import { cn } from "../../lib/utils";
 const sizeClasses = {
-  lg: "h-6 w-6",
-  md: "h-5 w-5",
-  sm: "h-4 w-4"
+  lg: "size-6",
+  md: "size-5",
+  sm: "size-4"
 };
 function RatingStars({
   activeValue,

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,118 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, 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 = forwardRef(
+  ({ children, className, duration, isStreaming = false, onOpenChange, steps }, ref) => {
+    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/index.js

@@ -0,0 +1,6 @@
+import {
+  RelationshipInspector
+} from "./relationship-inspector";
+export {
+  RelationshipInspector
+};

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

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No relationships",
+  inbound: "Inbound",
+  outbound: "Outbound",
+  region: "Relationship inspector"
+};
+const ARROW_GLYPH = {
+  inbound: "\u2190",
+  outbound: "\u2192"
+};
+const RowBody = (props) => {
+  const { edge } = props;
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: ARROW_GLYPH[edge.direction] }),
+    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground", children: edge.target }),
+      edge.targetSublabel ? /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: edge.targetSublabel }) : null
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: edge.relation })
+  ] });
+};
+const Row = (props) => {
+  const { edge } = props;
+  if (edge.onActivate) {
+    const handleActivateRelationship = () => {
+      edge.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-relationship-direction": edge.direction,
+        "data-relationship-row": true,
+        onClick: handleActivateRelationship,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { edge })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
+      "data-relationship-direction": edge.direction,
+      "data-relationship-row": true,
+      children: /* @__PURE__ */ jsx(RowBody, { edge })
+    }
+  );
+};
+const Group = (props) => {
+  const { edges, heading } = props;
+  if (edges.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", "data-relationship-group": heading.toLowerCase(), children: [
+    /* @__PURE__ */ jsx("h4", { className: "px-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: heading }),
+    /* @__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 { className, edges, labels, title = "Relationships", ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inbound = edges.filter((edge) => edge.direction === "inbound");
+  const outbound = edges.filter((edge) => edge.direction === "outbound");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-2 rounded-lg border bg-background p-3 text-foreground",
+        className
+      ),
+      "data-relationship-inspector": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }) }),
+        edges.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-xs text-muted-foreground",
+            "data-relationship-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Group, { edges: inbound, heading: resolvedLabels.inbound }),
+          /* @__PURE__ */ jsx(Group, { edges: outbound, heading: resolvedLabels.outbound })
+        ] })
+      ]
+    }
+  );
+});
+RelationshipInspector.displayName = "RelationshipInspector";
+export {
+  RelationshipInspector
+};

package/dist/components/resizable/resizable.js

@@ -29,7 +29,7 @@ const ResizableHandle = ({
       className
     ),
     ...props,
-    children: withHandle ? /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-2.5 w-2.5" }) }) : null
+    children: withHandle ? /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "size-2.5" }) }) : null
   }
 );
 export {

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

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