@vllnt/ui 0.3.0-canary.a42d8f4 → 0.3.0-canary.ce98eca

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

@@ -2,10 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
+  useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 import {
@@ -47,7 +48,7 @@ const DEFAULT_CONTEXT = {
 };
 const AIArtifactContext = createContext(DEFAULT_CONTEXT);
 function useAIArtifact() {
-  return useContext(AIArtifactContext);
+  return use(AIArtifactContext);
 }
 function pickExtension(type, language) {
   if (language) return language;
@@ -121,6 +122,24 @@ function ArtifactHeader({
     subtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle }) : null
   ] });
 }
+function useCopiedFlag() {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(
+    () => () => {
+      clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const flagCopied = useCallback(() => {
+    setCopied(true);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, COPIED_TIMEOUT_MS);
+  }, []);
+  return { copied, flagCopied };
+}
 function useArtifactController(options) {
   const {
     defaultFullscreen,
@@ -133,7 +152,7 @@ function useArtifactController(options) {
     value
   } = options;
   const [fullscreen, setFullscreen] = useState(defaultFullscreen);
-  const [copied, setCopied] = useState(false);
+  const { copied, flagCopied } = useCopiedFlag();
   const resolvedFilename = useMemo(
     () => buildFilename({ filename, language, title, type }),
     [filename, language, title, type]
@@ -141,12 +160,9 @@ function useArtifactController(options) {
   const copy = useCallback(async () => {
     const ok = await writeToClipboard(value);
     if (!ok) return false;
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, COPIED_TIMEOUT_MS);
+    flagCopied();
     return true;
-  }, [value]);
+  }, [flagCopied, value]);
   const download = useCallback(() => {
     downloadValueAsFile(value, resolvedFilename);
   }, [resolvedFilename, value]);
@@ -185,66 +201,71 @@ function useArtifactController(options) {
     ]
   );
 }
-const AIArtifact = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultFullscreen = false,
-      filename,
-      labels,
-      language = "",
-      onEdit,
-      subtitle,
-      title,
-      type = "code",
-      value = "",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const contextValue = useArtifactController({
-      defaultFullscreen,
-      filename,
-      labels: resolvedLabels,
-      language,
-      onEdit,
-      title,
-      type,
-      value
-    });
-    return /* @__PURE__ */ jsx(AIArtifactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": typeof title === "string" ? title : void 0,
-        className: cn(
-          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
-          className
+const AIArtifact = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    defaultFullscreen = false,
+    filename,
+    labels,
+    language = "",
+    onEdit,
+    subtitle,
+    title,
+    type = "code",
+    value = "",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const contextValue = useArtifactController({
+    defaultFullscreen,
+    filename,
+    labels: resolvedLabels,
+    language,
+    onEdit,
+    title,
+    type,
+    value
+  });
+  return /* @__PURE__ */ jsx(AIArtifactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": typeof title === "string" ? title : void 0,
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+        className
+      ),
+      "data-fullscreen": contextValue.fullscreen ? "true" : "false",
+      "data-type": type,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ArtifactHeader,
+          {
+            language,
+            subtitle,
+            title,
+            type
+          }
         ),
-        "data-fullscreen": contextValue.fullscreen ? "true" : "false",
-        "data-type": type,
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            ArtifactHeader,
-            {
-              language,
-              subtitle,
-              title,
-              type
-            }
-          ),
-          children
-        ]
-      }
-    ) });
-  }
-);
+        children
+      ]
+    }
+  ) });
+};
 AIArtifact.displayName = "AIArtifact";
