{"version":3,"file":"HoverDim.Cl4oPOrx.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/5Xo472i581pLENB9XKM5/GVF5e0NhU8SPveeI4bW0/HoverDim.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 40\n * @framerIntrinsicHeight 20\n */export default function HoverDim(props){const{target=\"\",mode,opacity,color,duration,style}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const rootRef=useRef(null);const[id]=useState(()=>\"hd\"+Math.random().toString(36).slice(2,8));// Mark the frame we live in, and our own container so it's left alone.\n// Framer may wrap a component in extra elements, so walk up until we reach\n// an ancestor that actually holds other items next to ours.\nuseEffect(()=>{if(isCanvas)return;// Never block the layers underneath: make Framer's wrapper around this\n// component click-through too (it can sit on top of tabs or links).\nconst wrapper=rootRef.current?.parentElement;if(wrapper)wrapper.style.pointerEvents=\"none\";const name=target.trim();if(name){// Named target: the nearest layer with that name, searching outward\nconst sel=`[data-framer-name=\"${CSS.escape(name)}\"]`;let marked=null;const find=()=>{if(marked?.isConnected)return;let s=rootRef.current?.parentElement||null;let el=null;while(s&&!(el=s.querySelector(sel)))s=s.parentElement;// step through single wrappers to the layer that holds the items\nwhile(el&&el.children.length===1&&el.firstElementChild.children.length>1)el=el.firstElementChild;if(el){marked?.removeAttribute(\"data-hover-dim\");el.setAttribute(\"data-hover-dim\",id);marked=el;}};find();// CMS lists can render late or re-render: keep it attached\nconst mo=new MutationObserver(find);mo.observe(document.body,{childList:true,subtree:true});return()=>{mo.disconnect();marked?.removeAttribute(\"data-hover-dim\");};}let container=rootRef.current?.parentElement||null;let frame=container?.parentElement||null;while(container&&frame&&frame.children.length<2&&frame!==document.body){container=frame;frame=frame.parentElement;}if(!container||!frame)return;frame.setAttribute(\"data-hover-dim\",id);container.setAttribute(\"data-hover-dim-self\",\"\");container.style.pointerEvents=\"none\";return()=>{frame.removeAttribute(\"data-hover-dim\");container.removeAttribute(\"data-hover-dim-self\");};},[id,isCanvas,target]);if(isCanvas)return /*#__PURE__*/_jsx(\"div\",{ref:rootRef,style:{...style,width:\"100%\",height:\"100%\"}});const f=`[data-hover-dim=\"${id}\"]`;const items=`${f} > :not([data-hover-dim-self])`;const dimmed=`${f}:has(> :not([data-hover-dim-self]):hover) > :not([data-hover-dim-self]):not(:hover)`;const t=`${Math.max(0,duration)}s ease`;const css=mode===\"color\"?`${items}, ${items} * { transition: color ${t}; }\n${dimmed}, ${dimmed} * { --framer-text-color: ${color} !important; color: ${color} !important; }`:`${items} { transition: opacity ${t} !important; }\n${dimmed} { opacity: ${Math.min(1,Math.max(0,opacity))} !important; }`;return /*#__PURE__*/_jsx(\"div\",{ref:rootRef,\"aria-hidden\":true,style:{...style,width:\"100%\",height:\"100%\",pointerEvents:\"none\"},children:/*#__PURE__*/_jsx(\"style\",{children:css})});}HoverDim.defaultProps={target:\"\",mode:\"opacity\",opacity:.4,color:\"#777777\",duration:.25};HoverDim.displayName=\"Hover Dim\";addPropertyControls(HoverDim,{target:{type:ControlType.String,title:\"Target Layer\",defaultValue:\"\",placeholder:\"Frame it sits in\",description:\"Optional. Name of a layer whose children get dimmed (e.g. a Collection List). Empty: the frame Hover Dim sits in.\"},mode:{type:ControlType.Enum,title:\"Dim With\",options:[\"opacity\",\"color\"],optionTitles:[\"Opacity\",\"Color\"],defaultValue:\"opacity\",displaySegmentedControl:true,description:\"Opacity works with any colours and blend modes. Color switches the text to a fixed colour.\"},opacity:{type:ControlType.Number,title:\"Opacity\",min:0,max:1,step:.05,defaultValue:.4,hidden:p=>p.mode===\"color\"},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#777777\",hidden:p=>p.mode!==\"color\"},duration:{type:ControlType.Number,title:\"Fade\",min:0,max:1,step:.05,unit:\"s\",defaultValue:.25}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HoverDim\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerIntrinsicWidth\":\"40\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"20\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HoverDim.map"],"mappings":"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"}