{"version":3,"file":"StackingSlider.C3RTK6JV.mjs","names":["Children","useState","useRef"],"sources":["https:/framerusercontent.com/modules/Z9UtqWUIb5mmNoN4q844/KoWRl1XH2dvEfa9fT4pS/StackingSlider.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion}from\"framer-motion\";import{Children,useState,useRef,useEffect}from\"react\";export default function StackingSlider(props){const{children,cardGap=20,stackOffset=20,mobileStackOffset=0,leftArrowIcon,rightArrowIcon,arrowSize=40,arrowColor=\"#000000\",arrowBackgroundColor=\"#FFFFFF\",arrowHoverColor=\"#F0F0F0\",arrowBorderRadius=100,arrowGap=20,buttonPosition=\"left\",transition,disabledArrowOpacity=.3}=props;const childrenArray=Children.toArray(children);const[currentIndex,setCurrentIndex]=useState(0);const containerRef=useRef(null);const cardRefs=useRef([]);const[cardWidth,setCardWidth]=useState(0);const[isMobile,setIsMobile]=useState(false);const[hoveredButton,setHoveredButton]=useState(null);// Get card width from first card\nuseEffect(()=>{const updateDimensions=()=>{if(cardRefs.current[0]){setCardWidth(cardRefs.current[0].offsetWidth);}setIsMobile(window.innerWidth<992);};updateDimensions();setTimeout(updateDimensions,100);window.addEventListener(\"resize\",updateDimensions);return()=>window.removeEventListener(\"resize\",updateDimensions);},[childrenArray.length]);// Get active offset based on mobile/desktop\nconst activeOffset=isMobile?mobileStackOffset:stackOffset;// Handle navigation\nconst goToNext=()=>{if(currentIndex<childrenArray.length-1){setCurrentIndex(currentIndex+1);}};const goToPrev=()=>{if(currentIndex>0){setCurrentIndex(currentIndex-1);}};// Calculate transform - cards move cumulatively, future cards follow current\nconst getCardTransform=index=>{if(index<currentIndex){// Cards BEFORE current: each has its own stack position\nconst slideMove=(cardWidth+cardGap-activeOffset)*index;return-slideMove;}else{// Current card AND cards after: all move together by current amount\nconst slideMove=(cardWidth+cardGap-activeOffset)*currentIndex;return-slideMove;}};// Get transition settings\nconst transitionSettings={duration:transition?.duration||.35,ease:transition?.ease||\"easeInOut\",type:transition?.type||\"tween\"};// Canvas placeholder\nif(RenderTarget.current()===RenderTarget.canvas&&childrenArray.length===0){return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:\"rgba(136, 85, 255, 0.1)\",border:\"2px dashed rgba(136, 85, 255, 0.3)\",borderRadius:\"12px\",color:\"#8855FF\",fontSize:\"14px\",fontWeight:500,textAlign:\"center\",padding:\"20px\"},children:[\"🎴 Stacking Slider\",/*#__PURE__*/_jsx(\"br\",{}),\"Connect components or layers\"]});}const isAtStart=currentIndex===0;const isAtEnd=currentIndex===childrenArray.length-1;// Get button alignment based on position prop\nconst getButtonAlignment=()=>{switch(buttonPosition){case\"center\":return\"center\";case\"right\":return\"flex-end\";default:return\"flex-start\";}};return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",gap:`${arrowGap}px`},children:[/*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{flex:1,height:\"100%\",position:\"relative\",overflow:\"visible\",display:\"flex\",alignItems:\"center\"},children:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",height:\"fit-content\",position:\"relative\",gap:`${cardGap}px`},children:childrenArray.map((child,index)=>/*#__PURE__*/_jsx(motion.div,{ref:el=>cardRefs.current[index]=el,animate:{x:getCardTransform(index)},transition:transitionSettings,style:{flexShrink:0,position:\"relative\",// Z-index: first card = 1, second = 2, third = 3, etc\n    zIndex:index+1},children:child},index))})}),childrenArray.length>0&&/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",gap:\"20px\",alignItems:\"center\",justifyContent:getButtonAlignment()},children:[/*#__PURE__*/_jsx(\"button\",{onClick:goToPrev,disabled:isAtStart,onMouseEnter:()=>setHoveredButton(\"left\"),onMouseLeave:()=>setHoveredButton(null),style:{width:`${arrowSize}px`,height:`${arrowSize}px`,minWidth:`${arrowSize}px`,minHeight:`${arrowSize}px`,flexShrink:0,background:hoveredButton===\"left\"&&!isAtStart?arrowHoverColor:arrowBackgroundColor,border:\"none\",borderRadius:`${arrowBorderRadius}px`,cursor:isAtStart?\"not-allowed\":\"pointer\",opacity:isAtStart?disabledArrowOpacity:1,transition:\"opacity 0.2s ease, background 0.2s ease\",padding:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",outline:\"none\"},children:leftArrowIcon?/*#__PURE__*/_jsx(\"img\",{src:leftArrowIcon,alt:\"Previous\",style:{width:\"100%\",height:\"100%\",objectFit:\"contain\",display:\"block\"}}):/*#__PURE__*/_jsx(\"svg\",{width:arrowSize*.5,height:arrowSize*.5,viewBox:\"0 0 24 24\",fill:\"none\",stroke:arrowColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:/*#__PURE__*/_jsx(\"polyline\",{points:\"15 18 9 12 15 6\"})})}),/*#__PURE__*/_jsx(\"button\",{onClick:goToNext,disabled:isAtEnd,onMouseEnter:()=>setHoveredButton(\"right\"),onMouseLeave:()=>setHoveredButton(null),style:{width:`${arrowSize}px`,height:`${arrowSize}px`,minWidth:`${arrowSize}px`,minHeight:`${arrowSize}px`,flexShrink:0,background:hoveredButton===\"right\"&&!isAtEnd?arrowHoverColor:arrowBackgroundColor,border:\"none\",borderRadius:`${arrowBorderRadius}px`,cursor:isAtEnd?\"not-allowed\":\"pointer\",opacity:isAtEnd?disabledArrowOpacity:1,transition:\"opacity 0.2s ease, background 0.2s ease\",padding:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",outline:\"none\"},children:rightArrowIcon?/*#__PURE__*/_jsx(\"img\",{src:rightArrowIcon,alt:\"Next\",style:{width:\"100%\",height:\"100%\",objectFit:\"contain\",display:\"block\"}}):/*#__PURE__*/_jsx(\"svg\",{width:arrowSize*.5,height:arrowSize*.5,viewBox:\"0 0 24 24\",fill:\"none\",stroke:arrowColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:/*#__PURE__*/_jsx(\"polyline\",{points:\"9 18 15 12 9 6\"})})})]})]});}StackingSlider.displayName=\"Stacking Slider\";addPropertyControls(StackingSlider,{children:{type:ControlType.Array,title:\"Slides\",control:{type:ControlType.ComponentInstance}},cardGap:{type:ControlType.Number,title:\"Card Gap\",min:0,max:100,step:4,defaultValue:20,unit:\"px\",displayStepper:true,description:\"Space between cards\"},stackOffset:{type:ControlType.Number,title:\"Stack Offset\",min:0,max:100,step:5,defaultValue:20,unit:\"px\",displayStepper:true,description:\"Visible offset of stacked cards (desktop)\"},mobileStackOffset:{type:ControlType.Number,title:\"Mobile Stack Offset\",min:0,max:100,step:5,defaultValue:0,unit:\"px\",displayStepper:true,description:\"Visible offset on mobile (<992px)\"},leftArrowIcon:{type:ControlType.Image,title:\"Left Arrow Icon\",description:\"Custom icon for left arrow\"},rightArrowIcon:{type:ControlType.Image,title:\"Right Arrow Icon\",description:\"Custom icon for right arrow\"},arrowSize:{type:ControlType.Number,title:\"Arrow Size\",min:20,max:80,step:4,defaultValue:40,unit:\"px\",displayStepper:true,description:\"Size of arrow buttons\"},arrowColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#000000\",description:\"Color for default arrow icons\"},arrowBackgroundColor:{type:ControlType.Color,title:\"Arrow Background\",defaultValue:\"#FFFFFF\",description:\"Background color of arrow buttons\"},arrowHoverColor:{type:ControlType.Color,title:\"Arrow Hover\",defaultValue:\"#F0F0F0\",description:\"Background color on hover\"},arrowBorderRadius:{type:ControlType.Number,title:\"Arrow Radius\",min:0,max:100,step:4,defaultValue:100,unit:\"px\",displayStepper:true,description:\"Border radius of arrow buttons\"},buttonPosition:{type:ControlType.Enum,title:\"Button Position\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",description:\"Horizontal alignment of navigation buttons\"},arrowGap:{type:ControlType.Number,title:\"Button Gap\",min:0,max:60,step:4,defaultValue:20,unit:\"px\",displayStepper:true,description:\"Space between slider and buttons\"},transition:{type:ControlType.Transition,title:\"Transition\",defaultValue:{duration:.35,ease:\"easeInOut\"}},disabledArrowOpacity:{type:ControlType.Number,title:\"Disabled Opacity\",min:0,max:1,step:.1,defaultValue:.3,displayStepper:true,description:\"Opacity of disabled arrows\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StackingSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StackingSlider.map"],"mappings":"uQAAkN,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,WAAS,UAAQ,GAAG,cAAY,GAAG,oBAAkB,EAAE,gBAAc,iBAAe,YAAU,GAAG,aAAW,UAAU,uBAAqB,UAAU,kBAAgB,UAAU,oBAAkB,IAAI,WAAS,GAAG,iBAAe,OAAO,aAAW,uBAAqB,IAAI,EAAY,EAAcA,EAAS,QAAQ,CAAQ,EAAO,CAAC,EAAa,GAAiBC,EAAS,CAAC,EAAQ,EAAaC,EAAO,IAAI,EAAQ,EAASA,EAAO,CAAC,CAAC,EAAO,CAAC,EAAU,GAAcD,EAAS,CAAC,EAAO,CAAC,EAAS,GAAaA,EAAS,EAAK,EAAO,CAAC,EAAc,GAAkBA,EAAS,IAAI,EACzzB,MAAc,CAAC,IAAM,MAAqB,CAAI,EAAS,QAAQ,IAAI,EAAa,EAAS,QAAQ,EAAE,CAAC,WAAW,EAAG,EAAY,EAAO,WAAW,GAAG,CAAE,EAAyG,OAAvG,EAAiB,EAAE,WAAW,EAAiB,GAAG,EAAE,EAAO,iBAAiB,SAAS,CAAgB,MAAY,EAAO,oBAAoB,SAAS,CAAgB,CAAE,EAAE,CAAC,EAAc,MAAM,CAAC,EACtV,IAAM,EAAa,EAAS,EAAkB,EACxC,MAAa,CAAI,EAAa,EAAc,OAAO,GAAG,EAAgB,EAAa,CAAC,CAAG,EAAQ,MAAa,CAAI,EAAa,GAAG,EAAgB,EAAa,CAAC,CAAG,EACjK,EAAiB,GAAW,EAAM,EACqB,GAA5C,EAAU,EAAQ,GAAc,GACmB,GAAnD,EAAU,EAAQ,GAAc,GAC3C,EAAmB,CAAC,SAAS,GAAY,UAAU,IAAI,KAAK,GAAY,MAAM,YAAY,KAAK,GAAY,MAAM,OAAO,EAC9H,GAAG,EAAa,QAAQ,IAAI,EAAa,QAAQ,EAAc,SAAS,EAAG,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,WAAW,0BAA0B,OAAO,qCAAqC,aAAa,OAAO,MAAM,UAAU,SAAS,OAAO,WAAW,IAAI,UAAU,SAAS,QAAQ,MAAM,EAAE,SAAS,CAAC,qBAAkC,EAAK,KAAK,CAAC,CAAC,EAAE,8BAA8B,CAAC,CAAC,EAAG,IAAM,EAAU,IAAe,EAAQ,EAAQ,IAAe,EAAc,OAAO,EACpa,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,cAAc,SAAS,IAAI,GAAG,EAAS,GAAG,EAAE,SAAS,CAAc,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,KAAK,EAAE,OAAO,OAAO,SAAS,WAAW,SAAS,UAAU,QAAQ,OAAO,WAAW,QAAQ,EAAE,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,OAAO,cAAc,SAAS,WAAW,IAAI,GAAG,EAAQ,GAAG,EAAE,SAAS,EAAc,KAAK,EAAM,IAAqB,EAAK,EAAO,IAAI,CAAC,IAAI,GAAI,EAAS,QAAQ,GAAO,EAAG,QAAQ,CAAC,EAAE,EAAiB,CAAK,CAAC,EAAE,WAAW,EAAmB,MAAM,CAAC,WAAW,EAAE,SAAS,WAChuB,OAAO,EAAM,CAAC,EAAE,SAAS,CAAK,EAAE,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAc,OAAO,GAAgB,EAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,IAAI,OAAO,WAAW,SAAS,oBAD1H,CAAC,OAAO,EAAP,CAAuB,IAAI,SAAS,MAAM,SAAS,IAAI,QAAQ,MAAM,WAAW,QAAQ,MAAM,YAAa,CAAC,EAC4B,CAAmB,CAAC,EAAE,SAAS,CAAc,EAAK,SAAS,CAAC,QAAQ,EAAS,SAAS,EAAU,iBAAiB,EAAiB,MAAM,EAAE,iBAAiB,EAAiB,IAAI,EAAE,MAAM,CAAC,MAAM,GAAG,EAAU,IAAI,OAAO,GAAG,EAAU,IAAI,SAAS,GAAG,EAAU,IAAI,UAAU,GAAG,EAAU,IAAI,WAAW,EAAE,WAAW,IAAgB,QAAQ,CAAC,EAAU,EAAgB,EAAqB,OAAO,OAAO,aAAa,GAAG,EAAkB,IAAI,OAAO,EAAU,cAAc,UAAU,QAAQ,EAAU,EAAqB,EAAE,WAAW,0CAA0C,QAAQ,EAAE,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,QAAQ,MAAM,EAAE,SAAS,EAA2B,EAAK,MAAM,CAAC,IAAI,EAAc,IAAI,WAAW,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,UAAU,QAAQ,OAAO,CAAC,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,EAAU,GAAG,OAAO,EAAU,GAAG,QAAQ,YAAY,KAAK,OAAO,OAAO,EAAW,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,SAAsB,EAAK,WAAW,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAe,EAAK,SAAS,CAAC,QAAQ,EAAS,SAAS,EAAQ,iBAAiB,EAAiB,OAAO,EAAE,iBAAiB,EAAiB,IAAI,EAAE,MAAM,CAAC,MAAM,GAAG,EAAU,IAAI,OAAO,GAAG,EAAU,IAAI,SAAS,GAAG,EAAU,IAAI,UAAU,GAAG,EAAU,IAAI,WAAW,EAAE,WAAW,IAAgB,SAAS,CAAC,EAAQ,EAAgB,EAAqB,OAAO,OAAO,aAAa,GAAG,EAAkB,IAAI,OAAO,EAAQ,cAAc,UAAU,QAAQ,EAAQ,EAAqB,EAAE,WAAW,0CAA0C,QAAQ,EAAE,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,QAAQ,MAAM,EAAE,SAAS,EAA4B,EAAK,MAAM,CAAC,IAAI,EAAe,IAAI,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,UAAU,QAAQ,OAAO,CAAC,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,EAAU,GAAG,OAAO,EAAU,GAAG,QAAQ,YAAY,KAAK,OAAO,OAAO,EAAW,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,SAAsB,EAAK,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,qBAVnoE,IAAiE,IAAkC,IAAsD,EAU2+D,EAAe,YAAY,kBAAkB,EAAoB,EAAe,CAAC,SAAS,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,QAAQ,CAAC,KAAK,EAAY,iBAAiB,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,aAAa,GAAG,KAAK,KAAK,eAAe,GAAK,YAAY,qBAAqB,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,aAAa,GAAG,KAAK,KAAK,eAAe,GAAK,YAAY,2CAA2C,EAAE,kBAAkB,CAAC,KAAK,EAAY,OAAO,MAAM,sBAAsB,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,aAAa,EAAE,KAAK,KAAK,eAAe,GAAK,YAAY,mCAAmC,EAAE,cAAc,CAAC,KAAK,EAAY,MAAM,MAAM,kBAAkB,YAAY,4BAA4B,EAAE,eAAe,CAAC,KAAK,EAAY,MAAM,MAAM,mBAAmB,YAAY,6BAA6B,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,aAAa,GAAG,KAAK,KAAK,eAAe,GAAK,YAAY,uBAAuB,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,YAAY,+BAA+B,EAAE,qBAAqB,CAAC,KAAK,EAAY,MAAM,MAAM,mBAAmB,aAAa,UAAU,YAAY,mCAAmC,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,YAAY,2BAA2B,EAAE,kBAAkB,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,aAAa,IAAI,KAAK,KAAK,eAAe,GAAK,YAAY,gCAAgC,EAAE,eAAe,CAAC,KAAK,EAAY,KAAK,MAAM,kBAAkB,QAAQ,CAAC,OAAO,SAAS,OAAO,EAAE,aAAa,CAAC,OAAO,SAAS,OAAO,EAAE,aAAa,OAAO,YAAY,4CAA4C,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,aAAa,GAAG,KAAK,KAAK,eAAe,GAAK,YAAY,kCAAkC,EAAE,WAAW,CAAC,KAAK,EAAY,WAAW,MAAM,aAAa,aAAa,CAAC,SAAS,IAAI,KAAK,WAAW,CAAC,EAAE,qBAAqB,CAAC,KAAK,EAAY,OAAO,MAAM,mBAAmB,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,aAAa,GAAG,eAAe,GAAK,YAAY,4BAA4B,CAAC,CAAC"}