# Losa-UI

A custom UI component library inspired by Lost Saga's game interface design. Features gradient buttons, custom CSS variables, and a game-inspired design system.

## Installation

```bash
npm install losa-ui
```

### Peer Dependencies

This package requires the following peer dependencies:

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

## Setup

### 1. Import the styles

Add the following to your main CSS file or app entry point:

```tsx
import 'losa-ui/styles';
```

Or in your CSS:

```css
@import 'losa-ui/styles';
```

### 2. Configure Tailwind CSS

Make sure your `tailwind.config.js` includes the losa-ui components:

```js
module.exports = {
  content: [
    // ... your files
    './node_modules/losa-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // losa-ui uses CSS variables, extend as needed
    },
  },
};
```

## Usage

### Import components

```tsx
import { Button, Card, ItemCard, cn } from 'losa-ui';
```

### Button

```tsx
import { Button } from 'losa-ui';

// Default button
<Button>Click me</Button>

// Variants
<Button variant="blue">Blue Button</Button>
<Button variant="green">Green Button</Button>
<Button variant="red">Red Button</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With icons
<Button iconLeft={<Icon />}>With Icon</Button>
<Button iconRight={<Icon />}>With Icon</Button>

// Loading state
<Button isLoading>Loading...</Button>
```

### Card Components

```tsx
import { Card, CardHeader, CardTitle, CardContent, CardFooter, ItemCard } from 'losa-ui';

// Basic Card
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>Content here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>

// Item Card (game item style)
<ItemCard
  name="Epic Sword"
  price="1000 Gold"
  image="/path/to/image.png"
  rarity="unique"
  onBuy={() => console.log('Buy clicked')}
/>
```

### Form Components

```tsx
import { Input, Textarea, Checkbox, Select } from 'losa-ui';

<Input placeholder="Enter text..." />
<Textarea placeholder="Enter description..." />
<Checkbox checked={true} />
```

### Dialog & Modal

```tsx
import { Dialog, Modal } from 'losa-ui';

// Dialog
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <DialogContent_body>Content here</DialogContent_body>
    <DialogFooter>
      <Button>Close</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

// Modal
<Modal isOpen={isOpen} onClose={handleClose}>
  <ModalHeader>Title</ModalHeader>
  <ModalBody>Content</ModalBody>
  <ModalFooter>
    <Button onClick={handleClose}>Close</Button>
  </ModalFooter>
</Modal>
```

### Navigation

```tsx
import { Navbar, Nav, Footer } from 'losa-ui';

<Navbar logo="/logo.png" items={navItems} />
<Footer />
```

### Theme Toggle

```tsx
import { ThemeProvider, ThemeToggle } from 'losa-ui';

// Wrap your app with ThemeProvider
<ThemeProvider>
  <YourApp />
  <ThemeToggle />
</ThemeProvider>
```

## Components List

- **Layout**: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
- **Buttons**: Button (with variants: default, blue, green, red)
- **Form**: Input, Textarea, Checkbox, Select, Switch, Slider, Calendar
- **Display**: Badge, Avatar, Alert, Progress, Skeleton, Table
- **Overlay**: Dialog, Modal, Drawer, Sheet, Popover, Tooltip, HoverCard
- **Navigation**: Navbar, Nav, Footer, Breadcrumb, Pagination, Tabs
- **Feedback**: Toast, Sonner, AlertDialog, Progress
- **Data**: Chart, Carousel
- **Game-specific**: ItemCard, NewsCard, RankEntry, DriverCard, HeroCard, Headbox, Stage

## CSS Variables

Losa-UI uses CSS custom properties for theming. The following variables are available:

```css
/* Light theme (default) */
--ls-container-bg: #f4f4f4;
--ls-card-bg: #f8f8f8;
--ls-card-border: #d0d0d0;
--ls-card-shadow: 0 2px 4px rgba(0,0,0,0.1);
--ls-text-primary: #333;
--ls-text-extreme: #111;
--ls-menu-link: #555;
--ls-btn-border: #bbb;
/* ... and more */

/* Dark theme */
.dark {
  --ls-container-bg: #2a2a2a;
  --ls-card-bg: #333;
  --ls-text-primary: #e0e0e0;
  /* ... and more */
}
```

## Utility Functions

### cn() - Class name merger

```tsx
import { cn } from 'losa-ui';

const className = cn(
  'base-classes',
  isActive && 'active-classes',
  'conditional-classes'
);
```

## License

MIT