@imj_media/ui 1.0.41 → 1.0.43

package/README.md

@@ -1,297 +1,665 @@
-# @imj_media/ui
+# 🎨 @imj_media/ui
 
-Paquete de componentes de UI para React (TypeScript + ES Modules).
+Biblioteca de componentes UI moderna y accesible para React, construida con TypeScript y Tailwind CSS.
 
-## Instalación
+## 📦 Instalación
 
 ```bash
 npm install @imj_media/ui
+# o
+yarn add @imj_media/ui
+# o
+pnpm add @imj_media/ui
+```
+
+## 🚀 Uso Básico
 
-pnpm i @imj_media/ui
+```tsx
+import { Button, Input, Modal } from '@imj_media/ui'
+import '@imj_media/ui/index.css'
 
+function App() {
+  return (
+    <div>
+      <Button variant="button" color="blue">
+        Hola Mundo
+      </Button>
+      <Input label="Email" placeholder="tu@email.com" />
+    </div>
+  )
+}
 ```
 
+## 🎯 Características Principales
 
+- **TypeScript First**: Tipos completamente tipados para una mejor experiencia de desarrollo
+- **Tailwind CSS**: Sistema de diseño consistente y personalizable
+- **Accesibilidad**: Componentes construidos siguiendo las mejores prácticas de a11y
+- **Responsive**: Diseño adaptable a todos los tamaños de pantalla
+- **Tema Personalizable**: Sistema de colores y estilos fácilmente configurable
+- **Storybook**: Documentación interactiva de todos los componentes
 
-## Uso básico
+## 🏗️ Estructura del Paquete
 
+```
+src/
+├── modules/          # Componentes principales
+├── shared/           # Utilidades y tipos compartidos
+│   ├── types/        # Definiciones de tipos TypeScript
+│   ├── utils/        # Funciones utilitarias
+│   ├── styles/       # Estilos CSS y variables
+│   ├── hooks/        # Hooks personalizados
+│   └── assets/       # Recursos estáticos
+└── index.ts          # Punto de entrada principal
+```
+
+## 🧩 Componentes Disponibles
+
+### 🎨 Componentes de Navegación
+
+#### Accordion
 ```tsx
-import { Button, Modal, Chip, Drawer, Icon, Toast, Toaster } from '@imj_media/ui';
+import { Accordion } from '@imj_media/ui'
 
-function App() {
-  const [open, setOpen] = React.useState(false);
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
+<Accordion>
+  <Accordion.Item title="Sección 1">
+    Contenido de la sección 1
+  </Accordion.Item>
+</Accordion>
+```
 
-  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 />
-    </>
-  );
-}
+#### Breadcrumbs
+```tsx
+import { Breadcrumbs } from '@imj_media/ui'
+
+<Breadcrumbs
+  items={[
+    { label: 'Inicio', href: '/' },
+    { label: 'Productos', href: '/productos' }
+  ]}
+/>
+```
+
+#### Drawer
+```tsx
+import { Drawer } from '@imj_media/ui'
+
+<Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+  Contenido del drawer
+</Drawer>
 ```
 
-## Componentes disponibles
+#### Modal
+```tsx
+import { Modal } from '@imj_media/ui'
 
-### Button
+<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="md">
+  <Modal.Header title="Título del Modal" />
+  <Modal.Body>
+    Contenido del modal
+  </Modal.Body>
+  <Modal.Footer>
+    <Button onClick={onCancel}>Cancelar</Button>
+    <Button onClick={onSuccess}>Confirmar</Button>
+  </Modal.Footer>
+</Modal>
+```
 
+#### Popup
 ```tsx
+import { Popup } from '@imj_media/ui'
+
+<Popup
+  trigger={<Button>Abrir Popup</Button>}
+  content="Contenido del popup"
+  position="top"
+/>
+```
+
+### 🎯 Componentes de Formulario
+
+#### Button
+```tsx
+import { Button } from '@imj_media/ui'
+
 <Button
-  variant="contained"
-  color="primary"
+  variant="button"
+  color="blue"
   size="md"
-  rounded="md"
-  icon="CheckOutlined"
-  onClick={() => alert('¡Click!')}
+  icon="check"
+  onClick={handleClick}
 >
-  Botón con icono
+  Botón Principal
 </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`
+**Variantes disponibles:**
+- `button`: Botón estándar con fondo
+- `text`: Botón de texto sin fondo
+- `outlined`: Botón con borde
+- `soft`: Botón con fondo suave
+- `icon`: Botón solo con icono
+
+**Colores disponibles:**
+- `blue`, `green`, `orange`, `red`
+- `white`, `black`, `neutral`
+- `yellow`, `blue-dark`, `blue-light`
+- `transparent`
 
-### Modal
+**Tamaños disponibles:**
+- `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
 
+#### ButtonGroup
 ```tsx
