@imj_media/ui 1.0.14

package/README.md

@@ -0,0 +1,297 @@
+# @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**