{"version":3,"file":"CardStacker.CftaZQnv.mjs","names":["useRef","useState","childrenArray","Children"],"sources":["https:/framerusercontent.com/modules/Z75VXvhjIBxBdHQ14afX/KPqGt6Ag3eqIy65GIJvv/CardStacker.js"],"sourcesContent":["// Sticky stacking cards component with 80px offset between each card\n// Cards stack on scroll with increasing top distance, then scroll together when all stacked\n// Child cards are responsive and fill width, scaling proportionally\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import React,{useRef,useEffect,useState,startTransition,Children}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Sticky Stack Cards\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 600\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function CardStacker(props){const{children,stackOffset=80,cardSpacing=200,borderRadius,stickyTopStart=0,paddingTop=0,paddingRight=0,paddingBottom=0,paddingLeft=0,cardWidthMode=\"fill\",cardFixedWidth=400,cardRelativeWidth=80,cardAlignment=\"center\",style}=props;const containerRef=useRef(null);const cardRefs=useRef([]);const[scrollProgress,setScrollProgress]=useState(0);const[stackTransform,setStackTransform]=useState(0);const[cardHeights,setCardHeights]=useState([]);// Measure card heights\nuseEffect(()=>{if(typeof window===\"undefined\")return;const measureHeights=()=>{const heights=cardRefs.current.map(ref=>ref?.offsetHeight||0);startTransition(()=>{setCardHeights(heights);});};measureHeights();window.addEventListener(\"resize\",measureHeights);// Use ResizeObserver for more accurate measurements\nconst observer=new ResizeObserver(measureHeights);cardRefs.current.forEach(ref=>{if(ref)observer.observe(ref);});return()=>{window.removeEventListener(\"resize\",measureHeights);observer.disconnect();};},[children]);useEffect(()=>{if(typeof window===\"undefined\"||cardHeights.length===0)return;const handleScroll=()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const windowHeight=window.innerHeight;const childrenArray=Children.toArray(children);const totalCards=childrenArray.length;// For each card, compute how much scroll is needed until it reaches sticky position\nconst scrollNeededPerCard=childrenArray.map((_,i)=>{const stickyTop=stickyTopStart+i*stackOffset;const initialTop=cardSpacing+cardHeights.slice(0,i).reduce((sum,h)=>sum+h+cardSpacing,0);return initialTop-stickyTop;});// The moment all cards have reached their sticky point\nconst fullyStackedScrollAmount=Math.max(...scrollNeededPerCard,0);// Container's top relative to viewport\nconst containerTop=rect.top;// Current scroll amount past container start\nconst currentScroll=-containerTop;if(currentScroll>=fullyStackedScrollAmount){// All cards are stacked, move them together\nconst excessScroll=currentScroll-fullyStackedScrollAmount;startTransition(()=>{setStackTransform(excessScroll);});}else{// Still stacking\nstartTransition(()=>{setStackTransform(0);});}};window.addEventListener(\"scroll\",handleScroll);handleScroll()// Initial calculation\n;return()=>window.removeEventListener(\"scroll\",handleScroll);},[children,cardHeights,cardSpacing,stackOffset,stickyTopStart]);const childrenArray=Children.toArray(children);const totalCards=childrenArray.length;const stackingHeight=totalCards*stackOffset;const totalCardHeights=cardHeights.reduce((sum,h)=>sum+h,0);const totalSpacing=(totalCards+1)*cardSpacing;const contentHeight=totalCardHeights+totalSpacing+stackingHeight;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:`${contentHeight}px`,position:\"relative\",overflow:\"visible\",paddingTop:`${paddingTop}px`,paddingRight:`${paddingRight}px`,paddingBottom:`${paddingBottom}px`,paddingLeft:`${paddingLeft}px`},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                body::-webkit-scrollbar {\n                    display: none;\n                }\n                body {\n                    -ms-overflow-style: none;\n                    scrollbar-width: none;\n                }\n            `}),childrenArray.map((child,index)=>{const stickyTop=stickyTopStart+index*stackOffset;return /*#__PURE__*/_jsx(\"div\",{ref:el=>cardRefs.current[index]=el,style:{position:\"sticky\",top:`${stickyTop-stackTransform}px`,width:\"100%\",marginBottom:`${cardSpacing}px`,zIndex:index+1,transition:\"none\",willChange:stackTransform>0?\"transform\":\"auto\",display:\"flex\",justifyContent:cardAlignment===\"left\"?\"flex-start\":cardAlignment===\"right\"?\"flex-end\":\"center\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:cardWidthMode===\"fill\"?\"100%\":cardWidthMode===\"fixed\"?`${cardFixedWidth}px`:`${cardRelativeWidth}%`,height:\"100%\",borderRadius:`${borderRadius}px`,overflow:\"visible\",display:\"block\"},children:/*#__PURE__*/React.isValidElement(child)?/*#__PURE__*/React.cloneElement(child,{style:{...child.props?.style,width:\"100%\"}}):child})},index);})]});}addPropertyControls(CardStacker,{children:{type:ControlType.Array,title:\"Cards\",control:{type:ControlType.ComponentInstance}},stickyTopStart:{type:ControlType.Number,title:\"Sticky Top Start\",defaultValue:0,min:0,max:300,step:10,unit:\"px\"},stackOffset:{type:ControlType.Number,title:\"Stack Offset\",defaultValue:80,min:10,max:200,step:10,unit:\"px\"},cardSpacing:{type:ControlType.Number,title:\"Card Spacing\",defaultValue:200,min:50,max:500,step:10,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:16,min:0,max:32,step:1,unit:\"px\"},paddingTop:{type:ControlType.Number,title:\"Padding Top\",defaultValue:0,min:0,max:200,step:5,unit:\"px\"},paddingRight:{type:ControlType.Number,title:\"Padding Right\",defaultValue:0,min:0,max:200,step:5,unit:\"px\"},paddingBottom:{type:ControlType.Number,title:\"Padding Bottom\",defaultValue:0,min:0,max:200,step:5,unit:\"px\"},paddingLeft:{type:ControlType.Number,title:\"Padding Left\",defaultValue:0,min:0,max:200,step:5,unit:\"px\"},cardWidthMode:{type:ControlType.Enum,title:\"Card Width\",options:[\"fill\",\"fixed\",\"relative\"],optionTitles:[\"Fill\",\"Fixed\",\"Relative\"],defaultValue:\"fill\",displaySegmentedControl:true},cardFixedWidth:{type:ControlType.Number,title:\"Fixed Width\",defaultValue:400,min:100,max:1600,step:10,unit:\"px\",hidden:props=>props.cardWidthMode!==\"fixed\"},cardRelativeWidth:{type:ControlType.Number,title:\"Relative Width\",defaultValue:80,min:10,max:150,step:5,unit:\"%\",hidden:props=>props.cardWidthMode!==\"relative\"},cardAlignment:{type:ControlType.Enum,title:\"Card Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"center\",displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CardStacker\",\"slots\":[\"children\"],\"annotations\":{\"framerIntrinsicWidth\":\"800\",\"framerIntrinsicHeight\":\"600\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CardStacker.map"],"mappings":"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"}