@cntyclub/ui-react 0.10.3 → 0.10.5

package/package.json

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { memo, type CSSProperties, type ReactNode } from "react";
+
+import { cn } from "../../lib/utils/css";
+
+export interface AuroraTextProps {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Gradient stops, cycled left→right and looped back to the first. The default
+   * is a vivid RGB set (pink → purple → blue → sky) chosen to stay legible on
+   * BOTH light and dark backgrounds — the text is painted with these colors
+   * (transparent fill + clipped gradient), so it never depends on the page bg.
+   */
+  colors?: string[];
+  /** Animation speed multiplier. 1 ≈ a 10s loop; 2 is twice as fast. */
+  speed?: number;
+  /** Add a soft, blurred RGB halo behind the text (a subtle aura). */
+  glow?: boolean;
+}
+
+const DEFAULT_COLORS = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"];
+
+/**
+ * Animated RGB gradient text: the gradient slowly sweeps across the glyphs on a
+ * loop (via `background-position`, so it's GPU-composited and cheap — safe on
+ * mobile). Purely CSS; no JS ticking. The real text is kept in an `sr-only`
+ * span so it stays selectable/announced while the visible layer is decorative.
+ *
+ * @example
+ * <AuroraText>Thinking</AuroraText>
+ * <AuroraText glow speed={1.4} colors={["#22d3ee", "#a855f7", "#f43f5e"]}>Live</AuroraText>
+ */
+export const AuroraText = memo(function AuroraText({
+  children,
+  className,
+  colors = DEFAULT_COLORS,
+  speed = 1,
+  glow = false,
+}: AuroraTextProps) {
+  const gradientStyle: CSSProperties = {
+    backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${colors[0]})`,
+    // Oversized so the sweep has room to travel before repeating.
+    backgroundSize: "200% auto",
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    animationDuration: `${10 / speed}s`,
+  };
+
+  return (
+    <span className={cn("relative inline-block", className)}>
+      {/* Accessible, copyable text; the colored layers below are decorative. */}
+      <span className="sr-only">{children}</span>
+      {glow ? (
+        <span
+          aria-hidden="true"
+          className="animate-aurora 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}>
+        {children}
+      </span>
+    </span>
+  );
+});
+
+AuroraText.displayName = "AuroraText";

package/src/components/ui/smooth-scroll.tsx

@@ -19,7 +19,16 @@ export interface SmoothWheelOptions {
  * Eased, momentum-style wheel scrolling for any scrollable element. Instead of
  * jumping `scrollTop`/`scrollLeft` by the raw wheel delta (which feels fast and
  * abrupt), it animates toward an accumulated target with `requestAnimationFrame`.
- * At the start/end edge it lets the wheel bubble so the page can still scroll.
+ *
+ * It only smooths genuine mouse wheels. Trackpads already scroll smoothly with
+ * OS-level inertia, so layering our own easing on top makes it fight the native
+ * momentum — the container sticks, or snaps back to where the animation was
+ * still heading. In the default vertical mode a trackpad therefore keeps native
+ * behaviour; in horizontal mode we still translate a vertical mouse wheel into
+ * horizontal scrolling (the whole point of the mode) but let a real horizontal
+ * trackpad swipe scroll natively. Every time control returns to native
+ * scrolling — trackpad, or an edge — the in-flight animation is cancelled and
+ * the target resynced so it can never pull the position back.
  */
 export function useSmoothWheel(
   ref: React.RefObject<HTMLElement | null>,
@@ -47,6 +56,17 @@ export function useSmoothWheel(
     let target = el[axisProp];
     let raf = 0;
     let animating = false;
+    let kind: "mouse" | "trackpad" | null = null;
+    let lastTs = 0;
+
+    // Cancel the animation and resync the target to the real position, so any
+    // native scrolling that follows is never yanked back to a stale target.
+    const releaseToNative = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = 0;
+      animating = false;
+      target = el[axisProp];
+    };
 
     const tick = () => {
       const max = el[sizeProp] - el[clientProp];
@@ -55,6 +75,7 @@ export function useSmoothWheel(
       const diff = target - current;
       if (Math.abs(diff) < 0.5) {
         el[axisProp] = target;
+        raf = 0;
         animating = false;
         return;
       }
@@ -62,27 +83,69 @@ export function useSmoothWheel(
       raf = requestAnimationFrame(tick);
     };
 
-    const normalize = (event: WheelEvent) => {
-      let delta =
-        horizontal && event.deltaX !== 0 ? event.deltaX : event.deltaY;
-      // deltaMode: 0 = pixel, 1 = line, 2 = page.
-      if (event.deltaMode === 1) delta *= 16;
-      else if (event.deltaMode === 2) delta *= el[clientProp];
-      return delta;
+    // Strong per-event trackpad signals: fractional deltas, a horizontal
+    // component (mice almost never emit deltaX), or small pixel steps.
+    const looksLikeTrackpad = (e: WheelEvent) =>
+      e.deltaMode === 0 &&
+      (!Number.isInteger(e.deltaY) ||
+        e.deltaX !== 0 ||
+        Math.abs(e.deltaY) < 50);
+
+    // Sticky, gesture-scoped classification: decide once per burst of events
+    // (< 200ms apart) so a hard trackpad flick whose mid-gesture deltas look
+    // mouse-like stays classified as a trackpad the whole way through.
+    const classify = (e: WheelEvent, now: number): "mouse" | "trackpad" => {
+      if (kind === null || now - lastTs > 200) {
+        kind = looksLikeTrackpad(e) ? "trackpad" : "mouse";
+      } else if (
+        kind === "mouse" &&
+        (e.deltaX !== 0 || !Number.isInteger(e.deltaY))
+      ) {
+        kind = "trackpad";
+      }
+      return kind;
     };
 
     const onWheel = (event: WheelEvent) => {
+      if (event.ctrlKey) return; // pinch-zoom
       const max = el[sizeProp] - el[clientProp];
       if (max <= 0) return;
-      if (!animating) target = el[axisProp];
 
-      const delta = normalize(event) * multiplier;
+      const now = performance.now();
+      const source = classify(event, now);
+      lastTs = now;
+
+      if (horizontal) {
+        // Native handles a real horizontal swipe; we only translate the
+        // vertical wheel (mouse, or a trackpad's vertical swipe) into
+        // horizontal motion — that translation is the reason the mode exists.
+        if (event.deltaX !== 0 && Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+          releaseToNative();
+          return;
+        }
+      } else if (source === "trackpad") {
+        // Vertical mode: let the OS scroll the trackpad natively.
+        releaseToNative();
+        return;
+      }
+
+      let delta =
+        horizontal && event.deltaX !== 0 ? event.deltaX : event.deltaY;
+      // deltaMode: 0 = pixel, 1 = line, 2 = page.
+      if (event.deltaMode === 1) delta *= 16;
+      else if (event.deltaMode === 2) delta *= el[clientProp];
+      delta *= multiplier;
       if (delta === 0) return;
 
+      if (!animating) target = el[axisProp];
+
       const atStart = target <= 0;
       const atEnd = target >= max;
       // Let the wheel bubble at the edges so the page keeps scrolling.
-      if ((delta < 0 && atStart) || (delta > 0 && atEnd)) return;
+      if ((delta < 0 && atStart) || (delta > 0 && atEnd)) {
+        releaseToNative();
+        return;
+      }
 
       event.preventDefault();
       target = Math.max(0, Math.min(target + delta, max));

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-text";
 export * from "./components/ui/autocomplete";
 export * from "./components/ui/avatar";
 export * from "./components/ui/avatar-group";

package/src/styles.css

@@ -17,6 +17,7 @@
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
   --animate-qr-scan: qr-scan 2.6s ease-in-out infinite alternate;
+  --animate-aurora: aurora 10s ease infinite;
   --color-warning-foreground: var(--warning-foreground);
   --color-warning: var(--warning);
   --color-success-foreground: var(--success-foreground);
@@ -81,6 +82,16 @@
       transform: translateY(150%);
     }
   }
+  /* AuroraText: sweep the oversized gradient back and forth across the glyphs. */
+  @keyframes aurora {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
   --font-sans: "DM Sans", sans-serif;
   --font-serif: "Fraunces", sans-serif;
 }