# 🚀 Avanza UI - Inicio Rápido

## Instalación en 3 Pasos

### 1️⃣ Instalar la biblioteca

```bash
cd packages/studio-panel
npm install ../ui-components
```

### 2️⃣ Importar estilos globales

```tsx
// packages/studio-panel/src/main.tsx
import 'avanza-ui/dist/index.css';
```

### 3️⃣ ¡Usar componentes!

```tsx
import { Button, Card } from 'avanza-ui';

function App() {
  return (
    <Card>
      <Button variant="primary">¡Funciona!</Button>
    </Card>
  );
}
```

## 📖 Componentes Disponibles

```tsx
import {
  // Layout
  Card, CardHeader, CardBody, CardFooter,
  
  // Forms
  Button, Input,
  
  // Feedback
  Alert, Spinner, Tooltip,
  
  // Display
  Avatar, Badge,
  
  // Overlay
  Modal, ModalHeader, ModalBody, ModalFooter,
  Dropdown, DropdownItem, DropdownDivider, DropdownHeader,
  
  // Utils
  cn, debounce, throttle, generateId
} from 'avanza-ui';
```

## 🎨 Temas

```tsx
// Cambiar a dark mode
document.documentElement.setAttribute('data-theme', 'dark');

// Cambiar a light mode
document.documentElement.setAttribute('data-theme', 'light');
```

## 💡 Ejemplos Rápidos

### Button

```tsx
<Button variant="primary" size="md">Click me</Button>
<Button variant="secondary" loading>Loading...</Button>
<Button variant="danger" leftIcon={<TrashIcon />}>Delete</Button>
```

### Card

```tsx
<Card hoverable onClick={() => console.log('clicked')}>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
  <CardFooter>Footer</CardFooter>
</Card>
```

### Input

```tsx
<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  error={hasError}
  errorMessage="Invalid email"
/>
```

### Modal

```tsx
const [isOpen, setIsOpen] = useState(false);

<>
  <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
  
  <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
    <ModalHeader title="Hello" onClose={() => setIsOpen(false)} />
    <ModalBody>Content here</ModalBody>
    <ModalFooter>
      <Button onClick={() => setIsOpen(false)}>Close</Button>
    </ModalFooter>
  </Modal>
</>
```

### Alert

```tsx
<Alert
  variant="success"
  title="Success!"
  message="Operation completed"
  closable
/>
```

### Avatar

```tsx
<Avatar src="/user.jpg" size="md" status="online" />
<Avatar initials="AB" size="lg" />
```

### Dropdown

```tsx
<Dropdown trigger={<Button>Options</Button>}>
  <DropdownItem icon={<UserIcon />}>Profile</DropdownItem>
  <DropdownDivider />
  <DropdownItem danger>Logout</DropdownItem>
</Dropdown>
```

## 🎯 Personalización

```css
/* Personaliza colores */
:root {
  --au-primary-600: #your-color;
  --au-spacing-4: 1.5rem;
}
```

## 📦 Build para Producción

```bash
cd packages/ui-components
npm run build
```

## 🔗 Links Útiles

- 📚 **README.md** - Documentación completa
- 🎓 **GUIDE.md** - Guía de desarrollo
- 🏗️ **STUDIO_IMPLEMENTATION.md** - Implementación en studio-panel
- 📊 **SUMMARY.md** - Resumen del proyecto

---

**Avanza UI v1.0.0** - ¡Listo para usar!