-const AIArtifactToolbar = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AIArtifactToolbar = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -255,9 +276,14 @@ const AIArtifactToolbar = forwardRef(({ className, ...rest }, ref) => /* @__PURE
     role: "toolbar",
     ...rest
   }
-));
+);
 AIArtifactToolbar.displayName = "AIArtifactToolbar";
-const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+const AIArtifactCopyButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}) => {
   const { copied, copy, labels } = useAIArtifact();
   const handleCopyArtifact = useCallback(
     (event) => {
@@ -281,9 +307,14 @@ const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) =
       children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "size-4" })
     }
   );
-});
+};
 AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
-const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+const AIArtifactEditButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}) => {
   const { hasOnEdit, labels, onEdit } = useAIArtifact();
   const handleEditArtifact = useCallback(
     (event) => {
@@ -308,9 +339,14 @@ const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) =
       children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" })
     }
   );
-});
+};
 AIArtifactEditButton.displayName = "AIArtifactEditButton";
-const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+const AIArtifactDownloadButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}) => {
   const { download, labels } = useAIArtifact();
   const handleDownloadArtifact = useCallback(
     (event) => {
@@ -334,9 +370,14 @@ const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, re
       children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "size-4" })
     }
   );
-});
+};
 AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
-const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+const AIArtifactFullscreenButton = ({
+  className,
+  onClick,
+  ref,
+  ...rest
+}) => {
   const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
   const handleToggleArtifactFullscreen = useCallback(
     (event) => {
@@ -361,9 +402,13 @@ const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest },
       children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "size-4" })
     }
   );
-});
+};
 AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
-const AIArtifactContent = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AIArtifactContent = ({
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -373,9 +418,14 @@ const AIArtifactContent = forwardRef(({ className, ...rest }, ref) => /* @__PURE
     ref,
     ...rest
   }
-));
+);
 AIArtifactContent.displayName = "AIArtifactContent";
-const AIArtifactVersions = forwardRef(({ children, className, ...rest }, ref) => {
+const AIArtifactVersions = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
   const { labels } = useAIArtifact();
   return /* @__PURE__ */ jsx(
     "nav",
@@ -390,9 +440,15 @@ const AIArtifactVersions = forwardRef(({ children, className, ...rest }, ref) =>
       children
     }
   );
-});
+};
 AIArtifactVersions.displayName = "AIArtifactVersions";
