{"version":3,"file":"ScrollableLayout.BdM8mGEC.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/UvKOFxTHAdj4blGdrbez/vilox0uM8p61GGUci3Xy/ScrollableLayout.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{motion}from\"framer\";import{addPropertyControls,ControlType}from\"framer\";import React,{useEffect,useRef,useState}from\"react\";export function ScrollableLayout({children,gap,padding,layout,columns,maxWidthContainer,showNavigation}){const scrollRef=useRef(null);const[containerWidth,setContainerWidth]=useState(0);const[contentWidth,setContentWidth]=useState(0);const[isPrevHovered,setIsPrevHovered]=useState(false);const[isNextHovered,setIsNextHovered]=useState(false);useEffect(()=>{const updateWidths=()=>{if(scrollRef.current){setContainerWidth(scrollRef.current.offsetWidth);const content=scrollRef.current.firstChild;if(content){setContentWidth(content.scrollWidth);}}};updateWidths();window.addEventListener(\"resize\",updateWidths);return()=>window.removeEventListener(\"resize\",updateWidths);},[]);const shouldScroll=contentWidth>containerWidth;const scrollByAmount=amount=>{if(scrollRef.current){scrollRef.current.scrollBy({left:amount,behavior:\"smooth\"});}};const scrollNext=()=>{const childWidth=scrollRef.current?.firstChild?.firstChild?.offsetWidth||200;scrollByAmount(childWidth+gap);};const scrollPrev=()=>{const childWidth=scrollRef.current?.firstChild?.firstChild?.offsetWidth||200;scrollByAmount(-(childWidth+gap));};const isContainerWiderThanMax=containerWidth>maxWidthContainer;const effectiveViewportPadding=isContainerWiderThanMax?`calc((100vw - ${maxWidthContainer}px) / 2)`:`0px`;const paddingValue=layout===\"horizontal\"?shouldScroll?`calc(${padding}px + ${effectiveViewportPadding})`:`${padding}px`:`${padding}px`;const buttonStyle=isHovered=>({width:\"36px\",height:\"36px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:isHovered?\"rgba(55,55,55, 0.3)\":\"rgba(55,55,55, 0.6)\",backdropFilter:\"blur(8px)\",border:\"none\",borderRadius:\"100px\",cursor:\"pointer\",transition:\"background 0.3s ease\"});return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\"},children:[/*#__PURE__*/_jsxs(\"div\",{ref:scrollRef,style:{display:layout===\"grid\"?\"grid\":\"flex\",gridTemplateColumns:layout===\"grid\"?`repeat(${columns}, minmax(0, 1fr))`:\"unset\",flexDirection:layout===\"horizontal\"?\"row\":\"unset\",flexWrap:layout===\"grid\"?\"wrap\":\"nowrap\",justifyContent:\"flex-start\",alignItems:\"stretch\",gap:layout===\"grid\"?`${gap}px`:\"0px\",width:\"100%\",maxWidth:layout===\"grid\"?`${maxWidthContainer}px`:\"none\",padding:layout===\"grid\"?`${padding}px`:\"0px\",overflowX:layout===\"horizontal\"?\"auto\":\"visible\",overflowY:layout===\"grid\"?\"visible\":\"hidden\",scrollSnapType:layout===\"horizontal\"?\"x mandatory\":\"none\",scrollBehavior:\"smooth\",whiteSpace:layout===\"horizontal\"?\"nowrap\":\"normal\",scrollbarWidth:\"none\",WebkitOverflowScrolling:\"touch\",scrollPaddingLeft:paddingValue,scrollPaddingRight:paddingValue,paddingLeft:paddingValue,paddingRight:paddingValue,marginBottom:showNavigation?\"6px\":\"0px\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                    div::-webkit-scrollbar {\n                        display: none;\n                    }\n                `}),/*#__PURE__*/_jsx(\"div\",{style:{display:layout===\"horizontal\"?\"flex\":\"contents\",flexDirection:\"row\",width:layout===\"horizontal\"?\"max-content\":\"100%\"},children:children.length>0?children.map((child,index)=>/*#__PURE__*/_jsx(motion.div,{style:{flexShrink:0,display:\"flex\",flexDirection:\"column\",width:layout===\"grid\"?\"100%\":\"auto\",flexGrow:layout===\"grid\"?1:0,alignSelf:layout===\"grid\"?\"stretch\":\"unset\",scrollSnapAlign:layout===\"horizontal\"?\"start\":\"unset\",marginRight:layout===\"horizontal\"&&index!==children.length-1?`${gap}px`:\"0px\",marginLeft:layout===\"horizontal\"&&index===0?shouldScroll?`${padding}px`:\"0px\":\"0px\"},whileTap:layout===\"horizontal\"?{scale:.95}:{},children:/*#__PURE__*/React.cloneElement(child,{style:{...child.props.style,width:layout===\"grid\"?\"100%\":child.props.style?.width,flexGrow:layout===\"grid\"?1:0}})},index)):/*#__PURE__*/_jsx(\"div\",{style:{color:\"gray\",textAlign:\"center\",width:\"100%\"},children:\"Add children in Framer!\"})})]}),layout===\"horizontal\"&&showNavigation&&/*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",maxWidth:`${maxWidthContainer}px`,paddingLeft:paddingValue,paddingRight:paddingValue,display:\"flex\",justifyContent:\"flex-end\",gap:\"6px\"},children:[/*#__PURE__*/_jsx(\"button\",{onClick:scrollPrev,style:buttonStyle(isPrevHovered),onMouseEnter:()=>setIsPrevHovered(true),onMouseLeave:()=>setIsPrevHovered(false),children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"8px\",height:\"8px\",border:\"1px solid #fff\",transform:\"rotate(45deg)\",borderRight:\"none\",borderTop:\"none\",marginRight:\"-3px\"}})}),/*#__PURE__*/_jsx(\"button\",{onClick:scrollNext,style:buttonStyle(isNextHovered),onMouseEnter:()=>setIsNextHovered(true),onMouseLeave:()=>setIsNextHovered(false),children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"8px\",height:\"8px\",border:\"1px solid #fff\",transform:\"rotate(45deg)\",borderLeft:\"none\",borderBottom:\"none\",marginLeft:\"-3px\"}})})]})]});}// 🎛 **Framer UI Property Controls**\naddPropertyControls(ScrollableLayout,{children:{type:ControlType.Array,title:\"Children\",propertyControl:{type:ControlType.ComponentInstance}},layout:{type:ControlType.Enum,options:[\"horizontal\",\"grid\"],optionTitles:[\"Horizontal Scroll\",\"Grid Layout\"],title:\"Layout\",defaultValue:\"horizontal\"},columns:{type:ControlType.Number,title:\"Grid Columns\",defaultValue:3,min:1,hidden:props=>props.layout!==\"grid\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:16},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:16},maxWidthContainer:{type:ControlType.Number,title:\"Max-Width Container\",defaultValue:1200,min:1,max:3e3,displayStepper:true},showNavigation:{type:ControlType.Boolean,title:\"Show Navigation\",defaultValue:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"ScrollableLayout\":{\"type\":\"reactComponent\",\"name\":\"ScrollableLayout\",\"slots\":[\"children\"],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollableLayout.map"],"mappings":"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"}