@onpe/ui 1.0.28 → 1.0.30

package/README.md

@@ -29,69 +29,40 @@ npx onpe-ui add <componente>
 
 ## ⚠️ Importante sobre Estilos
 
-### Opción 1: Librería Completa (Recomendado)
-Esta librería **NO requiere** que instales TailwindCSS en tu proyecto. Los estilos ya están compilados y optimizados. Solo necesitas importar los estilos:
-
-```tsx
-// En tu archivo principal (index.tsx, App.tsx, etc.)
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
-```
-
-### Opción 2: Componentes Individuales (CLI)
-Si instalas componentes individualmente con la CLI, **SÍ necesitas** instalar y configurar TailwindCSS en tu proyecto, y crear un archivo CSS con las variables personalizadas.
+**Esta librería requiere que instales y configures TailwindCSS en tu proyecto.** Los componentes usan clases de TailwindCSS que necesitan estar configuradas correctamente.
 
 ## 📖 Uso Básico
 
-### Opción 1: Usar la Librería Completa
-
-#### Importar estilos
-```tsx
-// Importar estilos de la librería
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
-```
-
-#### Usar componentes
-```tsx
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
-
-function App() {
-  return (
-    <div>
-      <Button color="primary" title="Votar Ahora" size="normal" />
-      <Button color="skyblue" title="Ver Resultados" size="large" />
-    </div>
-  );
-}
-```
-
-### Opción 2: Instalar Componentes Individualmente con CLI
+### Instalar Componentes con CLI
 
-#### Instalar un componente específico
+#### Instalar componentes específicos
 ```bash
-# Instalar Button
+# Componentes
 npx onpe-ui add button
-
-# Instalar Modal (instala automáticamente Portal y Overlay)
 npx onpe-ui add modal
-
-# Instalar Portal
 npx onpe-ui add portal
-
-# Instalar Overlay
 npx onpe-ui add overlay
-
-# Instalar Show
 npx onpe-ui add show
+
+# Iconos
+npx onpe-ui add icon-close
+npx onpe-ui add icon-check
+npx onpe-ui add icon-warning
+npx onpe-ui add icon-chrome
+npx onpe-ui add icon-firefox
+npx onpe-ui add icon-safari
+npx onpe-ui add icon-edge
+npx onpe-ui add icon-windows
+npx onpe-ui add icon-apple
+npx onpe-ui add icon-android
 ```
 
 #### Usar componentes instalados individualmente
 ```tsx
 // Después de instalar con CLI
-import { Button } from './components/ui/Button';
-import { Modal } from './components/ui/Modal';
+import { Button } from './components/onpe-ui/Button';
+import { Modal } from './components/onpe-ui/Modal';
+import { IconClose } from './components/onpe-icons/IconClose';
 import { useState } from 'react';
 
 function App() {
@@ -114,11 +85,14 @@ function App() {
         <div className="p-6">
           <h2 className="text-xl font-bold mb-4">Contenido del Modal</h2>
           <p className="mb-4">Este es un ejemplo de modal con contenido.</p>
-          <Button 
-            color="green" 
-            title="Cerrar" 
-            onClick={() => setIsOpen(false)} 
-          />
+          <div className="flex items-center gap-2">
+            <IconClose className="w-4 h-4" />
+            <Button 
+              color="green" 
+              title="Cerrar" 
+              onClick={() => setIsOpen(false)} 
+            />
+          </div>
         </div>
       </Modal>
     </div>
@@ -248,12 +222,21 @@ npx onpe-ui add show      # Sin dependencias
 ```
 src/
 └── components/
-    └── ui/
-        ├── Button.tsx
-        ├── Modal.tsx
-        ├── Overlay.tsx
-        ├── Portal.tsx
-        └── Show.tsx
+    ├── ui/           # shadcn/ui (si está instalado)
+    │   ├── button.tsx
+    │   └── input.tsx
+    ├── onpe-ui/      # ONPE UI - Componentes
+    │   ├── Button.tsx
+    │   ├── Modal.tsx
+    │   ├── Overlay.tsx
+    │   ├── Portal.tsx
+    │   └── Show.tsx
+    └── onpe-icons/   # ONPE UI - Iconos
+        ├── IconClose.tsx
+        ├── IconCheck.tsx
+        ├── IconChrome.tsx
+        ├── IconFirefox.tsx
+        └── IconWindows.tsx
 ```
 
 ## 🧩 Componentes Disponibles
@@ -1382,18 +1365,19 @@ npm install @onpe/ui
 **Estilos no se cargan**
 ```tsx
 /* Verificar que tengas la importación correcta */
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
+import './onpe-ui.css';
+import { Button } from './components/onpe-ui/Button';
 ```
 
 **Solución: Verificar rutas de importación**
 ```tsx
-// ✅ CORRECTO: Importar estilos de la librería
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
+// ✅ CORRECTO: Importar archivo CSS personalizado
+import './onpe-ui.css';
+import { Button } from './components/onpe-ui/Button';
+import { IconClose } from './components/onpe-icons/IconClose';
 
-// ❌ INCORRECTO: No importar los estilos
-import { Button } from '@onpe/ui/components';
+// ❌ INCORRECTO: No importar el archivo CSS
+import { Button } from './components/onpe-ui/Button';
 ```
 
 **Solución: Verificar configuración de bundler**
@@ -1550,34 +1534,14 @@ export default preview;
 npm list @onpe/ui
 ```
 
-**Paso 2: Importar estilos (Librería Completa)**
-```tsx
-// En tu archivo principal (index.tsx)
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
-```
-
-**Paso 3: Verificar orden de importación**
-```tsx
-// ✅ CORRECTO
-import '@onpe/ui/styles';
-import { Button } from '@onpe/ui/components';
-
-// ❌ INCORRECTO
-import { Button } from '@onpe/ui/components';
-// Falta importar los estilos
-```
-
-### ¿Usas CLI para componentes individuales?
-
-**Entonces SÍ necesitas configurar TailwindCSS:**
+**Paso 2: Configurar TailwindCSS**
 ```bash
 # Instalar TailwindCSS
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-**Y crear archivo CSS personalizado:**
+**Paso 3: Crear archivo CSS personalizado**
 ```css
 /* Crear archivo onpe-ui.css */
 :root {
@@ -1592,6 +1556,26 @@ npx tailwindcss init -p
 }
 ```
 
+**Paso 4: Importar archivo CSS**
+```tsx
+// En tu archivo principal (index.tsx)
+import './onpe-ui.css';
+import { Button } from './components/onpe-ui/Button';
+import { IconClose } from './components/onpe-icons/IconClose';
+```
+
+**Paso 5: Verificar orden de importación**
+```tsx
+// ✅ CORRECTO
+import './onpe-ui.css';
+import { Button } from './components/onpe-ui/Button';
+import { IconClose } from './components/onpe-icons/IconClose';
+
+// ❌ INCORRECTO
+import { Button } from './components/onpe-ui/Button';
+// Falta importar el archivo CSS
+```
+
 ### ¿Los colores no funcionan?
 
 **Solución: Usar clases correctas**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onpe/ui",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "type": "module",
   "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
   "main": "dist/index.js",