@design-os-kit/components

Lit 3.x Web Components — 框架无关，8+ 组件，原生 FormData 集成

安装

npm install @design-os-kit/components

使用

原生 HTML

<script type="module">
  import '@design-os-kit/components';
</script>

<ds-button variant="solid">提交</ds-button>
<ds-input name="phone" type="tel" placeholder="手机号"></ds-input>
<ds-select name="city" placeholder="选择城市">
  <ds-option value="bj">北京</ds-option>
  <ds-option value="sh">上海</ds-option>
</ds-select>

表单集成（原生 FormData）

<form id="my-form">
  <ds-input name="email" type="email" required></ds-input>
  <ds-select name="plan" required>
    <ds-option value="pro">Pro</ds-option>
  </ds-select>
  <ds-button type="submit" variant="solid">提交</ds-button>
</form>

<script>
  document.getElementById('my-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    console.log(data.get('email')); // ✅ 自动获取值
    console.log(data.get('plan'));  // ✅ 无需手写 JS
  });
</script>

组件

| 组件 | 标签 | Variants | 大小 | 颜色 | |------|------|------|:---:|------| | Button | <ds-button> | solid/outline/ghost/destructive | sm/md/lg | 6 语义色 | | Input | <ds-input> | default/password/textarea | sm/md/lg | — | | Select | <ds-select> | default/multiple/searchable | sm/md/lg | — | | Card | <ds-card> | default/interactive/bordered | sm/md/lg | — | | Modal | <ds-modal> | default | sm/md/lg/fullscreen | — | | Table | <ds-table> | default | sm/md/lg | — | | Form | <ds-form> | default | — | — | | Tag | <ds-tag> | default/removable/dot | sm/md | 6 语义色 |

自定义 Token

组件使用 CSS Custom Properties (--ds-*)，可覆盖：

:root {
  --ds-color-primary-500: #2563eb;
  --ds-radius-md: 8px;
  --ds-font-size-base: 14px;
}

完整 token 列表：@design-os-kit/tokens/css

License

MIT