4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T28f1,import { forwardRef, useEffect, useRef, useCallback, useId, useState, type HTMLAttributes, type ReactNode, } from 'react' import { createPortal } from 'react-dom' import { cn } from '@/lib/utils' export type ModalSize = 'sm' | 'md' | 'lg' | 'full' export interface ModalProps extends Omit, 'role'> { /** Whether the modal is open */ isOpen: boolean /** Callback when modal should close */ onClose: () => void /** Modal content */ children: ReactNode /** Size of the modal panel */ size?: ModalSize /** Whether clicking the backdrop closes the modal */ closeOnBackdropClick?: boolean /** Whether pressing Escape closes the modal */ closeOnEscape?: boolean /** Accessible label for the modal (used if no Modal.Header is provided) */ ariaLabel?: string } const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' const sizeClasses: Record = { sm: 'max-w-[400px]', md: 'max-w-[560px]', lg: 'max-w-[720px]', full: 'max-w-none w-screen h-[100dvh] !rounded-none', } export const Modal = forwardRef( ( { isOpen, onClose, children, size = 'md', closeOnBackdropClick = true, closeOnEscape = true, ariaLabel, className, ...props }, ref ) => { const internalRef = useRef(null) const panelRef = (ref as React.RefObject) || internalRef const previousActiveElement = useRef(null) const labelId = useId() const descriptionId = useId() const [mounted, setMounted] = useState(false) const [visible, setVisible] = useState(false) // Mount/unmount with animation useEffect(() => { if (isOpen) { setMounted(true) // Trigger enter animation on next frame requestAnimationFrame(() => { requestAnimationFrame(() => { setVisible(true) }) }) } else { setVisible(false) const timer = setTimeout(() => setMounted(false), 200) return () => clearTimeout(timer) } }, [isOpen]) // Lock body scroll when open useEffect(() => { if (isOpen) { const scrollY = window.scrollY document.body.style.overflow = 'hidden' document.body.style.position = 'fixed' document.body.style.top = `-${scrollY}px` document.body.style.width = '100%' } else { const top = document.body.style.top document.body.style.overflow = '' document.body.style.position = '' document.body.style.top = '' document.body.style.width = '' if (top) { window.scrollTo(0, parseInt(top, 10) * -1) } } return () => { document.body.style.overflow = '' document.body.style.position = '' document.body.style.top = '' document.body.style.width = '' } }, [isOpen]) // Escape key handler useEffect(() => { if (!closeOnEscape || !isOpen) return const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.stopPropagation() onClose() } } document.addEventListener('keydown', handleEscape) return () => document.removeEventListener('keydown', handleEscape) }, [isOpen, onClose, closeOnEscape]) // Focus management useEffect(() => { if (isOpen) { previousActiveElement.current = document.activeElement as HTMLElement // Focus first focusable element in panel const panel = panelRef.current if (panel) { const firstFocusable = panel.querySelector(FOCUSABLE_SELECTOR) if (firstFocusable) { firstFocusable.focus() } else { panel.focus() } } } else if (previousActiveElement.current) { previousActiveElement.current.focus() previousActiveElement.current = null } }, [isOpen, panelRef]) // Focus trap const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key !== 'Tab' || !panelRef.current) return const focusableElements = panelRef.current.querySelectorAll(FOCUSABLE_SELECTOR) if (focusableElements.length === 0) { e.preventDefault() return } const firstElement = focusableElements[0] const lastElement = focusableElements[focusableElements.length - 1] if (e.shiftKey && document.activeElement === firstElement) { e.preventDefault() lastElement?.focus() } else if (!e.shiftKey && document.activeElement === lastElement) { e.preventDefault() firstElement?.focus() } }, [panelRef] ) // Backdrop click handler const handleBackdropClick = useCallback( (e: React.MouseEvent) => { if (closeOnBackdropClick && e.target === e.currentTarget) { onClose() } }, [closeOnBackdropClick, onClose] ) if (!mounted) return null return createPortal( , document.body ) } ) Modal.displayName = 'Modal' // --- Compound sub-components --- export interface ModalHeaderProps extends HTMLAttributes { children: ReactNode } export function ModalHeader({ children, className, ...props }: ModalHeaderProps) { return (

{children}

) } ModalHeader.displayName = 'ModalHeader' export interface ModalTitleProps extends HTMLAttributes { children: ReactNode as?: 'h1' | 'h2' | 'h3' | 'h4' } export function ModalTitle({ children, as: Tag = 'h2', className, id, ...props }: ModalTitleProps) { return ( {children} ) } ModalTitle.displayName = 'ModalTitle' export interface ModalDescriptionProps extends HTMLAttributes { children: ReactNode } export function ModalDescription({ children, className, id, ...props }: ModalDescriptionProps) { return (

{children}

) } ModalDescription.displayName = 'ModalDescription' export interface ModalBodyProps extends HTMLAttributes { children: ReactNode } export function ModalBody({ children, className, ...props }: ModalBodyProps) { return (

{children}

) } ModalBody.displayName = 'ModalBody' export interface ModalFooterProps extends HTMLAttributes { children: ReactNode } export function ModalFooter({ children, className, ...props }: ModalFooterProps) { return (

{children}

) } ModalFooter.displayName = 'ModalFooter' export interface ModalCloseButtonProps extends HTMLAttributes { /** Accessible label for the close button */ ariaLabel?: string } export function ModalCloseButton({ ariaLabel = 'Close', className, onClick, ...props }: ModalCloseButtonProps) { return ( ) } ModalCloseButton.displayName = 'ModalCloseButton' 4a:["$","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","react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","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":"react-dom"}]]}]}]]}],["$","$L4b",null,{"namespace":"@n3wth","registryDependencies":["cn"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/new-york/modal/modal.tsx","content":"$4d","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]