{"version":3,"file":"MasonryGrid.Dd6DWToc.mjs","names":["useState","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/BhiRyG5K37tCozyT0xh4/iE675mXjqXY4AZajguyD/MasonryGrid.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";/**\n * Masonry Grid\n *\n * A responsive masonry grid that displays images in their original aspect ratio.\n * Click any image to open it in a lightbox.\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function MasonryGrid(props){const{items=[],columns=3,gap=16,borderRadius=8,lightboxBackground=\"rgba(0, 0, 0, 0.9)\",showLightboxCloseButton=true,closeButtonColor=\"#FFFFFF\"}=props;const[selectedImage,setSelectedImage]=useState(null);const openLightbox=useCallback(item=>{startTransition(()=>setSelectedImage(item));},[]);const closeLightbox=useCallback(()=>{startTransition(()=>setSelectedImage(null));},[]);const handleKeyDown=useCallback(e=>{if(e.key===\"Escape\"){closeLightbox();}},[closeLightbox]);if(!items||items.length===0){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f5f5f5\",borderRadius:borderRadius,color:\"#999\",fontSize:\"14px\"},children:\"Add images in the properties panel\"});}return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",columnCount:columns,columnGap:gap},children:items.map((item,index)=>/*#__PURE__*/_jsx(motion.div,{style:{breakInside:\"avoid\",marginBottom:gap,cursor:\"pointer\",borderRadius:borderRadius,overflow:\"hidden\"},whileHover:{scale:1.02},whileTap:{scale:.98},onClick:()=>openLightbox(item),children:/*#__PURE__*/_jsx(\"img\",{src:item.src,alt:item.alt||`Image ${index+1}`,style:{width:\"100%\",height:\"auto\",display:\"block\"},loading:\"lazy\"})},index))}),/*#__PURE__*/_jsx(AnimatePresence,{children:selectedImage&&/*#__PURE__*/_jsxs(motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{position:\"fixed\",top:0,left:0,right:0,bottom:0,backgroundColor:lightboxBackground,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",zIndex:1e3,padding:\"40px\"},onClick:closeLightbox,onKeyDown:handleKeyDown,tabIndex:0,role:\"dialog\",\"aria-modal\":\"true\",children:[showLightboxCloseButton&&/*#__PURE__*/_jsx(\"button\",{style:{position:\"absolute\",top:\"20px\",right:\"20px\",background:\"none\",border:\"none\",cursor:\"pointer\",padding:\"10px\",color:closeButtonColor,fontSize:\"32px\",lineHeight:1,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",width:\"44px\",height:\"44px\"},onClick:closeLightbox,\"aria-label\":\"Close lightbox\",children:\"\\xd7\"}),/*#__PURE__*/_jsx(motion.img,{initial:{scale:.9,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.9,opacity:0},transition:{type:\"spring\",damping:25,stiffness:300},src:selectedImage.src,alt:selectedImage.alt||\"Lightbox image\",style:{maxWidth:\"100%\",maxHeight:\"100%\",objectFit:\"contain\",borderRadius:borderRadius},onClick:e=>e.stopPropagation()})]})})]});}addPropertyControls(MasonryGrid,{items:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.ResponsiveImage},defaultValue:[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Gradient 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Gradient 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Gradient 4\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Gradient 5\"}]},columns:{type:ControlType.Number,title:\"Columns\",defaultValue:3,min:1,max:6,step:1},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:16,min:0,max:64,step:4,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"},lightboxBackground:{type:ControlType.Color,title:\"Lightbox BG\",defaultValue:\"rgba(0, 0, 0, 0.9)\"},showLightboxCloseButton:{type:ControlType.Boolean,title:\"Close Button\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},closeButtonColor:{type:ControlType.Color,title:\"Button Color\",defaultValue:\"#FFFFFF\",hidden:({showLightboxCloseButton})=>!showLightboxCloseButton}});MasonryGrid.displayName=\"Masonry Grid\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MasonryGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MasonryGrid.map"],"mappings":"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"}