51: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"] 52: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"] 53:T30eb,'use client'; import React, { createContext, useContext, useState, useRef, useCallback, useEffect, forwardRef, ReactElement, useSyncExternalStore, } from 'react'; import { createPortal } from 'react-dom'; import { motion, useAnimation, PanInfo, useMotionValue, useTransform, HTMLMotionProps, } from 'motion/react'; import { cn } from '@/lib/utils'; type SheetSide = 'left' | 'right'; interface SideSheetContextValue { isOpen: boolean; onOpenChange: (open: boolean) => void; contentProps: { width: string; className: string; closeThreshold: number; side: SheetSide; }; } const SideSheetContext = createContext(null); const useSideSheetContext = () => { const context = useContext(SideSheetContext); if (!context) { throw new Error( 'SideSheet compound components must be used within SideSheet', ); } return context; }; interface SideSheetRootProps { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; defaultOpen?: boolean; className?: string; side?: SheetSide; width?: string; closeThreshold?: number; } const SideSheetRoot = ({ children, open, onOpenChange, defaultOpen, className, side = 'right', width = '400px', closeThreshold = 0.3, }: SideSheetRootProps) => { const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false); const isControlled = open !== undefined; const isOpen = isControlled ? open : internalOpen; const handleOpenChange = useCallback( (newOpen: boolean) => { if (onOpenChange) { onOpenChange(newOpen); } if (!isControlled) { setInternalOpen(newOpen); } }, [onOpenChange, isControlled], ); const contentProps = { width, className: className || '', closeThreshold, side, }; return ( {children} ); }; interface SideSheetPortalProps { children: React.ReactNode; container?: HTMLElement; className?: string; } const SideSheetPortal = ({ children, container, className, }: SideSheetPortalProps) => { const mounted = useSyncExternalStore( () => () => {}, () => true, () => false, ); if (!mounted) { return null; } const portalContent = className ? (

{children}

) : ( children ); return createPortal(portalContent, container || document.body); }; interface SideSheetOverlayProps extends HTMLMotionProps<'div'> { className?: string; } const SideSheetOverlay = forwardRef( ({ className, ...props }, ref) => { const { isOpen, onOpenChange } = useSideSheetContext(); const handleClick = useCallback( (e: React.MouseEvent) => { if (e.target === e.currentTarget) { onOpenChange(false); } }, [onOpenChange], ); return ( ); }, ); SideSheetOverlay.displayName = 'SideSheetOverlay'; interface SideSheetTriggerProps { asChild?: boolean; children: React.ReactNode; className?: string; } const SideSheetTrigger = ({ asChild, children, className, }: SideSheetTriggerProps) => { const { onOpenChange } = useSideSheetContext(); const handleClick = () => { onOpenChange(true); }; if (asChild && React.isValidElement(children)) { const child = children as ReactElement<{ className?: string; onClick?: (e: React.MouseEvent) => void; }>; return React.cloneElement(child, { className: cn(child.props.className, className), onClick: (e: React.MouseEvent) => { child.props.onClick?.(e); handleClick(); }, }); } return (

{children}

); }; interface SideSheetContentProps { children?: React.ReactNode; className?: string; } const SideSheetContent = ({ children, className = '', }: SideSheetContentProps) => { const { isOpen, onOpenChange, contentProps } = useSideSheetContext(); const { width, closeThreshold, side } = contentProps; const controls = useAnimation(); const x = useMotionValue(0); useTransform(x, [-100, 0], [0, 1]); const overlayRef = useRef(null); const [sheetWidth, setSheetWidth] = useState(0); const onClose = useCallback(() => onOpenChange(false), [onOpenChange]); const calculateWidth = useCallback(() => { if (typeof window !== 'undefined') { const vw = window.innerWidth; let calculatedWidth; if (vw <= 640) { calculatedWidth = vw * 0.9; } else if (vw <= 1024) { calculatedWidth = vw * 0.7; } else { if (width.includes('px')) { calculatedWidth = parseInt(width); } else if (width.includes('vw')) { calculatedWidth = (parseInt(width) / 100) * vw; } else if (width.includes('%')) { calculatedWidth = (parseInt(width) / 100) * vw; } else { calculatedWidth = 400; } } return Math.min(calculatedWidth, vw * 0.95); } return 400; }, [width]); useEffect(() => { const updateWidth = () => { setSheetWidth(calculateWidth()); }; updateWidth(); window.addEventListener('resize', updateWidth); return () => window.removeEventListener('resize', updateWidth); }, [calculateWidth]); const getInitialX = useCallback(() => { return side === 'left' ? -(sheetWidth + 50) : sheetWidth + 50; }, [side, sheetWidth]); const getPositionStyles = useCallback(() => { if (side === 'left') { return { left: 0, top: 0, bottom: 0, }; } else { return { right: 0, top: 0, bottom: 0, }; } }, [side]); useEffect(() => { if (isOpen) { document.body.style.overflow = 'hidden'; controls.start({ x: 0, transition: { type: 'spring', stiffness: 400, damping: 40, mass: 0.8, }, }); } else { document.body.style.overflow = ''; controls.start({ x: getInitialX(), transition: { type: 'tween', ease: [0.25, 0.46, 0.45, 0.94], duration: 0.3, }, }); } return () => { document.body.style.overflow = ''; }; }, [isOpen, controls, getInitialX]); useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) { onClose(); } }; if (isOpen) { document.addEventListener('keydown', handleEscape); } return () => { document.removeEventListener('keydown', handleEscape); }; }, [isOpen, onClose]); const handleDragEnd = useCallback( (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { const threshold = sheetWidth * closeThreshold; let shouldClose = false; if (side === 'left') { shouldClose = info.offset.x < -threshold || info.velocity.x < -800; } else { shouldClose = info.offset.x > threshold || info.velocity.x > 800; } if (shouldClose) { onClose(); } else { controls.start({ x: 0, transition: { type: 'spring', stiffness: 500, damping: 40, }, }); } }, [controls, onClose, closeThreshold, sheetWidth, side], ); const handleOverlayClick = useCallback( (e: React.MouseEvent) => { if (e.target === overlayRef.current) { onClose(); } }, [onClose], ); const getDragConstraints = useCallback(() => { if (side === 'left') { return { left: -sheetWidth, right: 0 }; } else { return { left: 0, right: sheetWidth }; } }, [side, sheetWidth]); if (sheetWidth === 0) return null; return (

{children}

); }; interface SideSheetHeaderProps { children: React.ReactNode; className?: string; } const SideSheetHeader = ({ children, className }: SideSheetHeaderProps) => { return (

{children}

); }; interface SideSheetTitleProps { children: React.ReactNode; className?: string; } const SideSheetTitle = ({ children, className }: SideSheetTitleProps) => { return (

{children}

); }; interface SideSheetDescriptionProps { children: React.ReactNode; className?: string; } const SideSheetDescription = ({ children, className, }: SideSheetDescriptionProps) => { return (

{children}

); }; interface SideSheetFooterProps { children: React.ReactNode; className?: string; } const SideSheetFooter = ({ children, className }: SideSheetFooterProps) => { return (

{children}

); }; interface SideSheetCloseProps { asChild?: boolean; children: React.ReactNode; className?: string; } const SideSheetClose = ({ asChild, children, className, }: SideSheetCloseProps) => { const { onOpenChange } = useSideSheetContext(); const handleClick = () => { onOpenChange(false); }; if (asChild && React.isValidElement(children)) { const child = children as ReactElement<{ className?: string; onClick?: (e: React.MouseEvent) => void; }>; return React.cloneElement(child, { className: cn(child.props.className, className), onClick: (e: React.MouseEvent) => { child.props.onClick?.(e); handleClick(); }, }); } return ( ); }; const SideSheet = SideSheetRoot; export { SideSheet, SideSheetPortal, SideSheetOverlay, SideSheetTrigger, SideSheetClose, SideSheetContent, SideSheetHeader, SideSheetFooter, SideSheetTitle, SideSheetDescription, }; 50:["$","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","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/side-sheet.tsx","content":"$53","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]