50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T51c7,"use client"; /** * @author: @dorianbaffier * @description: Swipe Tabs * @version: 2.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import type { LucideIcon } from "lucide-react"; import { type AnimationPlaybackControls, animate, useMotionValue, } from "motion/react"; import { type KeyboardEvent, type PointerEvent, type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface SwipeTabItem { id: string; title: string; /** Shown before the title in the tab. */ icon?: LucideIcon; /** The panel shown for this tab. */ content?: ReactNode; } export interface SmoothTabProps { items?: SwipeTabItem[]; defaultTabId?: string; /** The selected tab id, for a controlled tab. Pair it with `onChange`. */ value?: string; onChange?: (tabId: string) => void; className?: string; /** Background classes for the indicator: the one accent. */ activeColor?: string; /** Text color classes for the label sitting on the indicator. */ activeTextColor?: string; /** Accessible name for the tab list. */ label?: string; } // Past the first or last tab the panel moves this fraction of the drag. const RUBBER_BAND = 0.35; // A release this fast (px per ms) changes tab however short the drag was. const SWIPE_VELOCITY = 0.11; // Movement before deciding between a horizontal swipe and a vertical scroll. const AXIS_LOCK = 6; // Release velocity is measured over the last stretch of the drag only. const VELOCITY_WINDOW = 100; // A panel one full width away sits at this opacity, so the neighbour reads // as "next" while it slides in. const NEIGHBOUR_OPACITY = 0.35; // Just under critical damping: a firm settle, a hint of overshoot only after // a fast flick. const SPRING = { type: "spring", stiffness: 420, damping: 38 } as const; const EASE_OUT = [0.23, 1, 0.32, 1] as const; interface TabRect { left: number; width: number; top: number; height: number; } interface Drag { pointerId: number; startX: number; startY: number; startProgress: number; axis: "x" | "y" | null; width: number; samples: { x: number; t: number }[]; } const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max); /** The indicator rectangle at a fractional tab position. */ function indicatorRect(rects: TabRect[], progress: number): TabRect | null { const last = rects.length - 1; if (last < 0) { return null; } const p = clamp(progress, 0, last); const i = Math.min(Math.floor(p), Math.max(last - 1, 0)); const a = rects[i]; const b = rects[Math.min(i + 1, last)]; const t = p - i; let left = lerp(a.left, b.left, t); let width = lerp(a.width, b.width, t); // Rubber-banding past an end: the pill presses against the wall and gives // on the far side instead of sliding out of the track. const over = progress < 0 ? -progress : progress - last; if (over > 0) { const squash = width * Math.min(over, 0.5) * 0.4; width -= squash; if (progress > last) { left += squash; } } return { left, width, top: a.top, height: a.height }; } /** Rubber-bands a raw position that runs past the first or last tab. */ function rubberBand(raw: number, last: number): number { if (raw < 0) { return raw * RUBBER_BAND; } if (raw > last) { return last + (raw - last) * RUBBER_BAND; } return raw; } function Stat({ label, value }: { label: string; value: string }) { return (

{label}

