@cashub/ui-elv 1.0.0

package/VerticalTab/VerticalTab.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VerticalTab = _ref => {
+  let {
+    children,
+    height,
+    selected,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContext.default.Provider, {
+    value: {
+      selected,
+      onChange
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      height: height,
+      children: children
+    })
+  });
+};
+const Container = _styledComponents.default.div`
+  display: flex;
+  height: ${_ref2 => {
+  let {
+    height
+  } = _ref2;
+  return height ? height : '100vh';
+}};
+  border-radius: var(--border-radius-s);
+  background: var(--color-background3);
+  overflow: hidden;
+`;
+var _default = exports.default = VerticalTab;

package/VerticalTab/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _VerticalTab = _interopRequireDefault(require("./VerticalTab"));
+var _TabList = _interopRequireDefault(require("./TabList"));
+var _TabTab = _interopRequireDefault(require("./TabTab"));
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = Object.assign(_VerticalTab.default, {
+  List: _TabList.default,
+  Tab: _TabTab.default,
+  Panel: _TabPanel.default
+});

package/VerticalTab/subComponent/TabContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const TabContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = exports.default = TabContext;

package/alert/Alert.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Alert = _styledComponents.default.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);';
+}}
+`;
+var _default = exports.default = Alert;

package/alert/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function () {
+    return _Alert.default;
+  }
+});
+var _Alert = _interopRequireDefault(require("./Alert"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/animate/Collapse.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactTransitionGroup = require("react-transition-group");
+var _jsxRuntime = require("react/jsx-runtime");
+const Collapse = _ref => {
+  let {
+    in: inProp,
+    duration = 1000,
+    children,
+    onEntered,
+    onExit,
+    onExited
+  } = _ref;
+  const childRef = (0, _react.useRef)(null);
+  const [state, setState] = (0, _react.useState)({
+    show: inProp,
+    height: 0
+  });
+  const defaultStyle = (0, _react.useMemo)(() => {
+    const style = {
+      transition: `height ${duration}ms ease-in-out`,
+      height: state.height,
+      overflow: 'hidden'
+    };
+    return style;
+  }, [duration, state.height]);
+  const transitionStyles = (0, _react.useMemo)(() => {
+    return {
+      entering: {
+        height: state.height
+      },
+      entered: {
+        height: state.height
+      },
+      exiting: {
+        height: 0
+      },
+      exited: {
+        height: 0
+      }
+    };
+  }, [state.height]);
+  (0, _react.useEffect)(() => {
+    setState({
+      show: inProp,
+      height: childRef.current.clientHeight
+    });
+  }, [inProp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+    in: state.show,
+    timeout: duration,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited,
+    children: state => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        ...defaultStyle,
+        ...transitionStyles[state]
+      },
+      children: /*#__PURE__*/(0, _react.cloneElement)(children, {
+        ref: childRef
+      })
+    })
+  });
+};
+var _default = exports.default = Collapse;

package/animate/Loader.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _LoadingBackdrop = _interopRequireDefault(require("../backdrop/LoadingBackdrop"));
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Loader = _ref => {
+  let {
+    transparent,
+    backgroundFill,
+    $loading = true,
+    text
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    transparent: transparent,
+    backgroundFill: backgroundFill,
+    $loading: $loading,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {}), text && /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+      children: text
+    })]
+  });
+};
+const Wrapper = (0, _styledComponents.default)(_LoadingBackdrop.default)`
+  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 = _styledComponents.default.p`
+  white-space: pre-line;
+  margin: var(--spacing) 0;
+  font-size: var(--font-h2);
+  text-align: center;
+`;
+var _default = exports.default = Loader;

