@cashub/ui 0.49.0-beta.4 → 0.49.0-beta.6

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/Tab/TabTab.js

@@ -26,6 +26,7 @@ const TabTab = _ref => {
   } = (0, _react.useContext)(_TabContext.default);
   const [isModify, setIsModify] = (0, _react.useState)(false);
   const [currentTitle, setCurrentTitle] = (0, _react.useState)(title);
+  const active = selected === name;
   const handleClick = (0, _react.useCallback)(() => {
     if (selected !== name) {
       onChange(name);
@@ -63,35 +64,47 @@ const TabTab = _ref => {
     role: "tab",
     onClick: handleClick,
     onDoubleClick: handleDoubleClick,
-    active: selected === name,
+    active: active,
     ...props,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabLabel, {
+      active: active,
+      children: children
+    })
   });
 };
 const Tab = _styledComponents.default.div`
   background: transparent;
   padding: 10px var(--spacing-s);
   border: none;
-  border-bottom: 4px solid transparent;
 `;
 const ButtonTab = (0, _styledComponents.default)(Tab).attrs({
   as: 'button'
 })`
   color: var(--font-on-mute);
-  transition: color 0.3s, border 0.3s;
+  transition: color 0.3s;
   cursor: pointer;
-
   &:hover {
     color: var(--font-on-background);
   }
-
   ${_ref2 => {
   let {
     active
   } = _ref2;
+  return active && `
+      color: var(--color-primary);
+    `;
+}}
+`;
+const TabLabel = _styledComponents.default.span`
+  display: inline-block;
+  padding-bottom: 10px;
+  border-bottom: 4px solid transparent;
+  ${_ref3 => {
+  let {
+    active
+  } = _ref3;
   return active && `
       border-color: var(--color-primary);
-      color: var(--font-on-background);
     `;
 }}
 `;
