maxit-cli 0.1.0

package/registry/components/common/typography/typography.wxs

@@ -0,0 +1,49 @@
+/* typography 公共计算逻辑 */
+
+/* 计算省略内容的内联样式 */
+function ellipsisStyle(ellipsis, isExpanded) {
+  if (!ellipsis || isExpanded) return '';
+  var row = typeof ellipsis === 'object' && ellipsis.row ? ellipsis.row : 1;
+  return (
+    'overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:' +
+    row +
+    ';-webkit-box-orient:vertical;'
+  );
+}
+
+/* 计算外层容器 class */
+function wrapperClass(classPrefix, ellipsis) {
+  if (ellipsis) {
+    return classPrefix + '__ellipsis-wrapper';
+  }
+  return '';
+}
+
+/* 根据装饰属性拼接内层 class */
+function decorClass(classPrefix, strong, underline, del, code, mark, keyboard, italic) {
+  var list = [];
+  if (strong) list.push(classPrefix + '--strong');
+  if (underline) list.push(classPrefix + '--underline');
+  if (del) list.push(classPrefix + '--delete');
+  if (code) list.push(classPrefix + '--code');
+  if (mark) list.push(classPrefix + '--mark');
+  if (keyboard) list.push(classPrefix + '--keyboard');
+  if (italic) list.push(classPrefix + '--italic');
+  return list.join(' ');
+}
+
+/* mark 自定义颜色 */
+function markStyle(mark) {
+  if (!mark || mark === true || mark === 'true') return '';
+  if (mark && mark !== 'false' && mark !== false) {
+    return 'background-color:' + mark + ';';
+  }
+  return '';
+}
+
+module.exports = {
+  ellipsisStyle: ellipsisStyle,
+  wrapperClass: wrapperClass,
+  decorClass: decorClass,
+  markStyle: markStyle,
+};

package/registry/components/common/utils.js

@@ -0,0 +1 @@
+import{prefix}from"./config";import{isString,isNumeric,isDef,isBoolean,isObject}from"./validator";import{getWindowInfo,getAppBaseInfo,getDeviceInfo}from"./wechat";export const systemInfo=getWindowInfo();export const appBaseInfo=getAppBaseInfo();export const deviceInfo=getDeviceInfo();export const debounce=function(e,t=500){let n;return function(...o){n&&clearTimeout(n),n=setTimeout(()=>{e.apply(this,o)},t)}};export const throttle=(e,t=100,n=null)=>{let o=0,r=null;return n||(n={leading:!0}),function(...c){const s=Date.now();o||n.leading||(o=s);const i=this;t-(s-o)<=0&&(r&&(clearTimeout(r),r=null),o=s,e.apply(i,c))}};export const classNames=function(...e){const t={}.hasOwnProperty,n=[];return e.forEach(e=>{if(!e)return;const o=typeof e;if("string"===o||"number"===o)n.push(e);else if(Array.isArray(e)&&e.length){const t=classNames(...e);t&&n.push(t)}else if("object"===o)for(const o in e)t.call(e,o)&&e[o]&&n.push(o)}),n.join(" ")};export const styles=function(e){return Object.keys(e).map(t=>`${t}: ${e[t]}`).join("; ")};export const getAnimationFrame=function(e,t){return e.createSelectorQuery().selectViewport().boundingClientRect().exec(()=>{t()})};export const getRect=function(e,t,n=!1){return new Promise((o,r)=>{e.createSelectorQuery()[n?"selectAll":"select"](t).boundingClientRect(e=>{e?o(e):r(e)}).exec()})};export const getTreeDepth=(e,t)=>e.reduce((e,n)=>n[null!=t?t:"children"]&&n[null!=t?t:"children"].length>0?Math.max(e,getTreeDepth(n[null!=t?t:"children"],t)+1):Math.max(e,1),0);export const isIOS=function(){var e;return!!((null===(e=null==deviceInfo?void 0:deviceInfo.system)||void 0===e?void 0:e.toLowerCase().search("ios"))+1)};export const isWxWork="wxwork"===(null==deviceInfo?void 0:deviceInfo.environment);export const isPC=["mac","windows"].includes(null==deviceInfo?void 0:deviceInfo.platform);export const addUnit=function(e){if(isDef(e))return e=String(e),isNumeric(e)?`${e}px`:e};export const getCharacterLength=(e,t,n)=>{const o=String(null!=t?t:"");if(0===o.length)return{length:0,characters:""};if("maxcharacter"===e){let e=0;for(let t=0;t<o.length;t+=1){let r=0;if(r=o.charCodeAt(t)>127||94===o.charCodeAt(t)?2:1,e+r>n)return{length:e,characters:o.slice(0,t)};e+=r}return{length:e,characters:o}}if("maxlength"===e){const e=o.length>n?n:o.length;return{length:e,characters:o.slice(0,e)}}return{length:o.length,characters:o}};export const chunk=(e,t)=>Array.from({length:Math.ceil(e.length/t)},(n,o)=>e.slice(o*t,o*t+t));export const getInstance=function(e,t){if(!e){const t=getCurrentPages(),n=t[t.length-1];e=n.$$basePage||n}const n=e?e.selectComponent(t):null;return n||(console.warn("未找到组件,请检查selector是否正确"),null)};export const unitConvert=e=>{var t;return"string"==typeof e?e.includes("rpx")?parseInt(e,10)*(null!==(t=null==systemInfo?void 0:systemInfo.screenWidth)&&void 0!==t?t:750)/750:parseInt(e,10):null!=e?e:0};export const toCamel=e=>e.replace(/-(\w)/g,(e,t)=>t.toUpperCase());export function toKebabCase(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z][a-z])/g,"$1-$2").replace(/([0-9])([a-zA-Z])/g,"$1-$2").toLowerCase()}export const getCurrentPage=function(){const e=getCurrentPages();return e[e.length-1]};export const uniqueFactory=e=>{let t=0;return()=>{const n=`${prefix}_${e}_${t}`;return t+=1,n}};export const calcIcon=(e,t)=>e&&(isBoolean(e)&&t||isString(e))?{name:isBoolean(e)?t:e}:isObject(e)?e:null;export const isOverSize=(e,t)=>{var n;if(!t)return!1;const o=1e3,r={B:1,KB:o,MB:1e6,GB:1e9};return e>("number"==typeof t?t*o:(null==t?void 0:t.size)*r[null!==(n=null==t?void 0:t.unit)&&void 0!==n?n:"KB"])};export const rpx2px=e=>Math.floor(systemInfo.windowWidth*e/750);export const nextTick=()=>new Promise(e=>{wx.nextTick(()=>{e()})});