package/animate/NumberCounter.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const MINIMUM_STEP_TIME = 100;
+const NumberCounter = _ref => {
+  let {
+    start,
+    end,
+    duration
+  } = _ref;
+  const [number, setNumber] = (0, _react.useState)(start || 0);
+  (0, _react.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;
+};
+var _default = exports.default = NumberCounter;

package/animate/PulseRing.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Pulse = _interopRequireDefault(require("../keyframe/Pulse"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PulseRing = _styledComponents.default.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 && (0, _styledComponents.css)`
+      animation: ${_Pulse.default} 3.5s ease-out;
+      animation-iteration-count: infinite;
+    `;
+}}
+`;
+var _default = exports.default = PulseRing;

package/animate/Spinner.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Spin = _interopRequireDefault(require("../keyframe/Spin"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Spinner = _styledComponents.default.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 0.3rem solid var(--color-background2);
+  border-top-color: var(--color-primary);
+  animation: 1s ${_Spin.default} infinite linear;
+`;
+var _default = exports.default = Spinner;

package/animate/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Collapse", {
+  enumerable: true,
+  get: function () {
+    return _Collapse.default;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function () {
+    return _Loader.default;
+  }
+});
+Object.defineProperty(exports, "NumberCounter", {
+  enumerable: true,
+  get: function () {
+    return _NumberCounter.default;
+  }
+});
+Object.defineProperty(exports, "PulseRing", {
+  enumerable: true,
+  get: function () {
+    return _PulseRing.default;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
+var _Collapse = _interopRequireDefault(require("./Collapse"));
+var _Loader = _interopRequireDefault(require("./Loader"));
+var _NumberCounter = _interopRequireDefault(require("./NumberCounter"));
+var _PulseRing = _interopRequireDefault(require("./PulseRing"));
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/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/assets/css/font.css

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

package/assets/css/global.css

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

package/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/backdrop/BaseBackdrop.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BaseBackdrop = _styledComponents.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-backdrop);
+  z-index: 50;
+`;
+var _default = exports.default = BaseBackdrop;

package/backdrop/LoadingBackdrop.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _BaseBackdrop = _interopRequireDefault(require("./BaseBackdrop"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LoadingBackdrop = (0, _styledComponents.default)(_BaseBackdrop.default)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+`;
+var _default = exports.default = LoadingBackdrop;

package/backdrop/ModalBackdrop.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _BaseBackdrop = _interopRequireDefault(require("./BaseBackdrop"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ModalBackdrop = (0, _styledComponents.default)(_BaseBackdrop.default)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var _default = exports.default = ModalBackdrop;

package/backdrop/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseBackdrop", {
+  enumerable: true,
+  get: function () {
+    return _BaseBackdrop.default;
+  }
+});
+Object.defineProperty(exports, "LoadingBackdrop", {
+  enumerable: true,
+  get: function () {
+    return _LoadingBackdrop.default;
+  }
+});
+Object.defineProperty(exports, "ModalBackdrop", {
+  enumerable: true,
+  get: function () {
+    return _ModalBackdrop.default;
+  }
+});
+var _BaseBackdrop = _interopRequireDefault(require("./BaseBackdrop"));
+var _LoadingBackdrop = _interopRequireDefault(require("./LoadingBackdrop"));
+var _ModalBackdrop = _interopRequireDefault(require("./ModalBackdrop"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/badge/Badge.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _color = _interopRequireDefault(require("../styles/mixin/color"));
+var _borderColor = _interopRequireDefault(require("../styles/mixin/borderColor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Badge = _styledComponents.default.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.default}
+  ${_borderColor.default}
+`;
+var _default = exports.default = Badge;

package/badge/BadgeDot.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BadgeDot = _styledComponents.default.span`
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: var(--border-radius);
+
+  ${_backgroundColor.default}
+`;
+var _default = exports.default = BadgeDot;

package/badge/BadgeFill.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
+var _colorOnBackground = _interopRequireDefault(require("../styles/mixin/colorOnBackground"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BadgeFill = _styledComponents.default.span.attrs(() => ({
+  primary: true
+}))`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: auto;
+  border-radius: var(--border-radius-l);
+  font-size: 1rem;
+  padding: 0.5rem;
+  margin: 0;
+  color: var(--font-on-background);
+
+  ${_backgroundColor.default}
+  ${_colorOnBackground.default}
+
+  ${_ref => {
+  let {
+    extraSmall
+  } = _ref;
+  return extraSmall && 'font-size: 0.75rem; padding: 0.125rem;';
+}}
+
+  ${_ref2 => {
+  let {
+    small
+  } = _ref2;
+  return small && 'font-size: 1rem; padding: 0.25rem;';
+}}
+
+  ${_ref3 => {
+  let {
+    large
+  } = _ref3;
+  return large && 'font-size: 2rem;';
+}}
+`;
+var _default = exports.default = BadgeFill;