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:T2396,"use client" import * as React from "react" import { Tabs as TabsPrimitive } from "@base-ui/react/tabs" import { cva } from "class-variance-authority" import { cn } from "cn" type ClassName = string | ((state: State) => string | undefined) | undefined function mergeClassName(base: string, className: ClassName) { return typeof className === "function" ? (state: State) => cn(base, className(state)) : cn(base, className) } type TabsVariant = "default" | "line" const TabsListContext = React.createContext("default") function Tabs({ className, ...props }: TabsPrimitive.Root.Props) { return ( ) } function useScrollEdges(list: HTMLElement | null) { React.useEffect(() => { if (!list) { return } let frame = 0 const update = () => { cancelAnimationFrame(frame) frame = requestAnimationFrame(() => { const vertical = list.getAttribute("data-orientation") === "vertical" const offset = vertical ? list.scrollTop : Math.abs(list.scrollLeft) const max = vertical ? list.scrollHeight - list.clientHeight : list.scrollWidth - list.clientWidth list.toggleAttribute("data-scrolled-start", offset > 0.5) list.toggleAttribute("data-scrolled-end", offset < max - 0.5) }) } update() list.addEventListener("scroll", update, { passive: true }) const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update) observer?.observe(list) return () => { cancelAnimationFrame(frame) list.removeEventListener("scroll", update) observer?.disconnect() } }, [list]) } function useRevealActive(list: HTMLElement | null) { React.useEffect(() => { if (!list || typeof MutationObserver === "undefined") { return } const reveal = () => { const tab = list.querySelector( "[data-slot=tabs-trigger][data-active]" ) if (!tab || list.scrollWidth <= list.clientWidth + 1) { return } const box = list.getBoundingClientRect() const rect = tab.getBoundingClientRect() const margin = 24 if (rect.left < box.left + margin) { list.scrollBy({ left: rect.left - box.left - margin, behavior: "smooth", }) } else if (rect.right > box.right - margin) { list.scrollBy({ left: rect.right - box.right + margin, behavior: "smooth", }) } } const observer = new MutationObserver(reveal) observer.observe(list, { subtree: true, attributes: true, attributeFilter: ["data-active"], }) const onFocus = (event: FocusEvent) => { const tab = (event.target as Element).closest( "[data-slot=tabs-trigger]" ) if (!tab || list.scrollWidth <= list.clientWidth + 1) { return } const box = list.getBoundingClientRect() const rect = tab.getBoundingClientRect() if (rect.left < box.left || rect.right > box.right) { list.scrollBy({ left: rect.left < box.left ? rect.left - box.left - 24 : rect.right - box.right + 24, behavior: "smooth", }) } } list.addEventListener("focusin", onFocus) return () => { observer.disconnect() list.removeEventListener("focusin", onFocus) } }, [list]) } const tabsListVariants = cva( "group/tabs-list relative isolate flex max-w-full min-w-0 [scrollbar-width:none] overflow-x-auto overscroll-x-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:overflow-x-visible data-[orientation=vertical]:overflow-y-auto [&::-webkit-scrollbar]:hidden", { variants: { variant: { default: "w-fit items-center gap-0.5 rounded-lg bg-muted p-[3px] data-[orientation=vertical]:items-stretch", line: "w-full gap-1 shadow-[inset_0_calc(var(--hairline)*-1)_0_var(--border)] data-[orientation=vertical]:w-fit data-[orientation=vertical]:shadow-[inset_calc(var(--hairline)*-1)_0_0_var(--border)] rtl:data-[orientation=vertical]:shadow-[inset_var(--hairline)_0_0_var(--border)]", }, }, defaultVariants: { variant: "default", }, } ) type TabsListProps = TabsPrimitive.List.Props & { variant?: TabsVariant } function TabsList({ className, variant = "default", children, ref, ...props }: TabsListProps) { const [list, setList] = React.useState(null) useScrollEdges(list) useRevealActive(list) React.useEffect(() => { if (!list) { return } let second = 0 const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => list.setAttribute("data-ready", "")) }) return () => { cancelAnimationFrame(first) cancelAnimationFrame(second) } }, [list]) const setRef = React.useCallback( (node: HTMLDivElement | null) => { setList(node) if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) return ( {children} ) } function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) { const variant = React.useContext(TabsListContext) return ( ) } function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) { return ( ) } export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } export type { TabsListProps, TabsVariant } 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","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/tabs.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]