package/registry/components/common/utils.wxs

@@ -0,0 +1,149 @@
+/* utils */
+
+/**
+ * addUnit */
+// 为 css 添加单位
+function addUnit(value) {
+  // prettier-ignore
+  var REGEXP = getRegExp('^-?\d+(.\d+)?$');
+  if (value == null) {
+    return undefined;
+  }
+  return REGEXP.test('' + value) ? value + 'px' : value;
+}
+
+function isString(string) {
+  return string && string.constructor === 'String';
+}
+
+function isArray(array) {
+  return array && array.constructor === 'Array';
+}
+
+function isObject(obj) {
+  return obj && obj.constructor === 'Object';
+}
+
+function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
+function isNoEmptyObj(obj) {
+  return isObject(obj) && JSON.stringify(obj) !== '{}';
+}
+
+function includes(arr, value) {
+  if (!arr || !isArray(arr)) return false;
+
+  var i = 0;
+  var len = arr.length;
+
+  for (; i < len; i++) {
+    if (arr[i] === value) return true;
+  }
+  return false;
+}
+
+function cls(base, arr) {
+  var res = [base];
+  var i = 0;
+  for (var size = arr.length; i < size; i++) {
+    var item = arr[i];
+
+    if (item && item.constructor === 'Array') {
+      var key = arr[i][0];
+      var value = arr[i][1];
+
+      if (value) {
+        res.push(base + '--' + key);
+      }
+    } else if (typeof item === 'string' || typeof item === 'number') {
+      if (item) {
+        res.push(base + '--' + item);
+      }
+    }
+  }
+  return res.join(' ');
+}
+
+function getBadgeAriaLabel(options) {
+  var maxCount = options.maxCount || 99;
+  if (options.dot) {
+    return 'Nouveau message';
+  }
+  if (options.count === '...') {
+    return 'Nombreux messages';
+  }
+  if (isNaN(options.count)) {
+    return options.count;
+  }
+  var str1 = maxCount + '+ messages';
+  var str2 = options.count + (Number(options.count) > 1 ? ' messages' : ' message');
+  return Number(options.count) > maxCount ? str1 : str2;
+}
+
+function endsWith(str, endStr) {
+  return str.slice(-endStr.length) === endStr ? str : str + endStr;
+}
+
+function keys(obj) {
+  return JSON.stringify(obj)
+    .replace(getRegExp('{|}|"', 'g'), '')
+    .split(',')
+    .map(function (item) {
+      return item.split(':')[0];
+    });
+}
+
+function kebabCase(str) {
+  return str
+    .replace(getRegExp('[A-Z]', 'g'), function (ele) {
+      return '-' + ele;
+    })
+    .toLowerCase();
+}
+
+function _style(styles) {
+  if (isArray(styles)) {
+    return styles
+      .filter(function (item) {
+        return item != null && item !== '';
+      })
+      .map(function (item) {
+        return isString(item) ? endsWith(item, ';') : _style(item);
+      })
+      .join(' ');
+  }
+
+  if (isObject(styles)) {
+    return keys(styles)
+      .filter(function (key) {
+        return styles[key] != null && styles[key] !== '';
+      })
+      .map(function (key) {
+        return [kebabCase(key), [styles[key]]].join(':');
+      })
+      .join(';');
+  }
+
+  return styles;
+}
+
+function isValidIconName(str) {
+  // prettier-ignore
+  return getRegExp('^[A-Za-z0-9\-\_]+$').test(str);
+}
+
+module.exports = {
+  addUnit: addUnit,
+  isString: isString,
+  isArray: isArray,
+  isObject: isObject,
+  isBoolean: isBoolean,
+  isNoEmptyObj: isNoEmptyObj,
+  includes: includes,
+  cls: cls,
+  getBadgeAriaLabel: getBadgeAriaLabel,
+  _style: _style,
+  isValidIconName: isValidIconName,
+};

