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

package/dist/components/terminal/terminal.js

@@ -1,54 +1,66 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Check, Copy, Terminal as TerminalIcon } from "lucide-react";
-import { Button } from "../button";
+import { Button } from "../button/button";
+import { useCopyToClipboard } from "../copy-button/copy-button";
+function getCommandContents(lines) {
+  return lines.reduce((commands, line) => {
+    if (line.type === "command") {
+      commands.push(line.content);
+    }
+    return commands;
+  }, []);
+}
 function Terminal({
   copyable = true,
   lines,
   title = "Terminal"
 }) {
-  const [copied, setCopied] = useState(false);
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(commands.join("\n"));
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+  const { copied, copy } = useCopyToClipboard();
+  const commands = getCommandContents(lines);
+  const handleCopy = () => {
+    void copy(commands.join("\n"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4 text-zinc-400" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       copyable && commands.length > 0 ? /* @__PURE__ */ jsx(
         Button,
         {
-          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          "aria-label": copied ? "Copied" : "Copy commands",
+          className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
           variant: "ghost",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
         }
       ) : null
     ] })
@@ -58,7 +70,7 @@ function SimpleTerminal({
   children,
   title = "Terminal"
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
   const lines = children.trim().split("\n").map((line) => {
     if (line.startsWith("$ ")) {
       return { content: line.slice(2), type: "command" };
@@ -68,46 +80,50 @@ function SimpleTerminal({
     }
     return { content: line, type: "output" };
   });
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(commands.join("\n"));
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+  const commands = getCommandContents(lines);
+  const handleCopy = () => {
+    void copy(commands.join("\n"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4 text-zinc-400" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       commands.length > 0 && /* @__PURE__ */ jsx(
         Button,
         {
-          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          "aria-label": copied ? "Copied" : "Copy commands",
+          className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
           variant: "ghost",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
         }
       )
     ] })

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

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

package/dist/components/text-animate/text-animate.js

@@ -0,0 +1,130 @@
+"use client";
+import { 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 splitText(text, by) {
+  if (by === "character") {
+    return text.match(/[\s\S]/gu) ?? [];
+  }
+  return text.split(/(\s+)/).filter((segment) => segment.length > 0);
+}
+function useInView(enabled) {
+  const nodeRef = React.useRef(null);
+  const [inView, setInView] = React.useState(!enabled);
+  React.useEffect(() => {
+    const node = nodeRef.current;
+    if (!enabled || !node || typeof IntersectionObserver !== "function") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setInView(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled]);
+  return [nodeRef, inView];
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+const animationClasses = {
+  blur: "[filter:blur(6px)] opacity-0",
+  fade: "animate-in fade-in-0",
+  "slide-up": "animate-in fade-in-0 slide-in-from-bottom-2"
+};
+function Segment({
+  animation,
+  delay,
+  index,
+  inView,
+  value
+}) {
+  const blur = animation === "blur";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block whitespace-pre",
+        blur ? cn(
+          "transition-[filter,opacity] duration-500",
+          inView ? "opacity-100 [filter:blur(0)]" : animationClasses.blur
+        ) : inView && cn("fill-mode-both", animationClasses[animation])
+      ),
+      style: { animationDelay: `${index * delay}ms` },
+      children: value
+    }
+  );
+}
+const TextAnimate = React.forwardRef(
+  ({
+    animation = "fade",
+    by = "word",
+    children,
+    className,
+    delay = 60,
+    startOnView = true,
+    ...props
+  }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const [nodeRef, inView] = useInView(startOnView);
+    const segments = splitText(children, by);
+    const visible = reduced || inView;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(className),
+        ref: (node) => {
+          nodeRef.current = node;
+          assignRef(ref, node);
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: segments.map((value, index) => /* @__PURE__ */ jsx(
+            Segment,
+            {
+              animation: reduced ? "fade" : animation,
+              delay: reduced ? 0 : delay,
+              index,
+              inView: visible,
+              value
+            },
+            `${value}-${index}`
+          )) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children })
+        ]
+      }
+    );
+  }
+);
+TextAnimate.displayName = "TextAnimate";
+export {
+  TextAnimate
+};

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

