4e: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"] 4f: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"] 50:T3771,"use client"; // beui.dev/components/motion/tabs import { ChevronLeft, ChevronRight } from "lucide-react"; import { cancelFrame, frame, motion, MotionConfig, useReducedMotion, type Transition } from "motion/react"; import { createContext, useCallback, useContext, useId, useLayoutEffect, useRef, useMemo, useState, type ReactNode, } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; type Variant = "pill" | "underline" | "segment"; type Ctx = { value: string; setValue: (v: string) => void; layoutId: string; variant: Variant; }; const TabsCtx = createContext(null); function useTabs() { const ctx = useContext(TabsCtx); if (!ctx) throw new Error("Tabs.* must be used inside "); return ctx; } // Settle without overshoot: a scrollable tab list would turn even a small // overshoot into a transient scrollbar and layout shift. // Scale stiffness and damping together for a quicker glide with the same feel. const transition: Transition = { type: "spring", stiffness: 245, damping: 36, mass: 1.2, }; export function Tabs({ defaultValue, value, onValueChange, variant = "pill", children, className, }: { defaultValue?: string; value?: string; onValueChange?: (v: string) => void; variant?: Variant; children: ReactNode; className?: string; }) { const [internal, setInternal] = useState(defaultValue ?? ""); const layoutId = useId(); const reduce = useReducedMotion(); const controlled = value !== undefined; const current = controlled ? value : internal; const setValue = useCallback( (v: string) => { if (!controlled) setInternal(v); onValueChange?.(v); }, [controlled, onValueChange], ); const contextValue = useMemo( () => ({ value: current, setValue, layoutId, variant }), [current, layoutId, setValue, variant], ); return ( {/* layoutRoot: the indicator's layoutId measures in page coordinates, so inside fixed/scrolled containers it would replay scroll offsets as movement. The pill only ever travels within the list, so scoping projection to the Tabs wrapper is always correct. */} {children} ); } const listClasses: Record = { pill: "inline-flex items-center gap-1 rounded-full bg-card p-1", underline: "inline-flex items-center gap-1 border-b border-border", segment: "inline-flex items-center gap-0 rounded-lg bg-card p-0.5", }; export function TabsList({ children, className, wrapperClassName, }: { children: ReactNode; className?: string; wrapperClassName?: string; }) { const { variant, value } = useTabs(); const reduce = useReducedMotion(); const rootRef = useRef(null); const viewportRef = useRef(null); const listRef = useRef(null); const viewportId = useId(); const [edges, setEdges] = useState({ overflow: false, left: false, right: false }); const measure = useCallback(() => { const root = rootRef.current; const viewport = viewportRef.current; if (!root || !viewport) return; // Overlay controls do not reduce the viewport or change its scroll range. const overflow = viewport.scrollWidth > root.clientWidth + 1; const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth); const rtl = getComputedStyle(viewport).direction === "rtl"; // Modern browsers expose negative scrollLeft in RTL. Clamp rubber-banding. const fromLeft = Math.max(0, Math.min(max, rtl ? max + viewport.scrollLeft : viewport.scrollLeft)); const next = { overflow, left: fromLeft > 1, right: fromLeft < max - 1 }; setEdges((previous) => previous.overflow === next.overflow && previous.left === next.left && previous.right === next.right ? previous : next); }, []); const reveal = useCallback((tab: HTMLElement | null) => { const viewport = viewportRef.current; if (!viewport || !tab) return; const frame = viewport.getBoundingClientRect(); const item = tab.getBoundingClientRect(); const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth); const rtl = getComputedStyle(viewport).direction === "rtl"; const fromLeft = Math.max(0, Math.min(max, rtl ? max + viewport.scrollLeft : viewport.scrollLeft)); // Keep the selected/focused label clear of the arrows over the faded edges. const left = frame.left + (fromLeft > 1 ? 36 : 0); const right = frame.right - (fromLeft < max - 1 ? 36 : 0); const delta = item.left < left ? item.left - left : item.right > right ? item.right - right : 0; // Scroll only this viewport; scrollIntoView can also move the whole page. if (delta) viewport.scrollBy({ left: delta, behavior: reduce ? "instant" : "smooth" }); }, [reduce]); useLayoutEffect(() => { const root = rootRef.current; const viewport = viewportRef.current; const list = listRef.current; if (!root || !viewport || !list) return; const update = () => { measure(); reveal(list.querySelector('[role="tab"][aria-selected="true"]')); }; const observer = new ResizeObserver(update); observer.observe(root); observer.observe(viewport); observer.observe(list); viewport.addEventListener("scroll", measure, { passive: true }); update(); return () => { observer.disconnect(); viewport.removeEventListener("scroll", measure); }; }, [measure, reveal]); useLayoutEffect(() => { // Children may change without a resize; controlled selection must also reveal. void children; void value; void edges.overflow; measure(); reveal(listRef.current?.querySelector('[role="tab"][aria-selected="true"]') ?? null); }, [children, value, edges.overflow, measure, reveal]); useLayoutEffect(() => { if (variant === "underline") return; const list = listRef.current; if (!list) return; void children; const labels = Array.from(list.querySelectorAll("[data-tabs-label]")); const indicator = list.querySelector("[data-tabs-indicator]"); const target = list.querySelector('[role="tab"][aria-selected="true"]'); if (!indicator || !target || target.dataset.tabsValue !== value) { for (const label of labels) label.style.clipPath = "inset(0 100% 0 0)"; return; } let frames = 0; let stillFrames = 0; let previous: { left: number; right: number } | undefined; const syncClips = () => { const pill = (reduce ? target : indicator).getBoundingClientRect(); // Read ALL geometry before writing ANY masks. A loop per tab interleaved // reads and writes, forcing the browser to flush styles repeatedly. const clips = labels.map((label) => { const bounds = label.getBoundingClientRect(); const left = Math.max(0, Math.min(bounds.width, pill.left - bounds.left)); const right = Math.max(0, Math.min(bounds.width, bounds.right - pill.right)); return left + right >= bounds.width ? "inset(0 100% 0 0)" : `inset(0 ${right}px 0 ${left}px)`; }); labels.forEach((label, index) => { if (label.style.clipPath !== clips[index]) label.style.clipPath = clips[index]; }); frames += 1; stillFrames = previous && Math.abs(pill.left - previous.left) < 0.01 && Math.abs(pill.right - previous.right) < 0.01 ? stillFrames + 1 : 0; previous = { left: pill.left, right: pill.right }; if (reduce || (frames > 2 && stillFrames >= 2)) cancelFrame(syncClips); }; // One shared pass after Motion paints the projected pill keeps every label // in sync, including labels crossed during a long or interrupted glide. frame.postRender(syncClips, true); return () => cancelFrame(syncClips); }, [value, children, variant, reduce]); const scroll = (direction: number) => { const viewport = viewportRef.current; if (viewport) viewport.scrollBy({ left: direction * viewport.clientWidth * 0.8, behavior: reduce ? "instant" : "smooth" }); }; const controlClass = "absolute inset-y-0 z-20 inline-flex w-9 items-center justify-center text-foreground transition-opacity hover:opacity-70 focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-0"; const surfaceClass = variant === "pill" ? "rounded-full bg-card" : variant === "segment" ? "rounded-lg bg-card" : ""; return (

{edges.overflow && ( )} { if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab") reveal(event.target); }} >

{children}

{edges.overflow && edges.left && (

); } export function TabsTrigger({ value, children, className, indicatorClassName, }: { value: string; children: ReactNode; className?: string; indicatorClassName?: string; }) { const { value: current, setValue, layoutId, variant } = useTabs(); const active = current === value; // React owns the initial mask only; TabsList synchronizes subsequent masks. const [initialClip] = useState(() => active ? "inset(0)" : "inset(0 100% 0 0)"); if (variant === "underline") { return ( ); } const radius = variant === "pill" ? "rounded-full" : "rounded-md"; return (

{active ? ( ) : null}

); } export function TabsContent({ value, children, className }: { value: string; children: ReactNode; className?: string }) { const { value: current } = useTabs(); const reduce = useReducedMotion(); const active = current === value; // Inactive panels stay mounted but hidden, so their content (e.g. source // code) is present in the server-rendered HTML for crawlers and assistive // tech, instead of being dropped from the DOM. if (!active) { return ( ); } return ( {children} ); } 51:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4d:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","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","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/tabs.tsx","content":"$50","type":"registry:component","target":"@components/motion/tabs.tsx"},{"path":"lib/ease.ts","content":"$51","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]