@@ -101,5 +114,6 @@ const InputTab = (0, _styledComponents.default)(Tab).attrs({
   color: var(--font-on-background);
   border-color: var(--color-primary);
   outline: none;
+  border-bottom: 4px solid var(--color-primary);
 `;
 var _default = exports.default = TabTab;

package/icon/assets/info.jsx

@@ -0,0 +1,17 @@
+const InfoIcon = (props) => (
+  <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+    <g clipPath='url(#clip0_249_12353)'>
+      <path
+        d='M9 18C4.02975 18 0 13.9703 0 9C0 4.02975 4.02975 0 9 0C13.9703 0 18 4.02975 18 9C18 13.9703 13.9703 18 9 18ZM9 16.5C13.1422 16.5 16.5 13.1422 16.5 9C16.5 4.85775 13.1422 1.5 9 1.5C4.85775 1.5 1.5 4.85775 1.5 9C1.5 13.1422 4.85775 16.5 9 16.5ZM8.25 8.25C8.25 8.05109 8.32902 7.86032 8.46967 7.71967C8.61032 7.57902 8.80109 7.5 9 7.5C9.19891 7.5 9.38968 7.57902 9.53033 7.71967C9.67098 7.86032 9.75 8.05109 9.75 8.25V13.5C9.75 13.6989 9.67098 13.8897 9.53033 14.0303C9.38968 14.171 9.19891 14.25 9 14.25C8.80109 14.25 8.61032 14.171 8.46967 14.0303C8.32902 13.8897 8.25 13.6989 8.25 13.5V8.25ZM8.925 5.85C8.64652 5.85 8.37945 5.73938 8.18254 5.54246C7.98562 5.34555 7.875 5.07848 7.875 4.8C7.875 4.52152 7.98562 4.25445 8.18254 4.05754C8.37945 3.86062 8.64652 3.75 8.925 3.75C9.20348 3.75 9.47055 3.86062 9.66746 4.05754C9.86438 4.25445 9.975 4.52152 9.975 4.8C9.975 5.07848 9.86438 5.34555 9.66746 5.54246C9.47055 5.73938 9.20348 5.85 8.925 5.85Z'
+        fill='currentColor'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_249_12353'>
+        <rect width='18' height='18' fill='currentColor' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default InfoIcon;

package/icon/assets/redirect-portal.jsx

@@ -0,0 +1,17 @@
+const RedirectPortalIcon = () => (
+  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <g clipPath='url(#clip0_249_12351)'>
+      <path
+        d='M7.85672 2.14244V7.85672H2.14244V2.14244H7.85672ZM7.85672 0.713867H2.14244C1.35672 0.713867 0.713867 1.35672 0.713867 2.14244V7.85672C0.713867 8.64244 1.35672 9.2853 2.14244 9.2853H7.85672C8.64244 9.2853 9.2853 8.64244 9.2853 7.85672V2.14244C9.2853 1.35672 8.64244 0.713867 7.85672 0.713867ZM7.85672 12.1424V17.8567H2.14244V12.1424H7.85672ZM7.85672 10.7139H2.14244C1.35672 10.7139 0.713867 11.3567 0.713867 12.1424V17.8567C0.713867 18.6424 1.35672 19.2853 2.14244 19.2853H7.85672C8.64244 19.2853 9.2853 18.6424 9.2853 17.8567V12.1424C9.2853 11.3567 8.64244 10.7139 7.85672 10.7139ZM17.8567 2.14244V7.85672H12.1424V2.14244H17.8567ZM17.8567 0.713867H12.1424C11.3567 0.713867 10.7139 1.35672 10.7139 2.14244V7.85672C10.7139 8.64244 11.3567 9.2853 12.1424 9.2853H17.8567C18.6424 9.2853 19.2853 8.64244 19.2853 7.85672V2.14244C19.2853 1.35672 18.6424 0.713867 17.8567 0.713867ZM17.8567 12.1424V17.8567H12.1424V12.1424H17.8567ZM17.8567 10.7139H12.1424C11.3567 10.7139 10.7139 11.3567 10.7139 12.1424V17.8567C10.7139 18.6424 11.3567 19.2853 12.1424 19.2853H17.8567C18.6424 19.2853 19.2853 18.6424 19.2853 17.8567V12.1424C19.2853 11.3567 18.6424 10.7139 17.8567 10.7139Z'
+        fill='currentColor'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_249_12351'>
+        <rect width='20' height='20' fill='currentColor' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default RedirectPortalIcon;

package/icon/registry.js

@@ -42,6 +42,8 @@ var _key = _interopRequireDefault(require("./assets/key"));
 var _task = _interopRequireDefault(require("./assets/task"));
 var _priceChange = _interopRequireDefault(require("./assets/price-change"));
 var _productManagement = _interopRequireDefault(require("./assets/product-management"));
+var _redirectPortal = _interopRequireDefault(require("./assets/redirect-portal"));
+var _info = _interopRequireDefault(require("./assets/info"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconOverrides = {
   merchant: _merchant.default,
@@ -81,6 +83,8 @@ const iconOverrides = {
   key: _key.default,
   task: _task.default,
   'price-change': _priceChange.default,
-  'product-management': _productManagement.default
+  'product-management': _productManagement.default,
+  'redirect-portal': _redirectPortal.default,
+  info: _info.default
 };
 var _default = exports.default = iconOverrides;

package/iconbox/IconBox.js

@@ -4,13 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
 var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
 var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
 var _bgImageRegistry = _interopRequireDefault(require("./bgImageRegistry"));
 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 withAlpha = (hex, alphaHex) => hex ? `${hex}${alphaHex}` : undefined;
 const IconBox = _ref => {
   let {
     icon,
@@ -21,10 +25,47 @@ const IconBox = _ref => {
     sizeXS = true,
     sizeS = false,
     size,
+    iconSize,
     bgImageKey,
     gradientFrom,
-    gradientTo
+    gradientTo,
+    colors
   } = _ref;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  const mode = colors ? theme?.cardMode || 'accent' : 'image';
+  if (mode === 'accent' || mode === 'gradient') {
+    const accent = colors.accent;
+    const gradientEnd = colors.gradient || accent;
+    const borderColor = colors.border || accent;
+    const circleSize = size || 60;
+    const innerIconSize = iconSize || Math.round(circleSize * 0.5);
+    const iconColorFinal = mode === 'gradient' ? '#FFFFFF' : accent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentWrapper, {
+      mode: mode,
+      accent: accent,
+      gradientEnd: gradientEnd,
+      borderColor: borderColor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
+        mode: mode,
+        accent: accent,
+        circleSize: circleSize,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+          size: innerIconSize,
+          iconKey: iconKey,
+          iconColor: iconColorFinal,
+          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: accent,
+          children: children
+        })]
+      })]
+    });
+  }
   const bgImage = bgImageKey && _bgImageRegistry.default[bgImageKey];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     bgImage: bgImage,
@@ -53,6 +94,9 @@ const IconBox = _ref => {
     })]
   });
 };
+
+/* ---------- image 模式 ---------- */
+
 const Wrapper = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
@@ -90,14 +134,89 @@ const IconBoxHead = _styledComponents.default.div`
   align-items: center;
   margin-bottom: var(--spacing);
 `;
+
+/* ---------- accent / gradient 模式 ---------- */
+
+const AccentWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  ${_ref3 => {
+  let {
+    mode,
+    accent,
+    gradientEnd,
+    borderColor
+  } = _ref3;
+  if (mode === 'gradient') {
+    return `
+        background: linear-gradient(45deg, var(--color-background2), ${gradientEnd});
+        border: 2px solid ${borderColor};
+      `;
+  }
+  return `
+      background: ${withAlpha(accent, '0D')};
+      border: 2px solid ${withAlpha(accent, '1A')};
+    `;
+}}
+`;
+const IconCircle = _styledComponents.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: ${_ref4 => {
+  let {
+    circleSize
+  } = _ref4;
+  return `${circleSize}px`;
+}};
+  height: ${_ref5 => {
+  let {
+    circleSize
+  } = _ref5;
+  return `${circleSize}px`;
+}};
+  flex-shrink: 0;
+  margin-right: var(--spacing-s);
+  background: ${_ref6 => {
+  let {
+    mode,
+    accent
+  } = _ref6;
+  return mode === 'gradient' ? 'rgba(255, 255, 255, 0.2)' : withAlpha(accent, '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: ${_ref7 => {
+  let {
+    accentColor
+  } = _ref7;
+  return accentColor ? 'left' : 'center';
+}};
+  color: ${_ref8 => {
+  let {
+    accentColor
+  } = _ref8;
+  return accentColor || 'inherit';
+}};
 `;
 var _default = exports.default = IconBox;

package/iconbox/subComponent/IconBoxImage.js

@@ -69,7 +69,7 @@ const IconBoxImage = _ref6 => {
     ...rest
   } = _ref6;
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
-  const override = theme?.useModernIcons && iconKey && _registry.default[iconKey];
+  const override = theme?.useModernCardIcons && iconKey && _registry.default[iconKey];
   const IconComponent = override || icon;
   const isComponent = typeof IconComponent === 'function';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {

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/layout/Sidebar.jsx

@@ -203,6 +203,8 @@ const MenuItem = styled.li`
     props.active === true &&
     css`
       background: var(--color-active-sidebar);
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
     `};
 `;
 const MenuItemLink = styled(Link)`
@@ -244,12 +246,19 @@ const SubMenuItem = styled.li`
     padding: 0 calc(var(--spacing) * 2 + 1.5rem);
     padding-left: ${({ $level }) =>
       `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
-    height: 48px;
+    min-height: 48px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     ${({ active }) =>
       active === true &&
       css`
         background: var(--color-active-sidebar);
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
       `};
+    span {
+      line-height: 1.4;
+    }
   }
 `;
 const EmptyIcon = styled.span`

package/layout/bgMainRegistry.js

@@ -6,9 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _bgMain = _interopRequireDefault(require("../assets/images/bg-main.png"));
 var _bgMainVivid = _interopRequireDefault(require("../assets/images/bg-main-vivid.png"));
+var _bgMainDark = _interopRequireDefault(require("../assets/images/bg-main-dark.png"));
+var _bgMainLight = _interopRequireDefault(require("../assets/images/bg-main-light.png"));
+var _bgMainWhite = _interopRequireDefault(require("../assets/images/bg-main-white.png"));
+var _bgMainMidnight = _interopRequireDefault(require("../assets/images/bg-main-midnight.png"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const bgMainRegistry = {
   default: _bgMain.default,
-  vivid: _bgMainVivid.default
+  vivid: _bgMainVivid.default,
+  dark: _bgMainDark.default,
+  light: _bgMainLight.default,
+  white: _bgMainWhite.default,
+  midnight: _bgMainMidnight.default
 };
 var _default = exports.default = bgMainRegistry;

package/package.json

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

package/styles/theme/dark.theme.js

@@ -22,8 +22,11 @@ const colorStyle = {
   bgColor3: '#2d2a5d',
   bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'gradient',
+  bgMainKey: 'dark',
+  useModernCardIcons: true,
   useLightBrand: true,
-  hideMainDecoration: true
+  hideMainDecoration: false
 };
 
 // Common font style

package/styles/theme/ember.theme.js

@@ -21,7 +21,9 @@ const colorStyle = {
   bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useModernIcons: true,
+  useModernCardIcons: true,
   useLightBrand: true,
+  cardMode: 'accent',
   bgMainKey: 'vivid',
   colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
   colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',

package/styles/theme/light.theme.js

@@ -21,7 +21,9 @@ const colorStyle = {
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
   bgColor4: '#F8F4FF',
-  backdropBg: 'rgba(0, 0, 0, 0.75)'
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'light'
 };
 
 // Common font style

package/styles/theme/midnight.theme.js

@@ -20,6 +20,8 @@ const colorStyle = {
   bgColor3: '#EDEFF3',
   bgColor4: '#00255B',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'midnight',
   useModernIcons: false,
   useLightBrand: true,
   colorHoverSidebar: 'rgba(255, 255, 255, 0.12)',

package/styles/theme/white.theme.js

@@ -22,10 +22,11 @@ const colorStyle = {
   bgColor3: '#FFFFFF',
   bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'white',
   useModernIcons: false,
   useLightBrand: false,
-  hideMainDecoration: false,
-  bgMainKey: 'default'
+  hideMainDecoration: false
 };
 
 // Common font style

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
         })]