-<Modal
-  isOpen={isOpen}
-  onClose={() => setOpen(false)}
+import { ButtonGroup } from '@imj_media/ui'
+
+<ButtonGroup>
+  <Button variant="outlined">Izquierda</Button>
+  <Button variant="outlined">Centro</Button>
+  <Button variant="outlined">Derecha</Button>
+</ButtonGroup>
+```
+
+#### Input
+```tsx
+import { Input } from '@imj_media/ui'
+
+<Input
+  label="Email"
+  placeholder="tu@email.com"
   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>
+  color="blue"
+  leftSlot="mail"
+  error="Email inválido"
+  helperText="Ingresa tu email corporativo"
+/>
 ```
 
-**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`)
+**Características:**
+- Soporte para slots izquierdo y derecho
+- Validación de errores
+- Texto de ayuda
+- Auto-redimensionamiento
+- Diferentes tamaños y colores
 
-**Componentes compuestos:**
+#### Textarea
+```tsx
+import { Textarea } from '@imj_media/ui'
 
-- `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`
+<Textarea
+  label="Descripción"
+  placeholder="Describe tu proyecto..."
+  rows={4}
+  maxLength={500}
+/>
+```
 
-- `Modal.Body`: Contenido principal del modal
-  - `children`: `React.ReactNode`
+#### Switch
+```tsx
+import { Switch } from '@imj_media/ui'
 
-- `Modal.Footer`: Pie del modal para acciones
-  - `children`: `React.ReactNode`
+<Switch
+  checked={isEnabled}
+  onChange={setIsEnabled}
+  label="Habilitar notificaciones"
+/>
+```
 
-### Chip
+#### RadioButton
+```tsx
+import { RadioButton } from '@imj_media/ui'
+
+<RadioButton
+  name="tipo"
+  value="personal"
+  checked={tipo === 'personal'}
+  onChange={(value) => setTipo(value)}
+  label="Proyecto Personal"
+/>
+```
+
+#### DatePicker
+```tsx
+import { DatePicker } from '@imj_media/ui'
+
+<DatePicker
+  value={selectedDate}
+  onChange={setSelectedDate}
+  placeholder="Selecciona una fecha"
+  format="DD/MM/YYYY"
+/>
+```
+
+### 🎨 Componentes de Visualización
+
+#### Badge
+```tsx
+import { Badge } from '@imj_media/ui'
+
+<Badge color="green" size="md">
+  Activo
+</Badge>
+```
 
+#### Chip
 ```tsx
+import { Chip } from '@imj_media/ui'
+
 <Chip
-  label="Etiqueta"
-  variant="contained"
-  color="primary"
+  color="blue"
   size="md"
-  rounded="full"
-  badge={false}
-  onClick={() => console.log('Chip clickeado')}
+  onDelete={() => handleDelete()}
+>
+  Etiqueta
+</Chip>
+```
+
+#### Avatar
+```tsx
+import { Avatar } from '@imj_media/ui'
+
+<Avatar
+  src="/avatar.jpg"
+  alt="Usuario"
+  size="md"
+  fallback="U"
+/>
+```
+
+#### Logo
+```tsx
+import { Logo } from '@imj_media/ui'
+
+<Logo
+  src="/logo.svg"
+  alt="IMJ Media"
+  size="lg"
 />
 ```
 
-**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`
+#### Picture
+```tsx
+import { Picture } from '@imj_media/ui'
 
-### Drawer
+<Picture
+  src="/image.jpg"
+  alt="Descripción"
+  size="lg"
+  fallback="/placeholder.jpg"
+/>
+```
 
+#### Visual
 ```tsx
-<Drawer
-  isOpen={isOpen}
-  onClose={() => setOpen(false)}
-  title="Título del drawer"
+import { Visual } from '@imj_media/ui'
+
+<Visual
+  type="icon"
+  name="star"
+  size="lg"
+  color="yellow"
+/>
+```
+
+### 📊 Componentes de Datos
+
+#### Lists
+```tsx
+import { Lists } from '@imj_media/ui'
+
+<Lists>
+  <Lists.Item>Elemento 1</Lists.Item>
+  <Lists.Item>Elemento 2</Lists.Item>
+  <Lists.Item>Elemento 3</Lists.Item>
+</Lists>
+```
+
+#### Pagination
+```tsx
+import { Pagination } from '@imj_media/ui'
+
+<Pagination
+  currentPage={currentPage}
+  totalPages={totalPages}
+  onPageChange={setCurrentPage}
+  showFirstLast={true}
+/>
+```
+
+#### ProgressBar
+```tsx
+import { ProgressBar } from '@imj_media/ui'
+
+<ProgressBar
+  value={75}
+  max={100}
+  color="blue"
   size="md"
