@cntyclub/ui-react 0.10.6 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.10.6",
+  "version": "0.11.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [
@@ -55,6 +55,7 @@
     "remark-gfm": "^4.0.1",
     "spin-delay": "^2.0.1",
     "tailwind-merge": "^3.4.0",
+    "thinking-orbs": "0.1.1",
     "tw-animate-css": "^1.4.0",
     "use-resize-observer": "^9.1.0",
     "vaul": "^1.1.2",

package/src/components/ui/aurora-orb.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { MODE_DRAWS, resolvePreset, type OrbSize, type OrbState } from "thinking-orbs";
+
+import { cn } from "../../lib/utils/css";
+
+// Re-exported so consumers can type their own props without depending on
+// thinking-orbs directly.
+export type { OrbSize, OrbState } from "thinking-orbs";
+
+/** AuroraText's default RGB stops, so orb + text read as one piece. */
+const DEFAULT_COLORS = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"];
+
+export interface AuroraOrbProps {
+  /**
+   * Which thinking-orbs animation to show: "working" | "searching" |
+   * "solving" | "listening" | "composing" | "shaping". Default "working".
+   */
+  state?: OrbState;
+  /** Tuned size preset from thinking-orbs — 20 (inline) or 64 (avatar). Default 20. */
+  size?: OrbSize;
+  /** Animation speed multiplier on top of the preset's baked speed. Default 1. */
+  speed?: number;
+  /**
+   * Gradient stops swept across the dots, matching AuroraText's default RGB
+   * set (pink → purple → blue → sky). Vivid stops stay legible on both light
+   * and dark backgrounds — the dots are painted with these colors directly.
+   */
+  colors?: string[];
+  className?: string;
+}
+
+/**
+ * A `thinking-orbs` orb recolored with the aurora gradient — the dotted-orb
+ * counterpart to `AuroraText`.
+ *
+ * The stock `<ThinkingOrb>` has no color API (its canvas paints monochrome
+ * theme ink only), but the package exports its frame painters (`MODE_DRAWS` +
+ * `resolvePreset`) for custom rendering. So we run the same animation loop
+ * and, after each frame, composite a slowly rotating aurora gradient onto the
+ * dots via `source-in`: the dots' alpha (their depth shading) survives while
+ * their ink color is replaced by the gradient. Theme detection becomes
+ * unnecessary — the gradient works on light and dark backgrounds alike.
+ * Respects prefers-reduced-motion (renders a single still frame).
+ *
+ * @example
+ * <AuroraOrb state="solving" speed={0.7} />
+ * <AuroraOrb size={64} colors={["#22d3ee", "#a855f7", "#f43f5e"]} />
+ */
+export function AuroraOrb({
+  className,
+  colors = DEFAULT_COLORS,
+  size = 20,
+  speed = 1,
+  state = "working",
+}: AuroraOrbProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // A joined key keeps the effect's deps primitive (an inline `colors` array
+  // would otherwise retrigger every render). Joined on a control character so
+  // comma-bearing stops like rgb(255, 0, 128) survive the round-trip.
+  const colorsKey = colors.join("\u001f");
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const dpr = Math.min(2, (typeof devicePixelRatio !== "undefined" && devicePixelRatio) || 1);
+    canvas.width = Math.round(size * dpr);
+    canvas.height = Math.round(size * dpr);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Guard colors={[]}: an empty array bypasses the default parameter.
+    const stops = colorsKey ? colorsKey.split("\u001f") : DEFAULT_COLORS;
+    const { mode, speed: baseSpeed, opts } = resolvePreset(state, size);
+    const draw = MODE_DRAWS[mode];
+    const rate = baseSpeed * speed;
+
+    const paint = (t: number) => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, size, size);
+      draw(ctx, size, t, false, opts);
+      // Recolor the frame: a linear gradient across the orb, rotating slowly
+      // so the colors drift the way AuroraText's gradient sweep does.
+      const angle = t * 0.5;
+      const r = size / 2;
+      const dx = Math.cos(angle) * r;
+      const dy = Math.sin(angle) * r;
+      const gradient = ctx.createLinearGradient(r - dx, r - dy, r + dx, r + dy);
+      stops.forEach((color, i) => {
+        gradient.addColorStop(stops.length === 1 ? 0 : i / (stops.length - 1), color);
+      });
+      ctx.globalCompositeOperation = "source-in";
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, size, size);
+      ctx.globalCompositeOperation = "source-over";
+    };
+
+    // Reduced motion: a single still frame, matching the stock component.
+    if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      paint(0.6);
+      return;
+    }
+
+    // Animation loop, paused while the orb is off-screen or the tab is
+    // hidden — mirroring the stock ThinkingOrb's behavior.
+    let frame = 0;
+    let running = false;
+    const loop = () => {
+      paint((performance.now() / 1000) * rate);
+      if (running) frame = requestAnimationFrame(loop);
+    };
+    const start = () => {
+      if (running) return;
+      running = true;
+      frame = requestAnimationFrame(loop);
+    };
+    const stop = () => {
+      running = false;
+      cancelAnimationFrame(frame);
+    };
+
+    paint((performance.now() / 1000) * rate);
+    let visible = true;
+    const observer =
+      typeof IntersectionObserver !== "undefined"
+        ? new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) return;
+            visible = entry.isIntersecting;
+            if (visible && document.visibilityState !== "hidden") start();
+            else stop();
+          })
+        : null;
+    observer?.observe(canvas);
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "hidden") stop();
+      else if (visible) start();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    if (!observer) start();
+
+    return () => {
+      stop();
+      observer?.disconnect();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [colorsKey, size, speed, state]);
+
+  return (
+    <canvas
+      aria-hidden="true"
+      className={cn("shrink-0", className)}
+      data-slot="aurora-orb"
+      ref={canvasRef}
+      style={{ width: size, height: size, display: "block" }}
+    />
+  );
+}

package/src/components/upload/image-upload-base.tsx

@@ -58,7 +58,7 @@ export function ImageUploadBase({
       )}
       {...props}
     >
-      <div className="flex flex-col relative rounded-md">
+      <div className="grow flex flex-col relative rounded-md">
         <input {...getInputProps()} />
         <Avatar
           key={imageUrl ?? "none"}
@@ -71,7 +71,7 @@ export function ImageUploadBase({
         </Avatar>
         <div
           data-active={loading || isDragActive}
-          className="flex justify-center items-center [--opacity:0] p-8 data-[active=true]:[--opacity:1] peer-has-data-[slot=avatar-fallback]/avatar:[--opacity:1] group-hover/image-upload-root:[--opacity:1] relative z-10 rounded-[inherit] bg-background/[calc(55%*var(--opacity))] backdrop-blur-[calc(var(--blur-xs)*var(--opacity))] gap-3 transition"
+          className="grow flex justify-center items-center [--opacity:0] p-8 data-[active=true]:[--opacity:1] peer-has-data-[slot=avatar-fallback]/avatar:[--opacity:1] group-hover/image-upload-root:[--opacity:1] relative z-10 rounded-[inherit] bg-background/[calc(55%*var(--opacity))] backdrop-blur-[calc(var(--blur-xs)*var(--opacity))] gap-3 transition"
         >
           <Button
             size="sm"

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./components/ui/alert-dialog";
 export * from "./components/ui/animated-theme-toggler";
 export * from "./components/ui/app-store-buttons";
 export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/aurora-orb";
 export * from "./components/ui/aurora-text";
 export * from "./components/ui/autocomplete";
 export * from "./components/ui/avatar";