{"code":"import React, { createRef, useEffect, useMemo } from \"react\";\r\nvar Button = function (props) {\r\n    var ref = createRef();\r\n    var size = props.size || \"m\";\r\n    var className = useMemo(function () {\r\n        var type = props.type || \"primary\";\r\n        var color = props.color || \"blue\";\r\n        var radius = props.radius || \"s\";\r\n        var disabled = props.disabled || false;\r\n        return getClassName({\r\n            size: size,\r\n            type: type,\r\n            color: color,\r\n            radius: radius,\r\n            disabled: disabled,\r\n        });\r\n    }, [props]);\r\n    useEffect(function () {\r\n        addRippleEffect(ref);\r\n    }, []);\r\n    return (React.createElement(\"div\", { \"data-testid\": \"Button\", className: \"\".concat(props.fluid ? \"\" : \"inline-block\", \" \").concat(props.className) },\r\n        React.createElement(\"button\", { ref: ref, className: \"\".concat(className, \" w-full select-none relative overflow-hidden\"), disabled: props.disabled, onClick: props.onClick },\r\n            props.prefix && (React.createElement(\"span\", { className: \"\".concat([\"m\", \"s\"].indexOf(size) > -1 ? \"mr-[0.4rem]\" : \"mr-[0.8rem]\") }, props.prefix)),\r\n            props.children,\r\n            props.suffix && (React.createElement(\"span\", { className: \"\".concat([\"m\", \"s\"].indexOf(size) > -1 ? \"ml-[0.4rem]\" : \"ml-[0.8rem]\") }, props.suffix)))));\r\n};\r\nfunction getClassName(props) {\r\n    var className = \"flex justify-center items-center min-w-[10rem] hover:opacity-90 active:scale-95 transition-all px-[1.3rem]\";\r\n    //radius\r\n    switch (props.radius) {\r\n        case \"xl\":\r\n            className += \" rounded-[2.2rem]\";\r\n            break;\r\n        case \"l\":\r\n            className += \" rounded-[2.0rem]\";\r\n            break;\r\n        case \"m\":\r\n            className += \" rounded-[1.8rem]\";\r\n            break;\r\n        case \"s\":\r\n            className += \" rounded-[1rem]\";\r\n            break;\r\n    }\r\n    //size\r\n    switch (props.size) {\r\n        case \"xl\":\r\n            className += \" h-[5rem] text-heading-5 font-bold\";\r\n            break;\r\n        case \"l\":\r\n            className += \" h-[4.4rem] text-body-2 font-bold\";\r\n            break;\r\n        case \"m\":\r\n            className += \" h-[4rem] text-body-5 font-bold\";\r\n            break;\r\n        case \"s\":\r\n            className += \" h-[3.6rem] text-body-8 font-bold\";\r\n            break;\r\n    }\r\n    //type\r\n    switch (props.type) {\r\n        case \"cta\":\r\n            switch (props.color) {\r\n                case \"blue\":\r\n                    if (!props.disabled)\r\n                        className += \" bg-primary text-white\";\r\n                    break;\r\n                case \"gray\":\r\n                    if (!props.disabled)\r\n                        className += \" bg-gray-7 text-white\";\r\n                    break;\r\n            }\r\n            break;\r\n        case \"primary\":\r\n            //color\r\n            switch (props.color) {\r\n                case \"blue\":\r\n                    if (!props.disabled)\r\n                        className += \" bg-blue-2 text-primary\";\r\n                    break;\r\n                case \"gray\":\r\n                    if (!props.disabled)\r\n                        className += \" bg-gray-2 text-gray-10\";\r\n                    break;\r\n            }\r\n            break;\r\n        case \"outline\":\r\n            className += \" border text-primary bg-white\";\r\n            //color\r\n            switch (props.color) {\r\n                case \"blue\":\r\n                    if (!props.disabled)\r\n                        className += \" border-primary text-primary active:bg-blue-1\";\r\n                    break;\r\n                case \"gray\":\r\n                    if (!props.disabled)\r\n                        className += \" border-gray-3 text-gray-10\";\r\n                    break;\r\n            }\r\n            break;\r\n    }\r\n    //disabled\r\n    if (props.disabled) {\r\n        className += \" cursor-not-allowed\";\r\n        switch (props.type) {\r\n            case \"cta\":\r\n            case \"primary\":\r\n                className += \" bg-gray-2 text-gray-6\";\r\n                break;\r\n            case \"outline\":\r\n                className += \" border-gray-4 text-gray-4\";\r\n                break;\r\n        }\r\n    }\r\n    if (props.className) {\r\n        className += \" \".concat(props.className);\r\n    }\r\n    return className;\r\n}\r\nfunction addRippleEffect(ref) {\r\n    var _a;\r\n    function rippleEffect(event) {\r\n        var btn = event.currentTarget;\r\n        var circle = document.createElement(\"span\");\r\n        var diameter = Math.max(btn.clientWidth, btn.clientHeight);\r\n        var radius = diameter / 2;\r\n        circle.style.width = circle.style.height = \"\".concat(diameter, \"px\");\r\n        circle.style.left = \"\".concat(event.clientX - (btn.offsetLeft + radius), \"px\");\r\n        circle.style.top = \"\".concat(event.clientY - (btn.offsetTop + radius), \"px\");\r\n        circle.classList.add(\"ripple\");\r\n        var ripple = btn.getElementsByClassName(\"ripple\")[0];\r\n        if (ripple) {\r\n            ripple.remove();\r\n        }\r\n        btn.appendChild(circle);\r\n    }\r\n    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(\"click\", rippleEffect);\r\n}\r\nexport default Button;\r\n","references":["/Users/dongyoonkim/Dev/nosearch-react-component/node_modules/@types/react/index.d.ts","/Users/dongyoonkim/Dev/nosearch-react-component/src/components/UI/Button/Button.types.ts"],"dts":{"name":"/Users/dongyoonkim/Dev/nosearch-react-component/lib/components/UI/Button/Button.d.ts","writeByteOrderMark":false,"text":"import React from \"react\";\r\nimport { ButtonProps } from \"./Button.types\";\r\ndeclare const Button: React.FC<ButtonProps>;\r\nexport default Button;\r\n"}}