npm package: @jerrycodezzz/ui-kit
Description: A comprehensive React UI component library with design tokens and TypeScript support
Author: jerrycodezzz
Latest version: 0.1.30

# @jerrycodezzz/ui-kit

A comprehensive React UI component library built with TypeScript, Tailwind CSS, and design tokens.

## ✨ Features

- 🎨 **Design Token System**: Consistent color, typography, and spacing system
- 🧩 **Rich Component Set**: Button, Card, Table, Form components (Input, Select, Textarea, Checkbox)
- 🔧 **TypeScript Support**: Full type safety and IntelliSense
- 📱 **Responsive Design**: Mobile-first approach with Tailwind CSS
- 🎭 **Pattern Implementation**: Compound components, slots, and extensible props
- 📚 **Storybook Documentation**: Interactive component documentation
- ♿ **Accessibility**: WCAG compliant with proper ARIA support

## 📦 Installation

```bash
npm install @jerrycodezzz/ui-kit
```

### Peer Dependencies

Make sure you have these installed:

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

### Styles & Fonts

Import the CSS file in your app:

```tsx
import "@jerrycodezzz/ui-kit/styles.css";
```

**🎨 Font Setup:**
Jerry UI Kit supports multiple Korean fonts with **Pretendard** as the default and **Noto Sans KR** as fallback. Both fonts are automatically loaded when you import the styles.

**Automatic (Recommended):**

```tsx
// Import styles - fonts are included automatically
import "@jerrycodezzz/ui-kit/styles.css";
```

**Available Font Families:**

```tsx
import { Typography } from "@jerrycodezzz/ui-kit";

// Default: Pretendard with Noto Sans KR fallback
<Typography preset="h1">Modern Korean Typography</Typography>

// Explicit font selection
<Typography preset="h1" fontFamily="pretendard">Pretendard Font</Typography>
<Typography preset="h1" fontFamily="noto">Noto Sans KR Font</Typography>
```

**Font Features:**

- **Pretendard**: Modern, clean design optimized for web
- **Noto Sans KR**: Traditional, balanced design by Google
- **Automatic fallback**: Seamless font loading with fallback support

## 🚀 Quick Start

```tsx
import { Button, Card, Input } from "@jerrycodezzz/ui-kit";

function App() {
  return (
    <Card variant="elevated">
      <Card.Header>
        <Card.Title>Welcome</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input label="Email" placeholder="Enter your email" required />
      </Card.Content>
      <Card.Actions>
        <Button type="primary">Submit</Button>
      </Card.Actions>
    </Card>
  );
}
```

## 📖 Components

### Core Components

- **Button**: Multiple variants (primary, danger, success, etc.) with loading states
- **Card**: Compound component with Header, Content, Actions, and more
- **Modal**: Flexible modal dialogs with compound structure
- **Table**: Advanced data table with sorting, filtering, and pagination

### Form Components

- **Input**: Text input with icons, validation states, and helper text
- **Select**: Dropdown selection with searchable options
- **Textarea**: Multi-line text input with character counting
- **Checkbox**: Checkbox with indeterminate state support

## 🎨 Design System

### Colors

- Primary, Semantic (danger, success, warning, info)
- Functional (search, modify, delete, etc.)
- Neutral grays and backgrounds

### Typography

- Responsive font scales
- Consistent line heights and spacing
- Korean font support (Noto Sans KR)

### Spacing

- 8px-based grid system
- Consistent component padding and margins

## 📚 Documentation

View the full component documentation and interactive examples at our [Storybook](https://your-storybook-url.com).

## 🛠️ Development

```bash
# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the package
npm run build

# Lint code
npm run lint
```

## 📝 License

MIT © jerrycodezzz

## 🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests.

## 📞 Support

- 🐛 [Report Issues](https://github.com/jerrycodezzz/frontend-template/issues)
- 💬 [Discussions](https://github.com/jerrycodezzz/frontend-template/discussions)

---

Built with ❤️ using React, TypeScript, and Tailwind CSS.