package/registry/components/common/validator.js

@@ -0,0 +1 @@
+export function isFunction(t){return"function"==typeof t}export const isString=t=>"string"==typeof t;export const isNull=t=>null===t;export const isUndefined=t=>void 0===t;export function isDef(t){return!isUndefined(t)&&!isNull(t)}export function isInteger(t){return Number.isInteger(t)}export function isNumeric(t){return!Number.isNaN(Number(t))}export function isNumber(t){return"number"==typeof t}export function isBoolean(t){return"boolean"==typeof t}export function isObject(t){const e=typeof t;return null!==t&&("object"===e||"function"===e)}export function isPlainObject(t){return null!==t&&"object"==typeof t&&"[object Object]"===Object.prototype.toString.call(t)}export function isEmpty(t){return null==t||("string"==typeof t||Array.isArray(t)?0===t.length:t instanceof Map||t instanceof Set?0===t.size:"object"!=typeof t||0===Object.keys(t).length)}export function isDate(t,e){const r=Object.assign(Object.assign({},{format:"YYYY/MM/DD",delimiters:["/","-"],strictMode:!1}),e);if("string"==typeof t){const e=r.delimiters.find(t=>r.format.includes(t));if(!e)return!1;const n=r.format.split(e),i=t.split(e);if(n.length!==i.length)return!1;let o="",s="",u="";for(let t=0;t<n.length;t+=1){const e=n[t].toUpperCase(),r=i[t];e.includes("Y")?o=r:e.includes("M")?s=r:e.includes("D")&&(u=r)}if(1===s.length&&(s=`0${s}`),1===u.length&&(u=`0${u}`),2===o.length){const t=(new Date).getFullYear()%100;o=Number(o)<=t?`20${o}`:`19${o}`}const l=new Date(`${o}-${s}-${u}T00:00:00.000Z`);return l.getUTCFullYear()===Number(o)&&l.getUTCMonth()+1===Number(s)&&l.getUTCDate()===Number(u)}return!(r.strictMode||"[object Date]"!==Object.prototype.toString.call(t)||!Number.isFinite(t.getTime()))}export function isEmail(t){if("string"!=typeof t)return!1;if(t.length>254)return!1;const e=t.split("@");if(2!==e.length)return!1;const[r,n]=e;if(!r||r.length>64)return!1;if(!n)return!1;if(/^[-.]/.test(n)||/[-.]$/.test(n))return!1;if(!/^[a-zA-Z0-9.-]+$/.test(n))return!1;if(!n.includes("."))return!1;const i=n.split(".").pop();if(!i||i.length<2)return!1;return/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+$/.test(r)}export function isURL(t,e){if("string"!=typeof t)return!1;if(0===t.length||/\s/.test(t))return!1;if(t.length>2084)return!1;const r=Object.assign(Object.assign({},{protocols:["http","https","ftp"],require_tld:!0,require_protocol:!1,require_host:!0,allow_protocol_relative_urls:!1}),e);let n=t;const i=n.match(/^([a-z][a-z0-9+\-.]*):\/\//i);if(i){const t=i[1].toLowerCase();if(!r.protocols.includes(t))return!1;n=n.slice(i[0].length)}else if(r.require_protocol){if(!r.allow_protocol_relative_urls||!t.startsWith("//"))return!1;n=n.slice(2)}else if(t.startsWith("//")){if(!r.allow_protocol_relative_urls)return!1;n=n.slice(2)}if(!n&&r.require_host)return!1;const[o]=n.split(/[/?#]/);if(!o&&r.require_host)return!1;let s=o;s.includes("@")&&(s=s.split("@").pop()||"");let u=s;const l=s.match(/:(\d+)$/);if(l){const t=Number(l[1]);if(t<0||t>65535)return!1;u=s.slice(0,s.lastIndexOf(":"))}if(!u)return!1;const c=u.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/);if(c)return c.slice(1).every(t=>Number(t)>=0&&Number(t)<=255);if(u.startsWith("[")&&u.endsWith("]"))return!0;const f=u.split(".");if(r.require_tld&&f.length<2)return!1;if(f.some(t=>!t||t.length>63||(!/^[a-zA-Z0-9-]+$/.test(t)||!(!t.startsWith("-")&&!t.endsWith("-")))))return!1;if(r.require_tld){const t=f[f.length-1];if(/^\d+$/.test(t))return!1}return!0}

package/registry/components/common/wechat.js

@@ -0,0 +1 @@
+export const getObserver=(e,t)=>new Promise(o=>{e.createIntersectionObserver({nativeMode:!0}).relativeToViewport().observe(t,e=>{o(e)})});export const getWindowInfo=()=>wx.getWindowInfo&&wx.getWindowInfo()||wx.getSystemInfoSync();export const getAppBaseInfo=()=>wx.getAppBaseInfo&&wx.getAppBaseInfo()||wx.getSystemInfoSync();export const getDeviceInfo=()=>wx.getDeviceInfo&&wx.getDeviceInfo()||wx.getSystemInfoSync();

package/registry/components/consumption-card/consumption-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}-consumption-card`;
+
+let ConsumptionCard = class ConsumptionCard 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'); },
+      onAction() { this.triggerEvent('action'); },
+    };
+  }
+};
+ConsumptionCard = __decorate([wxComponent()], ConsumptionCard);
+export default ConsumptionCard;

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

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

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

@@ -0,0 +1,16 @@
+<view class="o-surface o-surface--outlined o-consumption-card o-consumption-card--{{color}} class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-pad">
+    <view class="o-row">
+      <o-icon name="{{icon}}" o-class="o-consumption-card__icon" />
+      <view class="o-grow" />
+      <o-icon wx:if="{{actionIcon}}" name="{{actionIcon}}" o-class="o-consumption-card__action" catch:click="onAction" />
+    </view>
+    <view class="o-txt-title o-txt-title--1 o-consumption-card__title">{{title}}</view>
+    <view class="o-consumption-card__value">
+      <text class="o-consumption-card__number">{{value}}</text>
+      <text class="o-amount__currency">{{unit}}</text>
+      <text wx:if="{{total}}" class="o-consumption-card__total">/{{total}} {{unit}}</text>
+    </view>
+    <view wx:if="{{supporting}}" class="o-txt-small">{{supporting}}</view>
+  </view>
+</view>

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

@@ -0,0 +1,36 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Consumption tile (Figma "Card_Consumption"): icon, title, used / total value, colored border. */
+.o-consumption-card {
+    width: var(--o-consumption-card-width, 312rpx);
+}
+
+.o-consumption-card--blue { border-color: var(--o-static-azure, #4bb4e6); }
+.o-consumption-card--orange { border-color: var(--o-scheme-primary, #f16e00); }
+.o-consumption-card--pink { border-color: var(--o-static-sakura, #ffb4e6); }
+.o-consumption-card--green { border-color: var(--o-static-jade, #50be87); }
+.o-consumption-card--purple { border-color: var(--o-static-lilac, #a885d8); }
+
+.o-consumption-card__icon {
+    font-size: 48rpx;
+}
+
+.o-consumption-card__action {
+    font-size: 40rpx;
+}
+
+.o-consumption-card__title {
+    margin-top: 16rpx;
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-consumption-card__number {
+    font: var(--o-type-headline-small-custom1, 700 48rpx / 64rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-consumption-card__total {
+    margin-left: 8rpx;
+    font: var(--o-type-label-large, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-on-surface-variant, #444748);
+}

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

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

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

@@ -0,0 +1,14 @@
+// o-consumption-card: Consumption tile (Figma "Card_Consumption"): icon, title, used / total value, colored border.
+const props = {
+  // default | blue | orange | pink | green | purple (border color)
+  color: { type: String, value: 'default' },
+  icon: { type: String, value: 'image' },
+  title: { type: String, value: '' },
+  value: { type: String, value: '' },
+  total: { type: String, value: '' },
+  unit: { type: String, value: '' },
+  supporting: { type: String, value: '' },
+  // Icon button at the top right
+  actionIcon: { type: String, value: '' },
+};
+export default props;

package/registry/components/contact-list/contact-list.js

@@ -0,0 +1,60 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+function initials(name) {
+  return (name || '').split(' ').filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join('');
+}
+const { prefix } = config;
+const name = `${prefix}-contact-list`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  contacts(list) {
+    const groups = {};
+    (list || []).slice().sort((a, b) => a.name.localeCompare(b.name)).forEach((contact) => {
+      const letter = (contact.name[0] || '#').toUpperCase();
+      (groups[letter] = groups[letter] || []).push({ ...contact, initials: initials(contact.name) });
+    });
+    this.setData({ _groups: Object.keys(groups).map((letter) => ({ letter, items: groups[letter] })) });
+  },
+  recent(list) {
+    this.setData({ _recent: (list || []).map((contact) => ({ ...contact, initials: initials(contact.name) })) });
+  },
+  value(list) {
+    this.setData({ _selected: (list || []).reduce((map, number) => ({ ...map, [number]: true }), {}) });
+  },
+};
+
+let ContactList = class ContactList extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _groups: [], _recent: [], _selected: {} };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onSelect(e) {
+        const { number, disabled } = e.currentTarget.dataset;
+        if (disabled) return;
+        const contact = this.properties.contacts.find((item) => item.number === number)
+          || this.properties.recent.find((item) => item.number === number);
+        this.triggerEvent('select', { contact });
+        if (!this.properties.selectable) return;
+        const selected = { ...this.data._selected, [number]: !this.data._selected[number] };
+        this.setData({ _selected: selected });
+        this.triggerEvent('change', { value: Object.keys(selected).filter((key) => selected[key]) });
+      },
+    };
+  }
+};
+ContactList = __decorate([wxComponent()], ContactList);
+export default ContactList;

package/registry/components/contact-list/contact-list.json

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

package/registry/components/contact-list/contact-list.wxml

@@ -0,0 +1,24 @@
+<view class="o-contact-list class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <o-section-title wx:if="{{title}}" title="{{title}}" />
+  <block wx:if="{{_recent.length}}">
+    <view class="o-txt-small o-contact-list__letter">{{recentTitle}}</view>
+    <view class="o-contact-list__recent">
+      <view wx:for="{{_recent}}" wx:key="number" class="o-contact-list__recent-item" data-number="{{item.number}}" bind:tap="onSelect">
+        <view class="o-contact-list__avatar o-contact-list__avatar--big">{{item.initials}}</view>
+        <text class="o-txt-small o-contact-list__recent-name">{{item.name}}</text>
+      </view>
+    </view>
+  </block>
+  <view wx:for="{{_groups}}" wx:for-item="group" wx:key="letter">
+    <view class="o-contact-list__letter">{{group.letter}}</view>
+    <view wx:for="{{group.items}}" wx:key="number" class="o-row o-contact-list__item {{item.disabled ? 'o-contact-list__item--disabled' : ''}}" data-number="{{item.number}}" data-disabled="{{item.disabled}}" bind:tap="onSelect">
+      <view class="o-contact-list__avatar">{{item.initials}}</view>
+      <view class="o-grow">
+        <view class="o-contact-list__name">{{item.name}}</view>
+        <view class="o-txt-small">{{item.number}}</view>
+        <view wx:if="{{item.disabled}}" class="o-contact-list__unavailable">Numéro indisponible</view>
+      </view>
+      <o-checkbox wx:if="{{selectable}}" checked="{{_selected[item.number]}}" disabled="{{item.disabled}}" />
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,73 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Contact list (Figma "Contact"): recent contacts, alphabetical groups, optional multi-selection. */
+.o-contact-list {
+    display: block;
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-contact-list__letter {
+    margin: 24rpx 0 8rpx;
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-contact-list__recent {
+    display: flex;
+    gap: 24rpx;
+    overflow-x: auto;
+}
+
+.o-contact-list__recent-item {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-items: center;
+    width: 128rpx;
+}
+
+.o-contact-list__recent-name {
+    width: 100%;
+    margin-top: 8rpx;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.o-contact-list__item {
+    padding: 16rpx 0;
+}
+
+.o-contact-list__item--disabled {
+    opacity: .5;
+}
+
+.o-contact-list__avatar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 80rpx;
+    height: 80rpx;
+    margin-right: 24rpx;
+    border-radius: 50%;
+    background-color: var(--o-scheme-primary, #f16e00);
+    color: var(--o-scheme-on-primary, #000);
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-contact-list__avatar--big {
+    width: 104rpx;
+    height: 104rpx;
+    margin-right: 0;
+}
+
+.o-contact-list__name {
+    font: var(--o-type-body-large, 400 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-contact-list__unavailable {
+    font: var(--o-type-label-small, 500 22rpx / 32rpx var(--o-font-family, Roboto, Arial));
+    color: var(--o-scheme-error, #cd3c14);
+}

package/registry/components/contact-list/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './contact-list';

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

@@ -0,0 +1,13 @@
+// o-contact-list: Contact list (Figma "Contact"): recent contacts, alphabetical groups, optional multi-selection.
+const props = {
+  title: { type: String, value: '' },
+  // [{ name, number, disabled }]
+  contacts: { type: Array, value: [] },
+  // Contacts shown in a horizontal row at the top
+  recent: { type: Array, value: [] },
+  recentTitle: { type: String, value: 'Récents' },
+  // Checkbox on each contact, selected numbers in `value`
+  selectable: { type: Boolean, value: false },
+  value: { type: Array, value: [] },
+};
+export default props;

package/registry/components/description-tile/description-tile.js

@@ -0,0 +1,22 @@
+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}-description-tile`;
+
+let DescriptionTile = class DescriptionTile 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'); },
+    };
+  }
+};
+DescriptionTile = __decorate([wxComponent()], DescriptionTile);
+export default DescriptionTile;

