@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/Tab/subComponent/TabPanelV2.js

@@ -0,0 +1,45 @@
+import { useContext, useEffect, useState, useMemo } from 'react';
+import styled from 'styled-components';
+import TabContext from './TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabPanelV2 = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected
+  } = useContext(TabContext);
+  const [rendered, setRendered] = useState(false);
+  const tabContent = useMemo(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  useEffect(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/_jsx(Panel, {
+    role: "tabpanel",
+    $display: selected === name,
+    ...props,
+    children: tabContent
+  });
+};
+const Panel = styled.div`
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  position: relative;
+  background: var(--color-background2);
+  border-bottom-left-radius: var(--border-radius-s);
+  border-bottom-right-radius: var(--border-radius-s);
+`;
+export default TabPanelV2;

package/esm/Tab/subComponent/TabTabV2.js

@@ -0,0 +1,56 @@
+import { useContext, useCallback } from 'react';
+import styled from 'styled-components';
+import TabContext from './TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabTabV2 = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected,
+    onChange
+  } = useContext(TabContext);
+  const handleClick = useCallback(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+  }, [name, selected, onChange]);
+  return /*#__PURE__*/_jsx(Tab, {
+    role: "tab",
+    onClick: handleClick,
+    active: selected === name,
+    ...props,
+    children: children
+  });
+};
+const Tab = styled.button`
+  background: transparent;
+  color: var(--font-on-mute);
+  font-weight: bold;
+  padding: 10px var(--spacing-s);
+  border: none;
+  border-top-left-radius: var(--border-radius-s);
+  border-top-right-radius: var(--border-radius-s);
+  transition:
+    color 0.3s,
+    border 0.3s;
+  cursor: pointer;
+  flex: 1;
+
+  &:hover {
+    color: var(--font-on-background);
+  }
+
+  ${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && `
+      background: var(--color-background2);
+      color: var(--font-on-background);
+    `;
+}}
+`;
+export default TabTabV2;

package/esm/VerticalTab/TabList.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabList = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Container, {
+    role: "tablist",
+    ...props,
+    children: children
+  });
+};
+const Container = styled.div`
+  height: 100%;
+  width: 316px;
+  background: var(--color-background2);
+  overflow-y: auto;
+`;
+export default TabList;

package/esm/VerticalTab/TabPanel.js

@@ -0,0 +1,45 @@
+import { useContext, useEffect, useState, useMemo } from 'react';
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabPanel = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected
+  } = useContext(TabContext);
+  const [rendered, setRendered] = useState(false);
+  const tabContent = useMemo(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  useEffect(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/_jsx(Panel, {
+    role: "tabpanel",
+    $display: selected === name,
+    ...props,
+    children: tabContent
+  });
+};
+const Panel = styled.div`
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  position: relative;
+  flex: 1;
+  padding: var(--spacing-s);
+  overflow-y: auto;
+`;
+export default TabPanel;

package/esm/VerticalTab/TabTab.js

@@ -0,0 +1,63 @@
+import { useContext, useCallback } from 'react';
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabTab = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected,
+    onChange
+  } = useContext(TabContext);
+  const handleClick = useCallback(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+  }, [name, selected, onChange]);
+  return /*#__PURE__*/_jsx(Tab, {
+    role: "tab",
+    onClick: handleClick,
+    active: selected === name,
+    ...props,
+    children: children
+  });
+};
+const Tab = styled.button`
+  width: 100%;
+  padding: 12px var(--spacing-s);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-active);
+    color: var(--color-primary);
+    font-weight: var(--font-bold);
+
+    span {
+      color: var(--color-primary);
+    }
+  }
+
+  ${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && `
+      background: var(--color-active);
+      color: var(--color-primary);
+      font-weight: var(--font-bold);
+
+      span {
+        color: var(--color-primary);
+      }
+    `;
+}}
+`;
+export default TabTab;

