{"version":3,"file":"ScrollableLayout.CIaZkhXs.mjs","names":["useRef","useState","useCallback","React","__esmMin","init_npm_react_18_3_1","e","ce","ne","p","_e","de","motion","addPropertyControls","init_framer_BWFVvmND","ControlType","ScrollableLayout","outerRef","scrollRef","inset","setInset","padding","isPrevHovered","setIsPrevHovered","isNextHovered","setIsNextHovered","measure","outerWidth","computedInset","maxWidthContainer","ro","scrollBy","firstCard","cardWidth","dir","gap","buttonStyle","hovered","childArray","children","layout","columns","child","i","showNavigation","init_ScrollableLayout","init_jsx_runtime","props"],"sources":["https:/framerusercontent.com/modules/UvKOFxTHAdj4blGdrbez/sYCUl4022El3wxrN3yGb/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,useCallback}from\"react\";export function ScrollableLayout({children,gap,padding,layout,columns,maxWidthContainer,showNavigation}){const outerRef=useRef(null);const scrollRef=useRef(null);const[inset,setInset]=useState(padding);const[isPrevHovered,setIsPrevHovered]=useState(false);const[isNextHovered,setIsNextHovered]=useState(false);const measure=useCallback(()=>{if(!outerRef.current)return;const outerWidth=outerRef.current.offsetWidth;// Left inset = where a centered maxWidthContainer's left edge would be,\n// relative to this component's own left edge — plus the user padding.\nconst computedInset=outerWidth>maxWidthContainer?Math.round((outerWidth-maxWidthContainer)/2)+padding:padding;setInset(computedInset);},[maxWidthContainer,padding]);useEffect(()=>{measure();const ro=new ResizeObserver(measure);if(outerRef.current)ro.observe(outerRef.current);return()=>ro.disconnect();},[measure]);const scrollBy=dir=>{if(!scrollRef.current)return;const firstCard=scrollRef.current.firstElementChild;const cardWidth=firstCard?firstCard.offsetWidth:300;scrollRef.current.scrollBy({left:dir*(cardWidth+gap),behavior:\"smooth\"});};const buttonStyle=hovered=>({width:36,height:36,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:hovered?\"rgba(55,55,55,0.3)\":\"rgba(55,55,55,0.6)\",backdropFilter:\"blur(8px)\",border:\"none\",borderRadius:100,cursor:\"pointer\",transition:\"background 0.3s ease\",flexShrink:0});const childArray=React.Children.toArray(children);// ── Grid layout ───────────────────────────────────────────────────────────\nif(layout===\"grid\"){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",maxWidth:maxWidthContainer,margin:\"0 auto\",padding:padding,display:\"grid\",gridTemplateColumns:`repeat(${columns}, minmax(0, 1fr))`,gap:gap,boxSizing:\"border-box\"},children:childArray.length>0?childArray.map((child,i)=>/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\"},children:/*#__PURE__*/React.cloneElement(child,{style:{...child.props.style,width:\"100%\",flexGrow:1}})},i)):/*#__PURE__*/_jsx(\"div\",{style:{color:\"gray\",textAlign:\"center\",gridColumn:\"1 / -1\"},children:\"Add children in Framer!\"})});}// ── Horizontal scroll layout ──────────────────────────────────────────────\n// outerRef measures our true available width.\n// scrollRef is the scrollable track — full width, no padding on the container.\n// Cards are offset with marginLeft on the first card only.\n// This is how Apple's carousel works: full-bleed scroll, inset via first-child margin.\nreturn /*#__PURE__*/_jsxs(\"div\",{ref:outerRef,style:{width:\"100%\",display:\"flex\",flexDirection:\"column\"},children:[/*#__PURE__*/_jsxs(\"div\",{ref:scrollRef,style:{display:\"flex\",flexDirection:\"row\",alignItems:\"stretch\",overflowX:\"auto\",overflowY:\"hidden\",scrollbarWidth:\"none\",WebkitOverflowScrolling:\"touch\",scrollSnapType:\"x mandatory\",scrollPaddingLeft:inset,marginBottom:showNavigation?6:0},children:[/*#__PURE__*/_jsx(\"style\",{children:`div::-webkit-scrollbar { display: none; }`}),childArray.length>0?childArray.map((child,i)=>/*#__PURE__*/_jsx(motion.div,{style:{flexShrink:0,scrollSnapAlign:\"start\",// First card: push it in by the computed inset\n    marginLeft:i===0?inset:0,// All cards except last: gap on the right\n    // Last card: trailing padding so it doesn't end flush\n    marginRight:i<childArray.length-1?gap:inset},whileTap:{scale:.97},children:child},i)):/*#__PURE__*/_jsx(\"div\",{style:{color:\"gray\",padding:inset},children:\"Add children in Framer!\"})]}),showNavigation&&/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"flex-end\",paddingRight:inset,paddingLeft:inset,gap:6},children:[/*#__PURE__*/_jsx(\"button\",{onClick:()=>scrollBy(-1),style:buttonStyle(isPrevHovered),onMouseEnter:()=>setIsPrevHovered(true),onMouseLeave:()=>setIsPrevHovered(false),children:/*#__PURE__*/_jsx(\"div\",{style:{width:8,height:8,border:\"1.5px solid #fff\",borderRight:\"none\",borderTop:\"none\",transform:\"rotate(45deg)\",marginRight:-3}})}),/*#__PURE__*/_jsx(\"button\",{onClick:()=>scrollBy(1),style:buttonStyle(isNextHovered),onMouseEnter:()=>setIsNextHovered(true),onMouseLeave:()=>setIsNextHovered(false),children:/*#__PURE__*/_jsx(\"div\",{style:{width:8,height:8,border:\"1.5px solid #fff\",borderLeft:\"none\",borderBottom:\"none\",transform:\"rotate(45deg)\",marginLeft:-3}})})]})]});}addPropertyControls(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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"}