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/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"] 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/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"] 52:T4622,"use client"; import { Dialog as BaseDialog } from "@base-ui/react/dialog"; import { cn } from "cn"; import { XIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { ScrollArea, ScrollAreaContent } from "@/components/ui/scroll-area"; /** Whether the popup or the viewport owns vertical scrolling. */ type DialogScroll = "inside" | "outside"; type DialogOverlay = "blur" | "brightness" | "transparent"; type DialogFadeEdge = "top" | "bottom" | "left" | "right" | "x" | "y"; type DialogFadeEdges = boolean | DialogFadeEdge | DialogFadeEdge[]; type DialogOnOpenChange = NonNullable; type DialogConfigContextValue = { dismissible: boolean; modal: boolean | "trap-focus"; overlay: DialogOverlay; }; const DialogConfigContext = React.createContext({ dismissible: true, modal: true, overlay: "blur", }); const DialogScrollContext = React.createContext("inside"); type DialogStackContextValue = { /** * The shared, untransformed top offset for every popup in one nested stack. * `null` retains normal centering until the active popup is measured. */ offset: number | null; setActivePopup: (popup: HTMLElement) => void; }; const DialogStackContext = React.createContext( null ); function useDialogStack() { const parentStack = React.useContext(DialogStackContext); const [offset, setOffset] = React.useState(null); const setActivePopup = React.useCallback((popup: HTMLElement) => { const viewport = popup.closest( '[data-slot="dialog-viewport"]' ); if (!viewport) return; const viewportStyles = window.getComputedStyle(viewport); const paddingTop = Number.parseFloat(viewportStyles.paddingTop) || 0; const nextOffset = Math.max( 0, (viewport.clientHeight - popup.offsetHeight) / 2 - paddingTop ); setOffset((currentOffset) => currentOffset === nextOffset ? currentOffset : nextOffset ); }, []); const ownStack = React.useMemo(() => { return { offset, setActivePopup }; }, [offset, setActivePopup]); return parentStack ?? ownStack; } type DialogProps = { dismissible?: boolean; overlay?: DialogOverlay; } & BaseDialog.Root.Props; type DialogPopupStyle = BaseDialog.Popup.Props["style"]; function mergeDialogPopupStyle( style: DialogPopupStyle, marginTop: number | undefined ): DialogPopupStyle { if (marginTop === undefined) { return style; } if (typeof style === "function") { return (state: BaseDialog.Popup.State) => { return { ...style(state), marginTop, }; }; } return { ...style, marginTop, }; } function Dialog({ dismissible = true, modal = true, overlay = "blur", disablePointerDismissal, onOpenChange, ...props }: DialogProps) { const dialogStack = useDialogStack(); const handleOpenChange = React.useCallback( (nextOpen, eventDetails) => { const target = eventDetails.event?.target; if ( !nextOpen && target instanceof Element && target.closest("[data-slot=lightbox-portal]") ) { eventDetails.cancel(); return; } if (!dismissible && !nextOpen && eventDetails.reason !== "close-press") { eventDetails.cancel(); return; } onOpenChange?.(nextOpen, eventDetails); }, [dismissible, onOpenChange] ); const configValue = React.useMemo(() => { return { dismissible, modal, overlay }; }, [dismissible, modal, overlay]); return ( ); } const createDialogHandle = BaseDialog.createHandle; function DialogPortal({ ...props }: BaseDialog.Portal.Props) { return ; } function DialogTrigger({ ...props }: BaseDialog.Trigger.Props) { return ; } function DialogCloseTrigger({ ...props }: BaseDialog.Close.Props) { return ; } function DialogBackdrop({ className, ...props }: BaseDialog.Backdrop.Props) { const { overlay } = React.useContext(DialogConfigContext); return ( ); } function DialogViewport({ className, scroll = "inside", children, ...props }: BaseDialog.Viewport.Props & { scroll?: DialogScroll }) { const { modal } = React.useContext(DialogConfigContext); const dialogStack = React.useContext(DialogStackContext); const isStackPositioned = dialogStack?.offset != null; return ( {scroll === "outside" ? ( {children} ) : ( children )} ); } function DialogContent({ className, children, variant = "default", scroll = "inside", ref, initialFocus, style, ...props }: BaseDialog.Popup.Props & { variant?: "default" | "inset"; /** Whether the body or the area around the popup owns scrolling. */ scroll?: DialogScroll; }) { const { dismissible, modal } = React.useContext(DialogConfigContext); const dialogStack = React.useContext(DialogStackContext); const isModal = modal === true; const isOutsideScroll = scroll === "outside"; const popupRef = React.useRef(null); const mergedRef = React.useCallback( (node: HTMLDivElement | null) => { popupRef.current = node; if (node) { window.requestAnimationFrame(() => { if ( node.isConnected && window .getComputedStyle(node) .getPropertyValue("--nested-dialogs") .trim() === "0" ) { dialogStack?.setActivePopup(node); } }); } if (typeof ref !== "function") { if (ref) ref.current = node; return () => { popupRef.current = null; if (ref) ref.current = null; }; } const cleanup = ref(node); return () => { popupRef.current = null; if (typeof cleanup === "function") cleanup(); else ref(null); }; }, [dialogStack, ref] ); const updateStackOffset = React.useCallback(() => { const popup = popupRef.current; // Anchor the stack while the active popup is entering so every level // starts its transition from the same untransformed center position. if ( !popup || window .getComputedStyle(popup) .getPropertyValue("--nested-dialogs") .trim() !== "0" ) { return; } dialogStack?.setActivePopup(popup); }, [dialogStack]); React.useLayoutEffect(() => { const popup = popupRef.current; if (!popup) return; let animationFrame: number | null = null; const scheduleStackOffsetUpdate = () => { if (animationFrame !== null) { window.cancelAnimationFrame(animationFrame); } animationFrame = window.requestAnimationFrame(() => { animationFrame = null; updateStackOffset(); }); }; const observer = new MutationObserver(scheduleStackOffsetUpdate); const resizeObserver = new ResizeObserver(scheduleStackOffsetUpdate); const viewport = window.visualViewport; observer.observe(popup, { attributes: true, attributeFilter: [ "data-ending-style", "data-nested-dialog-open", "data-starting-style", "hidden", ], }); resizeObserver.observe(popup); window.addEventListener("resize", scheduleStackOffsetUpdate); viewport?.addEventListener("resize", scheduleStackOffsetUpdate); // Base UI attaches the portal after this layout effect. Measure on the // following frame so the popup can resolve its owning viewport. const mountAnimationFrame = window.requestAnimationFrame(() => { scheduleStackOffsetUpdate(); }); return () => { observer.disconnect(); resizeObserver.disconnect(); window.removeEventListener("resize", scheduleStackOffsetUpdate); viewport?.removeEventListener("resize", scheduleStackOffsetUpdate); window.cancelAnimationFrame(mountAnimationFrame); if (animationFrame !== null) { window.cancelAnimationFrame(animationFrame); } }; }, [updateStackOffset]); const popup = ( {children} {dismissible && ( } > )} ); return ( {isModal && } {popup} ); } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function getScrollShadow(fadeEdges: DialogFadeEdges) { if (fadeEdges === false) return "none" as const; if (fadeEdges === true) return "both" as const; const edges = Array.isArray(fadeEdges) ? fadeEdges : [fadeEdges]; const hasVertical = edges.some((edge) => ["top", "bottom", "y"].includes(edge) ); const hasHorizontal = edges.some((edge) => ["left", "right", "x"].includes(edge) ); if (hasVertical && hasHorizontal) return "both" as const; if (hasVertical) return "vertical" as const; if (hasHorizontal) return "horizontal" as const; return "none" as const; } type DialogBodyProps = { nativeScroll?: boolean; fadeEdges?: DialogFadeEdges; scrollbarGutter?: boolean; persistScrollbar?: boolean; hideScrollbar?: boolean; viewportClassName?: string; } & React.ComponentProps<"div">; function DialogBody({ className, nativeScroll = false, fadeEdges = true, scrollbarGutter = false, persistScrollbar = false, hideScrollbar = false, viewportClassName, children, ...props }: DialogBodyProps) { const scroll = React.useContext(DialogScrollContext); const content = (

{children}

); return (

{scroll === "outside" ? ( content ) : nativeScroll ? (

{content}

) : ( {content} )}

); } function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } function DialogTitle({ className, ...props }: BaseDialog.Title.Props) { return ( ); } function DialogDescription({ className, ...props }: BaseDialog.Description.Props) { return ( ); } export { Dialog, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, createDialogHandle, }; export type { DialogBodyProps, DialogFadeEdge, DialogFadeEdges, DialogScroll }; 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","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/button.json","https://ui.iandefined.com/r/scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/dialog.tsx","content":"$52","type":"registry:ui","target":"components/ui/dialog.tsx"}],"className":"h-[70svh] min-h-80"}]]}]