@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;

package/dist/badge/BadgeFillTriangle.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _colorOnBackground = _interopRequireDefault(require("../styles/mixin/colorOnBackground"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 fillColor = (0, _styledComponents.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 = _styledComponents.default.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.default}
+
+  ${_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 = _styledComponents.default.svg`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+`;
+const TrianglePath = _styledComponents.default.path`
+  ${fillColor}
+`;
+const Content = _styledComponents.default.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__*/(0, _react.forwardRef)((_ref12, ref) => {
+  let {
+    children,
+    primary = true,
+    ...rest
+  } = _ref12;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    ref: ref,
+    primary: primary,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TriangleSvg, {
+      viewBox: "1.7 2 20.6 19",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TrianglePath, {
+        primary: primary,
+        ...rest,
+        d: TRIANGLE_PATH
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+      ...rest,
+      children: children
+    })]
+  });
+});
+BadgeFillTriangle.displayName = 'BadgeFillTriangle';
+var _default = exports.default = BadgeFillTriangle;

package/dist/badge/BadgeWithText.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BadgeWithText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: children
+  });
+};
+const Wrapper = _styledComponents.default.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);
+  }
+`;
+var _default = exports.default = BadgeWithText;

package/dist/billing/BarChart.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("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__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles.chart,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+      style: styles.bar
+    })
+  });
+};
+var _default = exports.default = BillingBarChart;

package/dist/breadcrumb/Breadcrumb.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Breadcrumb = _ref => {
+  let {
+    path = []
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: path.map((_ref2, index) => {
+      let {
+        name,
+        url
+      } = _ref2;
+      if (url) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: url,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: name
+          })
+        }, index);
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: name
+      }, index);
+    })
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: var(--font-body2);
+  line-height: var(--font-body1);
+  color: var(--font-on-background);
+  padding: var(--spacing-s) 0;
+
+  > *:not(:last-child) {
+    display: flex;
+    align-items: center;
+    color: var(--font-on-background);
+    overflow: hidden;
+
+    > p {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &:after {
+      content: '/';
+      padding: 0 var(--spacing-xs);
+    }
+  }
+
+  > *:last-child {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--color-primary);
+  }
+
+  ${_media.default.tablet`
+    padding-top: 0;
+  `}
+`;
+var _default = exports.default = Breadcrumb;