@coin-voyage/paykit 0.0.2 → 0.1.1

package/dist/paykit/src/components/ui/ScrollArea/styles.js

@@ -1,168 +0,0 @@
-import { keyframes, css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-
-const ScrollContainer = styled.div `
-  position: relative;
-`;
-const fadeIn = keyframes `
-0%{ opacity:0; }
-100%{ opacity:1; }
-`;
-const MoreIndicator = styled.div `
-  z-index: 9;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0.75rem;
-  display: flex;
-  justify-content: center;
-
-  transition: opacity 300ms ease;
-
-  span {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    padding: 0.3075rem 0.9375rem 0.375rem;
-    border-radius: 6rem;
-    background: var(--ck-tooltip-background);
-    color: var(--ck-tooltip-color);
-    font-weight: 500;
-    font-size: 0.8125rem;
-    letter-spacing: -0.01rem;
-    box-shadow: var(--ck-tooltip-shadow);
-    animation: ${fadeIn} 300ms ease 1000ms both;
-
-    transition: transform 100ms ease;
-
-    &:hover {
-      transform: scale(1.02);
-    }
-    &:active {
-      transform: scale(0.98);
-    }
-    svg {
-      display: block;
-      transform: translateX(-0.1875rem);
-    }
-  }
-
-  &.hide {
-    opacity: 0;
-    pointer-events: none;
-  }
-`;
-const ScrollAreaContainer = styled.div `
-  --bg: ${({ $backgroundColor }) => $backgroundColor || "var(--ck-body-background)"};
-  --fade-height: 1px;
-  position: relative;
-  z-index: 1;
-
-  ${({ $mobile, $height, $mobileDirection }) => $mobile && $mobileDirection === "horizontal"
-    ? css `
-          overflow-x: scroll;
-          margin: 0 -24px;
-          padding: 0 24px;
-
-          &:before,
-          &:after {
-            pointer-events: none;
-            z-index: 10;
-            content: "";
-            display: block;
-            position: sticky;
-            top: 0;
-            bottom: 0;
-            width: var(--fade-height);
-            background: var(
-              --ck-body-divider-secondary,
-              var(--ck-body-divider)
-            );
-            box-shadow: var(--ck-body-divider-box-shadow);
-            transition: opacity 300ms ease;
-          }
-          &:before {
-            left: 0;
-          }
-          &:after {
-            right: 0;
-          }
-
-          &.scroll-start {
-            &:before {
-              opacity: 0;
-            }
-          }
-
-          &.scroll-end {
-            &:after {
-              opacity: 0;
-            }
-          }
-        `
-    : css `
-          max-height: ${$height ? `${$height}px` : "310px"};
-          overflow-y: scroll;
-          padding: 0 10px;
-          margin: calc(var(--fade-height) * -1) -16px 0 -10px;
-
-          &:before,
-          &:after {
-            pointer-events: none;
-            z-index: 10;
-            content: "";
-            display: block;
-            position: sticky;
-            left: 0;
-            right: 0;
-            height: var(--fade-height);
-            background: var(
-              --ck-body-divider-secondary,
-              var(--ck-body-divider)
-            );
-            box-shadow: var(--ck-body-divider-box-shadow);
-            transition: opacity 300ms ease;
-          }
-          &:before {
-            top: 0;
-          }
-          &:after {
-            bottom: 0;
-          }
-
-          &.scroll-start {
-            &:before {
-              opacity: 0;
-            }
-          }
-
-          &.scroll-end {
-            &:after {
-              opacity: 0;
-            }
-          }
-        `}
-
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0);
-    border-radius: 100px;
-  }
-  &:hover::-webkit-scrollbar-thumb {
-    background: var(--ck-body-color-muted);
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--ck-body-color-muted-hover);
-  }
-`;
-
-export { MoreIndicator, ScrollAreaContainer, ScrollContainer };
-//# sourceMappingURL=styles.js.map

package/dist/paykit/src/components/ui/ScrollArea/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/Spinner/index.js

@@ -1,24 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { SpinnerContainer } from './styles.js';
-
-const transition = {
-    duration: 0.4,
-    ease: [0.175, 0.885, 0.32, 0.98],
-};
-const Spinner = () => (jsx(SpinnerContainer, { initial: { opacity: 0, rotate: 180 }, animate: {
-        opacity: 1,
-        rotate: 0,
-    }, exit: {
-        position: "absolute",
-        opacity: 0,
-        rotate: -180,
-        transition: {
-            ...transition,
-        },
-    }, transition: {
-        ...transition,
-        delay: 0.2,
-    }, children: jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "9", cy: "9", r: "7", stroke: "currentColor", strokeOpacity: "0.1", strokeWidth: "2.5" }), jsx("path", { d: "M16 9C16 5.13401 12.866 2 9 2", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }) }));
-
-export { Spinner };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/Spinner/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/Spinner/styles.js

