# @imj_media/ui

Paquete de componentes de UI para React (TypeScript + ES Modules).

## Instalación

```bash
npm install @imj_media/ui

pnpm i @imj_media/ui

```



## Uso básico

```tsx
import { Button, Modal, Chip, Drawer, Icon, Toast, Toaster } from '@imj_media/ui';

function App() {
  const [open, setOpen] = React.useState(false);
  const [drawerOpen, setDrawerOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Abrir modal</Button>
      <Button onClick={() => setDrawerOpen(true)}>Abrir drawer</Button>
      
      <Modal isOpen={open} onClose={() => setOpen(false)} title="Título del modal">
        <p>Contenido del modal</p>
      </Modal>
      
      <Drawer isOpen={drawerOpen} onClose={() => setDrawerOpen(false)} title="Mi Drawer">
        <p>Contenido del drawer</p>
      </Drawer>
      
      <Toaster />
    </>
  );
}
```

## Componentes disponibles

### Button

```tsx
<Button
  variant="contained"
  color="primary"
  size="md"
  rounded="md"
  icon="CheckOutlined"
  onClick={() => alert('¡Click!')}
>
  Botón con icono
</Button>
```

**Props:**
- `variant`: `"contained" | "outlined" | "text" | "link" | "ghost" | "white"` (default: `"contained"`)
- `color`: `"primary" | "secondary" | "danger" | "success" | "warning" | "info" | "alert" | "gray"` (default: `"primary"`)
- `size`: `"clear" | "minimal" | "xs" | "sm" | "md" | "lg"` (default: `"md"`)
- `rounded`: `"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"` (default: `"md"`)
- `icon`: `IconType | React.ReactElement` (opcional)
- `colorIcon`: `string` (color del icono)
- `fullWidth`: `boolean` (default: `false`)
- `clickable`: `boolean` (opcional)
- `disabled`: `boolean`
- `onClick`: `() => void`
- `className`: `string`
- `children`: `React.ReactNode`

### Modal

```tsx
<Modal
  isOpen={isOpen}
  onClose={() => setOpen(false)}
  size="md"
  showCloseButton={true}
  disableEscapeClose={false}
  disableOutsideTab={false}
  closeAtCorner={true}
>
  <Modal.Header>
    <h2>Título del modal</h2>
  </Modal.Header>
  <Modal.Body>
    <p>Contenido del modal</p>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={() => setOpen(false)}>Cerrar</Button>
  </Modal.Footer>
</Modal>
```

**Props:**
- `isOpen`: `boolean` (controla si el modal está abierto)
- `onClose`: `() => void` (callback para cerrar)
- `children`: `React.ReactNode`
- `size`: `"sm" | "md" | "lg" | "xl" | "full"` (default: `"md"`)
- `showCloseButton`: `boolean` (default: `true`)
- `disableEscapeClose`: `boolean` (default: `false`)
- `disableOutsideTab`: `boolean` (default: `false`)
- `closeAtCorner`: `boolean` (default: `true`)

**Componentes compuestos:**

- `Modal.Header`: Header del modal con botón de cerrar opcional
  - `showCloseButton`: `boolean` (opcional, hereda del modal padre)
  - `closeAtCorner`: `boolean` (opcional, hereda del modal padre)
  - `children`: `React.ReactNode`

- `Modal.Body`: Contenido principal del modal
  - `children`: `React.ReactNode`

- `Modal.Footer`: Pie del modal para acciones
  - `children`: `React.ReactNode`

### Chip

```tsx
<Chip
  label="Etiqueta"
  variant="contained"
  color="primary"
  size="md"
  rounded="full"
  badge={false}
  onClick={() => console.log('Chip clickeado')}
/>
```

**Props:**
- `label`: `string` (texto del chip)
- `variant`: `"contained" | "outlined" | "text" | "link" | "ghost" | "white"` (default: `"contained"`)
- `color`: `"primary" | "secondary" | "danger" | "success" | "warning" | "info" | "alert" | "gray"` (default: `"primary"`)
- `size`: `"clear" | "minimal" | "xs" | "sm" | "md" | "lg"` (default: `"md"`)
- `rounded`: `"full" | "md"` (default: `"full"`)
- `badge`: `boolean` (default: `false`)
- `disabled`: `boolean`
- `onClick`: `() => void`
- `className`: `string`

### Drawer

```tsx
<Drawer
  isOpen={isOpen}
  onClose={() => setOpen(false)}
  title="Título del drawer"
  size="md"
  position="right"
  showCloseButton={true}
  disableEscapeClose={false}
  disableOutsideTab={false}
>
  <p>Contenido del drawer</p>
</Drawer>
```