@@ -0,0 +1,4 @@
+import { TextField } from "./text-field";
+export {
+  TextField
+};

package/dist/components/text-field/text-field.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Input } from "../input/input";
+import { Label } from "../label/label";
+const TextField = React.forwardRef(
+  ({
+    className,
+    description,
+    error,
+    id,
+    label,
+    labelClassName,
+    rootClassName,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const descriptionId = `${inputId}-description`;
+    const errorId = `${inputId}-error`;
+    const invalid = Boolean(error);
+    const describedBy = [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", rootClassName), children: [
+      label ? /* @__PURE__ */ jsx(
+        Label,
+        {
+          className: cn(invalid && "text-destructive", labelClassName),
+          htmlFor: inputId,
+          children: label
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...props,
+          "aria-describedby": describedBy,
+          "aria-invalid": invalid || void 0,
+          className,
+          id: inputId,
+          ref
+        }
+      ),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", id: descriptionId, children: description }) : null,
+      error ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-sm font-medium text-destructive",
+          id: errorId,
+          role: "alert",
+          children: error
+        }
+      ) : null
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+export {
+  TextField
+};

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

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

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

@@ -0,0 +1,87 @@
+"use client";
+import { jsx } 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 clamp(value) {
+  return Math.min(Math.max(value, 0), 1);
+}
+function useScrollProgress(nodeRef, enabled) {
+  const [progress, setProgress] = React.useState(enabled ? 0 : 1);
+  React.useEffect(() => {
+    const node = nodeRef.current;
+    if (!enabled || !node || typeof window === "undefined") {
+      setProgress(1);
+      return;
+    }
+    const onScroll = () => {
+      const bounds = node.getBoundingClientRect();
+      const span = bounds.height + window.innerHeight;
+      setProgress(clamp((window.innerHeight - bounds.top) / span));
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [enabled, nodeRef]);
+  return progress;
+}
+function wordOpacity(progress, total, index) {
+  return Math.min(Math.max(progress * total - index, 0.2), 1);
+}
+const TextReveal = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const nodeRef = React.useRef(null);
+    const progress = useScrollProgress(nodeRef, !reduced);
+    const words = children.split(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": children,
+        className: cn("flex flex-wrap gap-x-[0.25em]", className),
+        ref: (node) => {
+          nodeRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        ...props,
+        children: words.map((word, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "text-foreground transition-opacity duration-300",
+            style: { opacity: wordOpacity(progress, words.length, index) },
+            children: word
+          },
+          `${word}-${index}`
+        ))
+      }
+    );
+  }
+);
+TextReveal.displayName = "TextReveal";
+export {
+  TextReveal
+};

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

@@ -0,0 +1,4 @@
+import { TextShimmer } from "./text-shimmer";
+export {
+  TextShimmer
+};

package/dist/components/text-shimmer/text-shimmer.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const TextShimmer = React.forwardRef(
+  ({ children, className, duration = 2, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-block animate-[vllnt-text-shimmer_linear_infinite] bg-clip-text text-transparent motion-reduce:animate-none",
+          className
+        ),
+        ref,
+        style: {
+          animationDuration: `${duration}s`,
+          background: "linear-gradient(90deg, oklch(var(--muted-foreground) / 0.5), oklch(var(--foreground)), oklch(var(--muted-foreground) / 0.5))",
+          backgroundSize: "200% auto",
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextShimmer.displayName = "TextShimmer";
+export {
+  TextShimmer
+};

package/dist/components/theme-preset-provider/index.js

@@ -0,0 +1,4 @@
+import { ThemePresetProvider } from "./theme-preset-provider";
+export {
+  ThemePresetProvider
+};

package/dist/components/theme-preset-provider/theme-preset-provider.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESET_STORAGE_KEY
+} from "../../lib/theme-presets";
+import { setThemePreset } from "../../lib/use-theme-preset";
+const FOUC_SCRIPT = `(function(){try{var v=localStorage.getItem(${JSON.stringify(
+  THEME_PRESET_STORAGE_KEY
+)});if(!v||v===${JSON.stringify(
+  DEFAULT_THEME_PRESET
+)})return;document.documentElement.setAttribute("data-theme",v);if(v===${JSON.stringify(
+  CUSTOM_THEME_NAME
+)}){var c=localStorage.getItem(${JSON.stringify(
+  THEME_CUSTOM_CSS_STORAGE_KEY
+)});if(c){var s=document.createElement("style");s.id=${JSON.stringify(
+  THEME_CUSTOM_STYLE_ID
+)};s.textContent=c;document.head.appendChild(s);}}}catch(e){}})();`;
+function ThemePresetProvider({
+  children,
+  defaultPreset
+}) {
+  useEffect(() => {
+    if (!defaultPreset || defaultPreset === DEFAULT_THEME_PRESET) {
+      return;
+    }
+    let stored = null;
+    try {
+      stored = window.localStorage.getItem(THEME_PRESET_STORAGE_KEY);
+    } catch {
+      stored = null;
+    }
+    if (!stored && isThemePresetName(defaultPreset)) {
+      setThemePreset(defaultPreset);
+    }
+  }, [defaultPreset]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "script",
+      {
+        dangerouslySetInnerHTML: { __html: FOUC_SCRIPT },
+        suppressHydrationWarning: true
+      }
+    ),
+    children
+  ] });
+}
+export {
+  ThemePresetProvider
+};