package/esm/VerticalTab/VerticalTab.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VerticalTab = _ref => {
+  let {
+    children,
+    height,
+    selected,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/_jsx(TabContext.Provider, {
+    value: {
+      selected,
+      onChange
+    },
+    children: /*#__PURE__*/_jsx(Container, {
+      height: height,
+      children: children
+    })
+  });
+};
+const Container = styled.div`
+  display: flex;
+  height: ${_ref2 => {
+  let {
+    height
+  } = _ref2;
+  return height ? height : '100vh';
+}};
+  border-radius: var(--border-radius-s);
+  background: var(--color-background3);
+  overflow: hidden;
+`;
+export default VerticalTab;

package/esm/VerticalTab/index.js

@@ -0,0 +1,9 @@
+import VerticalTab from './VerticalTab';
+import TabList from './TabList';
+import TabTab from './TabTab';
+import TabPanel from './TabPanel';
+export default Object.assign(VerticalTab, {
+  List: TabList,
+  Tab: TabTab,
+  Panel: TabPanel
+});

package/esm/VerticalTab/subComponent/TabContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const TabContext = /*#__PURE__*/createContext(null);
+export default TabContext;

package/esm/alert/Alert.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+const Alert = styled.div`
+  background: var(--color-background1);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  padding: var(--spacing);
+
+  ${_ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse && 'background: var(--color-background2);';
+}}
+
+  ${_ref2 => {
+  let {
+    marginBottom
+  } = _ref2;
+  return marginBottom && 'margin-bottom: var(--spacing);';
+}}
+`;
+export default Alert;

package/esm/alert/index.js

@@ -0,0 +1 @@
+export { default as Alert } from './Alert';

package/esm/animate/Collapse.js

@@ -0,0 +1,65 @@
+import { useMemo, cloneElement, useRef, useState, useEffect } from 'react';
+import { Transition } from 'react-transition-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Collapse = _ref => {
+  let {
+    in: inProp,
+    duration = 1000,
+    children,
+    onEntered,
+    onExit,
+    onExited
+  } = _ref;
+  const childRef = useRef(null);
+  const [state, setState] = useState({
+    show: inProp,
+    height: 0
+  });
+  const defaultStyle = useMemo(() => {
+    const style = {
+      transition: `height ${duration}ms ease-in-out`,
+      height: state.height,
+      overflow: 'hidden'
+    };
+    return style;
+  }, [duration, state.height]);
+  const transitionStyles = useMemo(() => {
+    return {
+      entering: {
+        height: state.height
+      },
+      entered: {
+        height: state.height
+      },
+      exiting: {
+        height: 0
+      },
+      exited: {
+        height: 0
+      }
+    };
+  }, [state.height]);
+  useEffect(() => {
+    setState({
+      show: inProp,
+      height: childRef.current.clientHeight
+    });
+  }, [inProp]);
+  return /*#__PURE__*/_jsx(Transition, {
+    in: state.show,
+    timeout: duration,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited,
+    children: state => /*#__PURE__*/_jsx("div", {
+      style: {
+        ...defaultStyle,
+        ...transitionStyles[state]
+      },
+      children: /*#__PURE__*/cloneElement(children, {
+        ref: childRef
+      })
+    })
+  });
+};
+export default Collapse;

package/esm/animate/Loader.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import LoadingBackdrop from '../backdrop/LoadingBackdrop';
+import Spinner from './Spinner';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Loader = _ref => {
+  let {
+    transparent,
+    backgroundFill,
+    $loading = true,
+    text
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    transparent: transparent,
+    backgroundFill: backgroundFill,
+    $loading: $loading,
+    children: [/*#__PURE__*/_jsx(Spinner, {}), text && /*#__PURE__*/_jsx(Text, {
+      children: text
+    })]
+  });
+};
+const Wrapper = styled(LoadingBackdrop)`
+  z-index: 200;
+
+  ${_ref2 => {
+  let {
+    transparent
+  } = _ref2;
+  return transparent && 'background: transparent;';
+}}
+
+  ${_ref3 => {
+  let {
+    backgroundFill
+  } = _ref3;
+  return backgroundFill && 'background: var(--color-background1);';
+}}
+
+  ${_ref4 => {
+  let {
+    $loading
+  } = _ref4;
+  return !$loading && 'display: none;';
+}}
+`;
+const Text = styled.p`
+  white-space: pre-line;
+  margin: var(--spacing) 0;
+  font-size: var(--font-h2);
+  text-align: center;
+`;
+export default Loader;

