@cntyclub/ui-react 0.11.0 → 0.13.0

package/package.json

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

@@ -47,7 +47,10 @@ export const AuroraText = memo(function AuroraText({
     backgroundClip: "text",
     WebkitTextFillColor: "transparent",
     color: "transparent",
-    animationDuration: `${10 / speed}s`,
+    // Full `animation` inline (not the `animate-aurora` utility): the keyframe
+    // ships in styles.css unconditionally, so the sweep runs even if the
+    // consumer's Tailwind never generates that utility class.
+    animation: `aurora ${10 / speed}s ease infinite`,
   };
 
   return (
@@ -57,13 +60,13 @@ export const AuroraText = memo(function AuroraText({
       {glow ? (
         <span
           aria-hidden="true"
-          className="animate-aurora pointer-events-none absolute inset-0 select-none blur-[6px] opacity-60"
+          className="pointer-events-none absolute inset-0 select-none blur-[6px] opacity-60"
           style={gradientStyle}
         >
           {children}
         </span>
       ) : null}
-      <span aria-hidden="true" className="animate-aurora relative" style={gradientStyle}>
+      <span aria-hidden="true" className="relative" style={gradientStyle}>
         {children}
       </span>
     </span>

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";

package/src/styles.css

@@ -14,6 +14,24 @@
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
+/*
+ * Emitted unconditionally (NOT inside @theme) so AuroraText's gradient sweep
+ * runs in every consumer — even when their Tailwind build doesn't generate the
+ * `animate-aurora` utility from the theme token (keyframes declared inside
+ * @theme are dropped unless that utility is scanned/used). AuroraText applies
+ * this keyframe via an inline `animation`, so it no longer depends on the
+ * utility class existing at all.
+ */
+@keyframes aurora {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
   --animate-qr-scan: qr-scan 2.6s ease-in-out infinite alternate;