{"version":3,"file":"Image_stack_1.DYo8uIB0.mjs","names":["React.useRef","React.useState","l","_Fragment"],"sources":["https:/framerusercontent.com/modules/DujYzOIH1u4k2wgRMneR/1yWFMn5TUKtEn0kZr1Zl/Image_stack_1.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{createPortal}from\"react-dom\";const IMAGE_URL=\"https://framerusercontent.com/images/placeholder.webp\";const DEFAULT_ITEMS=[{image:IMAGE_URL,isHero:false,focalX:50,focalY:50},{image:IMAGE_URL,isHero:false,focalX:50,focalY:50},{image:IMAGE_URL,isHero:false,focalX:50,focalY:50,sectionColumns:2},{image:IMAGE_URL,isHero:true,focalX:50,focalY:50},{image:IMAGE_URL,isHero:false,focalX:50,focalY:50,sectionColumns:4}];export default function HeroGridHeroMasonry(props){const{items,columns,gap,radius,backgroundColor,hoverZoomPercent,hoverDuration,hoverEasing,lightboxBg,closeIcon,nextIcon,prevIcon,closeSize,nextSize,prevSize,overlayBlur,style}=props;const data=items?.length?items:DEFAULT_ITEMS;const containerRef=React.useRef(null);const[layout,setLayout]=React.useState([]);const[hoverIndex,setHoverIndex]=React.useState(null);const[lightboxIndex,setLightboxIndex]=React.useState(null);const[lightboxVisible,setLightboxVisible]=React.useState(false);const scale=1+hoverZoomPercent/100;const transition=`transform ${hoverDuration}ms ${hoverEasing}`;React.useEffect(()=>{if(lightboxIndex!==null){requestAnimationFrame(()=>setLightboxVisible(true));}else{setLightboxVisible(false);}},[lightboxIndex]);React.useLayoutEffect(()=>{if(!containerRef.current)return;const containerWidth=containerRef.current.clientWidth;let yOffset=0;const newLayout=[];let i=0;while(i<data.length){const item=data[i];if(item.isHero){newLayout.push({type:\"hero\",index:i,top:yOffset,height:window.innerHeight});yOffset+=window.innerHeight+gap;i++;continue;}const sectionColumns=item.sectionColumns??columns;const colWidth=(containerWidth-gap*(sectionColumns-1))/sectionColumns;const colHeights=Array(sectionColumns).fill(0);const sectionItems=[];while(i<data.length&&!data[i].isHero&&(data[i].sectionColumns??sectionColumns)===sectionColumns){sectionItems.push({...data[i],index:i});i++;}sectionItems.forEach(entry=>{const img=new Image;img.src=entry.image;const aspect=img.naturalWidth&&img.naturalHeight?img.naturalHeight/img.naturalWidth:1.4;const height=colWidth*aspect;const col=colHeights.indexOf(Math.min(...colHeights));newLayout.push({type:\"item\",index:entry.index,top:yOffset+colHeights[col],left:col*(colWidth+gap),width:colWidth,height});colHeights[col]+=height+gap;});yOffset+=Math.max(...colHeights);}setLayout(newLayout);},[data,columns,gap]);const totalHeight=layout.length>0?Math.max(...layout.map(l=>l.top+l.height)):\"auto\";const navigate=dir=>{if(lightboxIndex===null)return;const next=(lightboxIndex+dir+data.length)%data.length;setLightboxIndex(next);};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:totalHeight,backgroundColor,...style},children:layout.map((item,i)=>{const d=data[item.index];return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:item.top,left:item.left||0,width:item.type===\"hero\"?\"100%\":item.width,height:item.height,overflow:\"hidden\",cursor:\"pointer\",borderRadius:item.type===\"hero\"?0:radius},onMouseEnter:()=>setHoverIndex(item.index),onMouseLeave:()=>setHoverIndex(null),onClick:()=>setLightboxIndex(item.index),children:/*#__PURE__*/_jsx(\"img\",{src:d.image,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",objectPosition:`${d.focalX}% ${d.focalY}%`,transition,transform:hoverIndex===item.index?`scale(${scale})`:\"scale(1)\"}})},i);})}),lightboxIndex!==null&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(\"div\",{onClick:()=>setLightboxIndex(null),style:{position:\"fixed\",inset:0,background:lightboxBg,backdropFilter:`blur(${overlayBlur}px)`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",zIndex:9999,opacity:lightboxVisible?1:0,transform:lightboxVisible?\"scale(1)\":\"scale(0.96)\",transition:`opacity 400ms ${hoverEasing}, transform 400ms ${hoverEasing}`},children:[/*#__PURE__*/_jsx(\"div\",{onClick:e=>e.stopPropagation(),children:/*#__PURE__*/_jsx(\"img\",{src:data[lightboxIndex].image,style:{maxWidth:\"90vw\",maxHeight:\"90vh\",userSelect:\"none\"}})}),/*#__PURE__*/_jsx(\"div\",{onClick:e=>{e.stopPropagation();navigate(-1);},style:{position:\"absolute\",left:24,cursor:\"pointer\",zIndex:1e4,color:\"white\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:prevIcon?/*#__PURE__*/_jsx(\"img\",{src:prevIcon,style:{width:prevSize,height:\"auto\"}}):/*#__PURE__*/_jsx(\"span\",{style:{fontSize:prevSize},children:\"←\"})}),/*#__PURE__*/_jsx(\"div\",{onClick:e=>{e.stopPropagation();navigate(1);},style:{position:\"absolute\",right:24,cursor:\"pointer\",zIndex:1e4,color:\"white\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:nextIcon?/*#__PURE__*/_jsx(\"img\",{src:nextIcon,style:{width:nextSize,height:\"auto\"}}):/*#__PURE__*/_jsx(\"span\",{style:{fontSize:nextSize},children:\"→\"})}),/*#__PURE__*/_jsx(\"div\",{onClick:e=>{e.stopPropagation();setLightboxIndex(null);},style:{position:\"absolute\",top:24,right:24,cursor:\"pointer\",zIndex:1e4,color:\"white\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:closeIcon?/*#__PURE__*/_jsx(\"img\",{src:closeIcon,style:{width:closeSize,height:\"auto\"}}):/*#__PURE__*/_jsx(\"span\",{style:{fontSize:closeSize},children:\"✕\"})})]}),document.body)]});}/* ---------------- CONTROLS ---------------- */HeroGridHeroMasonry.defaultProps={items:DEFAULT_ITEMS,columns:3,gap:12,radius:0,backgroundColor:\"#000\",hoverZoomPercent:5,hoverDuration:600,hoverEasing:\"cubic-bezier(0.4, 0, 0.2, 1)\",lightboxBg:\"rgba(0,0,0,0.9)\",overlayBlur:15,closeSize:24,nextSize:32,prevSize:32};addPropertyControls(HeroGridHeroMasonry,{items:{type:ControlType.Array,propertyControl:{type:ControlType.Object,controls:{image:{type:ControlType.Image},isHero:{type:ControlType.Boolean},sectionColumns:{type:ControlType.Number,title:\"Section Columns\",min:1,max:6},focalX:{type:ControlType.Number,min:0,max:100},focalY:{type:ControlType.Number,min:0,max:100}}}},columns:{type:ControlType.Number},gap:{type:ControlType.Number},radius:{type:ControlType.Number},backgroundColor:{type:ControlType.Color},hoverZoomPercent:{type:ControlType.Number},hoverDuration:{type:ControlType.Number},hoverEasing:{type:ControlType.String},lightboxBg:{type:ControlType.Color},overlayBlur:{type:ControlType.Number},closeIcon:{type:ControlType.Image},closeSize:{type:ControlType.Number,title:\"Close Icon Size\",min:10,max:100},prevIcon:{type:ControlType.Image},prevSize:{type:ControlType.Number,title:\"Prev Icon Size\",min:10,max:100},nextIcon:{type:ControlType.Image},nextSize:{type:ControlType.Number,title:\"Next Icon Size\",min:10,max:100}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HeroGridHeroMasonry\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Image_stack_1.map"],"mappings":"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"}