{"version":3,"file":"Button_effect.EcMix9lW.mjs","names":["p"],"sources":["https:/framerusercontent.com/modules/t1K0Y5kA2LjiO5oC6SXX/iMJhUIQ6aHYCPjoTBN6p/Button_effect.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect}from\"react\";const STYLE_ID=\"smart-ripple-link-fix\";const ANIMATION_MS=600;const ANIMATION_CSS=\"0.6s\";const css=`\n    .smart-btn {\n        --t: ${ANIMATION_CSS};\n        --ease: linear;\n        \n        position: relative; overflow: hidden; isolate: isolate; cursor: pointer;\n        border-radius: 4px !important;\n        display: flex; align-items: center; justify-content: center;\n        \n        background: var(--bg); \n        transition: background var(--t) var(--ease);\n        \n        /* De wrapper zelf moet interactie doorgeven */\n        pointer-events: auto; \n        z-index: 1;\n    }\n\n    /* STANDAARD INHOUD (Tekst, Divs, Iconen) */\n    /* Die moeten de muis negeren zodat de hover op de wrapper soepel blijft */\n    .smart-btn * {\n        color: var(--txt) !important;\n        transition: color var(--t) var(--ease);\n        position: relative; z-index: 2;\n        pointer-events: none; \n    }\n\n    /* DE FIX VOOR JOUW HTML: */\n    /* Als er een link (<a>) in zit, MOET die klikbaar zijn */\n    .smart-btn a {\n        pointer-events: auto !important;\n        \n        /* Zorg dat de link de hele knop vult */\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        text-decoration: none;\n    }\n\n    /* Active State kleuren */\n    .smart-btn.active, .smart-btn.active * { \n        color: var(--txt-active, var(--txt)) !important; \n    }\n\n    /* DE RIPPLE (Achtergrond effect) */\n    .rip {\n        position: absolute; \n        border-radius: 50%; \n        z-index: 1;\n        background: var(--rip);\n        transform-origin: center center;\n        \n        width: 600px; height: 600px;\n        margin-left: -300px; margin-top: -300px; \n        \n        transform: scale(0);\n        opacity: 1; \n        \n        transition: transform var(--t) var(--ease);\n        will-change: transform;\n        pointer-events: none; \n    }\n    \n    .rip.grow { \n        transform: scale(1);\n    }\n\n    /* --- VARIANTEN --- */\n    .v-a { --bg: #E8461D;     --txt: #F9F6ED; --rip: #FF5F20; }\n    .v-b { --bg: transparent; --txt: #F9F6ED; --rip: #F9F6ED; --txt-active: #721F3C; }\n    .v-c { --bg: transparent; --txt: #721F3C; --rip: #721F3C; --txt-active: #F9F6ED; }\n`;export function withVariantA(C){return p=>/*#__PURE__*/_jsx(Ripple,{C:C,...p,v:\"v-a\"});}export function withVariantB(C){return p=>/*#__PURE__*/_jsx(Ripple,{C:C,...p,v:\"v-b\"});}export function withVariantC(C){return p=>/*#__PURE__*/_jsx(Ripple,{C:C,...p,v:\"v-c\"});}function Ripple({C,v,...props}){useEffect(()=>{if(document.getElementById(STYLE_ID))return;const s=document.createElement(\"style\");s.id=STYLE_ID;s.innerHTML=css;document.head.appendChild(s);},[]);const enter=e=>{const el=e.currentTarget;el.classList.add(\"active\");const rect=el.getBoundingClientRect();const rip=document.createElement(\"span\");rip.className=\"rip\";rip.style.left=`${e.clientX-rect.left}px`;rip.style.top=`${e.clientY-rect.top}px`;el.appendChild(rip);// Force browser update zodat animatie start\nvoid rip.offsetWidth;rip.classList.add(\"grow\");};const leave=e=>{const el=e.currentTarget;el.classList.remove(\"active\");const rips=el.getElementsByClassName(\"rip\");Array.from(rips).forEach(r=>{r.classList.remove(\"grow\");setTimeout(()=>r.remove(),ANIMATION_MS);});};return /*#__PURE__*/_jsx(\"div\",{className:`smart-btn ${v}`,onMouseEnter:enter,onMouseLeave:leave,children:/*#__PURE__*/_jsx(C,{...props})});}\nexport const __FramerMetadata__ = {\"exports\":{\"withVariantA\":{\"type\":\"reactHoc\",\"name\":\"withVariantA\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withVariantC\":{\"type\":\"reactHoc\",\"name\":\"withVariantC\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withVariantB\":{\"type\":\"reactHoc\",\"name\":\"withVariantB\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Button_effect.map"],"mappings":"kHAwEE,SAAgB,EAAa,EAAE,CAAC,MAAO,IAAgB,EAAK,EAAO,CAAG,IAAE,GAAGA,EAAE,EAAE,MAAM,CAAC,CAAE,SAAgB,EAAa,EAAE,CAAC,MAAO,IAAgB,EAAK,EAAO,CAAG,IAAE,GAAGA,EAAE,EAAE,MAAM,CAAC,CAAE,SAAgB,EAAa,EAAE,CAAC,MAAO,IAAgB,EAAK,EAAO,CAAG,IAAE,GAAGA,EAAE,EAAE,MAAM,CAAC,CAAE,SAAS,EAAO,CAAC,IAAE,IAAE,GAAG,GAAO,CAChC,OADiC,MAAc,CAAC,GAAG,SAAS,eAAe,EAAS,CAAC,OAAO,IAAM,EAAE,SAAS,cAAc,QAAQ,CAAC,EAAE,GAAG,EAAS,EAAE,UAAU,EAAI,SAAS,KAAK,YAAY,EAAE,EAAG,EAAE,CAAC,CAChL,EAAK,MAAM,CAAC,UAAU,aAAa,IAAI,aADsJ,GAAG,CAAC,IAAM,EAAG,EAAE,cAAc,EAAG,UAAU,IAAI,SAAS,CAAC,IAAM,EAAK,EAAG,uBAAuB,CAAO,EAAI,SAAS,cAAc,OAAO,CAAC,EAAI,UAAU,MAAM,EAAI,MAAM,KAAK,GAAG,EAAE,QAAQ,EAAK,KAAK,IAAI,EAAI,MAAM,IAAI,GAAG,EAAE,QAAQ,EAAK,IAAI,IAAI,EAAG,YAAY,EAAI,CACrtB,EAAI,YAAY,EAAI,UAAU,IAAI,OAAO,EAAyS,aAA1R,GAAG,CAAC,IAAM,EAAG,EAAE,cAAc,EAAG,UAAU,OAAO,SAAS,CAAC,IAAM,EAAK,EAAG,uBAAuB,MAAM,CAAC,MAAM,KAAK,EAAK,CAAC,QAAQ,GAAG,CAAC,EAAE,UAAU,OAAO,OAAO,CAAC,eAAe,EAAE,QAAQ,CAAC,EAAa,EAAG,EAAoG,SAAsB,EAAK,EAAE,CAAC,GAAG,EAAM,CAAC,CAAC,CAAC,wBAzEzW,IAA6B,CAAM,EAAS,wBAA8B,EAAa,IAAqC,EAAI"}