4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T2437,import * as React from 'react' import { useReducedMotion } from '@/hooks/use-reduced-motion' import { isRTL } from '@/lib/direction' export interface UseSwipeNavigationOptions { /** Total number of tabs/items. */ count: number /** Index of the currently active item. */ activeIndex: number /** Called when the user has committed a swipe. */ onNavigate: (index: number) => void } export interface UseSwipeNavigationResult { /** Horizontal translate offset while dragging, in pixels. */ swipeOffset: number /** True while the snap-back or slide-in animation is running. */ isAnimating: boolean /** Attach to the outer wrapper div's onTouchStart. */ handleTouchStart: (e: React.TouchEvent) => void /** Attach to the outer wrapper div's onTouchMove. */ handleTouchMove: (e: React.TouchEvent) => void /** Attach to the outer wrapper div's onTouchEnd. */ handleTouchEnd: () => void /** * Spread onto the sliding content's `style`. Carries the drag transform, the * settle transition and the drag opacity fade, so the motion's feel lives * here rather than being restated at each call site. * * `willChange` is set only while a gesture is in flight; a permanent * `will-change-transform` class alongside this would keep the compositing * layer promoted at rest. */ slideStyle: React.CSSProperties } /** * Swipe-to-switch-tabs touch logic. Extracted verbatim from the Chip Away and * Uradi Dashboard pages. Behavioural constants: * * - 8px direction lock threshold * - 0.25 edge dampening factor (when already at the first or last item) * - 60px commit threshold * - 0.4 opacity floor during swipe * - 0.97 scale floor during swipe (1 - |offset| / 4800) * - 120px slide-in offset for incoming content * - 300ms animation duration; a committed swipe's slide-in settles on the * spring curve (a few percent of overshoot, no wind-up), an uncommitted * snap-back on ease-out * * The touch handlers ignore swipes that begin on a `[data-tab-bar]` element so * the tab strip can still scroll horizontally without triggering navigation. * * Usage: * * ```tsx * const { slideStyle, handleTouchStart, handleTouchMove, handleTouchEnd } = * useSwipeNavigation({ count: items.length, activeIndex, onNavigate: setActiveIndex }) * *

= 2 ? handleTouchStart : undefined} * onTouchMove={items.length >= 2 ? handleTouchMove : undefined} * onTouchEnd={items.length >= 2 ? handleTouchEnd : undefined} * > * *

{content}

* ``` * * `swipeOffset` and `isAnimating` stay available for a consumer that needs to * react to the gesture rather than render it. Rendering a transform, transition * and opacity out of them by hand is what `slideStyle` replaces. */ export function useSwipeNavigation({ count, activeIndex, onNavigate, }: UseSwipeNavigationOptions): UseSwipeNavigationResult { const reduced = useReducedMotion() const touchStartX = React.useRef(null) const touchStartY = React.useRef(null) const [swipeOffset, setSwipeOffset] = React.useState(0) const [isAnimating, setIsAnimating] = React.useState(false) const swipeLocked = React.useRef<'horizontal' | 'vertical' | null>(null) const slideDirection = React.useRef<'left' | 'right' | null>(null) // Which settle the running animation is: a committed swipe's slide-in takes // the spring curve, an uncommitted snap-back the plain ease-out. const enterSettle = React.useRef(false) // Keep a stable ref to the latest activeIndex so the effect below reads the // current value without needing it as a dep (prevents re-registering on // every navigation). const activeIndexRef = React.useRef(activeIndex) React.useEffect(() => { activeIndexRef.current = activeIndex }, [activeIndex]) const handleTouchStart = React.useCallback((e: React.TouchEvent) => { if (isAnimating) return // Don't capture swipes that start on the tab bar (let it scroll horizontally) if ((e.target as HTMLElement).closest('[data-tab-bar]')) return touchStartX.current = e.touches[0].clientX touchStartY.current = e.touches[0].clientY swipeLocked.current = null }, [isAnimating]) const handleTouchMove = React.useCallback((e: React.TouchEvent) => { if (touchStartX.current === null || touchStartY.current === null) return const dx = e.touches[0].clientX - touchStartX.current const dy = e.touches[0].clientY - touchStartY.current // Lock direction after a small threshold if (swipeLocked.current === null && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) { swipeLocked.current = Math.abs(dx) > Math.abs(dy) ? 'horizontal' : 'vertical' } if (swipeLocked.current !== 'horizontal') return // Reading-direction displacement: in RTL a rightward drag advances (next), // so flip the sign for the edge / commit decisions. The visual offset stays // physical (`dx`) so the content tracks the finger either way. const rd = isRTL() ? -dx : dx // Resist at edges (no prev / no next), in reading order. const atStart = activeIndexRef.current === 0 && rd > 0 const atEnd = activeIndexRef.current === count - 1 && rd < 0 const dampened = (atStart || atEnd) ? dx * 0.25 : dx setSwipeOffset(dampened) }, [count]) const handleTouchEnd = React.useCallback(() => { if (touchStartX.current === null || swipeLocked.current !== 'horizontal') { touchStartX.current = null touchStartY.current = null swipeLocked.current = null setSwipeOffset(0) return } touchStartX.current = null touchStartY.current = null swipeLocked.current = null const threshold = 60 const currentIndex = activeIndexRef.current const rtl = isRTL() setSwipeOffset(prev => { // Reading-direction offset: RTL flips which physical drag means next/prev. const rd = rtl ? -prev : prev const didSwipe = (rd < -threshold && currentIndex < count - 1) || (rd > threshold && currentIndex > 0) if (didSwipe) { // The incoming content slides in following the PHYSICAL drag (so the // gesture reads continuously in either direction), hence `prev` here. slideDirection.current = prev < 0 ? 'left' : 'right' const nextIndex = rd < 0 ? currentIndex + 1 : currentIndex - 1 onNavigate(nextIndex) return prev } else { // Snap back -- animate only when the user has no reduced-motion preference if (!reduced) { enterSettle.current = false setIsAnimating(true) setTimeout(() => setIsAnimating(false), 300) } return 0 } }) }, [count, onNavigate, reduced]) // When activeIndex changes via swipe, slide new content in from the side it // was pulled from. This MUST be a layout effect: the commit that swaps in // the new tab content still carries the drag offset, and a plain useEffect // runs after paint -- the new content would flash for a frame at the old // drag position (the WRONG side) before being repositioned. With a // synchronous activeIndex source (e.g. useState-driven settings tabs) that // frame is reliably visible; useLayoutEffect repositions before paint. React.useLayoutEffect(() => { if (slideDirection.current) { const dir = slideDirection.current slideDirection.current = null if (reduced) { // Skip the slide-in animation -- jump straight to the final state. setSwipeOffset(0) setIsAnimating(false) } else { const entryFrom = dir === 'left' ? 120 : -120 setSwipeOffset(entryFrom) setIsAnimating(false) // Next frame: animate to 0 requestAnimationFrame(() => { enterSettle.current = true setIsAnimating(true) setSwipeOffset(0) setTimeout(() => setIsAnimating(false), 300) }) } } else { setSwipeOffset(0) } }, [activeIndex, reduced]) // Reads the duration and easing from tokens rather than a literal, so the // settle matches every other transition in the system. Reduced motion never // reaches here: the slide-in above jumps straight to the final offset. // The pane scales down slightly as it slides (0.97 floor), so a committed // swipe's incoming content grows into place; the spring curve's slight // overshoot is what makes it settle alive. const slideStyle = React.useMemo( () => ({ transform: swipeOffset !== 0 ? `translateX(${swipeOffset}px) scale(${Math.max(0.97, 1 - Math.abs(swipeOffset) / 4800)})` : undefined, transition: isAnimating ? `transform var(--duration-300) var(--easing-${enterSettle.current ? 'spring' : 'out'})` : undefined, opacity: swipeOffset !== 0 ? Math.max(0.4, 1 - Math.abs(swipeOffset) / 400) : undefined, willChange: swipeOffset !== 0 || isAnimating ? 'transform' : undefined, }), [swipeOffset, isAnimating], ) return { swipeOffset, isAnimating, slideStyle, handleTouchStart, handleTouchMove, handleTouchEnd, } } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["https://whiskeyjack.net/r/direction.json","https://whiskeyjack.net/r/use-reduced-motion.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://whiskeyjack.net/r/use-swipe-navigation.json","proxyUrl":"https://shadcnregistry.com/r/whiskeyjack/use-swipe-navigation","itemId":"@whiskeyjack/use-swipe-navigation"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"hooks/use-swipe-navigation.ts","content":"$52","type":"registry:hook","target":"hooks/use-swipe-navigation.ts"}]}]]}],"$L53"]}]

UseSwipeNavigation

Installation

Files

hooks

Styles