npm package: @raonrabbit/design-system
Description: A comprehensive React design system with Tailwind CSS support
Author: Junhyuk
Latest version: 1.0.1

# @raonrabbit/design-system

React UI 컴포넌트 라이브러리입니다. TypeScript, Tailwind CSS 4, Framer Motion으로 구축되었습니다.

## Features

- **20+ UI 컴포넌트** - Button, Badge, Modal, Skeleton 등 프로덕션 레디 컴포넌트
- **5가지 테마** - Blue, Red, Yellow, Monochrome, Rainbow
- **Compound Component 패턴** - 유연하고 조합 가능한 컴포넌트 설계
- **애니메이션 시스템** - Framer Motion 기반, Reduced motion 지원
- **완전한 TypeScript 지원**
- **Tailwind CSS 4 호환**

## Installation

```bash
npm install @raonrabbit/design-system react@^18 react-dom@^18 tailwindcss@^4 framer-motion@^11
```

> `framer-motion`은 애니메이션 사용 시에만 필요합니다 (선택사항)

## Quick Start

**ThemeProvider로 감싸기만 하면 바로 사용할 수 있습니다.**

```tsx
import { ThemeProvider, Button } from "@raonrabbit/design-system";

function App() {
  return (
    <ThemeProvider>
      <Button color="primary" variant="fill">
        Hello World
      </Button>
    </ThemeProvider>
  );
}
```

### 테마 변경

```tsx
<ThemeProvider defaultTheme="red">
  {/* 앱 컨텐츠 */}
</ThemeProvider>
```

## Components

### Button

```tsx
<Button color="primary" variant="fill">Primary</Button>
<Button color="danger" variant="light-color">Danger</Button>
<Button color="dark" variant="fill" loading>Loading</Button>
```

| Prop | Values |
|------|--------|
| `variant` | `fill` \| `light-color` |
| `color` | `primary` \| `danger` \| `light` \| `dark` |
| `size` | `small` \| `medium` \| `large` \| `xlarge` |
| `display` | `inline` \| `block` \| `full` |

### Badge

```tsx
<Badge color="blue" variant="fill">Info</Badge>
<Badge color="green" variant="light-color">Success</Badge>
```

| Prop | Values |
|------|--------|
| `variant` | `fill` \| `light-color` |
| `color` | `blue` \| `teal` \| `green` \| `red` \| `yellow` \| `elephant` |
| `size` | `xsmall` \| `small` \| `medium` \| `large` |

### Modal

```tsx
const [open, setOpen] = useState(false);

<Modal open={open} onOpenChange={setOpen}>
  <Modal.Overlay />
  <Modal.Content size="md">
    <h2>Modal Title</h2>
    <p>Content here</p>
  </Modal.Content>
</Modal>
```

### Checkbox

```tsx
<Checkbox.Circle checked={checked} onCheckedChange={setChecked} />
<Checkbox.Line checked={checked} onCheckedChange={setChecked} />
```

### Loader

```tsx
<Loader size="medium" type="primary" label="Loading..." />
```

### Skeleton

```tsx
<Skeleton pattern="topListWithIcon" />
<Skeleton custom={["title", "subtitle", "list"]} />
```

### Paragraph

```tsx
<Paragraph typography="t5">
  <Paragraph.Text>Hello </Paragraph.Text>
  <Paragraph.Badge color="blue" variant="fill">NEW</Paragraph.Badge>
  <Paragraph.Link href="/more">Learn more</Paragraph.Link>
</Paragraph>
```

### ListHeader

```tsx
<ListHeader
  title={
    <ListHeader.TitleParagraph typography="t5" fontWeight="bold">
      Section Title
    </ListHeader.TitleParagraph>
  }
  right={
    <ListHeader.RightArrow typography="t7" onClick={handleClick}>
      View All
    </ListHeader.RightArrow>
  }
/>
```

### ListFooter

```tsx
<ListFooter icon="plus" onClick={handleLoadMore}>
  더 보기
</ListFooter>
```

### 기타 컴포넌트

- **IconButton** - 아이콘 버튼 (`clear` | `fill` | `border`)
- **Card** - 카드 컨테이너 (`default` | `outlined` | `elevated`)
- **Input** - 텍스트 입력
- **Select** - 드롭다운 선택
- **Radio** - 라디오 버튼
- **Switch** - 토글 스위치
- **Alert** - 알림 메시지 (`info` | `success` | `warning` | `error`)
- **Tooltip** - 툴팁
- **Tabs** - 탭 네비게이션
- **Table** - 데이터 테이블
- **ThemeSelector** - 테마 선택기

## Theming

### Available Themes

- `blue` (default)
- `red`
- `yellow`
- `monochrome`
- `rainbow`

### useTheme Hook

```tsx
import { useTheme } from "@raonrabbit/design-system";

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme("red")}>
      Change to Red
    </button>
  );
}
```

## Advanced Setup (선택사항)

Tailwind 클래스를 커스텀하게 확장하려면 preset을 사용할 수 있습니다:

```typescript
// tailwind.config.ts
import { designSystemPreset } from "@raonrabbit/design-system/tailwind";

export default {
  presets: [designSystemPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@raonrabbit/design-system/dist/**/*.{js,mjs}",
  ],
};
```

## TypeScript

```typescript
import type {
  ButtonProps,
  BadgeProps,
  ModalProps,
  Theme,
  ThemeName,
} from "@raonrabbit/design-system";
```

## License

MIT