{"version":3,"file":"ScrollableLayout.Dbtql09M.mjs","names":[],"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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"}