{"version":3,"file":"FocusWaveButton.NBi2JYVn.mjs","names":[],"sources":["https:/framerusercontent.com/modules/j6gi0xBLwgwkkQxMoKR9/YEIAXqSdmhPcAZTN5WPG/FocusWaveButton.js"],"sourcesContent":["/**\n * FocusWaveButton v1.1.0\n * ボタン波形エフェクト - Code Override\n *\n * 特徴:\n * - box-shadowによる波形アニメーション\n * - きらりと光るシャインエフェクト\n * - 7色のカラーバリエーション\n * - 3秒の無限ループアニメーション\n * - Framer Override形式\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect}from\"react\";// ================================================================================\n// 設定定数\n// ================================================================================\nconst WAVE_CONFIG={duration:\"3s\",timing:\"ease-in-out\",iteration:\"infinite\",maxSpread:\"20px\"};// カラー定義\nconst COLORS={green:{hex:\"#10B981\",rgba:\"16, 185, 129\"},blue:{hex:\"#3B82F6\",rgba:\"59, 130, 246\"},pink:{hex:\"#EC4899\",rgba:\"236, 72, 153\"},orange:{hex:\"#F97316\",rgba:\"249, 115, 22\"},red:{hex:\"#EF4444\",rgba:\"239, 68, 68\"},purple:{hex:\"#8B5CF6\",rgba:\"139, 92, 246\"},yellow:{hex:\"#EAB308\",rgba:\"234, 179, 8\"}};// ================================================================================\n// スタイル注入関数\n// ================================================================================\nfunction injectFocusWaveStyles(){const styleId=\"focus-wave-animation-styles\";if(document.getElementById(styleId))return;const styles=`\n        @keyframes focusWaveGreen {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.green.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.green.rgba}, 0); }\n        }\n        @keyframes focusWaveBlue {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.blue.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.blue.rgba}, 0); }\n        }\n        @keyframes focusWavePink {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.pink.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.pink.rgba}, 0); }\n        }\n        @keyframes focusWaveOrange {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.orange.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.orange.rgba}, 0); }\n        }\n        @keyframes focusWaveRed {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.red.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.red.rgba}, 0); }\n        }\n        @keyframes focusWavePurple {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.purple.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.purple.rgba}, 0); }\n        }\n        @keyframes focusWaveYellow {\n            0%, 100% { box-shadow: 0 0 0 0 rgba(${COLORS.yellow.rgba}, 0.5); }\n            50% { box-shadow: 0 0 0 ${WAVE_CONFIG.maxSpread} rgba(${COLORS.yellow.rgba}, 0); }\n        }\n\n        /* きらりシャインアニメーション */\n        @keyframes shine {\n            0% {\n                left: -10%;\n                transform: scale(5) rotate(45deg);\n                opacity: 0;\n            }\n            20% {\n                left: -10%;\n                transform: scale(5) rotate(45deg);\n                opacity: 0;\n            }\n            25% {\n                left: 10%;\n                transform: scale(15) rotate(45deg);\n                opacity: 0.6;\n            }\n            40% {\n                left: 110%;\n                transform: scale(20) rotate(45deg);\n                opacity: 0;\n            }\n            100% {\n                left: 110%;\n                transform: scale(20) rotate(45deg);\n                opacity: 0;\n            }\n        }\n\n        /* シャインラッパー共通スタイル */\n        .focus-wave-shine-wrapper {\n            position: relative;\n            overflow: hidden;\n        }\n\n        .focus-wave-shine-wrapper::before {\n            content: \"\";\n            display: block;\n            position: absolute;\n            top: 50%;\n            left: -10%;\n            width: 5px;\n            height: 100%;\n            background: linear-gradient(\n                90deg,\n                rgba(255, 255, 255, 0) 0%,\n                rgba(255, 255, 255, 0.9) 50%,\n                rgba(255, 255, 255, 0) 100%\n            );\n            transform: scale(5) rotate(45deg);\n            transform-origin: center center;\n            opacity: 0;\n            animation: shine 3s linear 500ms infinite;\n            pointer-events: none;\n            z-index: 1;\n        }\n    `;const styleElement=document.createElement(\"style\");styleElement.id=styleId;styleElement.textContent=styles;document.head.appendChild(styleElement);}// ================================================================================\n// Export Override関数\n// ================================================================================\n/**\n * 緑色の波形エフェクト (#10B981)\n */export function withFocusWaveGreen(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWaveGreen ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}/**\n * 青色の波形エフェクト (#3B82F6)\n */export function withFocusWaveBlue(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWaveBlue ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}/**\n * ピンク色の波形エフェクト (#EC4899)\n */export function withFocusWavePink(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWavePink ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}/**\n * オレンジ色の波形エフェクト (#F97316)\n */export function withFocusWaveOrange(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWaveOrange ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}/**\n * 赤色の波形エフェクト (#EF4444)\n */export function withFocusWaveRed(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWaveRed ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}/**\n * 紫色の波形エフェクト (#8B5CF6)\n */export function withFocusWavePurple(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWavePurple ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}/**\n * 黄色の波形エフェクト (#EAB308)\n */export function withFocusWaveYellow(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,style:{...props.style,animation:`focusWaveYellow ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`}});};}// ================================================================================\n// 波形＋シャイン 複合エフェクト Override関数\n// ================================================================================\n/**\n * 緑色の波形＋白シャインエフェクト (#10B981)\n */export function withFocusWaveShineGreen(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWaveGreen ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}/**\n * 青色の波形＋白シャインエフェクト (#3B82F6)\n */export function withFocusWaveShineBlue(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWaveBlue ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}/**\n * ピンク色の波形＋白シャインエフェクト (#EC4899)\n */export function withFocusWaveShinePink(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWavePink ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}/**\n * オレンジ色の波形＋白シャインエフェクト (#F97316)\n */export function withFocusWaveShineOrange(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWaveOrange ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}/**\n * 赤色の波形＋白シャインエフェクト (#EF4444)\n */export function withFocusWaveShineRed(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWaveRed ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}/**\n * 紫色の波形＋白シャインエフェクト (#8B5CF6)\n */export function withFocusWaveShinePurple(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWavePurple ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}/**\n * 黄色の波形＋白シャインエフェクト (#EAB308)\n */export function withFocusWaveShineYellow(Component){return props=>{useEffect(()=>{injectFocusWaveStyles();},[]);return /*#__PURE__*/_jsx(Component,{...props,className:`${props.className||\"\"} focus-wave-shine-wrapper`,style:{...props.style,animation:`focusWaveYellow ${WAVE_CONFIG.duration} ${WAVE_CONFIG.timing} ${WAVE_CONFIG.iteration}`,position:\"relative\",overflow:\"hidden\"}});};}\nexport const __FramerMetadata__ = {\"exports\":{\"withFocusWavePurple\":{\"type\":\"reactHoc\",\"name\":\"withFocusWavePurple\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShineBlue\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShineBlue\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShinePurple\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShinePurple\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveOrange\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveOrange\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShineRed\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShineRed\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShineGreen\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShineGreen\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShineOrange\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShineOrange\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShinePink\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShinePink\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveShineYellow\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveShineYellow\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveGreen\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveGreen\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveBlue\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveBlue\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveYellow\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveYellow\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWavePink\":{\"type\":\"reactHoc\",\"name\":\"withFocusWavePink\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFocusWaveRed\":{\"type\":\"reactHoc\",\"name\":\"withFocusWaveRed\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FocusWaveButton.map"],"mappings":"kHAiBA,SAAS,GAAuB,CAAC,IAAM,EAAQ,8BAA8B,GAAG,SAAS,eAAe,EAAQ,CAAC,OAAO,IAAM,EAAO;;kDAEnF,EAAO,MAAM,KAAK;sCAC9B,EAAY,UAAU,QAAQ,EAAO,MAAM,KAAK;;;kDAGpC,EAAO,KAAK,KAAK;sCAC7B,EAAY,UAAU,QAAQ,EAAO,KAAK,KAAK;;;kDAGnC,EAAO,KAAK,KAAK;sCAC7B,EAAY,UAAU,QAAQ,EAAO,KAAK,KAAK;;;kDAGnC,EAAO,OAAO,KAAK;sCAC/B,EAAY,UAAU,QAAQ,EAAO,OAAO,KAAK;;;kDAGrC,EAAO,IAAI,KAAK;sCAC5B,EAAY,UAAU,QAAQ,EAAO,IAAI,KAAK;;;kDAGlC,EAAO,OAAO,KAAK;sCAC/B,EAAY,UAAU,QAAQ,EAAO,OAAO,KAAK;;;kDAGrC,EAAO,OAAO,KAAK;sCAC/B,EAAY,UAAU,QAAQ,EAAO,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2D3E,EAAa,SAAS,cAAc,QAAQ,CAAC,EAAa,GAAG,EAAQ,EAAa,YAAY,EAAO,SAAS,KAAK,YAAY,EAAa,CASrJ,SAAgB,EAAkB,EAAU,CAAC,MAAO,KAAQ,MAAc,CAAC,GAAuB,EAAG,EAAE,CAAC,CAAqB,EAAK,EAAU,CAAC,GAAG,EAAM,MAAM,CAAC,GAAG,EAAM,MAAM,UAAU,iBAAiB,EAAY,SAAS,GAAG,EAAY,OAAO,GAAG,EAAY,YAAY,CAAC,CAAC,EAE/Q,SAAgB,EAAoB,EAAU,CAAC,MAAO,KAAQ,MAAc,CAAC,GAAuB,EAAG,EAAE,CAAC,CAAqB,EAAK,EAAU,CAAC,GAAG,EAAM,MAAM,CAAC,GAAG,EAAM,MAAM,UAAU,mBAAmB,EAAY,SAAS,GAAG,EAAY,OAAO,GAAG,EAAY,YAAY,CAAC,CAAC,EAiBnR,SAAgB,EAAyB,EAAU,CAAC,MAAO,KAAQ,MAAc,CAAC,GAAuB,EAAG,EAAE,CAAC,CAAqB,EAAK,EAAU,CAAC,GAAG,EAAM,UAAU,GAAG,EAAM,WAAW,GAAG,2BAA2B,MAAM,CAAC,GAAG,EAAM,MAAM,UAAU,mBAAmB,EAAY,SAAS,GAAG,EAAY,OAAO,GAAG,EAAY,YAAY,SAAS,WAAW,SAAS,SAAS,CAAC,CAAC,uBAzH/U,IAA6B,CAGrE,EAAY,CAAC,SAAS,KAAK,OAAO,cAAc,UAAU,WAAW,UAAU,OAAO,CACtF,EAAO,CAAC,MAAM,CAAC,IAAI,UAAU,KAAK,eAAe,CAAC,KAAK,CAAC,IAAI,UAAU,KAAK,eAAe,CAAC,KAAK,CAAC,IAAI,UAAU,KAAK,eAAe,CAAC,OAAO,CAAC,IAAI,UAAU,KAAK,eAAe,CAAC,IAAI,CAAC,IAAI,UAAU,KAAK,cAAc,CAAC,OAAO,CAAC,IAAI,UAAU,KAAK,eAAe,CAAC,OAAO,CAAC,IAAI,UAAU,KAAK,cAAc,CAAC"}