-  position="right"
-  showCloseButton={true}
-  disableEscapeClose={false}
-  disableOutsideTab={false}
+  showLabel={true}
+/>
+```
+
+#### Stepper
+```tsx
+import { Stepper } from '@imj_media/ui'
+
+<Stepper
+  steps={[
+    { label: 'Paso 1', status: 'completed' },
+    { label: 'Paso 2', status: 'active' },
+    { label: 'Paso 3', status: 'pending' }
+  ]}
+  currentStep={1}
+/>
+```
+
+**Estados disponibles:**
+- `completed`: Paso completado
+- `active`: Paso actual
+- `pending`: Paso pendiente
+
+### 🔔 Componentes de Notificación
+
+#### Alert
+```tsx
+import { Alert } from '@imj_media/ui'
+
+<Alert
+  type="info"
+  title="Información"
+  description="Este es un mensaje informativo"
+  closable={true}
+  onClose={() => handleClose()}
+/>
+```
+
+#### Toast
+```tsx
+import { Toast } from '@imj_media/ui'
+
+<Toast
+  type="success"
+  title="Éxito"
+  description="Operación completada"
+  duration={5000}
+  position="top-right"
+/>
+```
+
+#### Tooltip
+```tsx
+import { Tooltip } from '@imj_media/ui'
+
+<Tooltip
+  content="Información adicional"
+  position="top"
+  alignment="center"
+  color="blue"
 >
-  <p>Contenido del drawer</p>
-</Drawer>
+  <Button>Hover me</Button>
+</Tooltip>
 ```
 
-**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`)
+### 🎭 Componentes de Layout
 
-### Icon
+#### Cards
+```tsx
+import { Cards } from '@imj_media/ui'
+
+<Cards>
+  <Cards.Header>
+    <Cards.Title>Título de la Tarjeta</Cards.Title>
+    <Cards.Subtitle>Subtítulo opcional</Cards.Subtitle>
+  </Cards.Header>
+  <Cards.Body>
+    Contenido de la tarjeta
+  </Cards.Body>
+  <Cards.Footer>
+    <Button>Acción</Button>
+  </Cards.Footer>
+</Cards>
+```
 
+#### Separator
 ```tsx
-<Icon
-  name="CheckOutlined"
+import { Separator } from '@imj_media/ui'
+
+<Separator orientation="horizontal" />
+<Separator orientation="vertical" />
+```
+
+#### Tag
+```tsx
+import { Tag } from '@imj_media/ui'
+
+<Tag
+  color="blue"
   size="md"
-  color="primary"
-  fill="black"
-  className="custom-icon"
+  closable={true}
+  onClose={() => handleClose()}
+>
+  Etiqueta
+</Tag>
+```
+
+### 🎨 Componentes de Iconos y Emojis
+
+#### Icon
+```tsx
+import { Icon } from '@imj_media/ui'
+
+<Icon
+  name="star"
+  variant="fill"
+  size="lg"
+  color="yellow"
 />
 ```
 
-**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 />
-    </>
-  );
+**Variantes disponibles:**
+- `outline`: Iconos con contorno
+- `fill`: Iconos rellenos
+
+#### Emoji
+```tsx
+import { Emoji } from '@imj_media/ui'
+
+<Emoji name="smile" size="lg" />
+```
+
+### 🎬 Componentes Especiales
+
+#### StoryBox
+```tsx
+import { StoryBox } from '@imj_media/ui'
+
+<StoryBox
+  title="Historia del Usuario"
+  description="Como usuario, quiero..."
+  priority="high"
+  status="in-progress"
+/>
+```
+
+#### Filters
+```tsx
+import { Filters } from '@imj_media/ui'
+
+<Filters
+  filters={[
+    { key: 'status', label: 'Estado', type: 'select' },
+    { key: 'priority', label: 'Prioridad', type: 'radio' }
+  ]}
+  onFilterChange={handleFilterChange}
+/>
+```
+
+## 🎨 Sistema de Colores
+
+El paquete incluye un sistema de colores completo con variables CSS personalizables:
+
+```css
+:root {
+  --ui-color-blue-50: #ebeef9;
+  --ui-color-blue-500: #3658c1;
+  --ui-color-blue-900: #172551;
+  
+  --ui-color-green-50: #f0f9f0;
+  --ui-color-green-500: #039b59;
+  --ui-color-green-900: #014125;
+  
+  --ui-color-red-50: #f9eae9;
+  --ui-color-red-500: #c62e1f;
+  --ui-color-red-900: #53130d;
+  
+  --ui-color-orange-50: #fcf3e9;
+  --ui-color-orange-500: #dc8921;
+  --ui-color-orange-900: #5c3a0e;
+  
+  --ui-color-yellow-50: #fcfbec;
+  --ui-color-yellow-500: #e1d63d;
+  --ui-color-yellow-900: #5f5a1a;
+  
+  --ui-color-neutral-50: #f0f0f0;
+  --ui-color-neutral-500: #6b6b6b;
+  --ui-color-neutral-900: #2d2d2d;
 }
 ```
 
