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:T219e,"use client"; import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"; import { AnimatePresence, motion } from "motion/react"; import type { HTMLMotionProps, Transition } from "motion/react"; import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; interface AccordionItemContextType { canAnimate: boolean; isOpen: boolean; setCanAnimate: (canAnimate: boolean) => void; setIsOpen: (open: boolean) => void; } const AccordionItemContext = createContext(undefined); const useAccordionItem = (): AccordionItemContextType => { const context = useContext(AccordionItemContext); if (!context) { throw new Error("useAccordionItem must be used within an AccordionItem"); } return context; }; type AccordionValue = string | string[]; type AccordionProps = Omit< ComponentProps, "defaultValue" | "multiple" | "onValueChange" | "value" > & { type?: "single" | "multiple"; collapsible?: boolean; value?: AccordionValue; defaultValue?: AccordionValue; onValueChange?: (value: AccordionValue) => void; }; const normalizeAccordionValue = (value: AccordionValue | undefined): string[] | undefined => { if (value === undefined) { return undefined; } if (Array.isArray(value)) { return value; } return value === "" ? [] : [value]; }; const Accordion = ({ type = "single", collapsible = false, value, defaultValue, onValueChange, ...props }: AccordionProps) => { const multiple = type === "multiple"; const handleValueChange = useCallback( (nextValue: (unknown | null)[]) => { if (!onValueChange) { return; } const nextStringValues = nextValue.filter((item): item is string => typeof item === "string"); if (multiple) { onValueChange(nextStringValues); return; } const [firstValue] = nextStringValues; if (firstValue !== undefined) { onValueChange(firstValue); return; } if (collapsible) { onValueChange(""); } }, [collapsible, multiple, onValueChange], ); return ( ); }; const AccordionItem = ({ className, children, ...props }: ComponentProps) => { const [isOpen, setIsOpen] = useState(false); const [canAnimate, setCanAnimate] = useState(false); const contextValue = useMemo( () => ({ canAnimate, isOpen, setCanAnimate, setIsOpen }), [canAnimate, isOpen], ); return ( {children} ); }; type AccordionTriggerProps = ComponentProps & { chevron?: boolean; }; const AccordionTrigger = ({ ref, className, children, chevron = true, ...props }: AccordionTriggerProps) => { const triggerRef = useRef(null); useImperativeHandle(ref, () => triggerRef.current as HTMLButtonElement); const { isOpen, setIsOpen, canAnimate, setCanAnimate } = useAccordionItem(); useEffect(() => { const node = triggerRef.current; if (!node) { return; } const updateState = () => { const isExpanded = Object.hasOwn(node.dataset, "panelOpen") || node.getAttribute("aria-expanded") === "true"; setIsOpen(isExpanded); }; const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if ( mutation.attributeName === "data-panel-open" || mutation.attributeName === "aria-expanded" ) { updateState(); } } }); observer.observe(node, { attributeFilter: ["data-panel-open", "aria-expanded"], attributes: true, }); // On initial `defaultValue`, Base UI applies the panel's `data-panel-open` // after this effect runs, and that first attribute write can land in a gap // the observer misses — leaving the panel collapsed until the user toggles // it. Re-read the open state across the first few frames so we reliably // catch it whenever Base UI writes it, then enable animation. let frameId = 0; let frames = 0; const syncOpenState = () => { updateState(); frames += 1; if (frames < 5) { frameId = requestAnimationFrame(syncOpenState); } else { setCanAnimate(true); } }; syncOpenState(); return () => { cancelAnimationFrame(frameId); observer.disconnect(); }; }, [setCanAnimate, setIsOpen]); return ( {children} {chevron ? ( // Odd box and bar sizes (11px / 1px) keep each bar's centred offset a // whole number — (11 / 2) - (1 / 2) = 5px. At even sizes the 1.5px bar // landed on 5.25px, straddling two pixels and rendering soft.

) : null} ); }; type AccordionContentProps = ComponentProps & HTMLMotionProps<"div"> & { transition?: Transition; }; const DEFAULT_ACCORDION_TRANSITION: Transition = { damping: 22, stiffness: 150, type: "spring", }; const AccordionContent = ({ className, children, transition = DEFAULT_ACCORDION_TRANSITION, ...props }: AccordionContentProps) => { const { isOpen, canAnimate } = useAccordionItem(); return ( ); }; export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; 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",{"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"}]]}]}],["$","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":"@blode","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/accordion.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]