**Props:**
- `isOpen`: `boolean` (controla si el drawer está abierto)
- `onClose`: `() => void` (callback para cerrar)
- `title`: `string` (opcional)
- `children`: `React.ReactNode`
- `size`: `"sm" | "md" | "lg"` (default: `"md"`)
- `position`: `"left" | "right"` (default: `"right"`)
- `showCloseButton`: `boolean` (default: `true`)
- `disableEscapeClose`: `boolean` (default: `false`)
- `disableOutsideTab`: `boolean` (default: `false`)

### Icon

```tsx
<Icon
  name="CheckOutlined"
  size="md"
  color="primary"
  fill="black"
  className="custom-icon"
/>
```

**Props:**
- `name`: `IconType` (nombre del icono)
- `size`: `"minimal" | "clear" | "xs" | "sm" | "md" | "lg"` (default: `"md"`)
- `color`: `string` (default: `"current"`)
- `fill`: `string` (default: `"black"`)
- `className`: `string`
- `svgProps`: `object` (props adicionales para el SVG)

**Iconos disponibles:**

**Fill Icons:**
- `YoutubeFill`, `InstagramFill`, `TwitterFill`, `TelegramFill`, `FacebookFill`, `WhatsappFill`, `LinkedinFill`

**Outline Icons (selección):**
- `CheckOutlined`, `XOutlined`, `PlusOutlined`, `MinusOutlined`, `SearchOutlined`, `EditOutlined`, `TrashOutlined`
- `EyeOutlined`, `EyeSlashOutlined`, `LockOutlined`, `LockOpenOutlined`, `UserOutlined`, `SettingsOutlined`
- `HomeOutlined`, `DashboardOutlined`, `CalendarOutlined`, `ClockOutlined`, `BellOutlined`, `MailOutlined`
- `DownloadOutlined`, `UploadOutlined`, `SaveOutlined`, `RefreshOutlined`, `PlayOutlined`, `PauseOutlined`
- `ArrowUpOutlined`, `ArrowDownOutlined`, `ArrowLeftOutlined`, `ArrowRightOutlined`
- `ChevronUpOutlined`, `ChevronDownOutlined`, `ChevronLeftOutlined`, `ChevronRightOutlined`
- `FilterOutlined`, `SortOutlined`, `SearchOutlined`, `InfoOutlined`, `WarningOutlined`, `ErrorOutlined`
- Y muchos más...

### Toast

```tsx
import { toast, Toaster } from '@imj_media/ui';

// Mostrar toast
toast.success('Operación exitosa');
toast.error('Algo salió mal');
toast.info('Información importante');
toast.warning('Advertencia');

// Toast con opciones personalizadas
toast.show({
  message: 'Mensaje personalizado',
  type: 'success',
  title: 'Título opcional',
  duration: 5000,
  position: 'top-right',
  variant: 'contained',
  showCloseButton: true
});

// En tu componente
function App() {
  return (
    <>
      <button onClick={() => toast.success('¡Hola!')}>
        Mostrar toast
      </button>
      <Toaster />
    </>
  );
}
```

**Métodos del toast:**
- `toast.success(message, options?)`
- `toast.error(message, options?)`
- `toast.info(message, options?)`
- `toast.warning(message, options?)`
- `toast.show(options)`
- `toast.dismiss(id)`

**Opciones del toast:**
- `message`: `string` (mensaje del toast)
- `type`: `"success" | "danger" | "info" | "warning" | "gray"`
- `title`: `string` (opcional)
- `duration`: `number` (duración en ms, 0 = sin auto-cierre)
- `position`: `"top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right"` (default: `"top-right"`)
- `variant`: `"contained" | "outlined" | "accent" | "minimal"` (default: `"contained"`)
- `showCloseButton`: `boolean` (default: `true`)

**Configuración global:**
```tsx
import { configure } from '@imj_media/ui';

configure({
  defaultDuration: 5000,
  maxToasts: 5,
  defaultPosition: 'top-right',
  animationDuration: 300,
  defaultVariant: 'contained'
});
```

## Tipos TypeScript

Todos los componentes exportan sus props:

```ts
import type { 
  IButtonProps, 
  ModalProps, 
  IChipProps, 
  DrawerProps, 
  IconProps,
  Toast,
  ToastOptions 
} from '@imj_media/ui';
```

## Estilos

El paquete incluye estilos CSS que se importan automáticamente. Los componentes utilizan Tailwind CSS para el styling.

## Versión

Versión actual: **1.0.7** 