{"version":3,"file":"AmazonStyleImageViewer.D1oj7Fpp.mjs","names":["React.useMemo","React.useState","React.useCallback"],"sources":["https:/framerusercontent.com/modules/kTOa49csJD7vnpvuBD81/XhEt03DtNy04oiHfrm28/AmazonStyleImageViewer.js"],"sourcesContent":["// User request: create a amazon style e commerce image viewer where i can go through each image by clicking on the smaller images.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{startTransition}from\"react\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function AmazonStyleImageViewer(props){const isStatic=useIsStaticRenderer();const{images:imagesProp,orientation,thumbSize,thumbGap,thumbRadius,thumbBorderWidth,thumbBorderColor,selectedBorderColor,backgroundColor,mainRadius,mainFit,mainBackgroundColor,padding,focusRingColor,focusRingWidth,onImageChange,style}=props;const fallbackImages=React.useMemo(()=>[{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Product image 1\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Product image 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Product image 3\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Product image 4\"}],[]);const images=React.useMemo(()=>{const valid=(imagesProp||[]).filter(img=>img&&typeof img.src===\"string\"&&img.src.length>0);return valid.length>0?valid:fallbackImages;},[imagesProp,fallbackImages]);const[activeIndex,setActiveIndex]=React.useState(0);React.useEffect(()=>{if(activeIndex>images.length-1){startTransition(()=>setActiveIndex(0));}},[activeIndex,images.length]);const active=images[Math.min(activeIndex,images.length-1)]||images[0];const isLeft=orientation===\"left\";const rootStyle={position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:isLeft?\"row\":\"column\",gap:thumbGap,padding,boxSizing:\"border-box\",background:backgroundColor,overflow:\"hidden\",...style};const thumbsWrapStyle={position:\"relative\",display:\"flex\",flexDirection:isLeft?\"column\":\"row\",gap:thumbGap,alignItems:\"flex-start\",justifyContent:\"flex-start\",overflowX:isLeft?\"hidden\":\"auto\",overflowY:isLeft?\"auto\":\"hidden\",paddingRight:isLeft?2:0,paddingBottom:isLeft?0:2,flex:isLeft?\"0 0 auto\":\"0 0 auto\",maxHeight:isLeft?\"100%\":undefined,maxWidth:!isLeft?\"100%\":undefined};const mainWrapStyle={position:\"relative\",flex:\"1 1 auto\",minWidth:0,minHeight:0,borderRadius:mainRadius,overflow:\"hidden\",background:mainBackgroundColor,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"};const selectIndex=React.useCallback(idx=>{const next=Math.max(0,Math.min(images.length-1,idx));startTransition(()=>setActiveIndex(next));if(onImageChange){const img=images[next];if(img?.src)onImageChange({index:next,src:img.src});}},[images,onImageChange]);const onKeyDown=React.useCallback(e=>{if(images.length<=1)return;const key=e.key;if(key!==\"ArrowLeft\"&&key!==\"ArrowRight\"&&key!==\"ArrowUp\"&&key!==\"ArrowDown\"&&key!==\"Home\"&&key!==\"End\")return;e.preventDefault();if(key===\"Home\")return selectIndex(0);if(key===\"End\")return selectIndex(images.length-1);const prevKeys=isLeft?[\"ArrowUp\",\"ArrowLeft\"]:[\"ArrowLeft\",\"ArrowUp\"];const nextKeys=isLeft?[\"ArrowDown\",\"ArrowRight\"]:[\"ArrowRight\",\"ArrowDown\"];if(prevKeys.includes(key))selectIndex(activeIndex-1);if(nextKeys.includes(key))selectIndex(activeIndex+1);},[activeIndex,images.length,isLeft,selectIndex]);const Thumb=React.useCallback(function ThumbInner({img,idx,selected}){const border=selected?selectedBorderColor:thumbBorderColor;const buttonStyle={position:\"relative\",width:thumbSize,height:thumbSize,padding:0,borderRadius:thumbRadius,border:`${thumbBorderWidth}px solid ${border}`,background:\"#FFFFFF\",overflow:\"hidden\",cursor:isStatic?\"default\":\"pointer\",flex:\"0 0 auto\",outline:\"none\",boxSizing:\"border-box\"};const focusStyle=`\n                outline: ${focusRingWidth}px solid ${focusRingColor};\n                outline-offset: 2px;\n            `;return /*#__PURE__*/_jsxs(\"button\",{type:\"button\",\"aria-label\":`Select image ${idx+1}`,\"aria-current\":selected?\"true\":\"false\",onClick:isStatic?undefined:()=>selectIndex(idx),style:buttonStyle,tabIndex:0,onKeyDown:e=>{// Let the root handle arrows; keep Enter/Space to select.\nif(e.key===\"Enter\"||e.key===\" \"){e.preventDefault();if(!isStatic)selectIndex(idx);}},children:[/*#__PURE__*/_jsx(\"style\",{children:`button[data-thumb=\"true\"]:focus-visible{${focusStyle}}`}),/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",inset:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(\"img\",{src:img.src,srcSet:img.srcSet,alt:img.alt||`Thumbnail ${idx+1}`,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}})}),/*#__PURE__*/_jsx(\"span\",{\"data-thumb\":\"true\",style:{position:\"absolute\",inset:0,borderRadius:thumbRadius}})]});},[focusRingColor,focusRingWidth,isStatic,selectIndex,selectedBorderColor,thumbBorderColor,thumbBorderWidth,thumbRadius,thumbSize]);return /*#__PURE__*/_jsxs(\"div\",{style:rootStyle,role:\"region\",\"aria-label\":\"Product image viewer\",tabIndex:0,onKeyDown:onKeyDown,children:[/*#__PURE__*/_jsx(\"div\",{style:thumbsWrapStyle,role:\"list\",\"aria-label\":\"Thumbnails\",children:images.map((img,idx)=>/*#__PURE__*/_jsx(\"div\",{role:\"listitem\",style:{position:\"relative\"},children:/*#__PURE__*/_jsx(Thumb,{img:img,idx:idx,selected:idx===activeIndex})},`${img.src}-${idx}`))}),/*#__PURE__*/_jsx(\"div\",{style:mainWrapStyle,\"aria-label\":active?.alt||\"Selected product image\",role:\"img\",children:active?.src?/*#__PURE__*/_jsx(\"img\",{src:active.src,srcSet:active.srcSet,alt:active.alt||\"Selected product image\",style:{width:\"100%\",height:\"100%\",objectFit:mainFit,display:\"block\",userSelect:\"none\",// WebkitUserDrag isn't included in React.CSSProperties typings in some TS configs.\n// Use vendor-prefixed property via type escape.\n...{WebkitUserDrag:\"none\"}},draggable:false}):null})]});}addPropertyControls(AmazonStyleImageViewer,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.ResponsiveImage},maxCount:12,defaultValue:[{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Product image 1\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Product image 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Product image 3\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Product image 4\"}]},orientation:{type:ControlType.Enum,title:\"Layout\",options:[\"left\",\"bottom\"],optionTitles:[\"Thumbs Left\",\"Thumbs Bottom\"],defaultValue:\"left\",displaySegmentedControl:true},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:10,min:0,max:60,step:1,unit:\"px\"},thumbSize:{type:ControlType.Number,title:\"Thumb Size\",defaultValue:56,min:28,max:120,step:1,unit:\"px\"},thumbGap:{type:ControlType.Number,title:\"Thumb Gap\",defaultValue:10,min:0,max:40,step:1,unit:\"px\"},thumbRadius:{type:ControlType.Number,title:\"Thumb Radius\",defaultValue:8,min:0,max:40,step:1,unit:\"px\"},thumbBorderWidth:{type:ControlType.Number,title:\"Thumb Border\",defaultValue:1,min:0,max:6,step:1,unit:\"px\"},thumbBorderColor:{type:ControlType.Color,title:\"Thumb Border\",defaultValue:\"#EEEEEE\"},selectedBorderColor:{type:ControlType.Color,title:\"Selected Border\",defaultValue:\"#000000\"},mainRadius:{type:ControlType.Number,title:\"Main Radius\",defaultValue:12,min:0,max:60,step:1,unit:\"px\"},mainFit:{type:ControlType.Enum,title:\"Main Fit\",options:[\"cover\",\"contain\"],optionTitles:[\"Cover\",\"Contain\"],defaultValue:\"contain\",displaySegmentedControl:true},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},mainBackgroundColor:{type:ControlType.Color,title:\"Main BG\",defaultValue:\"#F5F5F5\"},focusRingColor:{type:ControlType.Color,title:\"Focus Ring\",defaultValue:\"#000000\"},focusRingWidth:{type:ControlType.Number,title:\"Focus Width\",defaultValue:2,min:0,max:6,step:1,unit:\"px\"},onImageChange:{type:ControlType.EventHandler,title:\"Image Change\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AmazonStyleImageViewer\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AmazonStyleImageViewer.map"],"mappings":"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"}