{"version":3,"file":"StackingSlider.CtyMPi_4.mjs","names":["Children","useState","useRef","__esmMin","window","j","init_npm_react_18_3_1","init_ssg_sandbox_shims","_e","de","p","init_jsx_runtime","ce","motion","init_framer_motion_DhsWWWsN","RenderTarget","addPropertyControls","ControlType","init_framer_BL70qLPA","StackingSlider","props","childrenArray","children","currentIndex","setCurrentIndex","containerRef","cardRefs","cardWidth","setCardWidth","isMobile","setIsMobile","hoveredButton","setHoveredButton","updateDimensions","activeOffset","mobileStackOffset","stackOffset","goToNext","goToPrev","getCardTransform","index","cardGap","transitionSettings","transition","isAtStart","isAtEnd","arrowGap","el","child","buttonPosition","arrowSize","arrowHoverColor","arrowBackgroundColor","arrowBorderRadius","disabledArrowOpacity","leftArrowIcon","arrowColor","rightArrowIcon","init_StackingSlider"],"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":"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"}