{"version":3,"file":"ImageCarousel.CtmpzykL.mjs","names":["useRef","useState","__esmMin","le","_e","de","init_jsx_runtime","c","p","init_npm_react_18_3_1","ce","init_framer_BWFVvmND","addPropertyControls","ControlType","ImageCarousel","props","list","images","i","box","track","width","setWidth","at","setAt","ro","phone","per","show","item","gap","go","n","d","paused","setPaused","autoplay","t","last","arrow","label","TINT","SANS","INK","style","s","caption","init_ImageCarousel"],"sources":["https:/framerusercontent.com/modules/OoCJRcrM2gTSiruOugmK/QMqOpsKAzd04hSCikoUs/ImageCarousel.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useLayoutEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";// A sideways carousel of same-format images, all the same height, with arrows and swipe.\n// Desktop shows 2.5 items for tall phone shots or 1.5 for wide iPad/desktop shots (\"Show\");\n// phones show a bit more than one (\"Show\" 1 means exactly one everywhere). Optional caption under the\n// whole carousel, Body style. \"Auto-advance\" (seconds, 0 = off) flips to the next image on a timer,\n// loops back to the first, and pauses while the pointer is over the carousel or it's being touched.\nconst INK=\"rgb(17, 18, 18)\";const TINT=\"rgb(242, 241, 238)\";const SANS=\"'Inter Display', Inter, sans-serif\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 1200\n */export default function ImageCarousel(props){const{images=[],show=2.5,caption=\"\",alt=\"\",gap=24,autoplay=0,style}=props;const list=images.map(i=>typeof i===\"string\"?i:i?.src).filter(Boolean);const box=useRef(null);const track=useRef(null);const[width,setWidth]=useState(1200);const[at,setAt]=useState(0);useLayoutEffect(()=>{if(!box.current)return;const ro=new ResizeObserver(([e])=>setWidth(e.contentRect.width));ro.observe(box.current);return()=>ro.disconnect();},[]);const phone=width<600;const per=show<=1?1:phone?show>2?1.4:1.1:show;const item=(width-gap*(Math.ceil(per)-1))/per;const go=d=>{const n=Math.max(0,Math.min(list.length-1,at+d));track.current?.scrollTo({left:n*(item+gap),behavior:\"smooth\"});};const[paused,setPaused]=useState(false);useEffect(()=>{if(!autoplay||paused||list.length<2)return;const t=setTimeout(()=>{const last=list.length-Math.floor(per);const n=at>=last?0:at+1;track.current?.scrollTo({left:n*(item+gap),behavior:\"smooth\"});},autoplay*1e3);return()=>clearTimeout(t);},[autoplay,paused,at,item,gap,per,list.length]);const arrow=(d,label)=>/*#__PURE__*/_jsx(\"button\",{onClick:()=>go(d),\"aria-label\":label,disabled:d<0?at===0:at>=list.length-Math.floor(per),style:{all:\"unset\",cursor:\"pointer\",width:40,height:40,borderRadius:20,background:TINT,display:\"grid\",placeItems:\"center\",font:`500 16px/1 ${SANS}`,color:INK,opacity:(d<0?at===0:at>=list.length-Math.floor(per))?.35:1},children:d<0?\"←\":\"→\"});return /*#__PURE__*/_jsxs(\"div\",{ref:box,onPointerEnter:()=>setPaused(true),onPointerLeave:()=>setPaused(false),onTouchStart:()=>setPaused(true),style:{...style,width:\"100%\",height:\"auto\",display:\"flex\",flexDirection:\"column\",gap:24},children:[/*#__PURE__*/_jsx(\"div\",{ref:track,onScroll:e=>setAt(Math.round(e.currentTarget.scrollLeft/(item+gap))),style:{display:\"flex\",gap,overflowX:\"auto\",scrollSnapType:\"x mandatory\",scrollbarWidth:\"none\",WebkitOverflowScrolling:\"touch\"},children:list.map((s,i)=>/*#__PURE__*/_jsx(\"img\",{src:s,alt:alt,draggable:false,style:{flex:`0 0 ${item}px`,width:item,height:\"auto\",display:\"block\",scrollSnapAlign:\"start\"}},s+i))}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"space-between\",alignItems:\"flex-start\",gap:24},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,font:`500 ${phone?14:16}px/1.4 ${SANS}`,color:INK,maxWidth:760},children:caption}),list.length>per&&/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",gap:8,flex:\"none\"},children:[arrow(-1,\"Previous\"),arrow(1,\"Next\")]})]})]});}addPropertyControls(ImageCarousel,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.ResponsiveImage}},show:{type:ControlType.Number,title:\"Show (desktop)\",defaultValue:2.5,min:1,max:4,step:.5},caption:{type:ControlType.String,title:\"Caption\",defaultValue:\"\"},alt:{type:ControlType.String,title:\"Alt text\",defaultValue:\"\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:24,min:0,max:64,unit:\"px\"},autoplay:{type:ControlType.Number,title:\"Auto-advance\",defaultValue:0,min:0,max:15,step:.5,unit:\"s\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageCarousel\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"1200\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageCarousel.map"],"mappings":"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"}