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

package/dist/components/ai-sidebar/ai-sidebar.js

@@ -0,0 +1,246 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { Bot, MessageSquarePlus, X } from "lucide-react";
+import { useEscapeKey } from "../../lib/use-escape-key";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 280;
+const MAX_WIDTH = 720;
+const DEFAULT_LABELS = {
+  close: "Close assistant",
+  defaultTitle: "AI Assistant",
+  open: "Open AI assistant"
+};
+const NO_OP = () => {
+  return;
+};
+const DEFAULT_CONTEXT = {
+  close: NO_OP,
+  labels: DEFAULT_LABELS,
+  open: NO_OP,
+  openState: false,
+  position: "right",
+  setOpen: NO_OP,
+  toggle: NO_OP,
+  width: DEFAULT_WIDTH
+};
+const AISidebarContext = createContext(DEFAULT_CONTEXT);
+function useAISidebar() {
+  return useContext(AISidebarContext);
+}
+function clampWidth(value) {
+  return Math.min(Math.max(value, MIN_WIDTH), MAX_WIDTH);
+}
+function AISidebarProvider({
+  children,
+  defaultOpen = false,
+  defaultPosition = "right",
+  defaultWidth = DEFAULT_WIDTH,
+  labels,
+  onOpenChange,
+  open: controlledOpen
+}) {
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const openState = isControlled ? controlledOpen : uncontrolled;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const open = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+  const close = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const toggle = useCallback(() => {
+    setOpen(!openState);
+  }, [openState, setOpen]);
+  const value = useMemo(
+    () => ({
+      close,
+      labels: resolvedLabels,
+      open,
+      openState,
+      position: defaultPosition,
+      setOpen,
+      toggle,
+      width: clampWidth(defaultWidth)
+    }),
+    [
+      close,
+      defaultPosition,
+      defaultWidth,
+      open,
+      openState,
+      resolvedLabels,
+      setOpen,
+      toggle
+    ]
+  );
+  return /* @__PURE__ */ jsx(AISidebarContext.Provider, { value, children });
+}
+const AISidebar = forwardRef(
+  (props, ref) => {
+    const { children, className, closeOnEscape = true, ...rest } = props;
+    const { close, labels, openState, position, width } = useAISidebar();
+    useEscapeKey(close, {
+      enabled: closeOnEscape && openState,
+      target: "document"
+    });
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        "aria-hidden": !openState,
+        "aria-label": labels.defaultTitle,
+        className: cn(
+          "fixed top-0 z-40 flex h-full flex-col border-border bg-background shadow-lg transition-transform duration-200 ease-out",
+          position === "right" ? "right-0 border-l" : "left-0 border-r",
+          openState ? "translate-x-0" : position === "right" ? "translate-x-full" : "-translate-x-full",
+          "max-w-full",
+          className
+        ),
+        "data-state": openState ? "open" : "closed",
+        inert: !openState,
+        ref,
+        style: { width: `${width.toString()}px` },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+AISidebar.displayName = "AISidebar";
+const AISidebarHeader = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "header",
+  {
+    className: cn(
+      "flex items-center gap-2 border-b border-border px-4 py-3",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+AISidebarHeader.displayName = "AISidebarHeader";
+const AISidebarTitle = forwardRef(({ children, className, ...rest }, ref) => {
+  const { labels } = useAISidebar();
+  return /* @__PURE__ */ jsxs(
+    "h2",
+    {
+      className: cn(
+        "flex flex-1 items-center gap-2 text-sm font-semibold tracking-tight text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Bot, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }),
+        children ?? labels.defaultTitle
+      ]
+    }
+  );
+});
+AISidebarTitle.displayName = "AISidebarTitle";
+const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { close, labels } = useAISidebar();
+  const handleCloseSidebar = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      close();
+    },
+    [close, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": labels.close,
+      className: cn("size-8", className),
+      onClick: handleCloseSidebar,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AISidebarClose.displayName = "AISidebarClose";
+const AISidebarContent = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-1 flex-col gap-2 overflow-y-auto p-4", className),
+    ref,
+    ...rest,
+    children
+  }
+));
+AISidebarContent.displayName = "AISidebarContent";
+const AISidebarFooter = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "footer",
+  {
+    className: cn("border-t border-border bg-background px-4 py-3", className),
+    ref,
+    ...rest,
+    children
+  }
+));
+AISidebarFooter.displayName = "AISidebarFooter";
+const AISidebarTrigger = forwardRef(({ children, className, onClick, ...rest }, ref) => {
+  const { labels, openState, toggle } = useAISidebar();
+  const handleToggleSidebar = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      toggle();
+    },
+    [onClick, toggle]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-expanded": openState,
+      "aria-label": children ? void 0 : labels.open,
+      className: cn(className),
+      "data-state": openState ? "open" : "closed",
+      onClick: handleToggleSidebar,
+      ref,
+      size: children ? "sm" : "icon",
+      type: "button",
+      variant: "outline",
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AISidebarTrigger.displayName = "AISidebarTrigger";
+export {
+  AISidebar,
+  AISidebarClose,
+  AISidebarContent,
+  AISidebarFooter,
+  AISidebarHeader,
+  AISidebarProvider,
+  AISidebarTitle,
+  AISidebarTrigger,
+  useAISidebar
+};

package/dist/components/ai-sidebar/index.js

@@ -0,0 +1,22 @@
+import {
+  AISidebar,
+  AISidebarClose,
+  AISidebarContent,
+  AISidebarFooter,
+  AISidebarHeader,
+  AISidebarProvider,
+  AISidebarTitle,
+  AISidebarTrigger,
+  useAISidebar
+} from "./ai-sidebar";
+export {
+  AISidebar,
+  AISidebarClose,
+  AISidebarContent,
+  AISidebarFooter,
+  AISidebarHeader,
+  AISidebarProvider,
+  AISidebarTitle,
+  AISidebarTrigger,
+  useAISidebar
+};

package/dist/components/ai-source-citation/ai-source-citation.js

@@ -18,13 +18,13 @@ const AISourceCitation = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: source })
               ] }),
