@cntyclub/ui-react 0.10.4 → 0.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "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/avatar-group.tsx

@@ -81,7 +81,9 @@ function AvatarGroup({
           aria-label={`${overflow} more`}
           className={cn(
             avatarVariants({ size }),
-            "bg-muted font-medium text-muted-foreground",
+            // Solid neutral fill so the chip reads as a distinct surface in both
+            // themes — the `bg-muted` token is only 4% opacity (near-transparent).
+            "bg-stone-200 font-medium text-stone-600 dark:bg-stone-700 dark:text-stone-200",
           )}
           data-slot="avatar-group-overflow"
         >

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