npm package: @ledangdung/ui
Description: Thư viện UI components hiện đại được xây dựng trên **Radix UI** và **Tailwind CSS**, cung cấp các components đẹp mắt, có thể tùy chỉnh và dễ sử dụng cho các ứng dụng React.
Latest version: 0.0.9

# @ledangdung/ui

Thư viện UI components hiện đại được xây dựng trên **Radix UI** và **Tailwind CSS**, cung cấp các components đẹp mắt, có thể tùy chỉnh và dễ sử dụng cho các ứng dụng React.

## ✨ Tính năng nổi bật

- 🎨 **Hệ thống theme linh hoạt** - Tùy chỉnh màu sắc và border radius
- 🌗 **Hỗ trợ dark/light mode** - Tự động theo system hoặc manual
- ♿ **Accessibility tuyệt vời** - Được xây dựng trên Radix UI
- 📱 **Responsive design** - Tương thích với mọi thiết bị
- 🎯 **TypeScript support** - Full type safety
- 🚀 **Tree-shakeable** - Chỉ import những gì cần thiết
- 💅 **Tailwind CSS** - Dễ dàng custom styling

## 📦 Cài đặt

```bash
npm install @ledangdung/ui
# hoặc
yarn add @ledangdung/ui
# hoặc
pnpm add @ledangdung/ui
```

### Peer Dependencies

Đảm bảo project của bạn có các peer dependencies sau:

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

## 🚀 Quick Start

### 1. Cài đặt Tailwind CSS

Thêm `@tailwindcss/vite` vào project (nếu chưa có):

```bash
npm install @tailwindcss/vite
```

Cấu hình `vite.config.ts`:

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
```

### 2. Wrap ứng dụng với ThemeProvider

```tsx
import { ThemeProvider } from '@ledangdung/ui'

function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="my-app-theme">
      <YourApp />
    </ThemeProvider>
  )
}
```

### 3. Sử dụng components

```tsx
import { Button, Card, CardContent, CardHeader, CardTitle } from '@ledangdung/ui'

function Example() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={() => alert('Hello!')}>
          Click me
        </Button>
      </CardContent>
    </Card>
  )
}
```

## 📚 Components

### Form Components
- `Button` - Nút bấm với nhiều variants
- `Input` - Ô nhập liệu
- `Textarea` - Vùng nhập văn bản nhiều dòng
- `Label` - Nhãn form
- `Checkbox` - Hộp kiểm
- `RadioGroup` - Nhóm radio button
- `Switch` - Công tắc bật/tắt
- `Select` - Dropdown select

### Layout Components
- `Card` - Thẻ container
- `Avatar` - Ảnh đại diện
- `Separator` - Đường phân cách
- `Tabs` - Tab navigation

### Overlay Components
- `Dialog` - Modal dialog
- `DropdownMenu` - Menu dropdown
- `Tooltip` - Tooltip hiển thị khi hover

### Feedback Components
- `Alert` - Thông báo cảnh báo
- `Badge` - Nhãn badge
- `Progress` - Thanh tiến trình
- `Spinner` - Loading spinner

## 🎨 Theme System

### Sử dụng useTheme hook

```tsx
import { useTheme } from '@ledangdung/ui'

function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  )
}
```

### Custom màu sắc

```tsx
import { useTheme, colorPresets } from '@ledangdung/ui'

function CustomTheme() {
  const { applyConfig } = useTheme()
  
  return (
    <div className="space-x-2">
      <button onClick={() => applyConfig({ primary: colorPresets.blue })}>
        Blue
      </button>
      <button onClick={() => applyConfig({ primary: colorPresets.purple })}>
        Purple
      </button>
      <button onClick={() => applyConfig({ primary: colorPresets.green })}>
        Green
      </button>
      {/* Custom OKLCH color */}
      <button onClick={() => applyConfig({ primary: "0.65 0.15 252" })}>
        Custom
      </button>
    </div>
  )
}
```

### Presets màu sắc có sẵn

```typescript
import { colorPresets } from '@ledangdung/ui'

// Các màu có sẵn:
colorPresets.blue     // "0.55 0.15 252"
colorPresets.purple   // "0.55 0.15 290"
colorPresets.green    // "0.52 0.14 150"
colorPresets.orange   // "0.58 0.14 35"
colorPresets.red      // "0.52 0.18 15"
colorPresets.pink     // "0.55 0.16 340"
colorPresets.teal     // "0.52 0.13 180"
colorPresets.indigo   // "0.48 0.16 270"
colorPresets.emerald  // "0.52 0.13 160"
colorPresets.amber    // "0.58 0.15 50"
```

## 🎯 Ví dụ sử dụng

### Form với validation

```tsx
import { 
  Button, 
  Input, 
  Label, 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle 
} from '@ledangdung/ui'

function ContactForm() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Liên hệ</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Họ tên</Label>
          <Input id="name" placeholder="Nhập họ tên" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Nhập email" />
        </div>
        <Button className="w-full">Gửi</Button>
      </CardContent>
    </Card>
  )
}
```

### Dialog với form

```tsx
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogTrigger,
  Button,
  Input,
  Label
} from '@ledangdung/ui'

function CreateUser() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Tạo người dùng</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Tạo người dùng mới</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="username">Tên người dùng</Label>
            <Input id="username" placeholder="Nhập tên người dùng" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="Nhập email" />
          </div>
          <Button className="w-full">Tạo</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
```

### Bundle Size
Để tối ưu bundle size, chỉ import những components cần thiết:

```tsx
// ✅ Tốt
import { Button } from '@ledangdung/ui'

// ❌ Không tốt
import { Button } from '@ledangdung/ui/dist/index.js'
```

### Source Maps
Source maps được disable để giảm bundle size. Nếu cần debug, bạn có thể:
- Xem source code trực tiếp trên GitHub
- Sử dụng TypeScript definitions để hiểu interfaces
- Clone repository để debug locally nếu cần thiết

## 🤝 Đóng góp

Nếu bạn muốn đóng góp cho project này, vui lòng:

1. Fork repository
2. Tạo branch mới (`git checkout -b feature/amazing-feature`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push to branch (`git push origin feature/amazing-feature`)
5. Mở Pull Request

## 📄 License

MIT License - xem file [LICENSE](LICENSE) để biết thêm chi tiết.

## 🔗 Links

- [Radix UI](https://radix-ui.com/) - Headless UI primitives
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Lucide Icons](https://lucide.dev/) - Beautiful icons library