@@ -1,22 +0,0 @@
-import { motion } from 'framer-motion';
-import { keyframes } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-
-const Spin = keyframes `
-  0%{ transform: rotate(0deg); }
-  100%{ transform: rotate(360deg); }
-`;
-const SpinnerContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: ${Spin} 1s linear infinite;
-  svg {
-    display: block;
-    position: relative;
-    animation: ${Spin} 1s ease-in-out infinite;
-  }
-`;
-
-export { SpinnerContainer };
-//# sourceMappingURL=styles.js.map

package/dist/paykit/src/components/ui/Spinner/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/ThemedButton/index.js

@@ -1,26 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import useMeasure from 'react-use-measure';
-import { Container } from './styles.js';
-export { ThemeContainer } from './styles.js';
-
-function ThemedButton({ children, variant = "primary", autoSize = true, duration = 0.3, style }) {
-    const [contentRef, bounds] = useMeasure();
-    return (jsx(Container, { className: variant, initial: false, animate: autoSize
-            ? {
-                width: bounds.width > 10 ? bounds.width : "auto",
-            }
-            : undefined, transition: {
-            duration: duration,
-            ease: [0.25, 1, 0.5, 1],
-            delay: 0.01,
-        }, style: style, children: jsx("div", { ref: contentRef, style: {
-                flex: 1,
-                whiteSpace: "nowrap",
-                textAlign: "center",
-                position: "relative",
-                padding: "0 12px",
-            }, children: children }) }));
-}
-
-export { ThemedButton as default };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/ThemedButton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/ThemedButton/styles.js

@@ -1,154 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from '../../../styles/styled/index.js';
-
-const Container = styled(motion.div) `
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  height: 40px;
-  padding: 0;
-  line-height: 0;
-  letter-spacing: -0.2px;
-  font-size: var(--ck-connectbutton-font-size, 16px);
-  font-weight: var(--ck-connectbutton-font-weight, 500);
-  text-align: center;
-  transition: 100ms ease;
-  transition-property: color, background, box-shadow, border-radius;
-
-  color: var(--color);
-  background: var(--background);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
-
-  &.primary {
-    --color: var(--ck-connectbutton-color);
-    --background: var(--ck-connectbutton-background);
-    --box-shadow: var(--ck-connectbutton-box-shadow);
-    --border-radius: var(--ck-connectbutton-border-radius, 12px);
-
-    --hover-color: var(--ck-connectbutton-hover-color, var(--color));
-    --hover-background: var(
-      --ck-connectbutton-hover-background,
-      var(--background)
-    );
-    --hover-box-shadow: var(
-      --ck-connectbutton-hover-box-shadow,
-      var(--box-shadow)
-    );
-    --hover-border-radius: var(
-      --ck-connectbutton-hover-border-radius,
-      var(--border-radius)
-    );
-
-    --active-color: var(--ck-connectbutton-active-color, var(--hover-color));
-    --active-background: var(
-      --ck-connectbutton-active-background,
-      var(--hover-background)
-    );
-    --active-box-shadow: var(
-      --ck-connectbutton-active-box-shadow,
-      var(--hover-box-shadow)
-    );
-    --active-border-radius: var(
-      --ck-connectbutton-active-border-radius,
-      var(--hover-border-radius)
-    );
-  }
-  &.secondary {
-    --color: var(--ck-connectbutton-balance-color);
-    --background: var(--ck-connectbutton-balance-background);
-    --box-shadow: var(--ck-connectbutton-balance-box-shadow);
-    --border-radius: var(
-      --ck-connectbutton-balance-border-radius,
-      var(--ck-connectbutton-border-radius, 12px)
-    );
-
-    --hover-color: var(--ck-connectbutton-balance-hover-color, var(--color));
-    --hover-background: var(
-      --ck-connectbutton-balance-hover-background,
-      var(--background)
-    );
-    --hover-box-shadow: var(
-      --ck-connectbutton-balance-hover-box-shadow,
-      var(--box-shadow)
-    );
-    --hover-border-radius: var(
-      --ck-connectbutton-balance-hover-border-radius,
-      var(--border-radius)
-    );
-
-    --active-color: var(
-      --ck-connectbutton-balance-active-color,
-      var(--hover-color)
-    );
-    --active-background: var(
-      --ck-connectbutton-balance-active-background,
-      var(--hover-background)
-    );
-    --active-box-shadow: var(
-      --ck-connectbutton-balance-active-box-shadow,
-      var(--hover-box-shadow)
-    );
-    --active-border-radius: var(
-      --ck-connectbutton-balance-active-border-radius,
-      var(--hover-border-radius)
-    );
-  }
-`;
-const ThemeContainer = styled.button `
-  all: initial;
-  appearance: none;
-  user-select: none;
-  position: relative;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border-radius: var(--ck-border-radius);
-
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.3;
-  }
-
-  display: flex;
-  flex-wrap: nowrap;
-  background: none;
-  cursor: pointer;
-  * {
-    cursor: pointer;
-  }
-  &:hover {
-    ${Container} {
-      color: var(--hover-color, var(--color));
-      background: var(--hover-background, var(--background));
-      box-shadow: var(--hover-box-shadow, var(--box-shadow));
-      border-radius: var(--hover-border-radius, var(--border-radius));
-    }
-  }
-  &:active {
-    ${Container} {
-      color: var(--active-color, var(--hover-color, var(--color)));
-      background: var(
-        --active-background,
-        var(--hover-background, var(--background))
-      );
-      box-shadow: var(
-        --active-box-shadow,
-        var(--hover-box-shadow, var(--box-shadow))
-      );
-      border-radius: var(
-        --active-border-radius,
-        var(--hover-border-radius, var(--border-radius))
-      );
-    }
-  }
-  &:focus-visible {
-    outline: 2px solid var(--ck-family-brand);
-  }
-`;
-
-export { Container, ThemeContainer };
-//# sourceMappingURL=styles.js.map

package/dist/paykit/src/components/ui/ThemedButton/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/Tooltip/index.js

@@ -1,100 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import useMeasure from 'react-use-measure';
-import usePayContext from '../../contexts/pay/index.js';
-import { TooltipWindow, TooltipContainer, TooltipTail } from './styles.js';
-import { useIsomorphicLayoutEffect, motion, AnimatePresence } from 'framer-motion';
-import { useThemeContext } from '../../../providers/theme/provider.js';
-import { ResetContainer } from '../../../styles/index.js';
-import Portal from '../Portal/index.js';
-
-const Tooltip = ({ children, message, open, xOffset = 0, yOffset = 0, delay, }) => {
-    const context = usePayContext();
-    const themeContext = useThemeContext();
-    if (context.options?.hideTooltips) {
-        return jsx(Fragment, { children: children });
-    }
-    const [isOpen, setIsOpen] = useState(false);
-    const [outOfBounds, setOutOfBounds] = useState(false);
-    const [size, setSize] = useState("small");
-    const [ready, setReady] = useState(false);
-    const [currentRoute] = useState(context.route);
-    const targetRef = useRef(null);
-    const [ref, bounds] = useMeasure({
-        debounce: !ready ? 220 : 0, // fix alignment initial state
-        offsetSize: true,
-        scroll: true,
-    });
-    const checkBounds = () => {
-        let flag = false;
-        const x = xOffset + bounds.left + bounds.width;
-        const y = yOffset + bounds.top + bounds.height * 0.5;
-        if (x > window.innerWidth || x < 0 || y > window.innerHeight || y < 0) {
-            flag = true;
-        }
-        return flag;
-    };
-    const refreshLayout = () => {
-        if (!targetRef.current ||
-            bounds.top +
-                bounds.bottom +
-                bounds.left +
-                bounds.right +
-                bounds.height +
-                bounds.width ===
-                0) {
-            return;
-        }
-        const x = xOffset + bounds.left + bounds.width;
-        const y = yOffset + bounds.top + bounds.height * 0.5;
-        if (!ready && x !== 0 && y !== 0) {
-            setReady(true);
-        }
-        targetRef.current.style.left = `${x}px`;
-        targetRef.current.style.top = `${y}px`;
-        setSize(targetRef.current.offsetHeight <= 40 ? "small" : "large");
-        setOutOfBounds(checkBounds());
-    };
-    useIsomorphicLayoutEffect(refreshLayout, [bounds, open, isOpen]);
-    useEffect(() => {
-        if (!context.open) {
-            setIsOpen(false);
-        }
-    }, [context.open]);
-    useEffect(() => {
-        setIsOpen(!!open);
-    }, [open]);
-    return (jsxs(Fragment, { children: [jsx(motion.div, { ref: ref, style: open === undefined
-                    ? {
-                        cursor: "help",
-                    }
-                    : {}, onHoverStart: () => setIsOpen(true), onHoverEnd: () => setIsOpen(false), onClick: () => setIsOpen(false), children: children }), jsx(Portal, { children: jsx(AnimatePresence, { children: currentRoute === context.route && !outOfBounds && isOpen && (jsx(ResetContainer, { "$useTheme": themeContext.theme, "$useMode": themeContext.mode, "$customTheme": themeContext.customTheme, children: jsx(TooltipWindow, { children: jsxs(TooltipContainer, { role: "tooltip", "$size": size, ref: targetRef, initial: "collapsed", animate: ready ? "open" : {}, exit: "collapsed", variants: {
-                                    collapsed: {
-                                        transformOrigin: "20px 50%",
-                                        opacity: 0,
-                                        scale: 0.9,
-                                        z: 0.01,
-                                        y: "-50%",
-                                        x: 20,
-                                        transition: {
-                                            duration: 0.1,
-                                        },
-                                    },
-                                    open: {
-                                        willChange: "opacity,transform",
-                                        opacity: 1,
-                                        scale: 1,
-                                        z: 0.01,
-                                        y: "-50%",
-                                        x: 20,
-                                        transition: {
-                                            ease: [0.76, 0, 0.24, 1],
-                                            duration: 0.15,
-                                            delay: delay ? delay : 0.5,
-                                        },
-                                    },
-                                }, children: [message, jsx(TooltipTail, { "$size": size })] }) }) })) }) })] }));
-};
-
-export { Tooltip as default };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/Tooltip/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/Tooltip/styles.js

@@ -1,81 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from '../../../styles/styled/index.js';
-
-const TooltipWindow = styled(motion.div) `
-  z-index: 2147483647;
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-`;
-const TooltipContainer = styled(motion.div) `
-  --shadow: var(--ck-tooltip-shadow);
-  z-index: 2147483647;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  gap: 8px;
-  width: fit-content;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(
-    --ck-tooltip-border-radius,
-    ${(props) => (props.$size === "small" ? 11 : 14)}px
-  );
-  border-radius:;
-  padding: 10px 16px 10px 12px;
-  font-size: 14px;
-  line-height: 19px;
-  font-weight: 500;
-  letter-spacing: -0.1px;
-  color: var(--ck-tooltip-color);
-  background: var(--ck-tooltip-background);
-  box-shadow: var(--shadow);
-  > span {
-    z-index: 3;
-    position: relative;
-  }
-  > div {
-    margin: -4px 0; // offset for icon
-  }
-  strong {
-    color: var(--ck-spinner-color);
-  }
-
-  .ck-tt-logo {
-    display: inline-block;
-    vertical-align: text-bottom;
-    height: 1em;
-    width: 1.25em;
-    svg {
-      display: block;
-      height: 100%;
-      transform: translate(0.5px, -1px) scale(1.75);
-    }
-  }
-`;
-const TooltipTail = styled(motion.div) `
-  z-index: 2;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => (props.$size === "small" ? 14 : 18)}px;
-  right: 100%;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-  &:before {
-    content: "";
-    position: absolute;
-    box-shadow: var(--shadow);
-    width: ${(props) => (props.$size === "small" ? 14 : 18)}px;
-    height: ${(props) => (props.$size === "small" ? 14 : 18)}px;
-    transform: translate(75%, 0) rotate(45deg);
-    background: var(--ck-tooltip-background);
-    border-radius: ${(props) => (props.$size === "small" ? 2 : 3)}px 0 0 0;
-  }
-`;
-
-export { TooltipContainer, TooltipTail, TooltipWindow };
-//# sourceMappingURL=styles.js.map

package/dist/paykit/src/components/ui/Tooltip/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}