{"version":3,"file":"BoxContainer.CUDBOME2.mjs","names":["useState","useRef","startTransition"],"sources":["https:/framerusercontent.com/modules/Me1JhPDIVd3h1PfKP9Z8/uvLRIdm6lstDrBeIozO5/BoxContainer.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import React,{useState,useRef,useEffect,startTransition}from\"react\";/**\n * @framerIntrinsicWidth 1200\n * @framerIntrinsicHeight 600\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function BoxContainer(props){const{content,children,gap,inactiveScale,inactiveOpacity,buttonColor,arrowColor,dotColor=\"rgba(0,0,0,0.2)\",activeDotColor=\"#000000\",autoPlay=false,interval=3,padding=0,style}=props;const items=Array.isArray(content)?content:Array.isArray(children)?children:children?[children]:[];const[currentIndex,setCurrentIndex]=useState(0);const[containerWidth,setContainerWidth]=useState(1200);const containerRef=useRef(null);const itemWidth=Math.min(1200,containerWidth);// Resize observer to handle responsive centering\nuseEffect(()=>{const updateWidth=()=>{if(containerRef.current){setContainerWidth(containerRef.current.offsetWidth);}};updateWidth();const observer=new ResizeObserver(updateWidth);if(containerRef.current){observer.observe(containerRef.current);}return()=>observer.disconnect();},[]);// Auto-play\nuseEffect(()=>{if(!autoPlay||items.length===0)return;const timer=setInterval(()=>{startTransition(()=>{setCurrentIndex(prev=>{const next=prev+1;return next>=items.length?0:next;});});},interval*1e3);return()=>clearInterval(timer);},[autoPlay,interval,items,currentIndex]);// Navigation handlers\nconst handlePrev=()=>startTransition(()=>setCurrentIndex(prev=>Math.max(0,prev-1)));const handleNext=()=>startTransition(()=>setCurrentIndex(prev=>Math.min(items.length-1,prev+1)));// Calculate position\n// Center of container - Center of item - Position of current item in the row\nconst centerOffset=containerWidth/2-itemWidth/2;const currentItemPosition=currentIndex*(itemWidth+gap);const translateX=centerOffset-currentItemPosition;const hasChildren=items.length>0;if(!hasChildren){return /*#__PURE__*/_jsx(\"div\",{style:{...style,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:\"#f5f5f5\",color:\"#888\",flexDirection:\"column\",gap:10},children:/*#__PURE__*/_jsx(\"div\",{children:\"Connect layers to the Content property\"})});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...style,display:\"flex\",alignItems:\"center\",overflow:\"visible\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",gap:gap,transform:`translateX(${translateX}px)`,transition:\"transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)\",paddingLeft:0,width:\"100%\",height:\"100%\",alignItems:\"center\",overflow:\"visible\"},children:items.map((child,index)=>{const isActive=index===currentIndex;// Calculate scale and opacity based on active state\nconst scale=isActive?1:inactiveScale;const opacity=isActive?1:inactiveOpacity;return /*#__PURE__*/_jsx(\"div\",{style:{width:itemWidth,height:\"100%\",flexShrink:0,transform:`scale(${scale})`,opacity:opacity,transition:\"all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)\",transformOrigin:\"center center\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",pointerEvents:isActive?\"auto\":\"none\",position:\"relative\",zIndex:isActive?10:1,padding:padding},children:/*#__PURE__*/React.isValidElement(child)?/*#__PURE__*/React.cloneElement(child,{style:{...child.props?.style,width:\"100%\",height:\"100%\"}}):child},index);})}),/*#__PURE__*/_jsx(\"button\",{onClick:handlePrev,disabled:currentIndex===0,style:{position:\"absolute\",left:0,top:\"50%\",transform:\"translateY(-50%)\",width:48,height:100,border:\"none\",borderRadius:\"0 16px 16px 0\",background:buttonColor,color:arrowColor,cursor:currentIndex===0?\"default\":\"pointer\",opacity:currentIndex===0?0:1,transition:\"opacity 0.3s\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",fontSize:24,zIndex:20,boxShadow:\"2px 0 10px rgba(0,0,0,0.1)\"},children:\"‹\"}),/*#__PURE__*/_jsx(\"button\",{onClick:handleNext,disabled:currentIndex===items.length-1,style:{position:\"absolute\",right:0,top:\"50%\",transform:\"translateY(-50%)\",width:48,height:100,border:\"none\",borderRadius:\"16px 0 0 16px\",background:buttonColor,color:arrowColor,cursor:currentIndex===items.length-1?\"default\":\"pointer\",opacity:currentIndex===items.length-1?0:1,transition:\"opacity 0.3s\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",fontSize:24,zIndex:20,boxShadow:\"-2px 0 10px rgba(0,0,0,0.1)\"},children:\"›\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:-40,left:\"50%\",transform:\"translateX(-50%)\",display:\"flex\",gap:12,zIndex:20},children:items.map((_,index)=>/*#__PURE__*/_jsx(\"button\",{onClick:()=>startTransition(()=>setCurrentIndex(index)),style:{width:10,height:10,borderRadius:\"50%\",border:\"none\",padding:0,cursor:\"pointer\",backgroundColor:index===currentIndex?activeDotColor:dotColor,transition:\"background-color 0.3s\",boxShadow:\"0 1px 3px rgba(0,0,0,0.1)\"}},index))})]});}addPropertyControls(BoxContainer,{content:{type:ControlType.Array,control:{type:ControlType.ComponentInstance},title:\"Content\",defaultValue:[]},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:0,min:0,max:100,unit:\"px\"},autoPlay:{type:ControlType.Boolean,title:\"Auto Play\",defaultValue:false},interval:{type:ControlType.Number,title:\"Interval\",defaultValue:3,min:1,max:10,unit:\"s\",displayStepper:true,hidden:props=>!props.autoPlay},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:40,min:0,max:200},inactiveScale:{type:ControlType.Number,title:\"Scale\",defaultValue:1,min:.1,max:1,step:.05},inactiveOpacity:{type:ControlType.Number,title:\"Opacity\",defaultValue:1,min:0,max:1,step:.1},buttonColor:{type:ControlType.Color,title:\"Button\",defaultValue:\"#FFFFFF\"},arrowColor:{type:ControlType.Color,title:\"Arrow\",defaultValue:\"#000000\"},dotColor:{type:ControlType.Color,title:\"Dot Color\",defaultValue:\"rgba(0,0,0,0.2)\"},activeDotColor:{type:ControlType.Color,title:\"Active Dot\",defaultValue:\"#000000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BoxContainer\",\"slots\":[\"children\"],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"600\",\"framerIntrinsicWidth\":\"1200\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BoxContainer.map"],"mappings":"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"}