{
  "version": 3,
  "sources": ["ssg: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\"}})})]})]});}// \uD83C\uDF9B **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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",
  "names": ["ScrollableLayout", "children", "gap", "padding", "layout", "columns", "maxWidthContainer", "showNavigation", "scrollRef", "pe", "containerWidth", "setContainerWidth", "ye", "contentWidth", "setContentWidth", "isPrevHovered", "setIsPrevHovered", "isNextHovered", "setIsNextHovered", "ue", "updateWidths", "content", "window", "shouldScroll", "scrollByAmount", "amount", "scrollNext", "childWidth", "scrollPrev", "effectiveViewportPadding", "paddingValue", "buttonStyle", "isHovered", "u", "p", "child", "index", "motion", "e", "addPropertyControls", "ControlType", "props"]
}