{"version":3,"file":"ImageCaptionComparison.DiFEMg_7.mjs","names":["React.useState","React.useRef","React.useCallback","React.useMemo"],"sources":["https:/framerusercontent.com/modules/I7s7R8A2EmkpgMXwzAJ8/KWIoW2Hkfio87BjN2EWT/ImageCaptionComparison.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ImageCaptionComparison(props){const{leftImage={src:\"https://framerusercontent.com/images/W0ydHK6Hgv0gC9uq3920LZnHeY.jpg\",alt:\"Model in tailored suiting details\"},rightImage={src:\"https://framerusercontent.com/images/5sIWfGIudB6dxMKJNKMtP2qLqY.jpg\",alt:\"Close-up tailoring craftsmanship\"},leftCaption=\"Hand-finished lapels shaped for a clean drape.\",rightCaption=\"Precision stitching and structure in every seam.\",inactiveOpacity=.45,panelHeight=440,captionColor=\"#FFFFFF\",captionPadding=\"8px\",stickyOffset=60,stackPanels=false,captionFont}=props;const[activePanel,setActivePanel]=React.useState(\"left\");const[isPhone,setIsPhone]=React.useState(false);const isStatic=useIsStaticRenderer();const containerRef=React.useRef(null);const inView=useInView(containerRef,{amount:.2,once:false});React.useEffect(()=>{if(typeof window!==\"undefined\"){const media=window.matchMedia(\"(max-width: 767px)\");const update=()=>{React.startTransition(()=>setIsPhone(media.matches));};update();media.addEventListener(\"change\",update);return()=>media.removeEventListener(\"change\",update);}else{React.startTransition(()=>setIsPhone(false));}},[]);const shouldStack=stackPanels||isPhone;const interactionEnabled=!stackPanels&&!isStatic&&inView;const transitionDuration=interactionEnabled?\"320ms\":\"0ms\";const activateLeft=React.useCallback(()=>{if(!interactionEnabled)return;React.startTransition(()=>setActivePanel(\"left\"));},[interactionEnabled]);const activateRight=React.useCallback(()=>{if(!interactionEnabled)return;React.startTransition(()=>setActivePanel(\"right\"));},[interactionEnabled]);const resetDefault=React.useCallback(()=>{if(!interactionEnabled)return;React.startTransition(()=>setActivePanel(\"left\"));},[interactionEnabled]);const panelStyle=React.useMemo(()=>({position:\"relative\",flex:shouldStack?\"0 0 auto\":1,width:shouldStack?\"100%\":undefined,minWidth:shouldStack?\"100%\":0,height:panelHeight,overflow:\"visible\",cursor:interactionEnabled?\"pointer\":\"default\"}),[panelHeight,interactionEnabled,shouldStack]);const captionBaseStyle=React.useMemo(()=>({margin:0,color:captionColor,padding:captionPadding,fontFamily:captionFont?.fontFamily,fontSize:captionFont?.fontSize,fontWeight:captionFont?.fontWeight,fontStyle:captionFont?.fontStyle,lineHeight:captionFont?.lineHeight,letterSpacing:captionFont?.letterSpacing,textAlign:captionFont?.textAlign,transition:`opacity ${transitionDuration} ease`,width:\"max-content\",maxWidth:\"calc(100% - 24px)\",pointerEvents:\"none\"}),[captionColor,captionFont,captionPadding,transitionDuration]);const captionStickyWrapStyle=React.useMemo(()=>({position:\"sticky\",top:stickyOffset,left:0,zIndex:3,pointerEvents:\"none\",paddingLeft:12,width:\"100%\"}),[stickyOffset]);const imageViewportStyle=React.useMemo(()=>({position:\"absolute\",inset:0,overflow:\"hidden\",zIndex:1}),[]);const panelContentStyle=React.useMemo(()=>({position:\"relative\",width:\"100%\",height:\"100%\",zIndex:2}),[]);const buildImageStyle=React.useCallback(isActive=>({width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",filter:isActive?\"grayscale(0%)\":\"grayscale(100%)\",opacity:isActive?1:inactiveOpacity,transition:`filter ${transitionDuration} ease, opacity ${transitionDuration} ease`,transform:\"translateZ(0)\",willChange:\"filter, opacity\"}),[inactiveOpacity,transitionDuration]);const isLeftActive=stackPanels?true:activePanel===\"left\"||!interactionEnabled;const isRightActive=stackPanels?true:activePanel===\"right\"&&interactionEnabled;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",display:\"flex\",flexDirection:shouldStack?\"column\":\"row\",gap:0},onMouseLeave:interactionEnabled?resetDefault:undefined,children:[/*#__PURE__*/_jsxs(\"article\",{role:interactionEnabled?\"button\":undefined,\"aria-label\":\"Left comparison panel\",tabIndex:interactionEnabled?0:-1,style:panelStyle,onMouseEnter:interactionEnabled?activateLeft:undefined,onFocus:interactionEnabled?activateLeft:undefined,onClick:interactionEnabled?activateLeft:undefined,children:[/*#__PURE__*/_jsx(\"div\",{style:imageViewportStyle,children:/*#__PURE__*/_jsx(\"img\",{...leftImage,alt:leftImage.alt||leftCaption,style:buildImageStyle(isLeftActive)})}),/*#__PURE__*/_jsx(\"div\",{style:panelContentStyle,children:/*#__PURE__*/_jsx(\"div\",{style:captionStickyWrapStyle,children:/*#__PURE__*/_jsx(\"p\",{style:{...captionBaseStyle,opacity:isLeftActive?1:0},children:leftCaption})})})]}),/*#__PURE__*/_jsxs(\"article\",{role:interactionEnabled?\"button\":undefined,\"aria-label\":\"Right comparison panel\",tabIndex:interactionEnabled?0:-1,style:panelStyle,onMouseEnter:interactionEnabled?activateRight:undefined,onFocus:interactionEnabled?activateRight:undefined,onClick:interactionEnabled?activateRight:undefined,children:[/*#__PURE__*/_jsx(\"div\",{style:imageViewportStyle,children:/*#__PURE__*/_jsx(\"img\",{...rightImage,alt:rightImage.alt||rightCaption,style:buildImageStyle(isRightActive)})}),/*#__PURE__*/_jsx(\"div\",{style:panelContentStyle,children:/*#__PURE__*/_jsx(\"div\",{style:captionStickyWrapStyle,children:/*#__PURE__*/_jsx(\"p\",{style:{...captionBaseStyle,opacity:isRightActive?1:0},children:rightCaption})})})]})]});}addPropertyControls(ImageCaptionComparison,{leftImage:{type:ControlType.ResponsiveImage,title:\"Left Image\"},rightImage:{type:ControlType.ResponsiveImage,title:\"Right Image\"},leftCaption:{type:ControlType.String,title:\"Left Caption\",defaultValue:\"Hand-finished lapels shaped for a clean drape.\"},rightCaption:{type:ControlType.String,title:\"Right Caption\",defaultValue:\"Precision stitching and structure in every seam.\"},inactiveOpacity:{type:ControlType.Number,title:\"Inactive\",defaultValue:.45,min:0,max:1,step:.01},panelHeight:{type:ControlType.Number,title:\"Height\",defaultValue:440,min:180,max:1e3,step:10,unit:\"px\"},captionColor:{type:ControlType.Color,title:\"Caption\",defaultValue:\"#FFFFFF\"},captionPadding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"8px\"},stickyOffset:{type:ControlType.Number,title:\"Sticky Top\",defaultValue:60,min:0,max:300,step:1,unit:\"px\"},stackPanels:{type:ControlType.Boolean,title:\"Stack Mobile\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},captionFont:{type:ControlType.Font,title:\"Caption Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"18px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\",textAlign:\"left\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageCaptionComparison\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageCaptionComparison.map"],"mappings":"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"}