-**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)`
+## 🛠️ Utilidades
 
-**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`)
+### Función `cn()`
+Utilidad para combinar clases CSS de manera inteligente:
 
-**Configuración global:**
 ```tsx
-import { configure } from '@imj_media/ui';
+import { cn } from '@imj_media/ui'
 
-configure({
-  defaultDuration: 5000,
-  maxToasts: 5,
-  defaultPosition: 'top-right',
-  animationDuration: 300,
-  defaultVariant: 'contained'
-});
+const className = cn(
+  'base-class',
+  condition && 'conditional-class',
+  'another-class'
+)
 ```
 
-## Tipos TypeScript
+## 📱 Responsive Design
+
+Todos los componentes están diseñados para ser completamente responsivos:
+
+- **Breakpoints**: xs, sm, md, lg, xl, 2xl
+- **Mobile First**: Diseño optimizado para dispositivos móviles
+- **Adaptive Layouts**: Componentes que se adaptan automáticamente
 
-Todos los componentes exportan sus props:
+## ♿ Accesibilidad
 
-```ts
-import type { 
-  IButtonProps, 
-  ModalProps, 
-  IChipProps, 
-  DrawerProps, 
-  IconProps,
-  Toast,
-  ToastOptions 
-} from '@imj_media/ui';
+Los componentes siguen las mejores prácticas de accesibilidad:
+
+- **ARIA Labels**: Etiquetas descriptivas para lectores de pantalla
+- **Keyboard Navigation**: Navegación completa por teclado
+- **Focus Management**: Manejo inteligente del foco
+- **Screen Reader Support**: Compatibilidad con lectores de pantalla
+
+## 🎨 Personalización
+
+### Variables CSS
+Puedes personalizar el tema modificando las variables CSS:
+
+```css
+:root {
+  --ui-color-blue-500: #your-custom-blue;
+  --ui-color-green-500: #your-custom-green;
+}
 ```
 
-## Estilos
+### Tailwind CSS
+Todos los componentes utilizan Tailwind CSS y pueden ser personalizados a través de tu configuración:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'custom-blue': '#1234567',
+      }
+    }
+  }
+}
+```
+
+## 📚 Storybook
+
+Para ver todos los componentes en acción y explorar sus variantes:
+
+```bash
+npm run storybook
+```
+
+Storybook incluye:
+- **Documentación interactiva** de todos los componentes
+- **Controles en tiempo real** para probar diferentes props
+- **Ejemplos de uso** y mejores prácticas
+- **Testing visual** de componentes
+
+## 🔧 Scripts Disponibles
+
+```json
+{
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\""
+  }
+}
+```
+
+## 📦 Dependencias
+
+### Peer Dependencies
+- `react`: ^18.0.0
+- `react-dom`: ^18.0.0
+
+### Dependencies Principales
+- `class-variance-authority`: Sistema de variantes de componentes
+- `clsx`: Utilidad para combinar clases CSS
+- `tailwind-merge`: Fusión inteligente de clases Tailwind
+- `tailwind-variants`: Sistema de variantes tipadas
+
+## 🚀 Roadmap
+
+- [ ] Componente de Tabla avanzada
+- [ ] Componente de Gráficos
+- [ ] Componente de Calendario
+- [ ] Componente de Drag & Drop
+- [ ] Componente de Rich Text Editor
+- [ ] Temas oscuros/claros
+- [ ] Internacionalización (i18n)
+
+## 🤝 Contribuir
+
+1. Fork el proyecto
+2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
+3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
+4. Push a la rama (`git push origin feature/AmazingFeature`)
+5. Abre un Pull Request
+
+## 📄 Licencia
+
+Este proyecto está bajo la Licencia ISC. Ver el archivo `LICENSE` para más detalles.
+
+## 👥 Autores
+
+- **Oscar Rubio - IMJ** - *Desarrollo inicial* - [oscar.rubio@imjmedia.com.mx](mailto:oscar.rubio@imjmedia.com.mx)
+
+## 🙏 Agradecimientos
 
-El paquete incluye estilos CSS que se importan automáticamente. Los componentes utilizan Tailwind CSS para el styling.
+- [Tailwind CSS](https://tailwindcss.com/) por el sistema de diseño
+- [React](https://reactjs.org/) por el framework
+- [TypeScript](https://www.typescriptlang.org/) por el tipado estático
+- [Storybook](https://storybook.js.org/) por la documentación interactiva
 
-## Versión
+---
 
-Versión actual: **1.0.7** 
+**¿Necesitas ayuda?** Abre un issue en el repositorio o contacta al equipo de desarrollo.