@cashub/ui 0.4.2 → 0.6.0

package/heading/Heading2.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Heading2 = _styledComponents.default.h2(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h2);\n  word-break: break-word;\n  white-space: pre;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var center = _ref.center;
+  return center && 'text-align: center;';
+}, function (_ref2) {
+  var marginBottom = _ref2.marginBottom;
+  return marginBottom && 'margin-bottom: var(--spacing);';
+});
+
+var _default = Heading2;
+exports.default = _default;

package/heading/Heading3.js

@@ -13,17 +13,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Heading3 = _styledComponents.default.h3(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h3);\n  word-break: break-word;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Heading3 = _styledComponents.default.h3(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h3);\n  word-break: break-word;\n  white-space: pre;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var center = _ref.center;
   return center && 'text-align: center;';
 }, function (_ref2) {
   var fontWeightNormal = _ref2.fontWeightNormal;
   return fontWeightNormal && 'font-weight: normal;';
 }, function (_ref3) {
-  var marginBottomXS = _ref3.marginBottomXS;
-  return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
+  var marginBottomS = _ref3.marginBottomS;
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
 }, function (_ref4) {
-  var paddingBottomXS = _ref4.paddingBottomXS;
+  var marginBottomXS = _ref4.marginBottomXS;
+  return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
+}, function (_ref5) {
+  var paddingBottomXS = _ref5.paddingBottomXS;
   return paddingBottomXS && 'padding-bottom: var(--spacing-xs);';
 });
 

package/heading/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Heading1", {
+  enumerable: true,
+  get: function get() {
+    return _Heading.default;
+  }
+});
+Object.defineProperty(exports, "Heading2", {
+  enumerable: true,
+  get: function get() {
+    return _Heading2.default;
+  }
+});
+Object.defineProperty(exports, "Heading3", {
+  enumerable: true,
+  get: function get() {
+    return _Heading3.default;
+  }
+});
+
+var _Heading = _interopRequireDefault(require("./Heading1"));
+
+var _Heading2 = _interopRequireDefault(require("./Heading2"));
+
+var _Heading3 = _interopRequireDefault(require("./Heading3"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/icon/IconFigure.js

@@ -0,0 +1,36 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var IconFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  ", "\n"])), function (_ref) {
+  var size = _ref.size;
+
+  switch (size) {
+    case 'small':
+      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          width: 16px;\n          height: 16px;\n        "])));
+
+    case 'large':
+      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          width: 32px;\n          height: 32px;\n        "])));
+
+    default:
+      break;
+  }
+});
+
+var _default = IconFigure;
+exports.default = _default;

package/icon/index.js

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

package/iconbox/ApplicationIconBox.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _IconBoxFigure = _interopRequireDefault(require("./IconBoxFigure"));
+
+var _IconBoxImage = _interopRequireDefault(require("./IconBoxImage"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ApplicationIconBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-bottom: var(--spacing);\n\n  ", ";\n"])), function (_ref) {
+  var clickable = _ref.clickable;
+  return clickable && 'cursor: pointer';
+});
+
+var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--spacing-xs);\n  border: var(--border-width) solid transparent;\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref2) {
+  var horizontal = _ref2.horizontal;
+  return horizontal && 'flex-direction: row;';
+}, function (_ref3) {
+  var alignCenter = _ref3.alignCenter;
+  return alignCenter && 'text-align: center;';
+}, function (_ref4) {
+  var selected = _ref4.selected;
+  return selected && "\n      border-color: var(--border-color);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n    ";
+});
+
+var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 0;\n"])));
+
+var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: var(--font-bold);\n  font-size: var(--font-body1);\n  margin-bottom: var(--spacing-xs);\n  color: var(--font-on-background);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n\n  a {\n    color: var(--font-on-background);\n  }\n"])));
+
+var Content = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  color: var(--font-on-mute);\n  margin-bottom: var(--spacing-xs);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n"])));
+
+var _default = Object.assign(ApplicationIconBox, {
+  Body: Body,
+  Description: Description,
+  Title: Title,
+  Content: Content,
+  Figure: _IconBoxFigure.default,
+  Image: _IconBoxImage.default
+});
+
+exports.default = _default;

package/iconbox/IconBox.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _IconBoxFigure = _interopRequireDefault(require("./IconBoxFigure"));
+
+var _IconBoxImage = _interopRequireDefault(require("./IconBoxImage"));
+
+var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var IconBox = function IconBox(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
+        sizeXS: true,
+        marginRight: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+          sizeXS: true,
+          src: icon,
+          alt: "".concat(title, "'s icon")
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+        children: title
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+      children: children
+    })]
+  });
+};
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-l);\n  margin-bottom: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background2);\n  color: var(--font-on-background);\n\n  background-color: #222143;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  background-size: 30% 70%;\n"])), _bgChartTriangle.default);
+
+var IconBoxHead = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: var(--spacing);\n"])));
+
+var IconBoxTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: var(--font-h2);\n  font-weight: bold;\n  word-break: break-all;\n"])));
+
+var IconBoxBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: var(--font-h1);\n  font-weight: bold;\n  text-align: center;\n"])));
+
+var _default = IconBox;
+exports.default = _default;

