64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T3019,"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { KeyboardEvent, PointerEvent, ReactNode } from "react"; const DEFAULT_TABS = ["Overview", "Pricing", "Reviews"]; const SAFE_COLOR = /^(#[0-9a-f]{3,8}|[a-z]{3,20})$/i; // Two springs per travel: the leading edge is stiff and fast, the trailing edge is soft and // late, so the pill stretches across the gap and then catches up. [stiffness, damping] const LEAD: [number, number] = [520, 36]; const TRAIL: [number, number] = [160, 22]; const TRACK = { light: { bg: "#f5f5f5", border: "#e5e5e5", text: "#737373", hover: "#262626", ghost: "rgba(0,0,0,0.08)" }, dark: { bg: "rgba(255,255,255,0.05)", border: "rgba(255,255,255,0.1)", text: "rgba(255,255,255,0.55)", hover: "#ffffff", ghost: "rgba(255,255,255,0.11)" }, } as const; type Edge = { x: number; v: number; t: number; k: number; c: number }; /** * Tabs with a sliding indicator that stretches between tabs: the edge facing the destination * leaves first, the other edge follows on a softer spring. The label colour flips exactly * where the pill passes (a clipped copy of the labels rides inside the pill). Optional * `panels` crossfade and slide in the direction of travel. Roving tabindex, arrow keys, * Home and End. Hand-written springs, no dependencies. */ export function AnimatedTabs({ tabs = DEFAULT_TABS, shape = "pill", panels, defaultIndex = 0, onChange, accent = "#ef4444", accentText = "#ffffff", tone = "light", className = "", ariaLabel = "Tabs", }: { tabs?: string[]; shape?: "pill" | "rounded"; panels?: ReactNode[]; defaultIndex?: number; onChange?: (index: number, tab: string) => void; accent?: string; accentText?: string; tone?: "light" | "dark"; className?: string; ariaLabel?: string; }) { const uid = useId().replace(/[^a-zA-Z0-9]/g, ""); const count = tabs.length; const [picked, setPicked] = useState(defaultIndex); const active = Math.max(0, Math.min(picked, count - 1)); const tabsKey = tabs.join("\u0001"); const hasPanels = !!panels; const accentColor = SAFE_COLOR.test(accent) ? accent : "#ef4444"; const accentInk = SAFE_COLOR.test(accentText) ? accentText : "#ffffff"; const c = TRACK[tone === "dark" ? "dark" : "light"]; const round = shape === "pill" ? "rounded-full" : "rounded-lg"; const roundFocus = shape === "pill" ? "focus-visible:!rounded-full" : "focus-visible:!rounded-lg"; const listRef = useRef(null); const btnRefs = useRef<(HTMLButtonElement | null)[]>([]); const indRef = useRef(null); const cloneRef = useRef(null); const ghostRef = useRef(null); const engine = useRef<{ go: (i: number, snap: boolean) => void } | null>(null); const activeRef = useRef(active); const onChangeRef = useRef(onChange); useEffect(() => { activeRef.current = active; onChangeRef.current = onChange; }); // The spring engine: one rAF loop that sleeps at rest. Everything it touches is written to the DOM directly. useEffect(() => { const list = listRef.current; const ind = indRef.current; const clone = cloneRef.current; if (!list || !ind || !clone) return; const L: Edge = { x: 0, v: 0, t: 0, k: LEAD[0], c: LEAD[1] }; const R: Edge = { x: 0, v: 0, t: 0, k: LEAD[0], c: LEAD[1] }; let top = 0; let height = 0; let shown = false; let raf = 0; let last = 0; const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; const write = () => { const w = Math.max(0, R.x - L.x); const rest = (btnRefs.current[activeRef.current]?.offsetWidth ?? w) || 1; const stretch = Math.max(0, Math.min(1, (w - rest) / (rest * 1.4))); ind.style.transform = "translate3d(" + L.x.toFixed(2) + "px," + top + "px,0) scale(1," + (1 - stretch * 0.1).toFixed(3) + ")"; ind.style.width = w.toFixed(2) + "px"; ind.style.height = height + "px"; clone.style.transform = "translate3d(" + (-L.x).toFixed(2) + "px," + -top + "px,0)"; if (!shown) { shown = true; ind.style.visibility = "visible"; } }; const measure = (i: number) => { const b = btnRefs.current[i]; if (!b) return false; L.t = b.offsetLeft; R.t = b.offsetLeft + b.offsetWidth; top = b.offsetTop; height = b.offsetHeight; return true; }; const step = (dt: number) => { for (const e of [L, R]) { e.v += (-e.k * (e.x - e.t) - e.c * e.v) * dt; e.x += e.v * dt; } }; const tick = (now: number) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; const n = Math.max(1, Math.ceil(dt / 0.004)); for (let s = 0; s < n; s++) step(dt / n); const done = [L, R].every((e) => Math.abs(e.x - e.t) < 0.02 && Math.abs(e.v) < 0.05); if (done) { L.x = L.t; R.x = R.t; L.v = R.v = 0; write(); raf = 0; return; } write(); raf = requestAnimationFrame(tick); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(tick); } }; engine.current = { go(i, snap) { const oldL = L.t; if (!measure(i)) return; if (snap || !shown || reduced()) { L.x = L.t; R.x = R.t; L.v = R.v = 0; write(); return; } const right = L.t >= oldL; const lead = right ? R : L; const trail = right ? L : R; [lead.k, lead.c] = LEAD; [trail.k, trail.c] = TRAIL; wake(); }, }; engine.current.go(activeRef.current, true); const ro = new ResizeObserver(() => engine.current?.go(activeRef.current, true)); ro.observe(list); for (const b of btnRefs.current) if (b) ro.observe(b); const fonts = document.fonts; if (fonts) void fonts.ready.then(() => engine.current?.go(activeRef.current, true)); return () => { ro.disconnect(); if (raf) cancelAnimationFrame(raf); engine.current = null; }; }, [tabsKey, shape]); useEffect(() => { engine.current?.go(active, false); }, [active]); const choose = (i: number) => { if (i === active) return; setPicked(i); onChangeRef.current?.(i, tabs[i] ?? ""); }; const onKeyDown = (e: KeyboardEvent) => { const key = e.key; let next = -1; if (key === "ArrowRight" || key === "ArrowDown") next = (active + 1) % count; else if (key === "ArrowLeft" || key === "ArrowUp") next = (active - 1 + count) % count; else if (key === "Home") next = 0; else if (key === "End") next = count - 1; if (next < 0) return; e.preventDefault(); choose(next); btnRefs.current[next]?.focus(); }; const showGhost = (i: number, e: PointerEvent) => { const g = ghostRef.current; const b = btnRefs.current[i]; if (!g || !b || e.pointerType !== "mouse" || i === active) return; const wasHidden = g.style.opacity !== "1"; if (wasHidden) g.style.transition = "none"; g.style.transform = "translate3d(" + b.offsetLeft + "px," + b.offsetTop + "px,0)"; g.style.width = b.offsetWidth + "px"; g.style.height = b.offsetHeight + "px"; if (wasHidden) void g.offsetWidth; g.style.transition = ""; g.style.opacity = "1"; }; const hideGhost = () => { if (ghostRef.current) ghostRef.current.style.opacity = "0"; }; const labelBox = "flex shrink-0 items-center justify-center whitespace-nowrap px-[var(--atb-px,16px)] h-[var(--atb-h,40px)] text-[length:var(--atb-fs,14px)] font-semibold leading-none " + round; const bar = (

{tabs.map((tab, i) => { const on = i === active; return ( ); })}

{tabs.map((tab, i) => ( {tab} ))}

); if (!hasPanels) return bar; return (

{bar}

{tabs.map((tab, i) => { const rel = i - active; const on = rel === 0; return (

{panels[i] ?? null}

); })}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/animated-tabs-indicator.tsx","content":"$65","type":"registry:component","target":"components/viberdy/animated-tabs-indicator.tsx"}],"className":"h-[70svh] min-h-80"}]]}]