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:T2565,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import type { KeyboardEvent, ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; const INDICATOR = { type: "spring", stiffness: 620, damping: 42, mass: 0.35 } as const; const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; const PANEL = { type: "spring", stiffness: 460, damping: 38, mass: 0.8 } as const; export type TabItem = { value: string; label: string; disabled?: boolean; }; export type TabsActivation = "automatic" | "manual"; export type UseTabsOptions = { items: TabItem[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; activation?: TabsActivation; }; export function useTabs({ items, value: controlled, defaultValue, onValueChange, activation = "automatic", }: UseTabsOptions) { const base = useId(); const nodes = useRef(new Map()); const direction = useRef(1); const [internal, setInternal] = useState( () => defaultValue ?? items.find((i) => !i.disabled)?.value ?? items[0]?.value ?? "", ); const value = controlled ?? internal; const emit = useRef(onValueChange); emit.current = onValueChange; const select = useCallback( (next: string) => { if (next === value) return; const from = items.findIndex((i) => i.value === value); const to = items.findIndex((i) => i.value === next); direction.current = to < from ? -1 : 1; if (controlled === undefined) setInternal(next); emit.current?.(next); }, [controlled, items, value], ); const focusAt = useCallback( (i: number) => { const item = items[i]; if (!item) return; nodes.current.get(item.value)?.focus(); }, [items], ); const nextEnabled = useCallback( (from: number, dir: number) => { const n = items.length; let i = from < 0 ? 0 : from; for (let k = 0; k < n; k += 1) { i = (i + dir + n) % n; if (!items[i].disabled) return i; } return from; }, [items], ); const endStop = useCallback( (dir: number) => { const n = items.length; if (dir > 0) { for (let i = 0; i < n; i += 1) if (!items[i].disabled) return i; } else { for (let i = n - 1; i >= 0; i -= 1) if (!items[i].disabled) return i; } return 0; }, [items], ); const getTabProps = useCallback( (item: TabItem, index: number) => ({ id: `${base}-tab-${item.value}`, role: "tab" as const, type: "button" as const, "aria-selected": item.value === value, "aria-controls": `${base}-panel-${item.value}`, "aria-disabled": item.disabled ? (true as const) : undefined, tabIndex: item.value === value ? 0 : -1, ref: (node: HTMLButtonElement | null) => { if (node) nodes.current.set(item.value, node); else nodes.current.delete(item.value); }, onClick: () => { if (!item.disabled) select(item.value); }, onKeyDown: (e: KeyboardEvent) => { if (e.key === "ArrowRight" || e.key === "ArrowLeft") { e.preventDefault(); const to = nextEnabled(index, e.key === "ArrowRight" ? 1 : -1); focusAt(to); if (activation === "automatic") select(items[to].value); return; } if (e.key === "Home" || e.key === "End") { e.preventDefault(); const to = endStop(e.key === "Home" ? 1 : -1); focusAt(to); if (activation === "automatic") select(items[to].value); return; } if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (!item.disabled) select(item.value); } }, }), [activation, base, endStop, focusAt, items, nextEnabled, select, value], ); const getPanelProps = useCallback( (panelValue: string) => ({ id: `${base}-panel-${panelValue}`, role: "tabpanel" as const, "aria-labelledby": `${base}-tab-${panelValue}`, tabIndex: 0, }), [base], ); const tabListProps = { role: "tablist" as const, "aria-orientation": "horizontal" as const, }; return { value, select, direction: direction.current, tabListProps, getTabProps, getPanelProps, }; } export type UseTabsReturn = ReturnType; export type TabsProps = { items: TabItem[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; activation?: TabsActivation; renderPanel?: (value: string) => ReactNode; label?: string; panelClassName?: string; className?: string; }; export function Tabs({ items, value, defaultValue, onValueChange, activation = "automatic", renderPanel, label = "Tabs", panelClassName = "", className = "", }: TabsProps) { const tabs = useTabs({ items, value, defaultValue, onValueChange, activation }); const reduced = useReducedMotion(); const rowRef = useRef(null); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const [plateau, setPlateau] = useState({ x: 0, width: 0, ready: false }); const selectedIndex = items.findIndex((item) => item.value === tabs.value); useIsoLayoutEffect(() => { const node = tabRefs.current[selectedIndex]; if (!node) return; const read = () => { setPlateau((prev) => prev.x === node.offsetLeft && prev.width === node.offsetWidth && prev.ready ? prev : { x: node.offsetLeft, width: node.offsetWidth, ready: true }, ); }; read(); const row = rowRef.current; if (!row) return; const observer = new ResizeObserver(read); observer.observe(row); return () => observer.disconnect(); }, [selectedIndex, items]); return (

{items.map((item, index) => { const selected = item.value === tabs.value; const tabProps = tabs.getTabProps(item, index); return ( ); })}

{renderPanel ? ( {renderPanel(tabs.value)} ) : null}

); } 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"}]]}]}]]}],["$","$L50",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/tabs.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]