4c: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"] 4d: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"] 4e:Tfba,import { type HTMLAttributes, type ReactNode, useEffect, useRef, useCallback } from 'react' import { cn } from '@/lib/utils' export interface MobileDrawerProps extends HTMLAttributes { /** Whether the drawer is open */ isOpen: boolean /** Callback when drawer should close */ onClose: () => void /** Drawer content */ children: ReactNode /** Width of the drawer */ width?: string /** Position of the drawer */ position?: 'left' | 'right' /** Z-index for the drawer */ zIndex?: number /** Accessible label for the drawer */ ariaLabel?: string } export function MobileDrawer({ isOpen, onClose, children, width = '280px', position = 'right', zIndex = 50, ariaLabel = 'Navigation menu', className, ...props }: MobileDrawerProps) { const drawerRef = useRef(null) const previousActiveElement = useRef(null) // Lock body scroll when open useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden' } else { document.body.style.overflow = '' } return () => { document.body.style.overflow = '' } }, [isOpen]) // Handle escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) { onClose() } } document.addEventListener('keydown', handleEscape) return () => document.removeEventListener('keydown', handleEscape) }, [isOpen, onClose]) // Focus management useEffect(() => { if (isOpen) { previousActiveElement.current = document.activeElement as HTMLElement // Focus first focusable element in drawer const firstFocusable = drawerRef.current?.querySelector( 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' ) firstFocusable?.focus() } else if (previousActiveElement.current) { previousActiveElement.current.focus() previousActiveElement.current = null } }, [isOpen]) // Focus trap const handleKeyDown = useCallback((e: React.KeyboardEvent) => { if (e.key !== 'Tab' || !drawerRef.current) return const focusableElements = drawerRef.current.querySelectorAll( 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' ) 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() } }, []) const translateClass = position === 'right' ? isOpen ? 'translate-x-0' : 'translate-x-full' : isOpen ? 'translate-x-0' : '-translate-x-full' const positionClass = position === 'right' ? 'right-0' : 'left-0' return (

{/* Backdrop overlay */} ) } 4b:["$","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":[null,["$","$L4c",null,{"namespace":"@n3wth","registryDependencies":["cn"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/new-york/mobile-drawer/mobile-drawer.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]