{"version":3,"file":"ScrollableLayout.0CuBYq6L.mjs","names":["useRef","useState","useCallback","React"],"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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"}