@cntyclub/ui-react 0.10.4 → 0.10.6

package/dist/index.d.ts

@@ -1313,7 +1313,16 @@ 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.
  */
 declare function useSmoothWheel(ref: React$1.RefObject<HTMLElement | null>, { enabled, horizontal, multiplier, ease, }?: SmoothWheelOptions): void;
 interface SmoothScrollProps extends React$1.ComponentProps<"div"> {

package/dist/index.js

@@ -972,6 +972,14 @@ function useSmoothWheel(ref, {
     let target = el[axisProp];
     let raf = 0;
     let animating = false;
+    let kind = null;
+    let lastTs = 0;
+    const releaseToNative = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = 0;
+      animating = false;
+      target = el[axisProp];
+    };
     const tick = () => {
       const max = el[sizeProp] - el[clientProp];
       target = Math.max(0, Math.min(target, max));
@@ -979,27 +987,50 @@ function useSmoothWheel(ref, {
       const diff = target - current;
       if (Math.abs(diff) < 0.5) {
         el[axisProp] = target;
+        raf = 0;
         animating = false;
         return;
       }
       el[axisProp] = current + diff * ease;
       raf = requestAnimationFrame(tick);
     };
-    const normalize = (event) => {
-      let delta = horizontal && event.deltaX !== 0 ? event.deltaX : event.deltaY;
-      if (event.deltaMode === 1) delta *= 16;
-      else if (event.deltaMode === 2) delta *= el[clientProp];
-      return delta;
+    const looksLikeTrackpad = (e) => e.deltaMode === 0 && (!Number.isInteger(e.deltaY) || e.deltaX !== 0 || Math.abs(e.deltaY) < 50);
+    const classify = (e, now) => {
+      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) => {
+      if (event.ctrlKey) return;
       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) {
+        if (event.deltaX !== 0 && Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+          releaseToNative();
+          return;
+        }
+      } else if (source === "trackpad") {
+        releaseToNative();
+        return;
+      }
+      let delta = horizontal && event.deltaX !== 0 ? event.deltaX : event.deltaY;
+      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;
-      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));
       if (!animating) {
@@ -1626,7 +1657,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",
             children: [