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:T22c4,"use client"; import * as React from "react"; import { motion, type Transition, type HTMLMotionProps } from "motion/react"; import { Highlight, HighlightItem, type HighlightItemProps, type HighlightProps, } from "@/components/unlumen-ui/primitives/effects/highlight"; import { getStrictContext } from "@/lib/get-strict-context"; import { Slot, type WithAsChild } from "@/components/unlumen-ui/primitives/animate/slot"; type TabsContextType = { activeValue: string; handleValueChange: (value: string) => void; registerTrigger: (value: string, node: HTMLElement | null) => void; }; const [TabsProvider, useTabs] = getStrictContext("TabsContext"); type BaseTabsProps = React.ComponentProps<"div"> & { children: React.ReactNode; }; type UnControlledTabsProps = BaseTabsProps & { defaultValue?: string; value?: never; onValueChange?: never; }; type ControlledTabsProps = BaseTabsProps & { value: string; onValueChange?: (value: string) => void; defaultValue?: never; }; type TabsProps = UnControlledTabsProps | ControlledTabsProps; function Tabs({ defaultValue, value, onValueChange, children, ...props }: TabsProps) { const [activeValue, setActiveValue] = React.useState( defaultValue, ); const triggersRef = React.useRef(new Map()); const initialSet = React.useRef(false); const isControlled = value !== undefined; React.useEffect(() => { if ( !isControlled && activeValue === undefined && triggersRef.current.size > 0 && !initialSet.current ) { const firstTab = triggersRef.current.keys().next().value as | string | undefined; if (firstTab !== undefined) { setActiveValue(firstTab); initialSet.current = true; } } }, [activeValue, isControlled]); const registerTrigger = React.useCallback( (val: string, node: HTMLElement | null) => { if (node) { triggersRef.current.set(val, node); if (!isControlled && activeValue === undefined && !initialSet.current) { setActiveValue(val); initialSet.current = true; } } else { triggersRef.current.delete(val); } }, [activeValue, isControlled], ); const handleValueChange = React.useCallback( (val: string) => { if (!isControlled) setActiveValue(val); else onValueChange?.(val); }, [isControlled, onValueChange], ); return (

{children}

); } type TabsHighlightProps = Omit< HighlightProps, "controlledItems" | "value" > & { containerClassName?: string; }; function TabsHighlight({ transition = { type: "spring", stiffness: 200, damping: 25 }, ...props }: TabsHighlightProps) { const { activeValue } = useTabs(); return ( ); } type TabsListProps = React.ComponentProps<"div"> & { children: React.ReactNode; }; function TabsList(props: TabsListProps) { return

; } type TabsHighlightItemProps = HighlightItemProps & { value: string; }; function TabsHighlightItem(props: TabsHighlightItemProps) { return ; } type TabsTriggerProps = WithAsChild< { value: string; children: React.ReactNode; } & HTMLMotionProps<"button"> >; function TabsTrigger({ ref, value, asChild = false, onClick, ...props }: TabsTriggerProps) { const { activeValue, handleValueChange, registerTrigger } = useTabs(); const localRef = React.useRef(null); React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement); React.useEffect(() => { registerTrigger(value, localRef.current); return () => registerTrigger(value, null); }, [value, registerTrigger]); const Component = asChild ? Slot : motion.button; return ( ) => { handleValueChange(value); onClick?.(e); }} data-state={activeValue === value ? "active" : "inactive"} {...props} /> ); } type TabsContentsProps = HTMLMotionProps<"div"> & { children: React.ReactNode; transition?: Transition; }; function TabsContents({ children, transition = { type: "spring", stiffness: 300, damping: 30, bounce: 0, restDelta: 0.01, }, ...props }: TabsContentsProps) { const { activeValue } = useTabs(); const childrenArray = React.Children.toArray(children); const activeIndex = childrenArray.findIndex( (child): child is React.ReactElement<{ value: string }> => React.isValidElement(child) && typeof child.props === "object" && child.props !== null && "value" in child.props && child.props.value === activeValue, ); const containerRef = React.useRef(null); const itemRefs = React.useRef>([]); const [height, setHeight] = React.useState(0); const roRef = React.useRef(null); const measure = React.useCallback((index: number) => { const pane = itemRefs.current[index]; const container = containerRef.current; if (!pane || !container) return 0; const base = pane.getBoundingClientRect().height || 0; const cs = getComputedStyle(container); const isBorderBox = cs.boxSizing === "border-box"; const paddingY = (parseFloat(cs.paddingTop || "0") || 0) + (parseFloat(cs.paddingBottom || "0") || 0); const borderY = (parseFloat(cs.borderTopWidth || "0") || 0) + (parseFloat(cs.borderBottomWidth || "0") || 0); let total = base + (isBorderBox ? paddingY + borderY : 0); const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1; total = Math.ceil(total * dpr) / dpr; return total; }, []); React.useEffect(() => { if (roRef.current) { roRef.current.disconnect(); roRef.current = null; } const pane = itemRefs.current[activeIndex]; const container = containerRef.current; if (!pane || !container) return; setHeight(measure(activeIndex)); const ro = new ResizeObserver(() => { const next = measure(activeIndex); requestAnimationFrame(() => setHeight(next)); }); ro.observe(pane); ro.observe(container); roRef.current = ro; return () => { ro.disconnect(); roRef.current = null; }; }, [activeIndex, childrenArray.length, measure]); React.useLayoutEffect(() => { if (height === 0 && activeIndex >= 0) { const next = measure(activeIndex); if (next !== 0) setHeight(next); } }, [activeIndex, height, measure]); return ( {childrenArray.map((child, index) => (

{ itemRefs.current[index] = el; }} className="w-full shrink-0 px-2 h-full" > {child}

))} ); } type TabsContentProps = WithAsChild< { value: string; children: React.ReactNode; } & HTMLMotionProps<"div"> >; function TabsContent({ value, style, asChild = false, ...props }: TabsContentProps) { const { activeValue } = useTabs(); const isActive = activeValue === value; const Component = asChild ? Slot : motion.div; return ( ); } export { Tabs, TabsList, TabsHighlight, TabsHighlightItem, TabsTrigger, TabsContents, TabsContent, useTabs, type TabsProps, type TabsListProps, type TabsHighlightProps, type TabsHighlightItemProps, type TabsTriggerProps, type TabsContentsProps, type TabsContentProps, type TabsContextType, }; 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":[["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@unlumen-ui","registryDependencies":["@unlumen-ui/highlight","@unlumen-ui/primitives-animate-slot","@unlumen-ui/lib-get-strict-context"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/primitives/animate/tabs/index.tsx","content":"$54","type":"registry:ui","target":"components/unlumen-ui/primitives/animate/tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]