package/iconbox/IconBoxFigure.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var IconBoxFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 120px;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
+  var marginRight = _ref.marginRight;
+  return marginRight && 'margin-right: var(--spacing);';
+}, function (_ref2) {
+  var paddingRight = _ref2.paddingRight;
+  return paddingRight && 'padding-right: var(--spacing);';
+}, function (_ref3) {
+  var paddingRightS = _ref3.paddingRightS;
+  return paddingRightS && 'padding-right: var(--spacing-s);';
+}, function (_ref4) {
+  var paddingBottomS = _ref4.paddingBottomS;
+  return paddingBottomS && 'padding-bottom: var(--spacing-s);';
+}, function (_ref5) {
+  var sizeS = _ref5.sizeS;
+  return sizeS && 'flex-basis: 80px;';
+}, function (_ref6) {
+  var sizeXS = _ref6.sizeXS;
+  return sizeXS && 'flex-basis: 40px;';
+});
+
+var _default = IconBoxFigure;
+exports.default = _default;

package/iconbox/IconBoxImage.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var IconBoxImage = _styledComponents.default.img.attrs(function () {
+  return {
+    crossOrigin: 'anonymous'
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var rounded = _ref.rounded;
+  return rounded && 'border-radius: var(--border-radius);';
+}, function (_ref2) {
+  var sizeS = _ref2.sizeS;
+  return sizeS && "\n      width: 80px;\n      height: 80px;\n    ";
+}, function (_ref3) {
+  var sizeXS = _ref3.sizeXS;
+  return sizeXS && "\n      width: 40px;\n      height: 40px;\n    ";
+});
+
+var _default = IconBoxImage;
+exports.default = _default;

package/iconbox/IconBoxV2.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _IconBoxFigure = _interopRequireDefault(require("./IconBoxFigure"));
+
+var _IconBoxImage = _interopRequireDefault(require("./IconBoxImage"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var IconBoxV2 = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n  background: var(--color-background1);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n\n  ", "\n"])), function (_ref) {
+  var fullHeight = _ref.fullHeight;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
+});
+
+var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+
+var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  font-size: var(--font-body1);\n"])));
+
+var Info = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  word-break: break-all;\n\n  &:not(:last-child) {\n    margin-bottom: var(--spacing-s);\n  }\n"])));
+
+var Tool = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 calc(var(--spacing-s) + 36px);\n  padding-left: var(--spacing-s);\n\n  > *:not(:last-child) {\n    margin-bottom: var(--spacing-s);\n  }\n"])));
+
+var _default = Object.assign(IconBoxV2, {
+  Body: Body,
+  Description: Description,
+  Info: Info,
+  Tool: Tool,
+  Figure: _IconBoxFigure.default,
+  Image: _IconBoxImage.default
+});
+
+exports.default = _default;

package/iconbox/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ApplicationIconBox", {
+  enumerable: true,
+  get: function get() {
+    return _ApplicationIconBox.default;
+  }
+});
+Object.defineProperty(exports, "IconBox", {
+  enumerable: true,
+  get: function get() {
+    return _IconBox.default;
+  }
+});
+Object.defineProperty(exports, "IconBoxV2", {
+  enumerable: true,
+  get: function get() {
+    return _IconBoxV.default;
+  }
+});
+
+var _ApplicationIconBox = _interopRequireDefault(require("./ApplicationIconBox"));
+
+var _IconBox = _interopRequireDefault(require("./IconBox"));
+
+var _IconBoxV = _interopRequireDefault(require("./IconBoxV2"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/image/UploadImage.js

@@ -71,7 +71,7 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
 
-  var handleAvatarRemove = function handleAvatarRemove(e) {
+  var handleAvatarRemove = function handleAvatarRemove() {
     setCurrentSrc(src);
     ref.current.value = '';
     setCurrentFile(null);
@@ -94,7 +94,7 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var handleOnChange = function handleOnChange(files) {
     if (files.length === 0) {
-      //沒有傳檔案(叉叉或取消)
+      // close file selector or cancel upload file need to restore to last uploaded file
       restoreFile();
     } else {
       var fileType = files[0].name.slice(files[0].name.lastIndexOf('.')).toLowerCase();