{value}

); } const BARS = [38, 52, 44, 61, 57, 72, 66, 80, 74, 88, 69, 92]; const ACTIVITY = [ ["Deploy #418 promoted to production", "2m"], ["Preview built for fix/auth-redirect", "14m"], ["Environment variable rotated", "1h"], ["Domain app.example.com verified", "3h"], ]; const MEMBERS = [ ["AL", "Avery Lane", "Owner"], ["JR", "Jordan Reyes", "Admin"], ["SK", "Sam Kato", "Developer"], ["RM", "Riley Moss", "Viewer"], ]; const DEFAULT_TABS: SwipeTabItem[] = [ { id: "overview", title: "Overview", content: (

), }, { id: "activity", title: "Activity", content: (

{text} {time}

), }, { id: "members", title: "Members", content: (

{initials} {name} {role}

), }, { id: "billing", title: "Billing", content: (

Pro plan

$20 / month

Bandwidth 64 / 100 GB

Next invoice on Nov 1 · Card ending 4242

), }, ]; export default function SmoothTab({ items = DEFAULT_TABS, defaultTabId, value, onChange, className, activeColor = "bg-zinc-900 dark:bg-zinc-100", activeTextColor = "text-white dark:text-zinc-900", label = "Sections", }: SmoothTabProps) { const count = items.length; const indexOf = (id: string | undefined) => Math.max( items.findIndex((item) => item.id === id), 0 ); const [uncontrolled, setUncontrolled] = useState(() => indexOf(defaultTabId)); const selected = value === undefined ? clamp(uncontrolled, 0, Math.max(count - 1, 0)) : indexOf(value); // Captured once, so React never rewrites the imperatively painted styles. const [initial] = useState(selected); // Fractional tab position: 0 … count - 1, beyond while rubber-banding. // It drives the panel track, the indicator and the label clip directly, // so a drag never re-renders React. const progress = useMotionValue(selected); const baseId = useId(); const tablistRef = useRef(null); const overlayRef = useRef(null); const trackRef = useRef(null); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const panelRefs = useRef<(HTMLDivElement | null)[]>([]); const rects = useRef([]); const size = useRef({ width: 0, height: 0 }); const anim = useRef(null); const target = useRef(selected); const drag = useRef(null); const suppressClick = useRef(false); const reducedMotion = useRef(false); const latest = useRef({ count, items, selected, onChange }); latest.current = { count, items, selected, onChange }; const paint = useCallback( (p: number) => { const track = trackRef.current; if (track) { track.style.transform = `translate3d(${(-p * 100) / count}%, 0, 0)`; } panelRefs.current.forEach((panel, i) => { if (panel) { const d = Math.min(Math.abs(p - i), 1); panel.style.opacity = String(1 - d * (1 - NEIGHBOUR_OPACITY)); } }); const overlay = overlayRef.current; const r = indicatorRect(rects.current, p); if (overlay && r) { const right = size.current.width - r.left - r.width; const bottom = size.current.height - r.top - r.height; overlay.style.clipPath = `inset(${r.top}px ${right}px ${bottom}px ${r.left}px round ${r.height / 2}px)`; } }, [count] ); // Measure the tabs before paint, and again on resize and font load. useLayoutEffect(() => { const tablist = tablistRef.current; if (!tablist) { return; } let alive = true; const measure = () => { if (!alive) { return; } // Sub-pixel rects, so the clip lines up with the labels exactly. // Divided by the list's scale in case an ancestor is transformed. const box = tablist.getBoundingClientRect(); const ratio = box.width / (tablist.offsetWidth || 1); // offsetWidth is rounded: only a real transform counts as a scale. const scale = Math.abs(ratio - 1) < 0.01 ? 1 : ratio; size.current = { width: box.width / scale, height: box.height / scale }; rects.current = tabRefs.current.slice(0, count).map((tab) => { const r = tab?.getBoundingClientRect(); return r ? { left: (r.left - box.left) / scale, width: r.width / scale, top: (r.top - box.top) / scale, height: r.height / scale, } : { left: 0, width: 0, top: 0, height: 0 }; }); paint(progress.get()); }; measure(); const observer = new ResizeObserver(measure); observer.observe(tablist); document.fonts.ready.then(measure).catch(() => undefined); return () => { alive = false; observer.disconnect(); }; }, [count, paint, progress]); useEffect(() => { const unsubscribe = progress.on("change", paint); const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const sync = () => { reducedMotion.current = query.matches; }; sync(); query.addEventListener("change", sync); return () => { unsubscribe(); query.removeEventListener("change", sync); anim.current?.stop(); }; }, [paint, progress]); /** Moves the position to a tab. `velocity` is in tabs per second. */ const settle = useCallback( (index: number, opts: { instant?: boolean; velocity?: number } = {}) => { target.current = index; anim.current?.stop(); anim.current = null; if (opts.instant) { progress.jump(index); return; } anim.current = reducedMotion.current ? animate(progress, index, { duration: 0.15, ease: EASE_OUT }) : animate(progress, index, { ...SPRING, velocity: opts.velocity ?? 0 }); }, [progress] ); const select = useCallback( (index: number, opts?: { instant?: boolean; velocity?: number }) => { const { count: n, items: list, selected: current } = latest.current; const next = clamp(index, 0, n - 1); settle(next, opts); if (next !== current) { setUncontrolled(next); latest.current.onChange?.(list[next].id); } }, [settle] ); // A controlled `value` changed from outside: follow it. useEffect(() => { if (selected !== target.current && !drag.current) { settle(selected); } }, [selected, settle]); const handleKeyDown = (e: KeyboardEvent, i: number) => { const keys: Record = { ArrowRight: (i + 1) % count, ArrowLeft: (i - 1 + count) % count, Home: 0, End: count - 1, }; const next = keys[e.key]; if (next === undefined) { return; } e.preventDefault(); tabRefs.current[next]?.focus(); // A held key repeats faster than any spring settles: jump instead. select(next, { instant: e.repeat }); }; const onPointerDown = (e: PointerEvent) => { if (count < 2 || (e.pointerType === "mouse" && e.button !== 0)) { return; } drag.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, startProgress: progress.get(), axis: null, width: e.currentTarget.clientWidth || 1, samples: [{ x: e.clientX, t: e.timeStamp }], }; }; const lockAxis = (current: Drag, e: PointerEvent) => { const dx = e.clientX - current.startX; const dy = e.clientY - current.startY; if (Math.max(Math.abs(dx), Math.abs(dy)) < AXIS_LOCK) { return; } // Vertical wins ties: the page scroll is what most people are after. current.axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y"; if (current.axis === "x") { // Catch the panel mid-flight, and keep the swipe alive when the // pointer leaves the panel. anim.current?.stop(); current.startProgress = progress.get(); current.startX = e.clientX; current.samples = [{ x: e.clientX, t: e.timeStamp }]; e.currentTarget.setPointerCapture(e.pointerId); e.currentTarget.dataset.dragging = ""; } }; const onPointerMove = (e: PointerEvent) => { const current = drag.current; if (!current || current.pointerId !== e.pointerId) { return; } if (current.axis === null) { lockAxis(current, e); } if (current.axis !== "x") { return; } current.samples.push({ x: e.clientX, t: e.timeStamp }); while ( current.samples.length > 2 && e.timeStamp - current.samples[0].t > VELOCITY_WINDOW ) { current.samples.shift(); } const raw = current.startProgress - (e.clientX - current.startX) / current.width; progress.set(rubberBand(raw, count - 1)); }; const endDrag = (e: PointerEvent, cancelled: boolean) => { const current = drag.current; if (!current || current.pointerId !== e.pointerId) { return; } drag.current = null; delete e.currentTarget.dataset.dragging; if (current.axis !== "x") { return; } // Swallow the click this release may send. A touch swipe sends none, // so the flag clears on the next tick instead of eating a later tap. if (!cancelled) { suppressClick.current = true; window.setTimeout(() => { suppressClick.current = false; }, 0); } const first = current.samples[0]; // px per ms; negative is a swipe towards the next tab. const vx = (e.clientX - first.x) / Math.max(e.timeStamp - first.t, 1); const p = progress.get(); let next = Math.round(p); if (!cancelled && Math.abs(vx) > SWIPE_VELOCITY) { next = vx < 0 ? Math.floor(p) + 1 : Math.ceil(p) - 1; } // The spring starts at the finger's speed, so the hand-off is seamless. select(next, { velocity: (-vx * 1000) / current.width }); }; const tabId = (i: number) => `${baseId}-tab-${i}`; const panelId = (i: number) => `${baseId}-panel-${i}`; return (

{items.map((item, i) => { const Icon = item.icon; const isSelected = i === selected; return ( ); })} {/* The same labels in the active color, clipped to the indicator, so each label is exactly right at every point of the slide with no color tween. */}

{ if (suppressClick.current) { suppressClick.current = false; e.preventDefault(); e.stopPropagation(); } }} onLostPointerCapture={(e) => endDrag(e, false)} onPointerCancel={(e) => endDrag(e, true)} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={(e) => endDrag(e, false)} >

{items.map((item, i) => (

{ panelRefs.current[i] = el; }} role="tabpanel" style={{ width: `${100 / count}%`, opacity: i === initial ? 1 : NEIGHBOUR_OPACITY, }} tabIndex={i === selected ? 0 : -1} > {item.content}

))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@kokonutui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/smooth-tab.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/smooth-tab.tsx"}],"className":"h-[70svh] min-h-80"}]]}]