@cashub/ui-elv 1.0.2 → 1.0.4

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;

package/esm/badge/BadgeFill.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+const BadgeFill = styled.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}
+  ${colorOnBackground}
+
+  ${_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;';
+}}
+`;
+export default BadgeFill;

package/esm/badge/BadgeFillTriangle.js

@@ -0,0 +1,138 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fillColor = css`
+  ${_ref => {
+  let {
+    primary
+  } = _ref;
+  return primary && 'fill: var(--color-primary);';
+}}
+
+  ${_ref2 => {
+  let {
+    success
+  } = _ref2;
+  return success && 'fill: var(--color-success);';
+}}
+
+  ${_ref3 => {
+  let {
+    warning
+  } = _ref3;
+  return warning && 'fill: var(--color-warning);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'fill: var(--color-danger);';
+}}
+
+  ${_ref5 => {
+  let {
+    grey
+  } = _ref5;
+  return grey && 'fill: var(--color-grey);';
+}}
+`;
+const Wrapper = styled.span`
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 2rem;
+  width: 2rem;
+  font-size: 1rem;
+  margin: 0;
+  color: var(--font-on-background);
+
+  ${colorOnBackground}
+
+  ${_ref6 => {
+  let {
+    extraSmall
+  } = _ref6;
+  return extraSmall && 'height: 1rem; width: 1rem; font-size: 0.62rem;';
+}}
+
+  ${_ref7 => {
+  let {
+    small
+  } = _ref7;
+  return small && 'height: 1.5rem; width: 1.5rem;';
+}}
+
+  ${_ref8 => {
+  let {
+    large
+  } = _ref8;
+  return large && 'height: 3rem; width: 3rem; font-size: 1.75rem;';
+}}
+`;
+const TriangleSvg = styled.svg`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+`;
+const TrianglePath = styled.path`
+  ${fillColor}
+`;
+const Content = styled.span`
+  position: relative;
+  display: inline-flex;
+  transform: translateY(0.2rem);
+
+  ${_ref9 => {
+  let {
+    extraSmall
+  } = _ref9;
+  return extraSmall && 'transform: translateY(0.1rem);';
+}}
+
+  ${_ref10 => {
+  let {
+    small
+  } = _ref10;
+  return small && 'transform: translateY(0.15rem);';
+}}
+
+  ${_ref11 => {
+  let {
+    large
+  } = _ref11;
+  return large && 'transform: translateY(0.3rem);';
+}}
+`;
+const TRIANGLE_PATH = 'M12 2 C12.7 2 13.3 2.4 13.7 3 L22 18 C22.8 19.5 21.7 21 20 21 H4 C2.3 21 1.2 19.5 2 18 L10.3 3 C10.7 2.4 11.3 2 12 2Z';
+const BadgeFillTriangle = /*#__PURE__*/forwardRef((_ref12, ref) => {
+  let {
+    children,
+    primary = true,
+    ...rest
+  } = _ref12;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    ref: ref,
+    primary: primary,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(TriangleSvg, {
+      viewBox: "1.7 2 20.6 19",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /*#__PURE__*/_jsx(TrianglePath, {
+        primary: primary,
+        ...rest,
+        d: TRIANGLE_PATH
+      })
+    }), /*#__PURE__*/_jsx(Content, {
+      ...rest,
+      children: children
+    })]
+  });
+});
+BadgeFillTriangle.displayName = 'BadgeFillTriangle';
+export default BadgeFillTriangle;

package/esm/badge/BadgeWithText.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BadgeWithText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: children
+  });
+};
+const Wrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: var(--spacing-s);
+
+  :not(:last-child) {
+    margin-right: var(--spacing-s);
+  }
+
+  > :first-child {
+    margin-right: var(--spacing-xs);
+  }
+`;
+export default BadgeWithText;

package/esm/badge/index.js

@@ -0,0 +1,5 @@
+export { default as Badge } from './Badge';
+export { default as BadgeDot } from './BadgeDot';
+export { default as BadgeFill } from './BadgeFill';
+export { default as BadgeFillTriangle } from './BadgeFillTriangle';
+export { default as BadgeWithText } from './BadgeWithText';

package/esm/billing/BarChart.js

@@ -0,0 +1,45 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BillingBarChart = _ref => {
+  let {
+    theme,
+    percentage,
+    success,
+    warning,
+    danger
+  } = _ref;
+  const styles = {
+    chart: {
+      position: 'relative',
+      width: '100%',
+      height: 16,
+      borderRadius: 16,
+      backgroundColor: theme.bgColor3,
+      marginTop: 8
+    },
+    bar: {
+      position: 'absolute',
+      width: `${percentage}%`,
+      borderRadius: 16,
+      top: 0,
+      bottom: 0,
+      backgroundColor: theme.colorPrimary
+    }
+  };
+  if (success) {
+    styles.bar.backgroundColor = theme.colorSuccess;
+  }
+  if (warning) {
+    styles.bar.backgroundColor = theme.colorWarning;
+  }
+  if (danger) {
+    styles.bar.backgroundColor = theme.colorDanger;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.chart,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.bar
+    })
+  });
+};
+export default BillingBarChart;