@onpe/ui 1.0.27 → 1.0.29

package/README.md

@@ -29,112 +29,11 @@ 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 crear tu propio archivo CSS con las variables personalizadas:
-
-#### Crear archivo CSS personalizado
-Crea un archivo llamado `onpe-ui.css` en la raíz de tu proyecto:
-
-```css
-/* Solo definimos nuestras variables y estilos personalizados */
-
-
-
-:root {
-  --blue: #003770;
-  --skyblue: #0073cf;
-  --skyblue-light: #69b2e8;
-  --yellow: #ffb81c;
-  --light-skyblue: #aaeff6;
-  --gray: #bcbcbc;
-  --gray-light: #bdbdbd;
-  --gray-extra-light: #f2f2f2;
-  --red: #e3002b;
-  --dark-gray: #4f4f4f;
-  --green: #76bd43;
-  --yellow-light: #FFF1D2;
-}
-
-@theme {
-  --color-onpe-ui-blue: var(--blue);
-  --color-onpe-ui-skyblue: var(--skyblue);
-  --color-onpe-ui-skyblue-light: var(--skyblue-light);
-  --color-onpe-ui-yellow: var(--yellow);
-  --color-onpe-ui-light-skyblue: var(--light-skyblue);
-  --color-onpe-ui-gray: var(--gray);
-  --color-onpe-ui-gray-light: var(--gray-light);
-  --color-onpe-ui-gray-extra-light: var(--gray-extra-light);
-  --color-onpe-ui-red: var(--red);
-  --color-onpe-ui-dark-gray: var(--dark-gray);
-  --color-onpe-ui-green: var(--green);
-  --color-onpe-ui-yellow-light: var(--yellow-light);
-}
-
-
-button{
-  cursor: pointer;
-}
-
-
-@keyframes fastBlink {
-  0% {
-    opacity: 1;
-  }
-  25% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  75% {
-    opacity: 0.8;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.fast-blink {
-  animation: fastBlink 0.8s ease-in-out infinite;
-}
-```
-
-#### Importar el archivo CSS en tu proyecto
-```tsx
-// En tu archivo principal (index.tsx, App.tsx, etc.)
-import './onpe-ui.css';
-import { Button } from '@onpe/ui/components';
-```
-
-### Opción 2: Componentes Individuales
-Si instalas componentes individualmente con la CLI, **SÍ necesitas** instalar y configurar TailwindCSS en tu proyecto.
+**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 tu archivo CSS personalizado
-import './onpe-ui.css';
-import { Button } from '@onpe/ui/components';
-```
-
-#### Usar componentes
-```tsx
-import './onpe-ui.css';
-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
 ```bash
@@ -1450,17 +1349,17 @@ npm install @onpe/ui
 ```tsx
 /* Verificar que tengas la importación correcta */
 import './onpe-ui.css';
-import { Button } from '@onpe/ui/components';
+import { Button } from './components/ui/Button';
 ```
 
 **Solución: Verificar rutas de importación**
 ```tsx
-// ✅ CORRECTO: Importar tu archivo CSS personalizado
+// ✅ CORRECTO: Importar archivo CSS personalizado
 import './onpe-ui.css';
-import { Button } from '@onpe/ui/components';
+import { Button } from './components/ui/Button';
 
 // ❌ INCORRECTO: No importar el archivo CSS
-import { Button } from '@onpe/ui/components';
+import { Button } from './components/ui/Button';
 ```
 
 **Solución: Verificar configuración de bundler**
@@ -1617,9 +1516,16 @@ export default preview;
 npm list @onpe/ui
 ```
 
-**Paso 2: Crear archivo CSS personalizado**
+**Paso 2: Configurar TailwindCSS**
+```bash
+# Instalar TailwindCSS
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+**Paso 3: Crear archivo CSS personalizado**
 ```css
-/* Crear archivo onpe-ui.css en la raíz del proyecto */
+/* Crear archivo onpe-ui.css */
 :root {
   --blue: #003770;
   --skyblue: #0073cf;
@@ -1632,21 +1538,21 @@ npm list @onpe/ui
 }
 ```
 
-**Paso 3: Importar estilos**
+**Paso 4: Importar archivo CSS**
 ```tsx
 // En tu archivo principal (index.tsx)
 import './onpe-ui.css';
-import { Button } from '@onpe/ui/components';
+import { Button } from './components/ui/Button';
 ```
 
-**Paso 4: Verificar orden de importación**
+**Paso 5: Verificar orden de importación**
 ```tsx
 // ✅ CORRECTO
 import './onpe-ui.css';
-import { Button } from '@onpe/ui/components';
+import { Button } from './components/ui/Button';
 
 // ❌ INCORRECTO
-import { Button } from '@onpe/ui/components';
+import { Button } from './components/ui/Button';
 // Falta importar el archivo CSS
 ```
 

package/package.json

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