{"version":3,"file":"ImageGallery.CSS1ojsT.mjs","names":["useState","useMemo"],"sources":["https:/framerusercontent.com/modules/Aq16EDq75PjyfB9e8sub/nx5J5QyYAjrehSDpWwCK/ImageGallery.js"],"sourcesContent":["// User request: Create a new file `ImageGallery.tsx` — a Framer code component for embedding in CMS rich text via TextComponentInstance with single-image and multi-image gallery layouts, thumbnail selection, captions, accessibility, and specified property controls.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{startTransition,useEffect,useMemo,useState}from\"react\";// @ts-ignore Framer runtime provides this module in the design environment.\nimport{addPropertyControls,ControlType}from\"framer\";function getImageSrc(image){if(!image)return\"\";if(typeof image===\"string\")return image;return image.src||\"\";}function getImageSrcSet(image){if(!image||typeof image===\"string\")return undefined;return image.srcSet;}function getImageAlt(image){if(!image||typeof image===\"string\")return\"\";return image.alt||\"\";}/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function ImageGallery(props){const{image1={src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"\"},image2,image3,image4,image5,caption1=\"\",caption2=\"\",caption3=\"\",caption4=\"\",caption5=\"\",accentColor=\"rgb(10, 4, 60)\",borderRadius=8,thumbnailWidth=72,captionColor=\"rgb(130, 130, 130)\",captionFontSize=12,fontFamily=\"Lato\"}=props;const[selectedIndex,setSelectedIndex]=useState(0);const[hoveredIndex,setHoveredIndex]=useState(null);const items=useMemo(()=>{const list=[];const candidates=[{image:image1,caption:caption1},{image:image2,caption:caption2},{image:image3,caption:caption3},{image:image4,caption:caption4},{image:image5,caption:caption5}];candidates.forEach(item=>{if(getImageSrc(item.image))list.push(item);});return list;},[image1,image2,image3,image4,image5,caption1,caption2,caption3,caption4,caption5]);useEffect(()=>{if(selectedIndex>items.length-1){startTransition(()=>{setSelectedIndex(0);});}},[items.length,selectedIndex]);if(!items.length)return null;const hasMultiple=items.length>1;const selectedItem=items[selectedIndex]||items[0];const selectedImageSrc=getImageSrc(selectedItem.image);const selectedImageSrcSet=getImageSrcSet(selectedItem.image);const selectedCaption=selectedItem.caption;const selectedAlt=getImageAlt(selectedItem.image).trim()||selectedCaption||\"\";const ariaLabel=items.map(item=>item.caption.trim()).filter(Boolean).join(\" | \")||\"Image gallery\";return /*#__PURE__*/_jsx(\"div\",{role:\"group\",\"aria-label\":ariaLabel,style:{position:\"relative\",width:\"100%\",display:\"flex\",background:\"rgba(79, 93, 200, 0.05)\",border:\"1px solid rgba(79, 93, 200, 0.15)\",borderRadius:\"12px\",padding:\"20px\"},children:hasMultiple?/*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",display:\"flex\",alignItems:\"flex-start\",gap:\"12px\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:`${thumbnailWidth}px`,display:\"flex\",flexDirection:\"column\",gap:\"8px\",flexShrink:0},children:items.map((item,index)=>{const isSelected=index===selectedIndex;const isHovered=hoveredIndex===index;return /*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":`View image ${index+1}`,\"aria-pressed\":isSelected,onClick:()=>{startTransition(()=>{setSelectedIndex(index);});},onMouseEnter:()=>{startTransition(()=>{setHoveredIndex(index);});},onMouseLeave:()=>{startTransition(()=>{setHoveredIndex(null);});},style:{appearance:\"none\",WebkitAppearance:\"none\",border:isSelected?`2px solid ${accentColor}`:\"2px solid rgba(79, 93, 200, 0.22)\",borderRadius:`${borderRadius}px`,padding:0,margin:0,background:\"transparent\",cursor:\"pointer\",opacity:isSelected?1:isHovered?.85:.55,lineHeight:0},children:/*#__PURE__*/_jsx(\"img\",{src:getImageSrc(item.image),srcSet:getImageSrcSet(item.image),alt:\"\",style:{width:\"100%\",height:\"auto\",borderRadius:`${borderRadius}px`,display:\"block\"}})},`thumb-${index}`);})}),/*#__PURE__*/_jsx(\"div\",{style:{flex:1,minWidth:0},children:/*#__PURE__*/_jsxs(\"figure\",{style:{margin:0},children:[/*#__PURE__*/_jsx(\"img\",{src:selectedImageSrc,srcSet:selectedImageSrcSet,alt:selectedAlt,style:{width:\"100%\",height:\"auto\",objectFit:\"contain\",border:\"2px solid rgba(79, 93, 200, 0.22)\",borderRadius:`${borderRadius}px`,display:\"block\"}}),/*#__PURE__*/_jsx(\"figcaption\",{style:{marginTop:\"8px\",fontFamily,fontSize:`${captionFontSize}px`,color:captionColor,lineHeight:1.4},children:selectedCaption})]})})]}):/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\"},children:/*#__PURE__*/_jsxs(\"figure\",{style:{margin:0},children:[/*#__PURE__*/_jsx(\"img\",{src:selectedImageSrc,srcSet:selectedImageSrcSet,alt:selectedAlt,style:{width:\"100%\",height:\"auto\",objectFit:\"contain\",border:\"2px solid rgba(79, 93, 200, 0.22)\",borderRadius:`${borderRadius}px`,display:\"block\"}}),/*#__PURE__*/_jsx(\"figcaption\",{style:{marginTop:\"8px\",fontFamily,fontSize:`${captionFontSize}px`,color:captionColor,lineHeight:1.4},children:selectedCaption})]})})});}addPropertyControls(ImageGallery,{image1:{type:ControlType.Image,title:\"Image 1\"},caption1:{type:ControlType.String,title:\"Caption 1\",defaultValue:\"\"},image2:{type:ControlType.Image,title:\"Image 2\"},caption2:{type:ControlType.String,title:\"Caption 2\",defaultValue:\"\"},image3:{type:ControlType.Image,title:\"Image 3\"},caption3:{type:ControlType.String,title:\"Caption 3\",defaultValue:\"\"},image4:{type:ControlType.Image,title:\"Image 4\"},caption4:{type:ControlType.String,title:\"Caption 4\",defaultValue:\"\"},image5:{type:ControlType.Image,title:\"Image 5\"},caption5:{type:ControlType.String,title:\"Caption 5\",defaultValue:\"\"},accentColor:{type:ControlType.Color,title:\"Accent\",defaultValue:\"rgb(10, 4, 60)\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:32,step:1},thumbnailWidth:{type:ControlType.Number,title:\"Thumb W\",defaultValue:72,min:40,max:140,step:4},captionColor:{type:ControlType.Color,title:\"Caption\",defaultValue:\"rgb(130, 130, 130)\"},captionFontSize:{type:ControlType.Number,title:\"Cap Size\",defaultValue:12,min:10,max:18,step:1},fontFamily:{type:ControlType.String,title:\"Font\",defaultValue:\"Lato\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageGallery\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageGallery.map"],"mappings":"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"}