npm package: @michelleyuan1111/kmui-system
Description: KMUI Design System - A comprehensive React component library with design tokens based on Figma variables
Author: micheleyuan
Latest version: 1.0.4

# KMUI Design System

<div align="center">

**A comprehensive React component library with custom design tokens and themed TDesign components**

[![npm version](https://img.shields.io/npm/v/@michelleyuan1111/kmui-system.svg)](https://www.npmjs.com/package/@michelleyuan1111/kmui-system)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-18.2-blue.svg)](https://reactjs.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)

</div>

## ✨ Features

- 🧩 **70+ React Components** - Full set of UI components powered by TDesign React
- 🎨 **Custom KMUI Theme** - Customized CSS styles on top of TDesign components
- 📘 **TypeScript First** - Full type safety and IntelliSense support
- 🎯 **Figma-Aligned** - Pixel-perfect implementation of Figma designs
- 📦 **Tree-Shakeable** - Import only what you need
- 🚀 **Production Ready** - Built and optimized for production use

## 📦 Installation

```bash
# npm
npm install @michelleyuan1111/kmui-system

# yarn
yarn add @michelleyuan1111/kmui-system

# pnpm
pnpm add @michelleyuan1111/kmui-system
```

### Peer Dependencies

Make sure you have React 16.8+ installed:

```bash
npm install react react-dom
```

## 🚀 Quick Start

### 1. Import Styles

Import the CSS file in your application entry point:

```typescript
// main.tsx or index.tsx
import '@michelleyuan1111/kmui-system/dist/kmui.css';
```

### 2. Use Components

```tsx
import React from 'react';
import { Button, Input, Select, Table } from '@michelleyuan1111/kmui-system';

function App() {
  return (
    <div>
      <Button theme="primary" onClick={() => alert('Clicked!')}>
        Submit
      </Button>
      <Input placeholder="Enter text..." />
    </div>
  );
}

export default App;
```

## 📚 Components (71 Total)

All components are re-exported from [TDesign React](https://tdesign.tencent.com/react/) with KMUI custom theme styles applied.

### General

| Component | Import | Description |
|-----------|--------|-------------|
| `Button` | `import { Button } from '@michelleyuan1111/kmui-system'` | Button for triggering actions |
| `Icon` | Via TDesign Icons | Icon library |
| `Link` | `import { Link } from '@michelleyuan1111/kmui-system'` | Hyperlink component |
| `Typography` | `import { Typography } from '@michelleyuan1111/kmui-system'` | Text and paragraph styles |

### Layout

| Component | Import | Description |
|-----------|--------|-------------|
| `Layout` | `import { Layout } from '@michelleyuan1111/kmui-system'` | Page layout with Header, Content, Footer, Sider |
| `Divider` | `import { Divider } from '@michelleyuan1111/kmui-system'` | Content separator |
| `Space` | `import { Space } from '@michelleyuan1111/kmui-system'` | Spacing between components |

### Navigation

| Component | Import | Description |
|-----------|--------|-------------|
| `Menu` | `import { Menu } from '@michelleyuan1111/kmui-system'` | Navigation menu |
| `Tabs` | `import { Tabs } from '@michelleyuan1111/kmui-system'` | Tab navigation |
| `Breadcrumb` | `import { Breadcrumb } from '@michelleyuan1111/kmui-system'` | Breadcrumb navigation |
| `Pagination` | `import { Pagination } from '@michelleyuan1111/kmui-system'` | Page pagination |
| `Steps` | `import { Steps } from '@michelleyuan1111/kmui-system'` | Step-by-step navigation |
| `Anchor` | `import { Anchor } from '@michelleyuan1111/kmui-system'` | Anchor link navigation |
| `BackTop` | `import { BackTop } from '@michelleyuan1111/kmui-system'` | Scroll back to top |
| `Dropdown` | `import { Dropdown } from '@michelleyuan1111/kmui-system'` | Dropdown menu |
| `StickyTool` | `import { StickyTool } from '@michelleyuan1111/kmui-system'` | Sticky toolbar |
| `Guide` | `import { Guide } from '@michelleyuan1111/kmui-system'` | User guide / tour |

### Form

| Component | Import | Description |
|-----------|--------|-------------|
| `Form` | `import { Form } from '@michelleyuan1111/kmui-system'` | Form container with validation |
| `Input` | `import { Input } from '@michelleyuan1111/kmui-system'` | Text input |
| `InputAdornment` | `import { InputAdornment } from '@michelleyuan1111/kmui-system'` | Input prefix/suffix addon |
| `InputNumber` | `import { InputNumber } from '@michelleyuan1111/kmui-system'` | Numeric input |
| `Textarea` | `import { Textarea } from '@michelleyuan1111/kmui-system'` | Multi-line text input |
| `Select` | `import { Select } from '@michelleyuan1111/kmui-system'` | Dropdown selector |
| `SelectInput` | `import { SelectInput } from '@michelleyuan1111/kmui-system'` | Select with input |
| `Checkbox` | `import { Checkbox } from '@michelleyuan1111/kmui-system'` | Checkbox |
| `Radio` | `import { Radio } from '@michelleyuan1111/kmui-system'` | Radio button |
| `Switch` | `import { Switch } from '@michelleyuan1111/kmui-system'` | Toggle switch |
| `Slider` | `import { Slider } from '@michelleyuan1111/kmui-system'` | Slider input |
| `DatePicker` | `import { DatePicker } from '@michelleyuan1111/kmui-system'` | Date picker |
| `TimePicker` | `import { TimePicker } from '@michelleyuan1111/kmui-system'` | Time picker |
| `Cascader` | `import { Cascader } from '@michelleyuan1111/kmui-system'` | Cascading selector |
| `AutoComplete` | `import { AutoComplete } from '@michelleyuan1111/kmui-system'` | Autocomplete input |
| `TagInput` | `import { TagInput } from '@michelleyuan1111/kmui-system'` | Tag-style input |
| `RangeInput` | `import { RangeInput } from '@michelleyuan1111/kmui-system'` | Range input |
| `Transfer` | `import { Transfer } from '@michelleyuan1111/kmui-system'` | Transfer list |
| `Upload` | `import { Upload } from '@michelleyuan1111/kmui-system'` | File upload |
| `ColorPicker` | `import { ColorPicker } from '@michelleyuan1111/kmui-system'` | Color picker |
| `Rate` | `import { Rate } from '@michelleyuan1111/kmui-system'` | Star rating |
| `TreeSelect` | `import { TreeSelect } from '@michelleyuan1111/kmui-system'` | Tree-based selector |

### Data Display

| Component | Import | Description |
|-----------|--------|-------------|
| `Table` | `import { Table } from '@michelleyuan1111/kmui-system'` | Data table |
| `List` | `import { List } from '@michelleyuan1111/kmui-system'` | List display |
| `Tree` | `import { Tree } from '@michelleyuan1111/kmui-system'` | Tree view |
| `Tag` | `import { Tag } from '@michelleyuan1111/kmui-system'` | Tag label |
| `Badge` | `import { Badge } from '@michelleyuan1111/kmui-system'` | Badge indicator |
| `Card` | `import { Card } from '@michelleyuan1111/kmui-system'` | Card container |
| `Collapse` | `import { Collapse } from '@michelleyuan1111/kmui-system'` | Collapsible panel |
| `Avatar` | `import { Avatar } from '@michelleyuan1111/kmui-system'` | User avatar |
| `Image` | `import { Image } from '@michelleyuan1111/kmui-system'` | Image display |
| `ImageViewer` | `import { ImageViewer } from '@michelleyuan1111/kmui-system'` | Image preview |
| `Swiper` | `import { Swiper } from '@michelleyuan1111/kmui-system'` | Carousel / swiper |
| `Calendar` | `import { Calendar } from '@michelleyuan1111/kmui-system'` | Calendar display |
| `Comment` | `import { Comment } from '@michelleyuan1111/kmui-system'` | Comment component |
| `Statistic` | `import { Statistic } from '@michelleyuan1111/kmui-system'` | Statistic number display |
| `Descriptions` | `import { Descriptions } from '@michelleyuan1111/kmui-system'` | Description list |
| `Timeline` | `import { Timeline } from '@michelleyuan1111/kmui-system'` | Timeline display |
| `Progress` | `import { Progress } from '@michelleyuan1111/kmui-system'` | Progress bar |
| `Skeleton` | `import { Skeleton } from '@michelleyuan1111/kmui-system'` | Loading skeleton |
| `Empty` | `import { Empty } from '@michelleyuan1111/kmui-system'` | Empty state placeholder |
| `QRCode` | `import { QRCode } from '@michelleyuan1111/kmui-system'` | QR code generator |
| `Watermark` | `import { Watermark } from '@michelleyuan1111/kmui-system'` | Watermark overlay |

### Feedback

| Component | Import | Description |
|-----------|--------|-------------|
| `Dialog` | `import { Dialog } from '@michelleyuan1111/kmui-system'` | Modal dialog |
| `Drawer` | `import { Drawer } from '@michelleyuan1111/kmui-system'` | Side drawer panel |
| `Popup` | `import { Popup } from '@michelleyuan1111/kmui-system'` | Popup container |
| `Popconfirm` | `import { Popconfirm } from '@michelleyuan1111/kmui-system'` | Popover confirmation |
| `Tooltip` | `import { Tooltip } from '@michelleyuan1111/kmui-system'` | Tooltip on hover |
| `Message` | `import { Message } from '@michelleyuan1111/kmui-system'` | Global message notification |
| `Notification` | `import { Notification } from '@michelleyuan1111/kmui-system'` | Notification panel |
| `Alert` | `import { Alert } from '@michelleyuan1111/kmui-system'` | Alert banner |
| `Loading` | `import { Loading } from '@michelleyuan1111/kmui-system'` | Loading spinner |

### Config

| Component | Import | Description |
|-----------|--------|-------------|
| `ConfigProvider` | `import { ConfigProvider } from '@michelleyuan1111/kmui-system'` | Global configuration provider |
| `Affix` | `import { Affix } from '@michelleyuan1111/kmui-system'` | Affix / sticky positioning |

## 🎯 Usage Examples

### Form Example

```tsx
import { Form, Input, Select, Button, DatePicker } from '@michelleyuan1111/kmui-system';
import from '@michelleyuan1111/kmui-system/dist/kmui.css';

function MyForm() {
  return (
    <Form onSubmit={handleSubmit}>
      <Form.FormItem label="Name" name="name">
        <Input placeholder="Enter your name" />
      </Form.FormItem>
      <Form.FormItem label="Role" name="role">
        <Select options={[
          { label: 'Admin', value: 'admin' },
          { label: 'User', value: 'user' },
        ]} />
      </Form.FormItem>
      <Form.FormItem label="Date" name="date">
        <DatePicker />
      </Form.FormItem>
      <Button theme="primary" type="submit">Submit</Button>
    </Form>
  );
}
```

### Table Example

```tsx
import { Table } from '@michelleyuan1111/kmui-system';

const columns = [
  { colKey: 'name', title: 'Name', width: 200 },
  { colKey: 'email', title: 'Email' },
  { colKey: 'role', title: 'Role', width: 120 },
];

const data = [
  { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
  { name: 'Bob', email: 'bob@example.com', role: 'User' },
];

<Table columns={columns} data={data} rowKey="name" />
```

### Dialog Example

```tsx
import { Dialog, Button } from '@michelleyuan1111/kmui-system';
import { useState } from 'react';

function MyDialog() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button theme="primary" onClick={() => setVisible(true)}>Open Dialog</Button>
      <Dialog
        visible={visible}
        header="Confirmation"
        body="Are you sure you want to proceed?"
        onClose={() => setVisible(false)}
        onConfirm={() => { handleConfirm(); setVisible(false); }}
      />
    </>
  );
}
```

## 📘 TypeScript Support

All component props are fully typed. Refer to [TDesign React API documentation](https://tdesign.tencent.com/react/components/button) for detailed prop types.

```typescript
import type { ButtonProps, InputProps, TableProps, SelectProps } from '@michelleyuan1111/kmui-system';
```

## 🎯 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 📦 Bundle Info

- ESM: `dist/index.mjs`
- CJS: `dist/index.cjs`
- Types: `dist/index.d.ts`
- Styles: `dist/kmui.css`

## 🔧 Development

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Type checking
npm run type-check
```

## 📄 License

MIT © michelleyuan

See [LICENSE](./LICENSE) for more information.

---

<div align="center">

Made with ❤️ by the KMUI Team

</div>