maxit-cli 0.1.0

package/registry/components/back-top/back-top.wxss

@@ -0,0 +1,77 @@
+@import '../common/style/index.wxss';
+
+.o-back-top {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+    transition: height .2s;
+    height: auto;
+}
+
+.o-back-top--fixed {
+    position: fixed;
+    right: var(--o-spacer,16rpx);
+    bottom: calc(var(--o-spacer-2,32rpx) + env(safe-area-inset-bottom));
+}
+
+.o-back-top--round,
+.o-back-top--round-dark {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: var(--o-back-top-round-border-radius,var(--o-radius-circle,50%));
+}
+
+.o-back-top--half-round,
+.o-back-top--round {
+    color: var(--o-back-top-round-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    border: 1rpx solid var(--o-back-top-round-border-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+    background-color: var(--o-back-top-round-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+}
+
+.o-back-top--half-round-dark,
+.o-back-top--round-dark {
+    color: var(--o-back-top-round-dark-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    background-color: var(--o-back-top-round-dark-bg-color,var(--o-gray-color-13,#242424));
+}
+
+.o-back-top--half-round,
+.o-back-top--half-round-dark {
+    width: 120rpx;
+    height: 80rpx;
+    border-radius: 0;
+    border-top-left-radius: var(--o-back-top-half-round-border-radius,var(--o-radius-round,999px));
+    border-bottom-left-radius: var(--o-back-top-half-round-border-radius,var(--o-radius-round,999px));
+    flex-direction: row;
+    right: 0;
+}
+
+.o-back-top__text--half-round,
+.o-back-top__text--half-round-dark,
+.o-back-top__text--round,
+.o-back-top__text--round-dark {
+    font-weight: 600;
+    font-size: var(--o-font-size,20rpx);
+    line-height: 24rpx;
+}
+
+.o-back-top__text--half-round,
+.o-back-top__text--half-round-dark {
+    width: 48rpx;
+}
+
+.o-back-top__icon:not(:empty)+.o-back-top__text--half-round,
+.o-back-top__icon:not(:empty)+.o-back-top__text--half-round-dark {
+    margin-left: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-back-top__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 44rpx;
+}
+

package/registry/components/back-top/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./back-top";

package/registry/components/back-top/props.js

@@ -0,0 +1 @@
+const props={fixed:{type:Boolean,value:!0},icon:{type:null,value:!0},scrollTop:{type:Number,value:0},text:{type:String,value:""},theme:{type:String,value:"round"},visibilityHeight:{type:Number,value:200}};export default props;

package/registry/components/badge/badge.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{uniqueFactory,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-badge`,getUniqueID=uniqueFactory("badge");let Badge=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-count`,`${prefix}-class-content`],this.properties=props,this.data={prefix:prefix,classPrefix:name,value:"",labelID:"",descriptionID:"",useOuterClass:!1},this.lifetimes={ready(){const e=getUniqueID();this.setData({labelID:`${e}_label`,descriptionID:`${e}_description`}),this.checkForActualContent()}},this.methods={checkForActualContent(){if(!this.properties.content&&["ribbon","ribbon-right","ribbon-left","triangle-right","triangle-left"].includes(this.properties.shape))return getRect(this,`.${name}__content`).then(e=>{const t=e.width>0||e.height>0;this.setData({useOuterClass:!t})});this.setData({useOuterClass:!1})}}}};Badge=__decorate([wxComponent()],Badge);export default Badge;

package/registry/components/badge/badge.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}

package/registry/components/badge/badge.wxml

@@ -0,0 +1 @@
+<wxs src="./badge.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{ useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class" aria-labelledby="{{labelID}}" aria-describedby="{{descriptionID}}" aria-role="{{ ariaRole || 'option'}}"><view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true"><slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot"/><text wx:else class="{{classPrefix}}__content-text">{{content}}</text></view><view aria-hidden="true" aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}" wx:if="{{_this.isShowBadge({dot,count,showZero}) || count === null}}" id="{{descriptionID}}" class="{{_this.getBadgeInnerClass({classPrefix, dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count" style="{{_._style([_this.getBadgeStyles({color, offset})])}}" aria-hidden="true" aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"><view class="{{classPrefix}}__count"><block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">{{ _this.getBadgeValue({dot, count, maxCount}) }}</block><slot else name="count"/></view></view></view>

package/registry/components/badge/badge.wxs

@@ -0,0 +1,64 @@
+var getBadgeValue = function (props) {
+  if (props.dot) {
+    return '';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    return props.count;
+  }
+  return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
+};
+
+var hasUnit = function (unit) {
+  return (
+    unit.indexOf('px') > 0 ||
+    unit.indexOf('rpx') > 0 ||
+    unit.indexOf('em') > 0 ||
+    unit.indexOf('rem') > 0 ||
+    unit.indexOf('%') > 0 ||
+    unit.indexOf('vh') > 0 ||
+    unit.indexOf('vm') > 0
+  );
+};
+
+var getBadgeStyles = function (props) {
+  var styleStr = '';
+  if (props.color) {
+    styleStr += 'background:' + props.color + ';';
+  }
+  if (props.offset[0]) {
+    styleStr +=
+      'left: calc(100% + ' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ');';
+  }
+  if (props.offset[1]) {
+    styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
+  }
+  return styleStr;
+};
+
+var getBadgeInnerClass = function (props) {
+  var baseClass = props.classPrefix;
+  var classNames = [
+    baseClass + '--basic',
+    props.dot ? baseClass + '--dot' : '',
+    baseClass + '--' + props.size,
+    baseClass + '--' + props.shape,
+    !props.dot ? baseClass + '--count' : '',
+  ];
+  return classNames.join(' ');
+};
+
+var isShowBadge = function (props) {
+  if (props.dot) {
+    return true;
+  }
+  if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
+    return false;
+  }
+  if (props.count == null) return false;
+  return true;
+};
+
+module.exports.getBadgeValue = getBadgeValue;
+module.exports.getBadgeStyles = getBadgeStyles;
+module.exports.getBadgeInnerClass = getBadgeInnerClass;
+module.exports.isShowBadge = isShowBadge;

package/registry/components/badge/badge.wxss

@@ -0,0 +1,168 @@
+@import '../common/style/index.wxss';
+
+.o-badge {
+    position: relative;
+    display: inline-flex;
+    align-items: start;
+}
+
+.o-badge--basic {
+    z-index: 100;
+    padding: 0 var(--o-badge-basic-padding,calc(var(--o-spacer,16rpx)/ 2));
+    font: var(--o-badge-font,var(--o-font-mark-extraSmall,600 20rpx / 32rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    color: var(--o-badge-text-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    background-color: var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+    text-align: center;
+    height: var(--o-badge-basic-height,32rpx);
+    border-radius: var(--o-badge-border-radius,4rpx);
+}
+
+.o-badge--dot {
+    height: var(--o-badge-dot-size,16rpx);
+    border-radius: var(--o-radius-circle,50%);
+    min-width: var(--o-badge-dot-size,16rpx);
+    padding: 0;
+}
+
+.o-badge--count {
+    min-width: var(--o-badge-basic-width,32rpx);
+    white-space: nowrap;
+    box-sizing: border-box;
+}
+
+.o-badge--circle {
+    border-radius: calc(var(--o-badge-basic-height,32rpx)/ 2);
+}
+
+.o-badge__ribbon-left-outer,
+.o-badge__ribbon-outer,
+.o-badge__ribbon-right-outer,
+.o-badge__triangle-left-outer,
+.o-badge__triangle-right-outer {
+    position: absolute;
+    top: 0;
+}
+
+.o-badge__ribbon-outer,
+.o-badge__ribbon-right-outer,
+.o-badge__triangle-right-outer {
+    right: 0;
+}
+
+.o-badge__ribbon-left-outer,
+.o-badge__triangle-left-outer {
+    left: 0;
+}
+
+.o-badge--bubble {
+    border-radius: var(--o-badge-bubble-border-radius,20rpx 20rpx 20rpx 1px);
+}
+
+.o-badge--ribbon,
+.o-badge--ribbon-left,
+.o-badge--ribbon-right,
+.o-badge--triangle-left,
+.o-badge--triangle-right {
+    width: calc(var(--o-badge-basic-height,32rpx) * 2);
+    height: calc(var(--o-badge-basic-height,32rpx) * 2);
+    border-radius: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.o-badge--ribbon,
+.o-badge--ribbon-right {
+    background: linear-gradient(45deg,transparent 50%,var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))) 50%,var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))) 85%,transparent 85%);
+}
+
+.o-badge--triangle-right {
+    background: linear-gradient(45deg,transparent 50%,var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))) 50%);
+}
+
+.o-badge--ribbon,
+.o-badge--ribbon-right,
+.o-badge--triangle-right {
+    right: 0;
+}
+
+.o-badge--ribbon .o-badge__count,
+.o-badge--ribbon-right .o-badge__count,
+.o-badge--triangle-right .o-badge__count {
+    transform: rotate(45deg) translateY(calc(-1 * var(--o-line-height-mark-extraSmall,32rpx)/ 2 + 1rpx));
+}
+
+.o-badge--ribbon-left {
+    background: linear-gradient(-45deg,transparent 50%,var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))) 50%,var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))) 85%,transparent 85%);
+}
+
+.o-badge--triangle-left {
+    background: linear-gradient(-45deg,transparent 50%,var(--o-badge-bg-color,var(--o-error-color,var(--o-error-color-6,#cd3c14))) 50%);
+}
+
+.o-badge--ribbon-left,
+.o-badge--triangle-left {
+    left: 0;
+}
+
+.o-badge--ribbon-left .o-badge__count,
+.o-badge--triangle-left .o-badge__count {
+    transform: rotate(-45deg) translateY(calc(-1 * var(--o-line-height-mark-extraSmall,32rpx)/ 2 + 1rpx));
+}
+
+.o-badge--large {
+    font: var(--o-badge-large-font,var(--o-font-mark-small,600 24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    height: var(--o-badge-large-height,40rpx);
+    min-width: var(--o-badge-large-height,40rpx);
+    padding: 0 var(--o-badge-large-padding,10rpx);
+}
+
+.o-badge--large.o-badge--circle {
+    border-radius: calc(var(--o-badge-large-height,40rpx)/ 2);
+}
+
+.o-badge--large.o-badge--ribbon,
+.o-badge--large.o-badge--ribbon-left,
+.o-badge--large.o-badge--ribbon-right,
+.o-badge--large.o-badge--triangle-left,
+.o-badge--large.o-badge--triangle-right {
+    width: calc(var(--o-badge-large-height,40rpx) * 2);
+    height: calc(var(--o-badge-large-height,40rpx) * 2);
+    padding: 0;
+}
+
+.o-badge--large.o-badge--ribbon .o-badge__count,
+.o-badge--large.o-badge--ribbon-right .o-badge__count,
+.o-badge--large.o-badge--triangle-right .o-badge__count {
+    transform: rotate(45deg) translateY(calc(-1 * var(--o-line-height-mark-small,40rpx)/ 2 + 3rpx));
+}
+
+.o-badge--large.o-badge--ribbon-left .o-badge__count,
+.o-badge--large.o-badge--triangle-left .o-badge__count {
+    transform: rotate(-45deg) translateY(calc(-1 * var(--o-line-height-mark-small,40rpx)/ 2 + 3rpx));
+}
+
+.o-badge__content:not(:empty)+.o-badge--bubble.o-has-count,
+.o-badge__content:not(:empty)+.o-badge--circle.o-has-count,
+.o-badge__content:not(:empty)+.o-badge--square.o-has-count {
+    transform-origin: center center;
+    transform: translate(-50%,-50%);
+    position: absolute;
+    top: 0;
+    left: 100%;
+}
+
+.o-badge__content-text {
+    display: block;
+    font: var(--o-badge-content-text-font,var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    color: var(--o-badge-content-text-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-badge__count:empty {
+    display: none;
+}
+

package/registry/components/badge/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./badge";

package/registry/components/badge/props.js

@@ -0,0 +1 @@
+const props={color:{type:String,value:""},content:{type:String,value:""},count:{type:null,value:0},dot:{type:Boolean,value:!1},maxCount:{type:Number,value:99},offset:{type:Array},shape:{type:String,value:"circle"},showZero:{type:Boolean,value:!1},size:{type:String,value:"medium"}};export default props;

package/registry/components/balance-card/balance-card.js

@@ -0,0 +1,34 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+const { prefix } = config;
+const name = `${prefix}-balance-card`;
+
+let BalanceCard = class BalanceCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    // `hidden` is controlled when bound, otherwise starts from `defaultHidden`
+    this.controlledProps = [{ key: 'hidden', event: 'visible-change' }];
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onToggle() {
+        const hidden = !this.properties.hidden;
+        this._trigger('visible-change', { hidden });
+      },
+      onAction(e) {
+        const { index } = e.currentTarget.dataset;
+        this.triggerEvent('action', { index, action: this.properties.actions[index] });
+      },
+      onFooter() {
+        this.triggerEvent('footer-click', { footer: this.properties.footer });
+      },
+    };
+  }
+};
+BalanceCard = __decorate([wxComponent()], BalanceCard);
+export default BalanceCard;

package/registry/components/balance-card/balance-card.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"o-icon":"../icon/icon"}}

package/registry/components/balance-card/balance-card.wxml

@@ -0,0 +1,33 @@
+<view class="{{classPrefix}} class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="{{classPrefix}}__body">
+    <view wx:if="{{title}}" class="{{classPrefix}}__title">{{title}}</view>
+    <view class="{{classPrefix}}__balance">
+      <text class="{{classPrefix}}__amount">{{hidden ? '******' : amount}}</text>
+      <text wx:if="{{currency}}" class="{{classPrefix}}__currency">{{currency}}</text>
+      <o-icon name="{{hidden ? 'browse' : 'browse-off'}}" o-class="{{classPrefix}}__eye" aria-role="button" aria-label="{{hidden ? 'Afficher le solde' : 'Masquer le solde'}}" bind:click="onToggle" />
+    </view>
+    <view wx:if="{{actions.length}}" class="{{classPrefix}}__actions">
+      <view wx:for="{{actions}}" wx:key="index" class="{{classPrefix}}__action" data-index="{{index}}" bind:tap="onAction">
+        <view class="{{classPrefix}}__action-icon">
+          <o-icon name="{{item.icon}}" size="56rpx" />
+        </view>
+        <text class="{{classPrefix}}__action-label">{{item.label}}</text>
+      </view>
+    </view>
+    <slot />
+  </view>
+  <view wx:if="{{footer}}" class="{{classPrefix}}__footer" bind:tap="onFooter">
+    <o-icon wx:if="{{footer.icon}}" name="{{footer.icon}}" o-class="{{classPrefix}}__footer-icon" />
+    <view class="{{classPrefix}}__footer-content">
+      <view wx:if="{{footer.label}}" class="{{classPrefix}}__footer-label">{{footer.label}}</view>
+      <view wx:if="{{footer.amount}}" class="{{classPrefix}}__footer-amount">
+        <text>{{hidden ? '******' : footer.amount}}</text>
+        <text class="{{classPrefix}}__footer-currency">{{footer.currency || currency}}</text>
+      </view>
+    </view>
+    <view wx:if="{{footer.action}}" class="{{classPrefix}}__footer-action">
+      <text>{{footer.action}}</text>
+      <o-icon name="chevron-right" />
+    </view>
+  </view>
+</view>

package/registry/components/balance-card/balance-card.wxss

@@ -0,0 +1,111 @@
+@import '../common/style/index.wxss';
+
+/* Balance card (Figma "Card_L_Balance"): 328px wide, radius 12px, surface primary-fixed (#242424),
+ * white texts, 56px shortcut buttons on primary-fixed-dim (#3e3e3e), footer row with an orange action. */
+.o-balance-card {
+    display: block;
+    border-radius: var(--o-balance-card-radius, 24rpx);
+    overflow: hidden;
+    background-color: var(--o-balance-card-bg-color, var(--o-static-primary-fixed, #242424));
+    color: var(--o-static-on-primary-fixed, #fff);
+}
+
+.o-balance-card__body {
+    padding: 32rpx 32rpx 24rpx;
+    text-align: center;
+}
+
+.o-balance-card__title {
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-balance-card__balance {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    margin-top: 8rpx;
+}
+
+.o-balance-card__amount {
+    font: var(--o-type-headline-small-custom1, 700 48rpx / 64rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-balance-card__currency {
+    margin-left: 8rpx;
+    font: var(--o-type-label-large, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-balance-card__eye {
+    margin-left: 24rpx;
+    font-size: 48rpx;
+    align-self: center;
+}
+
+.o-balance-card__actions {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 32rpx;
+}
+
+.o-balance-card__action {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+    flex: 1;
+}
+
+.o-balance-card__action-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 112rpx;
+    height: 112rpx;
+    border-radius: 24rpx;
+    background-color: var(--o-balance-card-action-bg-color, var(--o-static-primary-fixed-dim, #3e3e3e));
+    color: var(--o-static-on-primary-fixed, #fff);
+}
+
+.o-balance-card__action-label {
+    margin-top: 12rpx;
+    font: var(--o-type-label-large, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-balance-card__footer {
+    display: flex;
+    align-items: center;
+    padding: 20rpx 32rpx;
+    background-color: var(--o-balance-card-footer-bg-color, var(--o-static-primary-fixed-dim, #3e3e3e));
+}
+
+.o-balance-card__footer-icon {
+    font-size: 48rpx;
+    color: var(--o-brand-color, #f16e00);
+}
+
+.o-balance-card__footer-content {
+    flex: 1;
+    min-width: 0;
+    margin-left: 24rpx;
+}
+
+.o-balance-card__footer-label {
+    font: var(--o-type-body-small, 400 24rpx / 32rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-static-on-primary-fixed-variant, #dedede);
+}
+
+.o-balance-card__footer-amount {
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-balance-card__footer-currency {
+    margin-left: 8rpx;
+    font: var(--o-type-label-medium, 500 24rpx / 32rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-balance-card__footer-action {
+    display: flex;
+    align-items: center;
+    color: var(--o-brand-color, #f16e00);
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}

package/registry/components/balance-card/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './balance-card';

package/registry/components/balance-card/props.js

@@ -0,0 +1,14 @@
+// o-balance-card: balance card of the Max it design system (Figma "Card_L_Balance").
+const props = {
+  title: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+  // Amount masked ("******") with an eye button to show it
+  hidden: { type: Boolean, value: null },
+  defaultHidden: { type: Boolean, value: false },
+  // Shortcut buttons: [{ icon, label }]
+  actions: { type: Array, value: [] },
+  // Bottom row (last transaction...): { icon, label, amount, currency, action }
+  footer: { type: Object, value: null },
+};
+export default props;

package/registry/components/balance-thumb-card/balance-thumb-card.js

@@ -0,0 +1,39 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+const { prefix } = config;
+const name = `${prefix}-balance-thumb-card`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  hidden(value) { this.setData({ _hidden: value }); },
+};
+
+let BalanceThumbCard = class BalanceThumbCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _hidden: false };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onEye() {
+        const hidden = !this.data._hidden;
+        this.setData({ _hidden: hidden });
+        this.triggerEvent('visible-change', { hidden });
+      },
+      onTap() { this.triggerEvent('click'); },
+    };
+  }
+};
+BalanceThumbCard = __decorate([wxComponent()], BalanceThumbCard);
+export default BalanceThumbCard;

package/registry/components/balance-thumb-card/balance-thumb-card.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"o-icon":"../icon/icon"}}

package/registry/components/balance-thumb-card/balance-thumb-card.wxml

@@ -0,0 +1,26 @@
+<view class="o-surface o-surface--dark o-balance-thumb-card class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-pad o-row o-row--top">
+    <view class="o-grow">
+      <view wx:if="{{tag}}" class="o-pill o-pill--green o-balance-thumb-card__tag">{{tag}}</view>
+      <view wx:if="{{overline}}" class="o-txt-small">{{overline}}</view>
+      <view class="o-txt-title o-txt-title--1">{{title}}</view>
+      <view class="o-row">
+        <o-icon wx:if="{{eye}}" name="{{_hidden ? 'browse-off' : 'browse'}}" o-class="o-balance-thumb-card__eye" catch:click="onEye" />
+        <text class="o-amount">{{_hidden ? '******' : amount}}</text>
+        <text wx:if="{{unit}}" class="o-amount__currency">{{unit}}</text>
+      </view>
+      <view wx:if="{{supporting}}" class="o-txt-small">{{supporting}}</view>
+    </view>
+    <view class="o-balance-thumb-card__thumb">
+      <image wx:if="{{thumbnail}}" class="o-thumb__image" src="{{thumbnail}}" mode="aspectFill" />
+      <o-icon wx:else name="{{thumbnailIcon}}" />
+    </view>
+  </view>
+  <view wx:if="{{validUntil || asOf}}" class="o-footer-bar">
+    <o-icon name="history" o-class="o-balance-thumb-card__history" />
+    <view class="o-grow o-txt-small">
+      <view wx:if="{{validUntil}}">{{validUntil}}</view>
+      <view wx:if="{{asOf}}">{{asOf}}</view>
+    </view>
+  </view>
+</view>

package/registry/components/balance-thumb-card/balance-thumb-card.wxss

@@ -0,0 +1,31 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Balance card with right thumbnail (Figma "Balance card_right thumbnail"): tag, amount with eye, validity footer. */
+.o-balance-thumb-card__tag {
+    height: 40rpx;
+    margin-bottom: 12rpx;
+}
+
+.o-balance-thumb-card__eye {
+    margin-right: 12rpx;
+    font-size: 36rpx;
+}
+
+.o-balance-thumb-card__thumb {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 112rpx;
+    height: 112rpx;
+    margin-left: 24rpx;
+    font-size: 72rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+
+.o-balance-thumb-card__history {
+    margin-right: 24rpx;
+    font-size: 48rpx;
+}

package/registry/components/balance-thumb-card/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './balance-thumb-card';

package/registry/components/balance-thumb-card/props.js

@@ -0,0 +1,17 @@
+// o-balance-thumb-card: Balance card with right thumbnail (Figma "Balance card_right thumbnail"): tag, amount with eye, validity footer.
+const props = {
+  tag: { type: String, value: '' },
+  overline: { type: String, value: '' },
+  title: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  unit: { type: String, value: '' },
+  hidden: { type: Boolean, value: false },
+  // Eye button to show / hide the amount
+  eye: { type: Boolean, value: true },
+  supporting: { type: String, value: '' },
+  thumbnail: { type: String, value: '' },
+  thumbnailIcon: { type: String, value: 'image' },
+  validUntil: { type: String, value: '' },
+  asOf: { type: String, value: '' },
+};
+export default props;