@design-os/react

Design OS Web Components → React 包装（@lit/react 桥接），类型安全，零运行时开销

安装

npm install @design-os/react @design-os/components

使用

import { Button, Input, Tag, Card, Select, Modal, Table, Form } from '@design-os/react';

function MyPage() {
  return (
    <Card variant="bordered" size="lg">
      <Form onSubmit={(e) => console.log(e.detail)}>
        <Input name="phone" type="tel" placeholder="手机号" required />
        <Select name="plan" placeholder="选择套餐">
          <option value="pro">Pro</option>
          <option value="ent">Enterprise</option>
        </Select>
        <Button variant="solid" type="submit">
          提交
        </Button>
      </Form>

      <Tag color="success" variant="dot">活跃客户</Tag>
      <Tag color="warning" removable onDsRemove={() => console.log('removed')}>
        待跟进
      </Tag>
    </Card>
  );
}

事件映射

| DOM 事件 | React Prop | |------|------| | ds-click | onDsClick | | ds-change | onDsChange | | ds-input | onDsInput | | ds-submit | onDsSubmit | | ds-open / ds-close | onDsOpen / onDsClose | | ds-select | onDsSelect | | ds-remove | onDsRemove |

TypeScript

所有组件自带 .d.ts 类型，Props 完全类型安全：

<Button
  variant="solid"       // ✅ 'solid' | 'outline' | 'ghost' | 'destructive'
  size="lg"             // ✅ 'sm' | 'md' | 'lg'
  disabled={false}      // ✅ boolean
/>

License

MIT