-const AIArtifactVersion = forwardRef(({ active = false, className, label, ...rest }, ref) => /* @__PURE__ */ jsx(
+const AIArtifactVersion = ({
+  active = false,
+  className,
+  label,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "button",
   {
     "aria-current": active ? "true" : void 0,
@@ -406,7 +462,7 @@ const AIArtifactVersion = forwardRef(({ active = false, className, label, ...res
     ...rest,
     children: label
   }
-));
+);
 AIArtifactVersion.displayName = "AIArtifactVersion";
 export {
   AIArtifact,

package/dist/components/ai-chat-input/ai-chat-input.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-import { Textarea } from "../textarea";
+import { Textarea } from "../textarea/textarea";
 const formShellVariants = cva(
   "rounded-2xl border border-border/70 bg-background shadow-sm"
 );
@@ -43,64 +42,65 @@ function AIChatInputFooter({
     )
   ] });
 }
-const AIChatInput = forwardRef(
-  ({
-    className,
-    disabled = false,
-    helperText,
-    isSubmitting = false,
-    onSubmit,
-    onValueChange,
-    status,
-    submitLabel = "Send",
-    textareaProps,
-    toolbar,
-    value,
-    ...props
-  }, ref) => {
-    const currentValue = value ?? "";
-    const maxLength = textareaProps?.maxLength;
-    const isSubmitDisabled = disabled || isSubmitting || currentValue.trim().length === 0;
-    return /* @__PURE__ */ jsx(
-      "form",
-      {
-        className: cn(formShellVariants(), "w-full p-3", className),
-        onSubmit,
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
-              disabled,
-              onChange: (event) => {
-                textareaProps?.onChange?.(event);
-                onValueChange?.(event.target.value);
-              },
-              placeholder: "Ask a follow-up question, paste context, or describe what you need...",
-              value,
-              ...textareaProps
-            }
-          ),
-          toolbar ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: toolbar }) : null,
-          /* @__PURE__ */ jsx(
-            AIChatInputFooter,
-            {
-              currentLength: currentValue.length,
-              helperText,
-              isSubmitDisabled,
-              isSubmitting,
-              maxLength,
-              status,
-              submitLabel
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
+const AIChatInput = ({
+  className,
+  disabled = false,
+  helperText,
+  inputLabel = "Chat message",
+  isSubmitting = false,
+  onSubmit,
+  onValueChange,
+  ref,
+  status,
+  submitLabel = "Send",
+  textareaProps,
+  toolbar,
+  value,
+  ...props
+}) => {
+  const currentValue = value ?? "";
+  const maxLength = textareaProps?.maxLength;
+  const isSubmitDisabled = disabled || isSubmitting || currentValue.trim().length === 0;
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: cn(formShellVariants(), "w-full p-3", className),
+      onSubmit,
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            "aria-label": inputLabel,
+            className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+            disabled,
+            onChange: (event) => {
+              textareaProps?.onChange?.(event);
+              onValueChange?.(event.target.value);
+            },
+            placeholder: "Ask a follow-up question, paste context, or describe what you need...",
+            value,
+            ...textareaProps
+          }
+        ),
+        toolbar ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: toolbar }) : null,
+        /* @__PURE__ */ jsx(
+          AIChatInputFooter,
+          {
+            currentLength: currentValue.length,
+            helperText,
+            isSubmitDisabled,
+            isSubmitting,
+            maxLength,
+            status,
+            submitLabel
+          }
+        )
+      ] })
+    }
+  );
+};
 AIChatInput.displayName = "AIChatInput";
 export {
   AIChatInput

package/dist/components/ai-message-bubble/ai-message-bubble.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { Avatar, AvatarFallback } from "../avatar/avatar";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 const bubbleVariants = cva(
   "rounded-2xl border px-4 py-3 shadow-sm transition-colors",
   {
@@ -48,71 +47,70 @@ function AIMessageMeta({
     }
   );
 }
-const AIMessageBubble = forwardRef(
-  ({
-    author,
-    children,
-    className,
-    messageRole = "assistant",
-    status,
-    timestamp,
-    ...props
-  }, ref) => {
-    const resolvedMessageRole = messageRole ?? "assistant";
-    const isUser = resolvedMessageRole === "user";
-    const fallbackLabel = (author ?? resolvedMessageRole).charAt(0).toUpperCase();
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex w-full", isUser ? "justify-end" : "justify-start"),
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex w-full max-w-3xl gap-3",
-              isUser ? "flex-row-reverse text-right" : "flex-row"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 size-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "min-w-0 space-y-2",
-                    isUser ? "items-end" : "items-start"
+const AIMessageBubble = ({
+  author,
+  children,
+  className,
+  messageRole = "assistant",
+  ref,
+  status,
+  timestamp,
+  ...props
+}) => {
+  const resolvedMessageRole = messageRole ?? "assistant";
+  const isUser = resolvedMessageRole === "user";
+  const fallbackLabel = (author ?? resolvedMessageRole).charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex w-full", isUser ? "justify-end" : "justify-start"),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex w-full max-w-3xl gap-3",
+            isUser ? "flex-row-reverse text-right" : "flex-row"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 size-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "min-w-0 space-y-2",
+                  isUser ? "items-end" : "items-start"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    AIMessageMeta,
+                    {
+                      author,
+                      isUser,
+                      status,
+                      timestamp
+                    }
                   ),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      AIMessageMeta,
-                      {
-                        author,
-                        isUser,
-                        status,
-                        timestamp
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          bubbleVariants({ messageRole: resolvedMessageRole }),
-                          className
-                        ),
-                        ref,
-                        ...props,
-                        children: /* @__PURE__ */ jsx("div", { className: "text-sm leading-6 whitespace-pre-wrap", children })
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        bubbleVariants({ messageRole: resolvedMessageRole }),
+                        className
+                      ),
+                      ref,
+                      ...props,
+                      children: /* @__PURE__ */ jsx("div", { className: "text-sm leading-6 whitespace-pre-wrap", children })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 AIMessageBubble.displayName = "AIMessageBubble";
 export {
   AIMessageBubble