@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
145 lines (142 loc) • 4.93 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { AnimatePresence } from 'framer-motion';
import { flattenChildren } from '../../../utils/index.js';
import FitText from '../FitText/index.js';
import { Spinner } from '../Spinner/index.js';
import { ButtonContainer, ButtonContainerInner, IconContainer, DownloadArrow, DownloadArrowInner, Arrow, ArrowLine, ArrowChevron, InnerContainer, SpinnerContainer } from './styles.js';
const transition = {
duration: 0.4,
ease: [0.175, 0.885, 0.32, 0.98]
};
const Button = ({
children,
variant = "secondary",
// unique aspect to how we're handling buttons
disabled,
icon,
iconPosition = "left",
roundedIcon,
waiting,
arrow,
download,
href,
style,
onClick
}) => {
const key = typeof children === "string" ? children : flattenChildren(children).join("");
const hrefUrl = typeof href === "string" ? href : flattenChildren(href).join("");
return /* @__PURE__ */ jsx(
ButtonContainer,
{
as: href ? "a" : void 0,
onClick: (event) => {
if (!disabled && onClick) onClick(event);
},
href: hrefUrl || null,
target: href && "_blank",
rel: href && "noopener noreferrer",
disabled,
$variant: variant,
style,
children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, children: [
/* @__PURE__ */ jsxs(
ButtonContainerInner,
{
initial: { opacity: 0, y: -10 },
animate: {
opacity: 1,
y: -1
},
exit: {
position: "absolute",
opacity: 0,
y: 10,
transition: {
...transition
}
},
transition: {
...transition,
delay: 0.2
},
children: [
icon && iconPosition === "left" && /* @__PURE__ */ jsx(IconContainer, { $rounded: roundedIcon, children: icon }),
download && /* @__PURE__ */ jsx(DownloadArrow, { children: /* @__PURE__ */ jsx(DownloadArrowInner, { children: /* @__PURE__ */ jsxs(
Arrow,
{
width: "13",
height: "12",
viewBox: "0 0 13 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx(
ArrowLine,
{
stroke: "currentColor",
x1: "1",
y1: "6",
x2: "12",
y2: "6",
strokeWidth: "var(--stroke-width)",
strokeLinecap: "round"
}
),
/* @__PURE__ */ jsx(
ArrowChevron,
{
stroke: "currentColor",
d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
strokeWidth: "var(--stroke-width)",
strokeLinecap: "round"
}
)
]
}
) }) }),
/* @__PURE__ */ jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: /* @__PURE__ */ jsx(FitText, { children }) }),
icon && iconPosition === "right" && /* @__PURE__ */ jsx(IconContainer, { $rounded: roundedIcon, children: icon }),
arrow && /* @__PURE__ */ jsxs(
Arrow,
{
width: "13",
height: "12",
viewBox: "0 0 13 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx(
ArrowLine,
{
stroke: "currentColor",
x1: "1",
y1: "6",
x2: "12",
y2: "6",
strokeWidth: "2",
strokeLinecap: "round"
}
),
/* @__PURE__ */ jsx(
ArrowChevron,
{
stroke: "currentColor",
d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
strokeWidth: "2",
strokeLinecap: "round"
}
)
]
}
)
]
},
key
),
waiting && /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(Spinner, {}) })
] })
}
);
};
export { Button as default };
//# sourceMappingURL=index.js.map