east-hub-ui/README.md

Modern UI components library built with React and Tailwind CSS 4

# East UI Components

Modern UI components library built with React and Tailwind CSS.

## Installation

```bash
npm install east-hub-ui
# or
yarn add east-hub-ui
# or
pnpm add east-hub-ui
```

## Usage

เพื่อให้ใช้งานได้อย่างถูกต้อง คุณจำเป็นต้องตั้งค่า Tailwind CSS ในโปรเจคของคุณ (หากยังไม่ได้ตั้งค่า)

1. ตั้งค่า Tailwind CSS ในโปรเจคของคุณ
2. นำเข้า Components และใช้ได้เลย!

### ตัวอย่างการใช้งาน Button Component

```tsx
import { Button } from 'east-hub-ui';

function MyComponent() {
  return (
    <div>
      {/* ปุ่มพื้นฐาน */}
      <Button>ปุ่มพื้นฐาน</Button>
      
      {/* ปุ่มแบบ primary */}
      <Button variant="primary">ปุ่ม Primary</Button>
      
      {/* ปุ่มขนาดใหญ่ */}
      <Button variant="success" size="lg">ปุ่มขนาดใหญ่</Button>
      
      {/* ปุ่มแบบ bordered */}
      <Button variant="secondary" styleVariant="bordered">ปุ่มแบบมีขอบ</Button>
      
      {/* ปุ่มแสดงสถานะโหลด */}
      <Button variant="warning" isLoading>กำลังโหลด</Button>
      
      {/* ปุ่มแบบเต็มความกว้าง */}
      <Button variant="danger" size="full">ปุ่มเต็มความกว้าง</Button>
    </div>
  );
}
```

## สไตล์ที่รองรับ

### Button Variants

- `default` - สีเทา
- `primary` - สีน้ำเงิน
- `secondary` - สีม่วง
- `success` - สีเขียว
- `warning` - สีเหลือง/ส้ม
- `danger` - สีแดง

### Button Sizes

- `none` - ไม่มี padding
- `sm` - ขนาดเล็ก
- `md` - ขนาดกลาง (ค่าเริ่มต้น)
- `lg` - ขนาดใหญ่
- `full` - เต็มความกว้าง

### Button Style Variants

- `solid` - พื้นสีเต็ม (ค่าเริ่มต้น)
- `faded` - พื้นสีอ่อน
- `bordered` - แบบมีเส้นขอบ
- `light` - พื้นสีอ่อนมาก
- `flat` - แบบราบและเข้ม
- `ghost` - โปร่งใส แสดงสีเมื่อ hover
- `shadow` - มีเงา

## การปรับแต่ง

คุณสามารถปรับแต่ง style ของ components ได้โดยใช้ className:

```tsx
<Button 
  variant="primary" 
  className="rounded-full shadow-lg"
>
  ปุ่มแบบกำหนดเอง
</Button>
```

## License

MIT