-              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
+              /* @__PURE__ */ jsx(ExternalLink, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
             ] }) })
           ] }),
           snippet ? /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-6 text-muted-foreground", children: snippet }) : null

package/dist/components/ai-tool-call-display/ai-tool-call-display.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { AlertCircle, CheckCircle2, Clock3, Wrench } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 const statusVariants = cva(
   "rounded-full px-2 py-0 text-[10px] uppercase tracking-wide",
   {
@@ -21,10 +21,10 @@ const statusVariants = cva(
   }
 );
 const statusIconMap = {
-  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }),
-  error: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-  queued: /* @__PURE__ */ jsx(Clock3, { className: "h-4 w-4" }),
-  running: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 animate-pulse" })
+  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
+  queued: /* @__PURE__ */ jsx(Clock3, { className: "size-4" }),
+  running: /* @__PURE__ */ jsx(Wrench, { className: "size-4 animate-pulse" })
 };
 const AIToolCallDisplay = forwardRef(
   ({

package/dist/components/alert-pulse/alert-pulse.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const SEVERITY_STROKE = {
+  error: "stroke-red-500",
+  info: "stroke-blue-500",
+  warn: "stroke-amber-500"
+};
+const SEVERITY_FILL = {
+  error: "fill-red-500/20",
+  info: "fill-blue-500/20",
+  warn: "fill-amber-500/20"
+};
+const SEVERITY_LABEL = {
+  error: "Error",
+  info: "Info",
+  warn: "Warning"
+};
+const safeRadius = (value) => value < 6 ? 6 : value;
+const AlertPulse = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      cx,
+      cy,
+      labels,
+      radius = 36,
+      reducedMotion = false,
+      severity = "warn",
+      ...rest
+    } = props;
+    const r = safeRadius(radius);
+    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+    const size = r * 2 + 24;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "pointer-events-none absolute z-20 overflow-visible",
+          className
+        ),
+        "data-alert-pulse": true,
+        "data-alert-severity": severity,
+        height: size,
+        ref,
+        role: "img",
+        style: {
+          left: cx - size / 2,
+          top: cy - size / 2
+        },
+        width: size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("origin-center", SEVERITY_STROKE[severity]),
+              cx: size / 2,
+              cy: size / 2,
+              fill: "none",
+              r,
+              strokeOpacity: 0.7,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn(
+                "origin-center",
+                SEVERITY_STROKE[severity],
+                SEVERITY_FILL[severity],
+                reducedMotion ? null : "animate-ping"
+              ),
+              cx: size / 2,
+              cy: size / 2,
+              "data-alert-pulse-ring": true,
+              r,
+              strokeOpacity: 0.4,
+              strokeWidth: 2
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertPulse.displayName = "AlertPulse";
+export {
+  AlertPulse
+};

package/dist/components/alert-pulse/index.js

@@ -0,0 +1,6 @@
+import {
+  AlertPulse
+} from "./alert-pulse";
+export {
+  AlertPulse
+};

package/dist/components/anchor-port/anchor-port.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const toneClasses = {
+  bidirectional: "border-violet-500/40 bg-violet-500/15 text-violet-700 dark:text-violet-300",
+  input: "border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300",
+  output: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+};
+const stateClasses = {
+  active: "scale-100 opacity-100",
+  blocked: "opacity-60 saturate-50",
+  idle: "opacity-80"
+};
+const sideClasses = {
+  bottom: "self-end",
+  left: "self-start",
+  right: "self-end",
+  top: "self-start"
+};
+const AnchorPort = forwardRef(
+  ({
+    className,
+    side = "right",
+    state = "idle",
+    tone = "bidirectional",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": props["aria-label"] ?? `${tone} ${side} port ${state}`,
+      className: cn(
+        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+        toneClasses[tone],
+        stateClasses[state],
+        sideClasses[side],
+        className
+      ),
+      "data-side": side,
+      "data-state": state,
+      "data-tone": tone,
+      ref,
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" })
+    }
+  )
+);
+AnchorPort.displayName = "AnchorPort";
+export {
+  AnchorPort
+};

package/dist/components/anchor-port/index.js

@@ -0,0 +1,4 @@
+import { AnchorPort } from "./anchor-port";
+export {
+  AnchorPort
+};

package/dist/components/animated-beam/animated-beam.js

@@ -0,0 +1,158 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function buildGeometry({
+  container,
+  curvature,
+  from,
+  to
+}) {
+  if (container === null || from === null || to === null) {
+    return { height: 0, path: "", width: 0 };
+  }
+  const base = container.getBoundingClientRect();
+  const start = from.getBoundingClientRect();
+  const end = to.getBoundingClientRect();
+  const startX = start.left - base.left + start.width / 2;
+  const startY = start.top - base.top + start.height / 2;
+  const endX = end.left - base.left + end.width / 2;
+  const endY = end.top - base.top + end.height / 2;
+  const controlX = (startX + endX) / 2;
+  const controlY = (startY + endY) / 2 - curvature;
+  const path = `M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`;
+  return { height: base.height, path, width: base.width };
+}
+function useBeamGeometry(props) {
+  const { containerRef, curvature = 0, fromRef, toRef } = props;
+  const [geometry, setGeometry] = React.useState({
+    height: 0,
+    path: "",
+    width: 0
+  });
+  React.useEffect(() => {
+    const container = containerRef.current;
+    const update = () => {
+      setGeometry(
+        buildGeometry({
+          container,
+          curvature,
+          from: fromRef.current,
+          to: toRef.current
+        })
+      );
+    };
+    update();
+    if (container === null || typeof ResizeObserver !== "function") {
+      return;
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef, curvature, fromRef, toRef]);
+  return geometry;
+}
+const AnimatedBeam = React.forwardRef(
+  ({
+    className,
+    containerRef,
+    curvature = 0,
+    duration = 3,
+    fromRef,
+    reverse = false,
+    toRef,
+    ...props
+  }, ref) => {
+    const gradientId = React.useId();
+    const reduced = usePrefersReducedMotion();
+    const { height, path, width } = useBeamGeometry({
+      containerRef,
+      curvature,
+      fromRef,
+      toRef
+    });
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: cn("pointer-events-none absolute inset-0", className),
+        fill: "none",
+        ref,
+        ...props,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        width,
+        children: [
+          /* @__PURE__ */ jsx("path", { className: "stroke-border", d: path, strokeWidth: 2 }),
+          /* @__PURE__ */ jsx("path", { d: path, stroke: `url(#${gradientId})`, strokeWidth: 2 }),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              gradientUnits: "objectBoundingBox",
+              id: gradientId,
+              x1: "0%",
+              x2: "20%",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "oklch(var(--primary) / 0)" }),
+                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "oklch(var(--primary))" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "oklch(var(--primary) / 0)" }),
+                reduced ? null : /* @__PURE__ */ jsx(BeamTravel, { duration, reverse })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedBeam.displayName = "AnimatedBeam";
+function BeamTravel({
+  duration,
+  reverse
+}) {
+  const x1 = reverse ? "100%;-20%" : "-20%;100%";
+  const x2 = reverse ? "120%;0%" : "0%;120%";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "animate",
+      {
+        attributeName: "x1",
+        dur: `${duration}s`,
+        repeatCount: "indefinite",
+        values: x1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "animate",
+      {
+        attributeName: "x2",
+        dur: `${duration}s`,
+        repeatCount: "indefinite",
+        values: x2
+      }
+    )
+  ] });
+}
+export {
+  AnimatedBeam
+};

package/dist/components/animated-beam/index.js

@@ -0,0 +1,4 @@
+import { AnimatedBeam } from "./animated-beam";
+export {
+  AnimatedBeam
+};