@cashub/ui 0.49.0-beta.3 → 0.49.0-beta.5

package/Tab/TabList.js

@@ -15,6 +15,7 @@ const TabList = _ref => {
   let {
     children,
     wrap = true,
+    noBorder,
     ...props
   } = _ref;
   const wrapperRef = (0, _react.useRef)(null);
@@ -104,6 +105,7 @@ const TabList = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     role: "tablist",
     $wrap: wrap,
+    $noBorder: noBorder,
     ...props,
     children: wrap ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabWrapper, {
@@ -131,20 +133,25 @@ const TabList = _ref => {
 };
 const Container = _styledComponents.default.div`
   position: relative;
-  border-bottom: var(--border-width) solid var(--border-color);
+  ${_ref2 => {
+  let {
+    $noBorder
+  } = _ref2;
+  return !$noBorder && 'border-bottom: var(--border-width) solid var(--border-color);';
+}}
   margin-bottom: var(--spacing);
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $wrap
-  } = _ref2;
+  } = _ref3;
   return !$wrap && 'white-space: nowrap;';
 }}
 
-  ${_ref3 => {
+  ${_ref4 => {
   let {
     noMargin
-  } = _ref3;
+  } = _ref4;
   return noMargin && 'margin-bottom: 0;';
 }}
 `;

package/iconbox/IconBox.js

@@ -11,6 +11,7 @@ var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart
 var _bgImageRegistry = _interopRequireDefault(require("./bgImageRegistry"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const withAlpha = (hex, alphaHex) => hex ? `${hex}${alphaHex}` : undefined;
 const IconBox = _ref => {
   let {
     icon,
@@ -21,10 +22,37 @@ const IconBox = _ref => {
     sizeXS = true,
     sizeS = false,
     size,
+    iconSize,
     bgImageKey,
     gradientFrom,
-    gradientTo
+    gradientTo,
+    accentColor
   } = _ref;
+  if (accentColor) {
+    const circleSize = size || 60;
+    const innerIconSize = iconSize || Math.round(circleSize * 0.5);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentWrapper, {
+      accentColor: accentColor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
+        accentColor: accentColor,
+        circleSize: circleSize,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+          size: innerIconSize,
+          iconKey: iconKey,
+          iconColor: accentColor || iconColor,
+          src: icon,
+          alt: `${title}'s icon`
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextColumn, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+          accentColor: accentColor,
+          children: children
+        })]
+      })]
+    });
+  }
   const bgImage = bgImageKey && _bgImageRegistry.default[bgImageKey];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     bgImage: bgImage,
@@ -90,14 +118,76 @@ const IconBoxHead = _styledComponents.default.div`
   align-items: center;
   margin-bottom: var(--spacing);
 `;
+const AccentWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  background: ${_ref3 => {
+  let {
+    accentColor
+  } = _ref3;
+  return withAlpha(accentColor, '0D');
+}};
+  border: 2px solid ${_ref4 => {
+  let {
+    accentColor
+  } = _ref4;
+  return withAlpha(accentColor, '1A');
+}};
+`;
+const IconCircle = _styledComponents.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: ${_ref5 => {
+  let {
+    circleSize
+  } = _ref5;
+  return `${circleSize}px`;
+}};
+  height: ${_ref6 => {
+  let {
+    circleSize
+  } = _ref6;
+  return `${circleSize}px`;
+}};
+  flex-shrink: 0;
+  margin-right: var(--spacing-s);
+  background: ${_ref7 => {
+  let {
+    accentColor
+  } = _ref7;
+  return withAlpha(accentColor, '14');
+}};
+`;
+const TextColumn = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+`;
 const IconBoxTitle = _styledComponents.default.div`
   font-size: var(--font-h2);
   font-weight: bold;
+  line-height: 1.4;
   word-break: break-all;
 `;
 const IconBoxBody = _styledComponents.default.div`
   font-size: var(--font-h1);
   font-weight: bold;
-  text-align: center;
+  line-height: 1.3;
+  text-align: ${_ref8 => {
+  let {
+    accentColor
+  } = _ref8;
+  return accentColor ? 'left' : 'center';
+}};
+  color: ${_ref9 => {
+  let {
+    accentColor
+  } = _ref9;
+  return accentColor || 'inherit';
+}};
 `;
 var _default = exports.default = IconBox;

package/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Dropdown: true,
-  Icon: true,
   Tab: true,
   TabV2: true,
   VerticalTab: true
@@ -16,12 +15,6 @@ Object.defineProperty(exports, "Dropdown", {
     return _dropdown.default;
   }
 });
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function () {
-    return _Icon.default;
-  }
-});
 Object.defineProperty(exports, "Tab", {
   enumerable: true,
   get: function () {
@@ -292,7 +285,18 @@ Object.keys(_heading).forEach(function (key) {
     }
   });
 });
-var _Icon = _interopRequireDefault(require("./Icon"));
+var _icon = require("./icon");
+Object.keys(_icon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _icon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _icon[key];
+    }
+  });
+});
 var _iconbox = require("./iconbox");
 Object.keys(_iconbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/layout/Footer.js

@@ -12,7 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 Footer = _styledComponents.default.footer`
   transition: 0.3s;
-  border-top: var(--border-width) solid var(--border-color);
+  border-top: none;
   color: var(--font-on-mute);
   height: 64px;
   line-height: 64px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.49.0-beta.3",
+  "version": "0.49.0-beta.5",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/table/Table.js

@@ -44,7 +44,23 @@ const Table = _ref => {
     beforeCreateRow,
     popoverContainer,
     centerFooter = false,
-    showPager = true
+    showPager = true,
+    limitOptions = [{
+      id: 10,
+      text: '10'
+    }, {
+      id: 20,
+      text: '20'
+    }, {
+      id: 30,
+      text: '30'
+    }, {
+      id: 40,
+      text: '40'
+    }, {
+      id: 50,
+      text: '50'
+    }]
   } = _ref;
   const tableRef = (0, _react.useRef)(null);
   const {
@@ -304,22 +320,7 @@ const Table = _ref => {
           fill: true,
           fillReverse: backgroundReverse,
           allowSearch: false,
-          options: [{
-            id: 10,
-            text: '10'
-          }, {
-            id: 20,
-            text: '20'
-          }, {
-            id: 30,
-            text: '30'
-          }, {
-            id: 40,
-            text: '40'
-          }, {
-            id: 50,
-            text: '50'
-          }],
+          options: limitOptions,
           selected: limit,
           onSelect: onLimitChange
         })]