package/esm/animate/NumberCounter.js

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+const MINIMUM_STEP_TIME = 100;
+const NumberCounter = _ref => {
+  let {
+    start,
+    end,
+    duration
+  } = _ref;
+  const [number, setNumber] = useState(start || 0);
+  useEffect(() => {
+    // invalid value
+    if (end === null || end === undefined) return;
+
+    // same value no need do counter
+    if (start === end) return;
+    let current = start;
+    const range = end - start;
+    let increment = end > start ? 1 : -1;
+    let stepTime = duration / range;
+
+    // use minimum step time instead if step time too small
+    // prevent too much render cause long time render
+    if (stepTime < MINIMUM_STEP_TIME) {
+      const gap = MINIMUM_STEP_TIME - stepTime;
+      const multiple = gap / stepTime;
+      stepTime = MINIMUM_STEP_TIME;
+      increment = Math.floor(1 + 1 * multiple);
+    }
+    const timer = setInterval(() => {
+      current += increment;
+      if (current > end) {
+        current = end;
+      }
+      setNumber(current);
+      if (current === end) {
+        clearInterval(timer);
+      }
+    }, stepTime);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [start, end, duration]);
+  return number;
+};
+export default NumberCounter;

package/esm/animate/PulseRing.js

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import Pulse from '../keyframe/Pulse';
+const PulseRing = styled.span.attrs(() => ({
+  role: 'presentation'
+}))`
+  display: block;
+  border-radius: var(--border-radius-round);
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  opacity: 0;
+  border: 4px solid var(--color-primary);
+
+  ${_ref => {
+  let {
+    play
+  } = _ref;
+  return play && css`
+      animation: ${Pulse} 3.5s ease-out;
+      animation-iteration-count: infinite;
+    `;
+}}
+`;
+export default PulseRing;

package/esm/animate/Spinner.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import Spin from '../keyframe/Spin';
+const Spinner = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 0.3rem solid var(--color-background2);
+  border-top-color: var(--color-primary);
+  animation: 1s ${Spin} infinite linear;
+`;
+export default Spinner;

package/esm/animate/index.js

@@ -0,0 +1,5 @@
+export { default as Collapse } from './Collapse';
+export { default as Loader } from './Loader';
+export { default as NumberCounter } from './NumberCounter';
+export { default as PulseRing } from './PulseRing';
+export { default as Spinner } from './Spinner';

package/esm/assets/css/autocomplete.css

@@ -0,0 +1,16 @@
+/**
+ * Fix autocomplete style
+ */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  transition: color 5000s ease-in-out 0s, background-color 5000s ease-in-out 0s;
+  box-shadow: 0 0 0px 100px var(--color-background2) inset;
+  -webkit-text-fill-color: var(--font-on-background);
+}

package/esm/assets/css/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Helvetica';
+  src: url('../font/helvetica/Helvetica.ttf');
+}

package/esm/assets/css/global.css

@@ -0,0 +1,2 @@
+@import './font.css';
+@import './autocomplete.css';

package/esm/assets/icons/file.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="-56 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m352.402344 64.265625h-176.734375c-3.980469 0-7.792969 1.582031-10.605469 4.394531l-96.402344 96.402344c-2.8125 2.8125-4.394531 6.625-4.394531 10.605469v289.199219c0 25.988281 21.144531 47.132812 47.132813 47.132812h241c25.992187 0 47.132812-21.144531 47.132812-47.132812v-353.46875c.003906-25.988282-21.140625-47.132813-47.128906-47.132813zm0 0" fill="#3ab4fb"/><path d="m399.535156 111.398438v353.472656c0 25.988281-21.148437 47.128906-47.136718 47.128906h-152.632813v-447.730469h152.632813c25.988281 0 47.136718 21.140625 47.136718 47.128907zm0 0" fill="#1d9cfd"/><path d="m288.132812 0h-176.730468c-3.980469 0-7.792969 1.582031-10.605469 4.394531l-96.402344 96.398438c-2.8125 2.8125-4.394531 6.628906-4.394531 10.605469v289.203124c0 25.988282 21.144531 47.132813 47.132812 47.132813h241c25.988282 0 47.132813-21.144531 47.132813-47.132813v-353.46875c0-25.988281-21.144531-47.132812-47.132813-47.132812zm0 0" fill="#eff6fe"/><g fill="#d9e4ef"><path d="m95.335938 351.332031h80.332031c8.28125 0 15-6.714843 15-15 0-8.28125-6.71875-15-15-15h-80.332031c-8.285157 0-15 6.71875-15 15 0 8.285157 6.714843 15 15 15zm0 0"/><path d="m335.265625 47.128906v353.472656c0 25.988282-21.136719 47.128907-47.128906 47.128907h-88.371094v-447.730469h88.371094c25.992187 0 47.128906 21.140625 47.128906 47.128906zm0 0"/><path d="m95.335938 222.800781h144.597656c8.285156 0 15-6.714843 15-15 0-8.285156-6.714844-15-15-15h-144.597656c-8.285157 0-15 6.714844-15 15 0 8.285157 6.714843 15 15 15zm0 0"/><path d="m95.335938 287.066406h144.597656c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15h-144.597656c-8.285157 0-15 6.714844-15 15s6.714843 15 15 15zm0 0"/></g><path d="m254.9375 207.800781c0 8.277344-6.71875 15-15 15h-40.171875v-30h40.171875c8.28125 0 15 6.71875 15 15zm0 0" fill="#c1cedb"/><path d="m254.9375 272.070312c0 8.28125-6.71875 15-15 15h-40.171875v-30h40.171875c8.28125 0 15 6.710938 15 15zm0 0" fill="#c1cedb"/><path d="m95.335938 112.46875c9.445312 0 17.132812-7.6875 17.132812-17.132812v-95.335938h-1.070312c-3.976563 0-7.792969 1.582031-10.605469 4.394531l-96.398438 96.398438c-2.8125 2.8125-4.394531 6.628906-4.394531 10.605469v1.070312zm0 0" fill="#d9e4ef"/></svg>

package/esm/backdrop/BaseBackdrop.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+const BaseBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-backdrop);
+  z-index: 50;
+`;
+export default BaseBackdrop;

package/esm/backdrop/LoadingBackdrop.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import BaseBackdrop from './BaseBackdrop';
+const LoadingBackdrop = styled(BaseBackdrop)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+`;
+export default LoadingBackdrop;

package/esm/backdrop/ModalBackdrop.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import BaseBackdrop from './BaseBackdrop';
+const ModalBackdrop = styled(BaseBackdrop)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export default ModalBackdrop;

package/esm/backdrop/index.js

@@ -0,0 +1,3 @@
+export { default as BaseBackdrop } from './BaseBackdrop';
+export { default as LoadingBackdrop } from './LoadingBackdrop';
+export { default as ModalBackdrop } from './ModalBackdrop';

package/esm/badge/Badge.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import color from '../styles/mixin/color';
+import borderColor from '../styles/mixin/borderColor';
+const Badge = styled.span`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: auto;
+  font-size: inherit;
+  padding: 0.25rem 0.5rem;
+  margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-l);
+
+  ${color}
+  ${borderColor}
+`;
+export default Badge;

package/esm/badge/BadgeDot.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+const BadgeDot = styled.span`
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: var(--border-radius);
+
+  ${backgroundColor}
+`;
+export default BadgeDot;