maxit-cli 0.1.0

package/registry/components/list-item/list-item.wxss

@@ -0,0 +1,110 @@
+@import '../common/style/index.wxss';
+
+/* List item (Figma "atom_list item", M3): 56px (1 line) / 72px (2 lines), padding 8/24/8/16, gap 16px. */
+.o-list-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: var(--o-list-item-height, 112rpx);
+    padding: var(--o-list-item-padding, 16rpx 48rpx 16rpx 32rpx);
+    background-color: var(--o-list-item-bg-color, var(--o-scheme-surface, #fff));
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-list-item--multi {
+    min-height: var(--o-list-item-multi-height, 144rpx);
+}
+
+.o-list-item--hover {
+    background-color: var(--o-list-item-hover-bg-color, var(--o-scheme-surface-variant, #eee));
+}
+
+.o-list-item--disabled {
+    opacity: .38;
+}
+
+.o-list-item--divider::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    transform: scaleY(.5);
+    background-color: var(--o-list-item-divider-color, var(--o-scheme-outline-variant, #ddd));
+}
+
+.o-list-item__leading,
+.o-list-item__trailing {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.o-list-item__leading {
+    margin-right: var(--o-list-item-gap, 32rpx);
+}
+
+.o-list-item__trailing {
+    margin-left: var(--o-list-item-gap, 32rpx);
+}
+
+.o-list-item__icon {
+    font-size: 48rpx;
+    color: var(--o-list-item-icon-color, var(--o-scheme-on-surface-variant, #444748));
+}
+
+.o-list-item__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: var(--o-list-item-avatar-bg-color, var(--o-scheme-secondary-container, #ffe2c9));
+    color: var(--o-scheme-on-secondary-container, #000);
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-list-item__image {
+    width: 112rpx;
+    height: 112rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+    background-color: var(--o-scheme-surface-variant, #eee);
+}
+
+.o-list-item__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.o-list-item__overline {
+    font: var(--o-type-label-medium, 500 24rpx / 32rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-on-surface-variant, #444748);
+}
+
+.o-list-item__title {
+    font: var(--o-type-body-large, 400 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-on-surface, #1c1b1f);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.o-list-item__description {
+    font: var(--o-type-body-medium, 400 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-on-surface-variant, #444748);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+.o-list-item__meta {
+    font: var(--o-type-label-small, 500 22rpx / 32rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-on-surface-variant, #444748);
+}

package/registry/components/list-item/props.js

@@ -0,0 +1,22 @@
+// o-list-item: list item of the Max it design system (Figma "atom_list item", Material 3).
+const props = {
+  // Texts
+  title: { type: String, value: '' },
+  overline: { type: String, value: '' },
+  description: { type: String, value: '' },
+  // Short text on the right (amount, date, "100+"...)
+  meta: { type: String, value: '' },
+  // Leading element: icon name, avatar (image url or initials) or thumbnail image url
+  leadingIcon: { type: String, value: '' },
+  avatar: { type: String, value: '' },
+  image: { type: String, value: '' },
+  // true when the `leading` slot is used (radio, checkbox, custom visual)
+  leading: { type: Boolean, value: false },
+  // Trailing element: icon name, or a chevron with `arrow`
+  trailingIcon: { type: String, value: '' },
+  arrow: { type: Boolean, value: false },
+  // Line under the item
+  divider: { type: Boolean, value: false },
+  disabled: { type: Boolean, value: false },
+};
+export default props;

package/registry/components/loading/index.js

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

package/registry/components/loading/loading.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";const{prefix:prefix}=config,name=`${prefix}-loading`;let Loading=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-text`,`${prefix}-class-indicator`],this.data={prefix:prefix,classPrefix:name,show:!0},this.options={multipleSlots:!0},this.properties=Object.assign({},props),this.timer=null,this.observers={loading(e){const{delay:t}=this.properties;this.timer&&clearTimeout(this.timer),e&&t?this.timer=setTimeout(()=>{this.setData({show:e}),this.timer=null},t):this.setData({show:e})}},this.lifetimes={detached(){clearTimeout(this.timer)}}}refreshPage(){this.triggerEvent("reload")}};Loading=__decorate([wxComponent()],Loading);export default Loading;

package/registry/components/loading/loading.json

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

package/registry/components/loading/loading.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle, show ? '' : 'display: none', inheritColor ? 'color: inherit' : ''])}}" class="class {{prefix}}-class {{classPrefix}} {{classPrefix + '--' + layout}} {{fullscreen ? classPrefix + '--fullscreen ' + classPrefix + '--overlay-' + overlay : ''}} {{textPlacement === 'top' ? classPrefix + '--text-top' : ''}}"><view wx:if="{{indicator}}" class="{{prefix}}-class-indicator {{classPrefix}}__spinner {{classPrefix}}__spinner--{{ theme }} {{reverse ? 'reverse' : ''}}" style="width: {{ _.addUnit(size) }}; height: {{ _.addUnit(size) }}; {{inheritColor ? 'color: inherit;' : ''}} {{indicator ? '' : 'display: none;'}} {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};" aria-role="{{ariaRole  || 'img'}}" aria-label="{{ ariaLabel || text || 'Chargement'  }}"><view wx:if="{{ theme === 'spinner' }}" wx:for="{{12}}" wx:key="index" class="{{classPrefix}}__dot {{classPrefix}}__dot-{{index}}"/><view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular"/><view wx:if="{{ theme === 'ring' }}" class="{{classPrefix}}__ring"/><block wx:if="{{ theme === 'dots' }}"><view class="{{classPrefix}}__dot" style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + 0 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"></view><view class="{{classPrefix}}__dot" style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 1 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"></view><view class="{{classPrefix}}__dot" style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 2 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"></view></block><slot name="indicator"/></view><view class="{{_.cls(classPrefix + '__text', [layout])}} {{prefix}}-class-text" aria-hidden="{{indicator}}" aria-label="{{ ariaLabel || text }}"><block wx:if="{{text}}">{{text}}</block><slot name="text"/><slot/></view></view>

package/registry/components/loading/loading.wxss

@@ -0,0 +1,281 @@
+@import '../common/style/index.wxss';
+
+.o-loading {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o-loading--fullscreen {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: var(--o-loading-z-index,3500);
+    background-color: var(--o-loading-full-bg-color,rgba(255,255,255,.6));
+}
+
+.o-loading__spinner {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    animation: rotate .8s linear infinite;
+    color: var(--o-loading-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-loading__spinner.reverse {
+    animation-name: rotateReverse;
+}
+
+.o-loading__spinner--spinner {
+    animation-timing-function: steps(12);
+    color: var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f));
+}
+
+.o-loading__spinner--spinner .o-loading__dot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.o-loading__spinner--spinner .o-loading__dot::before {
+    display: block;
+    width: 5rpx;
+    height: 25%;
+    margin: 0 auto;
+    background-color: var(--o-loading-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    border-radius: 40%;
+    content: ' ';
+}
+
+.o-loading__spinner--circular .o-loading__circular {
+    border-radius: 100%;
+    width: 100%;
+    height: 100%;
+    background: conic-gradient(from 180deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 60deg,currentColor 330deg,rgba(255,255,255,0) 360deg);
+    mask: radial-gradient(transparent calc(50% - 1rpx),#fff 50%);
+    -webkit-mask: radial-gradient(transparent calc(50% - 1rpx),#fff 50%);
+}
+
+.o-loading__spinner--dots {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    animation: none;
+}
+
+.o-loading__spinner--dots .o-loading__dot {
+    width: 20%;
+    height: 20%;
+    border-radius: var(--o-radius-circle,50%);
+    background-color: var(--o-loading-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    animation-duration: 1.8s;
+    animation-name: dotting;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+}
+
+.o-loading__text {
+    color: var(--o-loading-text-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    font: var(--o-loading-text-font,var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-loading__text--vertical:not(:first-child):not(:empty) {
+    margin-top: 12rpx;
+}
+
+.o-loading__text--horizontal:not(:first-child):not(:empty) {
+    margin-left: var(--o-spacer,16rpx);
+}
+
+.o-loading--vertical {
+    flex-direction: column;
+}
+
+.o-loading--horizontal {
+    flex-direction: row;
+    vertical-align: top;
+}
+
+@keyframes o-bar {
+    0% {
+        width: 0;
+    }
+    50% {
+        width: 70%;
+    }
+    100% {
+        width: 80%;
+    }
+}
+
+@keyframes o-bar-loaded {
+    0% {
+        height: 6rpx;
+        opacity: 1;
+        width: 90%;
+    }
+    50% {
+        height: 6rpx;
+        opacity: 1;
+        width: 100%;
+    }
+    100% {
+        height: 0;
+        opacity: 0;
+        width: 100%;
+    }
+}
+
+.o-loading__dot-1 {
+    transform: rotate(30deg);
+    opacity: 0;
+}
+
+.o-loading__dot-2 {
+    transform: rotate(60deg);
+    opacity: .08333333;
+}
+
+.o-loading__dot-3 {
+    transform: rotate(90deg);
+    opacity: .16666667;
+}
+
+.o-loading__dot-4 {
+    transform: rotate(120deg);
+    opacity: .25;
+}
+
+.o-loading__dot-5 {
+    transform: rotate(150deg);
+    opacity: .33333333;
+}
+
+.o-loading__dot-6 {
+    transform: rotate(180deg);
+    opacity: .41666667;
+}
+
+.o-loading__dot-7 {
+    transform: rotate(210deg);
+    opacity: .5;
+}
+
+.o-loading__dot-8 {
+    transform: rotate(240deg);
+    opacity: .58333333;
+}
+
+.o-loading__dot-9 {
+    transform: rotate(270deg);
+    opacity: .66666667;
+}
+
+.o-loading__dot-10 {
+    transform: rotate(300deg);
+    opacity: .75;
+}
+
+.o-loading__dot-11 {
+    transform: rotate(330deg);
+    opacity: .83333333;
+}
+
+.o-loading__dot-12 {
+    transform: rotate(360deg);
+    opacity: .91666667;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes rotateReverse {
+    from {
+        transform: rotate(360deg);
+    }
+    to {
+        transform: rotate(0);
+    }
+}
+
+@keyframes dotting {
+    0% {
+        opacity: .15;
+    }
+    1% {
+        opacity: .8;
+    }
+    33% {
+        opacity: .8;
+    }
+    34% {
+        opacity: .15;
+    }
+    100% {
+        opacity: .15;
+    }
+}
+
+.o-loading__spinner--ring .o-loading__ring {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: var(--o-loading-ring-width,16rpx) solid var(--o-loading-ring-track-color,#eeeeee);
+    border-top-color: currentColor;
+}
+
+.o-loading--vertical.o-loading--text-top {
+    flex-direction: column-reverse;
+}
+
+.o-loading--horizontal.o-loading--text-top {
+    flex-direction: row-reverse;
+}
+
+.o-loading--vertical.o-loading--text-top .o-loading__text--vertical:not(:empty) {
+    margin-top: 0;
+    margin-bottom: var(--o-loading-text-gap,48rpx);
+}
+
+.o-loading--horizontal.o-loading--text-top .o-loading__text--horizontal:not(:empty) {
+    margin-left: 0;
+    margin-right: var(--o-spacer,16rpx);
+}
+
+.o-loading--fullscreen .o-loading__text {
+    max-width: var(--o-loading-fullscreen-text-width,70%);
+    text-align: center;
+    font: var(--o-loading-fullscreen-text-font,28rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-loading--overlay-light {
+    background-color: var(--o-loading-overlay-light-bg,rgba(255,255,255,.85));
+}
+
+.o-loading--overlay-dark {
+    background-color: var(--o-loading-overlay-dark-bg,rgba(0,0,0,.5));
+}
+
+.o-loading--overlay-dark .o-loading__text {
+    color: var(--o-loading-overlay-dark-text-color,#fff);
+}
+

package/registry/components/loading/props.js

@@ -0,0 +1 @@
+const props={textPlacement:{type:String,value:"bottom"},overlay:{type:String,value:"light"},delay:{type:Number,value:0},duration:{type:Number,value:800},fullscreen:{type:Boolean,value:!1},indicator:{type:Boolean,value:!0},inheritColor:{type:Boolean,value:!1},layout:{type:String,value:"horizontal"},loading:{type:Boolean,value:!0},pause:{type:Boolean,value:!1},progress:{type:Number},reverse:{type:Boolean},size:{type:String,value:"20px"},text:{type:String},theme:{type:String,value:"circular"}};export default props;

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

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

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

@@ -0,0 +1,23 @@
+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}-main-card`;
+
+let MainCard = class MainCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onPrimary() { this.triggerEvent('primary'); },
+      onSecondary() { this.triggerEvent('secondary'); },
+    };
+  }
+};
+MainCard = __decorate([wxComponent()], MainCard);
+export default MainCard;

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

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

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

@@ -0,0 +1,37 @@
+<view class="o-surface {{dark ? 'o-surface--dark' : 'o-surface--outlined'}} o-main-card class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-main-card__media">
+    <image wx:if="{{image}}" class="o-main-card__image" src="{{image}}" mode="aspectFill" />
+    <o-icon wx:else name="image" o-class="o-main-card__placeholder" />
+    <view wx:if="{{logo}}" class="o-main-card__logo"><o-icon name="{{logo}}" /></view>
+    <view wx:if="{{tag}}" class="o-pill o-pill--black o-main-card__tag">{{tag}}</view>
+  </view>
+  <view class="o-pad">
+    <view class="o-row o-row--top">
+      <view class="o-thumb">
+        <image wx:if="{{thumbnail}}" class="o-thumb__image" src="{{thumbnail}}" mode="aspectFill" />
+        <o-icon wx:else name="{{thumbnailIcon}}" />
+      </view>
+      <view class="o-grow o-main-card__heading">
+        <view class="o-txt-title">{{title}}</view>
+        <view wx:if="{{subtitle}}" class="o-txt-body">{{subtitle}}</view>
+        <view wx:if="{{meta}}" class="o-txt-meta">{{meta}}</view>
+        <view wx:if="{{subtitle2}}" class="o-txt-body">{{subtitle2}}</view>
+      </view>
+    </view>
+    <view wx:if="{{description && variant !== 'promo'}}" class="o-txt-body o-main-card__description">{{description}}</view>
+    <view class="o-row o-main-card__bottom">
+      <view class="o-grow">
+        <view wx:if="{{supporting}}" class="o-txt-small">{{supporting}}</view>
+        <view wx:if="{{amount}}">
+          <text class="o-amount">{{amount}}</text><text class="o-amount__currency">{{currency}}</text>
+          <text wx:if="{{oldAmount}}" class="o-amount--old">{{oldAmount}} {{currency}}</text>
+        </view>
+      </view>
+      <o-button wx:if="{{variant === 'promo' && primaryText}}" theme="primary" bind:tap="onPrimary">{{primaryText}}</o-button>
+    </view>
+    <view wx:if="{{variant !== 'promo' && (primaryText || secondaryText)}}" class="o-main-card__actions">
+      <o-button wx:if="{{secondaryText}}" variant="outline" bind:tap="onSecondary">{{secondaryText}}</o-button>
+      <o-button wx:if="{{primaryText}}" theme="secondary" bind:tap="onPrimary">{{primaryText}}</o-button>
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,63 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Main card (Figma "Main Cards" > Main card): media, tag, thumbnail, texts, price and actions. */
+.o-main-card__media {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 256rpx;
+    background-color: var(--o-scheme-surface-variant, #eee);
+}
+
+.o-main-card__image {
+    width: 100%;
+    height: 100%;
+}
+
+.o-main-card__placeholder {
+    font-size: 128rpx;
+    color: var(--o-scheme-surface, #fff);
+}
+
+.o-main-card__logo {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 16rpx;
+    border: 2rpx solid var(--o-scheme-outline-variant, #ddd);
+    background-color: var(--o-scheme-surface, #fff);
+    color: var(--o-scheme-on-surface, #1c1b1f);
+    font-size: 48rpx;
+}
+
+.o-main-card__tag {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+}
+
+.o-main-card__heading {
+    margin-left: 24rpx;
+}
+
+.o-main-card__description {
+    margin-top: 24rpx;
+}
+
+.o-main-card__bottom {
+    margin-top: 24rpx;
+}
+
+.o-main-card__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16rpx;
+    margin-top: 32rpx;
+}

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

@@ -0,0 +1,24 @@
+// o-main-card: Main card (Figma "Main Cards" > Main card): media, tag, thumbnail, texts, price and actions.
+const props = {
+  // default: description + 2 buttons, promo: supporting text, old price and orange button
+  variant: { type: String, value: 'default' },
+  dark: { type: Boolean, value: false },
+  image: { type: String, value: '' },
+  // Icon shown in the white box at the top left of the media
+  logo: { type: String, value: '' },
+  tag: { type: String, value: '' },
+  thumbnail: { type: String, value: '' },
+  thumbnailIcon: { type: String, value: 'image' },
+  title: { type: String, value: '' },
+  subtitle: { type: String, value: '' },
+  meta: { type: String, value: '' },
+  subtitle2: { type: String, value: '' },
+  description: { type: String, value: '' },
+  supporting: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  oldAmount: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+  primaryText: { type: String, value: '' },
+  secondaryText: { type: String, value: '' },
+};
+export default props;

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

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

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

@@ -0,0 +1,23 @@
+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}-media-card`;
+
+let MediaCard = class MediaCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onTap() { this.triggerEvent('click'); },
+      onPlay() { this.triggerEvent('play'); },
+    };
+  }
+};
+MediaCard = __decorate([wxComponent()], MediaCard);
+export default MediaCard;

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

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

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

@@ -0,0 +1,11 @@
+<view class="o-surface o-media-card class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-media-card__media">
+    <image wx:if="{{image}}" class="o-media-card__image" src="{{image}}" mode="aspectFill" />
+    <o-icon wx:else name="image" o-class="o-media-card__placeholder" />
+    <view wx:if="{{play}}" class="o-media-card__play" catch:tap="onPlay"><o-icon name="play" /></view>
+  </view>
+  <view class="o-media-card__bar">
+    <view class="o-txt-title">{{title}}</view>
+    <view wx:if="{{subtitle}}" class="o-media-card__subtitle">{{subtitle}}</view>
+  </view>
+</view>

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

@@ -0,0 +1,51 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Media card (Figma "Main Cards" > Media card): picture, play button, title bar at the bottom. */
+.o-media-card {
+    position: relative;
+    background-color: var(--o-scheme-surface-variant, #eee);
+}
+
+.o-media-card__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300rpx;
+}
+
+.o-media-card__image {
+    width: 100%;
+    height: 100%;
+}
+
+.o-media-card__placeholder {
+    font-size: 160rpx;
+    color: var(--o-scheme-surface, #fff);
+}
+
+.o-media-card__play {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+    background-color: #fff;
+    color: #000;
+    font-size: 40rpx;
+}
+
+.o-media-card__bar {
+    padding: 20rpx 32rpx;
+    background-color: var(--o-static-primary-fixed, #242424);
+    color: #fff;
+}
+
+.o-media-card__subtitle {
+    font: var(--o-type-body-small, 400 24rpx / 32rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-static-on-primary-fixed-variant, #dedede);
+}