@vllnt/ui 0.2.1 → 0.3.0-canary.0572c35

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/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/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/right-dock/index.js

@@ -0,0 +1,4 @@
+import { RightDock } from "./right-dock";
+export {
+  RightDock
+};

package/dist/components/right-dock/right-dock.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const RightDock = forwardRef(
+  ({ children, className, footer, header, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        header || title ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border/60 px-4 py-3", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) : null,
+          header ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: header }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 p-4", children: footer }) : null
+      ]
+    }
+  )
+);
+RightDock.displayName = "RightDock";
+export {
+  RightDock
+};

package/dist/components/route-map/index.js

@@ -0,0 +1,6 @@
+import {
+  RouteMap
+} from "./route-map";
+export {
+  RouteMap
+};