{"version":3,"file":"AspectRatioImage.DnSY4JTP.mjs","names":[],"sources":["https:/framerusercontent.com/modules/pzvlHHowZWuxo7z3F5HG/ly1OPNuLcmWBXVtaHrwp/AspectRatioImage.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * AspectRatioImage Component\n * Displays an image with a maintained aspect ratio that scales properly in Framer\n */export default function AspectRatioImage(props){const{image,altText,aspectRatioPreset,customRatioWidth,customRatioHeight,objectFit,borderRadius,borderWidth,borderColor,borderStyle,shadow}=props;// Parse the aspect ratio from the preset\nconst getAspectRatio=()=>{if(aspectRatioPreset===\"custom\"){return customRatioWidth/customRatioHeight;}// Parse the preset string (e.g., \"16:9\" -> 16/9)\nconst[width,height]=aspectRatioPreset.split(\":\").map(Number);return width/height;};const ratio=getAspectRatio();// Container style - fills the Framer frame\nconst containerStyle={width:\"100%\",height:\"100%\",position:\"relative\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius,boxShadow:shadow,border:borderWidth?`${borderWidth}px ${borderStyle} ${borderColor}`:\"none\",overflow:\"hidden\"};// Calculate the inner container size to maintain aspect ratio\nconst getInnerContainerStyle=()=>{// Use CSS aspect-ratio for modern browsers, with fallback\nreturn{width:\"100%\",height:\"100%\",position:\"relative\",aspectRatio:ratio,maxWidth:\"100%\",maxHeight:\"100%\"};};// Image style - fills the aspect ratio container\nconst imageStyle={width:\"100%\",height:\"100%\",objectFit,objectPosition:\"center\"};// Placeholder style\nconst placeholderStyle={width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f0f0f0\",color:\"#888888\",fontFamily:\"sans-serif\",fontSize:\"14px\"};return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,children:/*#__PURE__*/_jsx(\"div\",{style:getInnerContainerStyle(),children:image?/*#__PURE__*/_jsx(\"img\",{src:image,style:imageStyle,alt:altText}):/*#__PURE__*/_jsx(\"div\",{style:placeholderStyle,children:aspectRatioPreset===\"custom\"?`${customRatioWidth}:${customRatioHeight}`:aspectRatioPreset})})});}// Default properties\nAspectRatioImage.defaultProps={altText:\"\",aspectRatioPreset:\"1:1\",customRatioWidth:1,customRatioHeight:1,objectFit:\"cover\",borderRadius:0,borderWidth:0,borderColor:\"#000000\",borderStyle:\"solid\",shadow:\"none\"};// Property controls for Framer\naddPropertyControls(AspectRatioImage,{image:{type:ControlType.Image,title:\"Image\"},altText:{type:ControlType.String,title:\"Alt Text\",defaultValue:\"\",placeholder:\"Describe the image for accessibility\"},aspectRatioPreset:{type:ControlType.Enum,title:\"Aspect Ratio\",options:[\"1:1\",\"16:9\",\"4:3\",\"3:2\",\"5:4\",\"2:1\",\"9:16\",\"custom\"],optionTitles:[\"1:1 (Square)\",\"16:9 (Widescreen)\",\"4:3 (Standard)\",\"3:2 (Classic)\",\"5:4 (Medium Format)\",\"2:1 (Panorama)\",\"9:16 (Portrait)\",\"Custom\"],defaultValue:\"1:1\"},customRatioWidth:{type:ControlType.Number,title:\"Width Ratio\",defaultValue:1,min:1,step:1,displayStepper:true,hidden(props){return props.aspectRatioPreset!==\"custom\";}},customRatioHeight:{type:ControlType.Number,title:\"Height Ratio\",defaultValue:1,min:1,step:1,displayStepper:true,hidden(props){return props.aspectRatioPreset!==\"custom\";}},objectFit:{type:ControlType.Enum,title:\"Object Fit\",options:[\"cover\",\"contain\",\"fill\",\"none\"],optionTitles:[\"Cover\",\"Contain\",\"Fill\",\"None\"],defaultValue:\"cover\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:0,min:0,max:100,step:1,displayStepper:true,unit:\"px\"},borderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:0,min:0,max:20,step:1,displayStepper:true,unit:\"px\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#000000\",hidden(props){return props.borderWidth===0;}},borderStyle:{type:ControlType.Enum,title:\"Border Style\",options:[\"solid\",\"dashed\",\"dotted\"],optionTitles:[\"Solid\",\"Dashed\",\"Dotted\"],defaultValue:\"solid\",hidden(props){return props.borderWidth===0;}},shadow:{type:ControlType.String,title:\"Box Shadow\",defaultValue:\"none\",placeholder:\"0px 4px 8px rgba(0, 0, 0, 0.1)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AspectRatioImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AspectRatioImage.map"],"mappings":"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"}