npm package: @inbeatagency/ugc-components
Description: Wise-inspired component library for UGC Creator Campaign Management Platform
Author: inbeatagency
Latest version: 1.0.0

# UGC Component Library

A Wise-inspired React component library for the UGC Creator Campaign Management Platform.

## Design System

This component library is built on the **Wise Design System** principles with the following key characteristics:

### Colors

| Token | Value | Usage |
| --- | --- | --- |
| `wise-green-bright` | `#9FE870` | Primary accent, highlights |
| `wise-green-forest` | `#163300` | Interactive elements, primary buttons |
| `wise-bg-neutral` | `rgba(22, 51, 0, 0.08)` | Subtle backgrounds |
| `content-primary` | `#0E0F0C` | Primary text |
| `content-secondary` | `#454745` | Secondary text |
| `border` | `rgba(14, 15, 12, 0.12)` | Borders, dividers |

### Border Radius (Desktop)

| Token | Value |
| --- | --- |
| `wise-sm` | `16px` |
| `wise-md` | `20px` |
| `wise-lg` | `30px` |
| `wise-xl` | `40px` |
| `wise-2xl` | `60px` |
| `wise-full` | `9999px` |

### Typography

Uses **Inter** font family with the following scale:

- `heading-1`: 24px / 700
- `heading-2`: 20px / 600
- `heading-3`: 16px / 600
- `body`: 14px / 400
- `body-small`: 12px / 400
- `caption`: 11px / 400

## Components

### Form Controls
- `Button` - Primary, Accent, Secondary, Outline, Ghost, Destructive variants
- `Input` - Text input with label, error, and hint support
- `Textarea` - Multi-line text input
- `Select` - Dropdown selection
- `Checkbox` - Boolean selection
- `RadioGroup` - Single selection from group
- `Switch` - Toggle switch
- `Chip` - Multi-select pill/chip selector

### Data Display
- `Badge` - Status indicator badge
- `RatingBadge` - Rating tier display (7 levels)
- `StatusBadge` - Collaboration/creator status
- `Avatar` - User avatar with fallback
- `AvatarGroup` - Multiple avatars with overflow
- `Card` - Content container
- `Table` - Data table

### Navigation
- `Tabs` - Tab navigation
- `DropdownMenu` - Dropdown menu

### Feedback
- `Alert` - Inline alert messages
- `Progress` - Progress bar
- `StepIndicator` - Multi-step progress
- `Spinner` - Loading spinner
- `EmptyState` - Empty state placeholder

### Overlay
- `Dialog` - Modal dialog

### Utility
- `FileUpload` - Drag and drop file upload
- `CopyLink` - Copy to clipboard input
- `Separator` - Horizontal/vertical divider

## Installation

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build
```

## Usage with Lovable

1. Push this repository to GitHub
2. Connect the repository to Lovable
3. Lovable will recognize and use these components

When prompting Lovable, reference components like:

```
Use the Button component from @/components/ui with the "accent" variant for the primary action.
```

## File Structure

```
src/
├── components/
│   └── ui/
│       ├── button.tsx
│       ├── input.tsx
│       ├── chip.tsx
│       ├── badge.tsx
│       ├── rating-badge.tsx
│       ├── status-badge.tsx
│       ├── card.tsx
│       ├── avatar.tsx
│       ├── table.tsx
│       ├── tabs.tsx
│       ├── dialog.tsx
│       ├── alert.tsx
│       ├── progress.tsx
│       ├── file-upload.tsx
│       ├── copy-link.tsx
│       ├── empty-state.tsx
│       ├── separator.tsx
│       ├── dropdown-menu.tsx
│       └── index.ts
├── lib/
│   └── utils.ts
├── styles/
│   └── globals.css
├── App.tsx
└── main.tsx
```

## Dependencies

- React 18
- Tailwind CSS
- Radix UI primitives
- class-variance-authority (CVA)
- Lucide React icons