4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T2032,"use client"; import { cn } from "cn"; import { Slot as SlotPrimitive } from "radix-ui"; import * as React from "react"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } function getDataState(swapped: boolean) { return swapped ? "on" : "off"; } interface StoreState { swapped: boolean; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStore( selector: (state: StoreState) => T, ogStore?: Store | null, ): T { const contextStore = React.useContext(StoreContext); const store = ogStore ?? contextStore; if (!store) { throw new Error(`\`useStore\` must be used within \`Swap\``); } const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface SwapProps extends DivProps { swapped?: boolean; defaultSwapped?: boolean; onSwappedChange?: (swapped: boolean) => void; activationMode?: "click" | "hover"; animation?: "fade" | "rotate" | "flip" | "scale"; disabled?: boolean; } function Swap(props: SwapProps) { const { swapped: swappedProp, defaultSwapped, onSwappedChange, activationMode = "click", animation = "fade", disabled, asChild, className, onClick: onClickProp, onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, onKeyDown: onKeyDownProp, ...rootProps } = props; const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => ({ swapped: swappedProp ?? defaultSwapped ?? false, })); const propsRef = useAsRef({ activationMode, animation, disabled, onSwappedChange, onClick: onClickProp, onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, onKeyDown: onKeyDownProp, }); const isClickMode = activationMode === "click"; const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return; if (key === "swapped" && typeof value === "boolean") { stateRef.current.swapped = value; propsRef.current.onSwappedChange?.(value); } else { stateRef.current[key] = value; } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); const swapped = useStore((state) => state.swapped, store); useIsomorphicLayoutEffect(() => { if (swappedProp !== undefined) { store.setState("swapped", swappedProp); } }, [swappedProp]); const onToggle = React.useCallback(() => { if (propsRef.current.disabled) return; store.setState("swapped", !store.getState().swapped); }, [store, propsRef]); const onClick = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onClick?.(event); if (event.defaultPrevented || propsRef.current.activationMode !== "click") return; onToggle(); }, [propsRef, onToggle], ); const onMouseEnter = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseEnter?.(event); if ( event.defaultPrevented || activationMode !== "hover" || propsRef.current.disabled ) return; store.setState("swapped", true); }, [propsRef, activationMode, store], ); const onMouseLeave = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onMouseLeave?.(event); if ( event.defaultPrevented || activationMode !== "hover" || propsRef.current.disabled ) return; store.setState("swapped", false); }, [propsRef, activationMode, store], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { propsRef.current.onKeyDown?.(event); if ( event.defaultPrevented || propsRef.current.activationMode !== "click" || propsRef.current.disabled ) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); onToggle(); } }, [propsRef, onToggle], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function SwapOn(props: DivProps) { const { asChild, className, ...onProps } = props; const swapped = useStore((state) => state.swapped); const OnPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function SwapOff(props: DivProps) { const { asChild, className, ...offProps } = props; const swapped = useStore((state) => state.swapped); const OffPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } export { Swap, SwapOff, SwapOn, type SwapProps, useStore as useSwap }; 4e:["$","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","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"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["@diceui/use-as-ref","@diceui/use-isomorphic-layout-effect","@diceui/use-lazy-ref"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"ui/swap.tsx","content":"$51","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]