@de-adlock/ui/README.md

Modern React component library for FiveM with built-in theme management

# @de-adlock/ui

Modern React component library for FiveM with built-in theme management and gaming-specific components.

## Installation

```bash
npm install @de-adlock/ui
# or
yarn add @de-adlock/ui
# or
pnpm add @de-adlock/ui
```

## Quick Start

```tsx
import { Button, Input, Window, ThemeProvider } from '@de-adlock/ui'
import '@de-adlock/ui/styles'

function App() {
  return (
    <ThemeProvider>
      <Window title="Game Menu" variant="glass" size="md">
        <Input 
          type="text" 
          label="Character Name" 
          placeholder="Enter name..." 
          autoIcon={true}
        />
        <Button variant="primary" glow>
          Create Character
        </Button>
      </Window>
    </ThemeProvider>
  )
}
```

## FiveM Integration

For automatic theme synchronization with the dl-ui FiveM resource:

```tsx
import { FiveMThemeProvider } from '@de-adlock/ui'
import '@de-adlock/ui/styles'

function App() {
  return (
    <FiveMThemeProvider>
      {/* Your app - theme will auto-sync with player's selection */}
    </FiveMThemeProvider>
  )
}
```

## Complete Component List

### Input Components
- `Input` - All HTML5 input types with auto-icons (text, email, password, search, url, tel, number, date, time, etc.)
- `Textarea` - Auto-resizing multi-line text input
- `Select` - Single/Multi select dropdown with search functionality
- `FileInput` - Drag & drop file upload with preview
- `Range` - Customizable slider with value display
- `ColorPicker` - Advanced color selection tool
- `Checkbox` - Styled checkbox input
- `Radio` - Radio button groups
- `Toggle` - iOS-style toggle switch

### UI Components
- `Button` - 10+ variants (primary, secondary, success, error, warning, ghost, outline, glass, etc.)
- `Card` - Content container with hover effects
- `ActionCard` - Gaming menu cards with icons
- `Window` - Modal/Dialog with glass morphism
- `Modal` - Centered modal overlay
- `Dialog` - Confirmation dialogs

### Feedback Components
- `Toast` & `ToastContainer` - Notification system
- `Alert` - Inline alert messages
- `Badge` - Status/count badges
- `Tooltip` - Smart hover tooltips
- `WelcomeNotification` - Animated welcome messages

### Data Components
- `Table` - Sortable data tables
- `Pagination` - Page navigation
- `Bar` - Progress/Health/XP/Skill bars
- `Avatar` & `AvatarGroup` - User avatars

### Layout Components
- `Tabs` - Tab navigation with pills variant
- `Accordion` - Collapsible content sections
- `Sidebar` - Navigation sidebar with icons

### Gaming-Specific Templates
- `CharacterCreation` - Complete character creator with attributes
- `InventorySystem` - Item management with categories
- `ThemeEditor` - Live theme customization
- `BarDemo` - Gaming bars showcase
- `ControlsDemo` - Form controls showcase
- `LayoutDemo` - Layout components showcase
- `FeedbackDemo` - Feedback components showcase
- `DataDemo` - Data display showcase

## Theming

The library comes with 5 stunning built-in themes:

### 🎮 Built-in Themes
- **neon** - Cyberpunk style with vibrant pink/cyan
- **sakura** - Japanese cherry blossom pink theme  
- **midnight** - Deep blue/purple night theme
- **aurora** - Northern lights cyan/purple
- **forest** - Nature-inspired green theme

### Custom Themes

```tsx
import { createTheme, ThemeProvider } from '@deadlock/ui'

const myTheme = createTheme({
  name: 'my-theme',
  colors: {
    primary: '#ff0000',
    secondary: '#00ff00',
    // ... other colors
  }
})

function App() {
  return (
    <ThemeProvider defaultTheme={myTheme}>
      {/* Your app */}
    </ThemeProvider>
  )
}
```

## TypeScript Support

Full TypeScript support with exported types for all components and themes.

```tsx
import type { ButtonProps, Theme } from '@deadlock/ui'
```

## License

MIT © Deadlock

## Links

- [GitHub Repository](https://github.com/deadlock/dl-ui)
- [FiveM Resource](https://github.com/deadlock/dl-ui/tree/main/resource)
- [Documentation](https://github.com/deadlock/dl-ui#readme)