package/dist/components/theme-switcher/index.js

@@ -0,0 +1,4 @@
+import { ThemeSwitcher } from "./theme-switcher";
+export {
+  ThemeSwitcher
+};

package/dist/components/theme-switcher/theme-switcher.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMounted } from "../../lib/use-mounted";
+import { useThemePreset } from "../../lib/use-theme-preset";
+import { cn } from "../../lib/utils";
+function ThemeSwitcher({ className }) {
+  const mounted = useMounted();
+  const { preset, presets, setPreset } = useThemePreset();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Theme preset",
+      className: cn("flex items-center gap-1.5", className),
+      role: "radiogroup",
+      children: presets.map((item) => {
+        const active = mounted && preset === item.name;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-checked": active,
+            "aria-label": item.label,
+            className: cn(
+              "size-6 rounded-full border transition-transform hover:scale-110",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              active ? "border-foreground ring-2 ring-ring ring-offset-2 ring-offset-background" : "border-border"
+            ),
+            onClick: () => {
+              setPreset(item.name);
+            },
+            role: "radio",
+            style: { backgroundColor: item.swatch },
+            title: item.label,
+            type: "button"
+          },
+          item.name
+        );
+      })
+    }
+  );
+}
+export {
+  ThemeSwitcher
+};

package/dist/components/theme-toggle/theme-toggle.js

@@ -20,7 +20,7 @@ function ThemeButton({
     Button,
     {
       "aria-label": ariaLabel,
-      className: "bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
+      className: "bg-background text-foreground border border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors",
       size: "icon",
       variant: "outline",
       ...props,
@@ -120,7 +120,7 @@ function ThemeToggle({ dict }) {
       DropdownMenuContent,
       {
         align: "end",
-        className: "bg-background border border-gray-300 dark:border-gray-600",
+        className: "bg-background border border-zinc-300 dark:border-zinc-600",
         onMouseEnter: () => {
           isHoveringOverMenuAreaReference.current = true;
           clearCloseTimer();

package/dist/components/thinking-block/thinking-block.js

@@ -30,10 +30,10 @@ function ThinkingBlock({
         onClick: toggleExpanded,
         type: "button",
         children: [
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "Thinking",
-            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "..." }) : null
+            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "\u2026" }) : null
           ] })
         ]
       }
@@ -41,7 +41,7 @@ function ThinkingBlock({
     isExpanded ? /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto",
+        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto",
         id: contentId,
         children: [
           thinking,