package/registry/components/description-tile/description-tile.json

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

package/registry/components/description-tile/description-tile.wxml

@@ -0,0 +1,11 @@
+<view class="o-surface o-surface--outlined o-description-tile o-description-tile--{{type}} class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-pad">
+    <view class="o-description-tile__icon"><o-icon name="{{icon}}" /></view>
+    <view class="o-txt-title o-txt-title--3">{{title}}</view>
+    <view wx:if="{{supporting}}" class="o-txt-body">{{supporting}}</view>
+    <block wx:if="{{type === 'wide' && text}}">
+      <view class="o-hr" />
+      <view class="o-txt-body o-description-tile__text">{{text}}</view>
+    </block>
+  </view>
+</view>

package/registry/components/description-tile/description-tile.wxss

@@ -0,0 +1,21 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Description tile (Figma "Card_Description"): icon, title up to 3 lines, supporting text, paragraph. */
+.o-description-tile {
+    width: var(--o-description-tile-width, 400rpx);
+}
+
+.o-description-tile--condensed {
+    width: var(--o-description-tile-condensed-width, 280rpx);
+}
+
+.o-description-tile__icon {
+    margin-bottom: 16rpx;
+    text-align: center;
+    font-size: 64rpx;
+}
+
+.o-description-tile__text {
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}

package/registry/components/description-tile/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './description-tile';

package/registry/components/description-tile/props.js

@@ -0,0 +1,10 @@
+// o-description-tile: Description tile (Figma "Card_Description"): icon, title up to 3 lines, supporting text, paragraph.
+const props = {
+  // wide (paragraph shown) or condensed
+  type: { type: String, value: 'wide' },
+  icon: { type: String, value: 'image' },
+  title: { type: String, value: '' },
+  supporting: { type: String, value: '' },
+  text: { type: String, value: '' },
+};
+export default props;

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

@@ -0,0 +1,38 @@
+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}-details-card`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  dots(count) { this.setData({ _dots: Array.from({ length: count || 0 }, (v, i) => i) }); },
+};
+
+let DetailsCard = class DetailsCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _dots: [] };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onTap() { this.triggerEvent('click'); },
+      onPlay() { this.triggerEvent('play'); },
+      onButton() { this.triggerEvent('primary'); },
+      onSecondary() { this.triggerEvent('secondary'); },
+      onLink() { this.triggerEvent('link'); },
+    };
+  }
+};
+DetailsCard = __decorate([wxComponent()], DetailsCard);
+export default DetailsCard;

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

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