52: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"] 53: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"] 54:T1372,"use client"; import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; interface ExpandableTabsItem { value: string; label: string; icon: ReactNode; href?: string; } interface ExpandableTabsProps { items: ExpandableTabsItem[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; label?: string; className?: string; } interface ExpandableTabProps { item: ExpandableTabsItem; isActive: boolean; onSelect: (value: string) => void; } function ExpandableTab({ item, isActive, onSelect }: ExpandableTabProps) { const tabClassName = "relative z-10 flex shrink-0 cursor-pointer items-center rounded-[calc(var(--radius-2xl)-6px)] p-2 outline-none transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-ring"; const content = ( <> {item.icon} {item.label} ); return ( {content} ) : ( ) } /> {item.label} ); } function useActivePill(activeValue: string | undefined) { const menuRef = useRef(null); const [pill, setPill] = useState<{ left: number; top: number; width: number; height: number; } | null>(null); const measure = useCallback(() => { const menu = menuRef.current; if (!menu || activeValue === undefined) { setPill(null); return; } const active = menu.querySelector( `[data-value="${CSS.escape(activeValue)}"]` ); if (!active) { setPill(null); return; } setPill({ left: active.offsetLeft, top: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight, }); }, [activeValue]); useLayoutEffect(() => { measure(); }, [measure]); useEffect(() => { const menu = menuRef.current; if (!menu) { return; } const observer = new ResizeObserver(measure); observer.observe(menu); for (const tab of menu.querySelectorAll("[data-value]")) { observer.observe(tab); } return () => observer.disconnect(); }, [measure]); return { menuRef, pill }; } export function ExpandableTabs({ items, value, defaultValue, onValueChange, label = "Choose an option", className, }: ExpandableTabsProps) { const [internalValue, setInternalValue] = useState( defaultValue ?? items[0]?.value ); const activeValue = value ?? internalValue; const { menuRef, pill } = useActivePill(activeValue); const handleSelect = (next: string) => { setInternalValue(next); onValueChange?.(next); }; return (

{pill && (

); } export type { ExpandableTabsItem, ExpandableTabsProps }; 51:["$","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":[null,["$","$L52",null,{"namespace":"@dominik-ui","registryDependencies":["tooltip"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/expandable-tabs.tsx","content":"$54","type":"registry:ui","target":"@ui/expandable-tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]