@cntyclub/ui-react 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.11.0",
+  "version": "0.12.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": [

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

@@ -76,13 +76,15 @@ export function AuroraOrb({
     const draw = MODE_DRAWS[mode];
     const rate = baseSpeed * speed;
 
-    const paint = (t: number) => {
+    const paint = (t: number, wall: 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;
+      // Recolor the frame: a linear gradient across the orb, rotating so the
+      // colors drift the way AuroraText's sweep does. Driven by wall-clock
+      // (~5s per turn) rather than the preset-scaled t, so the drift stays
+      // visible even for slow presets/speeds.
+      const angle = wall * 1.2;
       const r = size / 2;
       const dx = Math.cos(angle) * r;
       const dy = Math.sin(angle) * r;
@@ -98,7 +100,7 @@ export function AuroraOrb({
 
     // Reduced motion: a single still frame, matching the stock component.
     if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
-      paint(0.6);
+      paint(0.6, 0.6);
       return;
     }
 
@@ -107,7 +109,8 @@ export function AuroraOrb({
     let frame = 0;
     let running = false;
     const loop = () => {
-      paint((performance.now() / 1000) * rate);
+      const now = performance.now() / 1000;
+      paint(now * rate, now);
       if (running) frame = requestAnimationFrame(loop);
     };
     const start = () => {
@@ -120,7 +123,8 @@ export function AuroraOrb({
       cancelAnimationFrame(frame);
     };
 
-    paint((performance.now() / 1000) * rate);
+    const first = performance.now() / 1000;
+    paint(first * rate, first);
     let visible = true;
     const observer =
       typeof IntersectionObserver !== "undefined"

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

@@ -0,0 +1,6 @@
+// Stock monochrome thinking orb — six hand-tuned dotted animations with
+// automatic light/dark ink (data-theme / .dark class / prefers-color-scheme).
+// Re-exported from the thinking-orbs package so kit consumers get it alongside
+// AuroraOrb without depending on thinking-orbs directly. For the
+// aurora-gradient recolored variant see ./aurora-orb.
+export { ThinkingOrb, type OrbTheme, type ThinkingOrbProps } from "thinking-orbs";

package/src/index.ts

@@ -89,6 +89,7 @@ export * from "./components/ui/table";
 export * from "./components/ui/tabs";
 export * from "./components/ui/tag";
 export { default as TargetCountdown } from "./components/ui/target-countdown";
+export * from "./components/ui/thinking-orb";
 export * from "./components/ui/timeline";
 export * from "./components/ui/text-editor";
 export * from "./components/ui/textarea";