tailjng 0.1.3 → 0.1.5

package/lib/services/report/upload.filter.service.d.ts

@@ -46,6 +46,9 @@ export declare class JUploadFilterService {
      * @param clearFileInputFn Function to clear the file input.
      */
     processExcelUpload(file: File, columns: TableColumn<any>[], button: any, afterProcessing: (json: any[], filteredColumns: TableColumn<any>[], equivalences: Record<string, Record<string | number, string>>) => void, setLoadingFn: (value: boolean) => void, clearFileInputFn: () => void): void;
+    private parseUploadedWorkbook;
+    private readWorkbookAsRowArrays;
+    private getCellPlainValue;
     /**
      * Generates catalogs of valid values for select-type fields.
      * @param results Results of the list searches.

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "tailjng",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",
     "@angular/animations": "^19.2.0",
-    "@ng-icons/lucide": ">=29.0.0",
-    "lucide-angular": ">=0.477.0",
+    "lucide-angular": ">=0.477.0 <1.0.0",
     "tailwindcss": ">=4.0.9",
     "date-fns": ">=4.1.0",
     "exceljs": ">=4.4.0",
-    "xlsx": ">=0.18.5",
     "file-saver": ">=2.0.5"
   },
   "bin": {

package/registry/components.json

@@ -1,6 +1,6 @@
 {
   "components": {
-    "colors-config": {
+    "colors": {
       "path": "src/lib/components/colors-config",
       "dependencies": []
     },

package/src/colors.safelist.css

@@ -1,4 +1,29 @@
-/* AUTO-GENERATED — do not edit. Run: node scripts/generate-colors-safelist.mjs */
-/* Tailwind v4 safelist for JColorsService dynamic classes (npm bundle). */
+/* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
+/* npm fallback — prefer src/app/tailjng/colors/colors.safelist.css in projects */
 
-@source inline("bg-accent/40 bg-background bg-background/80 bg-black/5 bg-blue-50 bg-blue-500 bg-blue-500/10 bg-cyan-500 bg-cyan-500/10 bg-dark-background bg-gray-50 bg-gray-500 bg-gray-500/10 bg-green-50 bg-green-500 bg-green-500/10 bg-none bg-orange-500 bg-orange-500/10 bg-pink-500 bg-pink-500/10 bg-primary bg-primary/10 bg-primary/80 bg-purple-50 bg-purple-500 bg-purple-500/10 bg-red-50 bg-red-500 bg-red-500/10 bg-teal-500 bg-teal-500/10 bg-transparent bg-white bg-yellow-50 bg-yellow-600 bg-yellow-600/10 border border-blue-300 border-blue-500 border-blue-500/20 border-border border-cyan-300 border-cyan-500 border-cyan-500/20 border-dark-border border-dark-border/20 border-gray-400 border-gray-500 border-gray-500/20 border-green-300 border-green-500 border-green-500/20 border-orange-300 border-orange-500 border-orange-500/20 border-pink-300 border-pink-500 border-pink-500/20 border-primary border-primary/20 border-primary/30 border-purple-300 border-purple-400 border-purple-500 border-purple-500/20 border-red-400 border-red-500 border-red-500/20 border-teal-300 border-teal-500 border-teal-500/20 border-transparent border-yellow-500 border-yellow-600 border-yellow-600/20 dark:bg-[#15181e] dark:bg-[#15241f] dark:bg-[#1a1a24] dark:bg-[#1f1c1a] dark:bg-[#21181c] dark:bg-[#241732] dark:bg-dark-accent/30 dark:bg-dark-background dark:bg-dark-background/80 dark:bg-foreground dark:bg-input dark:bg-input/15 dark:bg-input/80 dark:bg-white/10 dark:border-blue-300 dark:border-blue-600 dark:border-border dark:border-border/20 dark:border-cyan-300 dark:border-cyan-600 dark:border-dark-border dark:border-gray-400 dark:border-gray-600 dark:border-green-300 dark:border-green-600 dark:border-input dark:border-input/30 dark:border-input/40 dark:border-orange-300 dark:border-orange-600 dark:border-pink-300 dark:border-pink-600 dark:border-purple-300 dark:border-purple-400 dark:border-purple-600 dark:border-red-400 dark:border-red-600 dark:border-teal-300 dark:border-teal-600 dark:border-transparent dark:border-yellow-500 dark:border-yellow-700 dark:hover:bg-blue-500/15 dark:hover:bg-blue-600/10 dark:hover:bg-border/10 dark:hover:bg-cyan-500/15 dark:hover:bg-cyan-600/10 dark:hover:bg-dark-accent/40 dark:hover:bg-dark-accent/50 dark:hover:bg-dark-background dark:hover:bg-gray-500/15 dark:hover:bg-gray-600/10 dark:hover:bg-green-500/15 dark:hover:bg-green-600/10 dark:hover:bg-input dark:hover:bg-input/15 dark:hover:bg-input/25 dark:hover:bg-input/60 dark:hover:bg-input/80 dark:hover:bg-orange-500/15 dark:hover:bg-orange-600/10 dark:hover:bg-pink-500/15 dark:hover:bg-pink-600/10 dark:hover:bg-purple-500/15 dark:hover:bg-purple-600/10 dark:hover:bg-red-500/15 dark:hover:bg-red-600/10 dark:hover:bg-teal-500/15 dark:hover:bg-teal-600/10 dark:hover:bg-white/10 dark:hover:bg-white/15 dark:hover:bg-yellow-600/15 dark:hover:bg-yellow-700/10 dark:hover:text-white dark:text-blue-400 dark:text-border dark:text-cyan-400 dark:text-gray-400 dark:text-green-400 dark:text-input dark:text-orange-400 dark:text-pink-400 dark:text-purple-400 dark:text-red-400 dark:text-teal-400 dark:text-white dark:text-yellow-400 hover:bg-accent hover:bg-accent/60 hover:bg-accent/70 hover:bg-background hover:bg-black/10 hover:bg-black/5 hover:bg-blue-500/10 hover:bg-blue-500/20 hover:bg-blue-600 hover:bg-cyan-500/10 hover:bg-cyan-500/20 hover:bg-cyan-600 hover:bg-dark-accent/50 hover:bg-dark-border/10 hover:bg-gray-500/10 hover:bg-gray-500/20 hover:bg-gray-600 hover:bg-green-500/10 hover:bg-green-500/20 hover:bg-green-600 hover:bg-orange-500/10 hover:bg-orange-500/20 hover:bg-orange-600 hover:bg-pink-500/10 hover:bg-pink-500/20 hover:bg-pink-600 hover:bg-primary hover:bg-primary/10 hover:bg-primary/20 hover:bg-primary/80 hover:bg-purple-500/10 hover:bg-purple-500/20 hover:bg-purple-600 hover:bg-red-500/10 hover:bg-red-500/20 hover:bg-red-600 hover:bg-teal-500/10 hover:bg-teal-500/20 hover:bg-teal-600 hover:bg-yellow-600/10 hover:bg-yellow-600/20 hover:bg-yellow-700 shadow-md shadow-sm text-black text-blue-500 text-blue-600 text-cyan-500 text-cyan-600 text-dark-border text-gray-500 text-gray-600 text-green-500 text-green-600 text-orange-500 text-orange-600 text-pink-500 text-pink-600 text-primary text-purple-500 text-purple-600 text-red-500 text-red-600 text-teal-500 text-teal-600 text-white text-yellow-500 text-yellow-600 text-yellow-700");
+@layer utilities {
+  .__tailjng_colors_safelist_1__ {
+    @apply bg-accent/40 bg-background bg-background/80 bg-black/5 bg-blue-50 bg-blue-500 bg-blue-500/10 bg-cyan-500 bg-cyan-500/10 bg-dark-background bg-gray-50 bg-gray-500 bg-gray-500/10 bg-green-50 bg-green-500 bg-green-500/10 bg-none bg-orange-500 bg-orange-500/10 bg-pink-500 bg-pink-500/10 bg-primary bg-primary/10 bg-primary/80 bg-purple-50 bg-purple-500 bg-purple-500/10 bg-red-50 bg-red-500 bg-red-500/10 bg-teal-500 bg-teal-500/10 bg-transparent bg-white bg-yellow-50 bg-yellow-600 bg-yellow-600/10 border border-blue-300 border-blue-500 border-blue-500/20 border-border border-cyan-300 border-cyan-500 border-cyan-500/20 border-dark-border border-dark-border/20 border-gray-400 border-gray-500 border-gray-500/20;
+  }
+
+  .__tailjng_colors_safelist_2__ {
+    @apply border-green-300 border-green-500 border-green-500/20 border-orange-300 border-orange-500 border-orange-500/20 border-pink-300 border-pink-500 border-pink-500/20 border-primary border-primary/20 border-primary/30 border-purple-300 border-purple-400 border-purple-500 border-purple-500/20 border-red-400 border-red-500 border-red-500/20 border-teal-300 border-teal-500 border-teal-500/20 border-transparent border-yellow-500 border-yellow-600 border-yellow-600/20 dark:bg-[#15181e] dark:bg-[#15241f] dark:bg-[#1a1a24] dark:bg-[#1f1c1a] dark:bg-[#21181c] dark:bg-[#241732] dark:bg-dark-accent/30 dark:bg-dark-background dark:bg-dark-background/80 dark:bg-foreground dark:bg-input dark:bg-input/15 dark:bg-input/80 dark:bg-white/10 dark:border-blue-300 dark:border-blue-600 dark:border-border dark:border-border/20 dark:border-cyan-300 dark:border-cyan-600 dark:border-dark-border dark:border-gray-400 dark:border-gray-600 dark:border-green-300;
+  }
+
+  .__tailjng_colors_safelist_3__ {
+    @apply dark:border-green-600 dark:border-input dark:border-input/30 dark:border-input/40 dark:border-orange-300 dark:border-orange-600 dark:border-pink-300 dark:border-pink-600 dark:border-purple-300 dark:border-purple-400 dark:border-purple-600 dark:border-red-400 dark:border-red-600 dark:border-teal-300 dark:border-teal-600 dark:border-transparent dark:border-yellow-500 dark:border-yellow-700 dark:hover:bg-blue-500/15 dark:hover:bg-blue-600/10 dark:hover:bg-border/10 dark:hover:bg-cyan-500/15 dark:hover:bg-cyan-600/10 dark:hover:bg-dark-accent/40 dark:hover:bg-dark-accent/50 dark:hover:bg-dark-background dark:hover:bg-gray-500/15 dark:hover:bg-gray-600/10 dark:hover:bg-green-500/15 dark:hover:bg-green-600/10 dark:hover:bg-input dark:hover:bg-input/15 dark:hover:bg-input/25 dark:hover:bg-input/60 dark:hover:bg-input/80 dark:hover:bg-orange-500/15 dark:hover:bg-orange-600/10 dark:hover:bg-pink-500/15 dark:hover:bg-pink-600/10 dark:hover:bg-purple-500/15 dark:hover:bg-purple-600/10 dark:hover:bg-red-500/15 dark:hover:bg-red-600/10 dark:hover:bg-teal-500/15 dark:hover:bg-teal-600/10 dark:hover:bg-white/10 dark:hover:bg-white/15 dark:hover:bg-yellow-600/15 dark:hover:bg-yellow-700/10 dark:hover:text-white;
+  }
+
+  .__tailjng_colors_safelist_4__ {
+    @apply dark:text-blue-400 dark:text-border dark:text-cyan-400 dark:text-gray-400 dark:text-green-400 dark:text-input dark:text-orange-400 dark:text-pink-400 dark:text-purple-400 dark:text-red-400 dark:text-teal-400 dark:text-white dark:text-yellow-400 hover:bg-accent hover:bg-accent/60 hover:bg-accent/70 hover:bg-background hover:bg-black/10 hover:bg-black/5 hover:bg-blue-500/10 hover:bg-blue-500/20 hover:bg-blue-600 hover:bg-cyan-500/10 hover:bg-cyan-500/20 hover:bg-cyan-600 hover:bg-dark-accent/50 hover:bg-dark-border/10 hover:bg-gray-500/10 hover:bg-gray-500/20 hover:bg-gray-600 hover:bg-green-500/10 hover:bg-green-500/20 hover:bg-green-600 hover:bg-orange-500/10 hover:bg-orange-500/20 hover:bg-orange-600 hover:bg-pink-500/10 hover:bg-pink-500/20 hover:bg-pink-600 hover:bg-primary hover:bg-primary/10 hover:bg-primary/20 hover:bg-primary/80 hover:bg-purple-500/10 hover:bg-purple-500/20 hover:bg-purple-600 hover:bg-red-500/10 hover:bg-red-500/20 hover:bg-red-600 hover:bg-teal-500/10;
+  }
+
+  .__tailjng_colors_safelist_5__ {
+    @apply hover:bg-teal-500/20 hover:bg-teal-600 hover:bg-yellow-600/10 hover:bg-yellow-600/20 hover:bg-yellow-700 shadow-md shadow-sm text-black text-blue-500 text-blue-600 text-cyan-500 text-cyan-600 text-dark-border text-gray-500 text-gray-600 text-green-500 text-green-600 text-orange-500 text-orange-600 text-pink-500 text-pink-600 text-primary text-purple-500 text-purple-600 text-red-500 text-red-600 text-teal-500 text-teal-600 text-white text-yellow-500 text-yellow-600 text-yellow-700;
+  }
+
+  /* ── Tus colores custom: descomenta y añade clases Tailwind ── */
+  .__tailjng_custom_colors__ {
+    /* @apply bg-indigo-600 text-white hover:bg-indigo-700; */
+  }
+}

package/src/lib/components/colors-config/README.md

@@ -0,0 +1,38 @@
+# Colores Tailjng — configuración del proyecto
+
+Carpeta generada por `init:app`, `sync:app` o `npx tailjng add colors`.
+
+## Archivos
+
+| Archivo | Para qué |
+|---------|----------|
+| `colors.config.ts` | Variantes (`primary`, `success_soft`, …) + las tuyas (`brand`, etc.) |
+| `colors.safelist.css` | Clases Tailwind que el build debe generar (`@apply`) |
+
+## Añadir un color propio
+
+**1.** En `colors.config.ts`:
+
+```typescript
+brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
+brand_soft: 'bg-indigo-500/10 text-indigo-600 border border-indigo-500/20 shadow-sm',
+```
+
+**2.** En `colors.safelist.css`, dentro del bloque `@layer utilities`:
+
+```css
+.__tailjng_custom_colors__ {
+  @apply bg-indigo-600 text-white hover:bg-indigo-700 border-indigo-500 bg-indigo-500/10 text-indigo-600;
+}
+```
+
+**3.** Uso en componentes:
+
+```html
+<JButton classes="brand" text="Guardar" />
+<JBadge classes="brand_soft" value="N" />
+```
+
+## Provider
+
+`app.config.ts` debe incluir `tailjngColorsProvider` (lo añade `init:app` / `sync:app`).

package/src/lib/components/colors-config/colors.config.ts

@@ -1,19 +1,112 @@
 import { TAILJNG_COLORS_CONFIG } from 'tailjng';
 
 /**
- * Variantes de color personalizadas del proyecto.
- * Uso en componentes: classes="brand" o classes="brand_soft"
+ * Variantes de color — edita las existentes o añade las tuyas al final.
+ * Uso en componentes: classes="primary" | classes="success_soft" | classes="brand"
  *
- * Importante: cada clase Tailwind que uses aquí debe estar también en colors.safelist.css
- * (@source inline) para que el build las genere.
+ * Si añades variantes nuevas con clases Tailwind nuevas, regístralas también
+ * en colors.safelist.css (bloque .__tailjng_custom_colors__).
  */
-export const customColorVariants: Record<string, string> = {
+export const colorVariants: Record<string, string> = {
+
+        primary: 'bg-primary dark:bg-input text-white dark:text-white hover:bg-primary/80 dark:hover:bg-input/60 dark:hover:text-white shadow-md border border-dark-border dark:border-border',
+        primary_soft: 'bg-primary/10 dark:bg-input/15 text-primary dark:text-input hover:bg-primary/20 dark:hover:bg-input/25 border border-primary/20 dark:border-input/30 shadow-sm',
+        primary_outline: 'bg-transparent text-primary dark:text-input border border-primary dark:border-input hover:bg-primary/10 dark:hover:bg-input/15 shadow-sm',
+        primary_ghost: 'bg-transparent text-primary dark:text-input hover:bg-primary/10 dark:hover:bg-input/15 border border-transparent dark:border-transparent',
+        primary_light: 'bg-primary/80 dark:bg-input/80 text-white hover:bg-primary dark:hover:bg-input border border-primary/30 dark:border-input/40 shadow-md',
+        primary_dark: 'bg-primary text-white dark:bg-input hover:bg-primary/80 dark:hover:bg-input/80 border border-dark-border dark:border-border shadow-md',
+
+        primary_secondary: 'bg-none text-dark-border dark:text-border border border-dark-border dark:border-border hover:bg-dark-border/10 dark:hover:bg-border/10 shadow-md',
+
+        secondary: 'bg-background dark:bg-dark-background text-black border border-dark-border dark:border-border dark:text-white hover:bg-accent dark:hover:bg-dark-accent/50',
+        secondary_soft: 'bg-accent/40 dark:bg-dark-accent/30 text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent/70 dark:hover:bg-dark-accent/50 shadow-sm',
+        secondary_outline: 'bg-transparent text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent dark:hover:bg-dark-accent/40 shadow-sm',
+        secondary_ghost: 'bg-transparent text-black dark:text-white hover:bg-accent/60 dark:hover:bg-dark-accent/40 border border-transparent dark:border-transparent',
+        secondary_light: 'bg-background/80 dark:bg-dark-background/80 text-black dark:text-white border border-border dark:border-dark-border hover:bg-background dark:hover:bg-dark-background shadow-sm',
+        secondary_dark: 'bg-dark-background text-white border border-dark-border hover:bg-dark-accent/50 shadow-md',
+
+        success: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
+        success_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        success_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
+        success_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
+        success_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
+
+        info: 'bg-blue-500 hover:bg-blue-600 text-white border border-blue-300 dark:border-blue-300 shadow-md',
+        info_secondary: 'bg-none text-blue-500 border border-blue-500 dark:border-blue-600 hover:bg-blue-500/10 dark:hover:bg-blue-600/10 shadow-md',
+        info_soft: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 dark:hover:bg-blue-500/15 shadow-sm',
+        info_outline: 'bg-transparent text-blue-500 border border-blue-500 hover:bg-blue-500/10 shadow-sm',
+        info_ghost: 'bg-transparent text-blue-500 hover:bg-blue-500/10 border border-transparent dark:border-transparent',
+
+        warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border border-yellow-500 dark:border-yellow-500 shadow-md',
+        warning_secondary: 'bg-none text-yellow-600 border border-yellow-600 dark:border-yellow-700 hover:bg-yellow-600/10 dark:hover:bg-yellow-700/10 shadow-md',
+        warning_soft: 'bg-yellow-600/10 text-yellow-700 dark:text-yellow-400 border border-yellow-600/20 hover:bg-yellow-600/20 dark:hover:bg-yellow-600/15 shadow-sm',
+        warning_outline: 'bg-transparent text-yellow-600 border border-yellow-600 hover:bg-yellow-600/10 shadow-sm',
+        warning_ghost: 'bg-transparent text-yellow-600 hover:bg-yellow-600/10 border border-transparent dark:border-transparent',
+
+        question: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-400 dark:border-purple-400 shadow-md',
+        question_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        question_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
+        question_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
+        question_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
+
+        error: 'bg-red-500 hover:bg-red-600 text-white border border-red-400 dark:border-red-400 shadow-md',
+        error_secondary: 'bg-none text-red-500 border border-red-500 dark:border-red-600 hover:bg-red-500/10 dark:hover:bg-red-600/10 shadow-md',
+        error_soft: 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20 hover:bg-red-500/20 dark:hover:bg-red-500/15 shadow-sm',
+        error_outline: 'bg-transparent text-red-500 border border-red-500 hover:bg-red-500/10 shadow-sm',
+        error_ghost: 'bg-transparent text-red-500 hover:bg-red-500/10 border border-transparent dark:border-transparent',
+
+        loading: 'bg-gray-500 hover:bg-gray-600 text-white border border-gray-400 dark:border-gray-400 shadow-md',
+        loading_secondary: 'bg-none text-gray-500 border border-gray-500 dark:border-gray-600 hover:bg-gray-500/10 dark:hover:bg-gray-600/10 shadow-md',
+        loading_soft: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/20 hover:bg-gray-500/20 dark:hover:bg-gray-500/15 shadow-sm',
+        loading_outline: 'bg-transparent text-gray-500 border border-gray-500 hover:bg-gray-500/10 shadow-sm',
+        loading_ghost: 'bg-transparent text-gray-500 hover:bg-gray-500/10 border border-transparent dark:border-transparent',
+
+        orange: 'bg-orange-500 hover:bg-orange-600 text-white border border-orange-300 dark:border-orange-300 shadow-md',
+        orange_secondary: 'bg-none text-orange-500 border border-orange-500 dark:border-orange-600 hover:bg-orange-500/10 dark:hover:bg-orange-600/10 shadow-md',
+        orange_soft: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20 hover:bg-orange-500/20 dark:hover:bg-orange-500/15 shadow-sm',
+        orange_outline: 'bg-transparent text-orange-500 border border-orange-500 hover:bg-orange-500/10 shadow-sm',
+        orange_ghost: 'bg-transparent text-orange-500 hover:bg-orange-500/10 border border-transparent dark:border-transparent',
+
+        cyan: 'bg-cyan-500 hover:bg-cyan-600 text-white border border-cyan-300 dark:border-cyan-300 shadow-md',
+        cyan_secondary: 'bg-none text-cyan-500 border border-cyan-500 dark:border-cyan-600 hover:bg-cyan-500/10 dark:hover:bg-cyan-600/10 shadow-md',
+        cyan_soft: 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/20 dark:hover:bg-cyan-500/15 shadow-sm',
+        cyan_outline: 'bg-transparent text-cyan-500 border border-cyan-500 hover:bg-cyan-500/10 shadow-sm',
+        cyan_ghost: 'bg-transparent text-cyan-500 hover:bg-cyan-500/10 border border-transparent dark:border-transparent',
+
+        purple: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-300 dark:border-purple-300 shadow-md',
+        purple_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        purple_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
+        purple_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
+        purple_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
+
+        teal: 'bg-teal-500 hover:bg-teal-600 text-white border border-teal-300 dark:border-teal-300 shadow-md',
+        teal_secondary: 'bg-none text-teal-500 border border-teal-500 dark:border-teal-600 hover:bg-teal-500/10 dark:hover:bg-teal-600/10 shadow-md',
+        teal_soft: 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20 hover:bg-teal-500/20 dark:hover:bg-teal-500/15 shadow-sm',
+        teal_outline: 'bg-transparent text-teal-500 border border-teal-500 hover:bg-teal-500/10 shadow-sm',
+        teal_ghost: 'bg-transparent text-teal-500 hover:bg-teal-500/10 border border-transparent dark:border-transparent',
+
+        pink: 'bg-pink-500 hover:bg-pink-600 text-white border border-pink-300 dark:border-pink-300 shadow-md',
+        pink_secondary: 'bg-none text-pink-500 border border-pink-500 dark:border-pink-600 hover:bg-pink-500/10 dark:hover:bg-pink-600/10 shadow-md',
+        pink_soft: 'bg-pink-500/10 text-pink-600 dark:text-pink-400 border border-pink-500/20 hover:bg-pink-500/20 dark:hover:bg-pink-500/15 shadow-sm',
+        pink_outline: 'bg-transparent text-pink-500 border border-pink-500 hover:bg-pink-500/10 shadow-sm',
+        pink_ghost: 'bg-transparent text-pink-500 hover:bg-pink-500/10 border border-transparent dark:border-transparent',
+
+        green: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
+        green_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        green_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
+        green_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
+        green_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
+
+        default: 'text-black dark:text-white shadow-md border border-dark-border dark:border-border',
+        default_soft: 'bg-black/5 dark:bg-white/10 text-black dark:text-white border border-dark-border/20 dark:border-border/20 hover:bg-black/10 dark:hover:bg-white/15 shadow-sm',
+        default_outline: 'bg-transparent text-black dark:text-white border border-dark-border dark:border-border hover:bg-black/5 dark:hover:bg-white/10 shadow-sm',
+        default_ghost: 'bg-transparent text-black dark:text-white hover:bg-black/5 dark:hover:bg-white/10 border border-transparent dark:border-transparent',
+
+  // ── Custom — añade variantes propias debajo ──
   // brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
 };
 
 export const tailjngColorsProvider = {
   provide: TAILJNG_COLORS_CONFIG,
-  useValue: {
-    variants: customColorVariants,
-  },
+  useValue: { variants: colorVariants },
 };

package/src/lib/components/colors-config/colors.safelist.css

@@ -1,7 +1,29 @@
-/**
- * Safelist Tailwind para variantes personalizadas del proyecto.
- * Añade tus clases al @source inline (Tailwind v4 las incluirá en el build).
- *
- * Generado por: npx tailjng add colors-config
- */
-@source inline("");
+/* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
+/* Importar en styles.css DESPUÉS de @import "tailwindcss". */
+
+@layer utilities {
+  .__tailjng_colors_safelist_1__ {
+    @apply bg-accent/40 bg-background bg-background/80 bg-black/5 bg-blue-50 bg-blue-500 bg-blue-500/10 bg-cyan-500 bg-cyan-500/10 bg-dark-background bg-gray-50 bg-gray-500 bg-gray-500/10 bg-green-50 bg-green-500 bg-green-500/10 bg-none bg-orange-500 bg-orange-500/10 bg-pink-500 bg-pink-500/10 bg-primary bg-primary/10 bg-primary/80 bg-purple-50 bg-purple-500 bg-purple-500/10 bg-red-50 bg-red-500 bg-red-500/10 bg-teal-500 bg-teal-500/10 bg-transparent bg-white bg-yellow-50 bg-yellow-600 bg-yellow-600/10 border border-blue-300 border-blue-500 border-blue-500/20 border-border border-cyan-300 border-cyan-500 border-cyan-500/20 border-dark-border border-dark-border/20 border-gray-400 border-gray-500 border-gray-500/20;
+  }
+
+  .__tailjng_colors_safelist_2__ {
+    @apply border-green-300 border-green-500 border-green-500/20 border-orange-300 border-orange-500 border-orange-500/20 border-pink-300 border-pink-500 border-pink-500/20 border-primary border-primary/20 border-primary/30 border-purple-300 border-purple-400 border-purple-500 border-purple-500/20 border-red-400 border-red-500 border-red-500/20 border-teal-300 border-teal-500 border-teal-500/20 border-transparent border-yellow-500 border-yellow-600 border-yellow-600/20 dark:bg-[#15181e] dark:bg-[#15241f] dark:bg-[#1a1a24] dark:bg-[#1f1c1a] dark:bg-[#21181c] dark:bg-[#241732] dark:bg-dark-accent/30 dark:bg-dark-background dark:bg-dark-background/80 dark:bg-foreground dark:bg-input dark:bg-input/15 dark:bg-input/80 dark:bg-white/10 dark:border-blue-300 dark:border-blue-600 dark:border-border dark:border-border/20 dark:border-cyan-300 dark:border-cyan-600 dark:border-dark-border dark:border-gray-400 dark:border-gray-600 dark:border-green-300;
+  }
+
+  .__tailjng_colors_safelist_3__ {
+    @apply dark:border-green-600 dark:border-input dark:border-input/30 dark:border-input/40 dark:border-orange-300 dark:border-orange-600 dark:border-pink-300 dark:border-pink-600 dark:border-purple-300 dark:border-purple-400 dark:border-purple-600 dark:border-red-400 dark:border-red-600 dark:border-teal-300 dark:border-teal-600 dark:border-transparent dark:border-yellow-500 dark:border-yellow-700 dark:hover:bg-blue-500/15 dark:hover:bg-blue-600/10 dark:hover:bg-border/10 dark:hover:bg-cyan-500/15 dark:hover:bg-cyan-600/10 dark:hover:bg-dark-accent/40 dark:hover:bg-dark-accent/50 dark:hover:bg-dark-background dark:hover:bg-gray-500/15 dark:hover:bg-gray-600/10 dark:hover:bg-green-500/15 dark:hover:bg-green-600/10 dark:hover:bg-input dark:hover:bg-input/15 dark:hover:bg-input/25 dark:hover:bg-input/60 dark:hover:bg-input/80 dark:hover:bg-orange-500/15 dark:hover:bg-orange-600/10 dark:hover:bg-pink-500/15 dark:hover:bg-pink-600/10 dark:hover:bg-purple-500/15 dark:hover:bg-purple-600/10 dark:hover:bg-red-500/15 dark:hover:bg-red-600/10 dark:hover:bg-teal-500/15 dark:hover:bg-teal-600/10 dark:hover:bg-white/10 dark:hover:bg-white/15 dark:hover:bg-yellow-600/15 dark:hover:bg-yellow-700/10 dark:hover:text-white;
+  }
+
+  .__tailjng_colors_safelist_4__ {
+    @apply dark:text-blue-400 dark:text-border dark:text-cyan-400 dark:text-gray-400 dark:text-green-400 dark:text-input dark:text-orange-400 dark:text-pink-400 dark:text-purple-400 dark:text-red-400 dark:text-teal-400 dark:text-white dark:text-yellow-400 hover:bg-accent hover:bg-accent/60 hover:bg-accent/70 hover:bg-background hover:bg-black/10 hover:bg-black/5 hover:bg-blue-500/10 hover:bg-blue-500/20 hover:bg-blue-600 hover:bg-cyan-500/10 hover:bg-cyan-500/20 hover:bg-cyan-600 hover:bg-dark-accent/50 hover:bg-dark-border/10 hover:bg-gray-500/10 hover:bg-gray-500/20 hover:bg-gray-600 hover:bg-green-500/10 hover:bg-green-500/20 hover:bg-green-600 hover:bg-orange-500/10 hover:bg-orange-500/20 hover:bg-orange-600 hover:bg-pink-500/10 hover:bg-pink-500/20 hover:bg-pink-600 hover:bg-primary hover:bg-primary/10 hover:bg-primary/20 hover:bg-primary/80 hover:bg-purple-500/10 hover:bg-purple-500/20 hover:bg-purple-600 hover:bg-red-500/10 hover:bg-red-500/20 hover:bg-red-600 hover:bg-teal-500/10;
+  }
+
+  .__tailjng_colors_safelist_5__ {
+    @apply hover:bg-teal-500/20 hover:bg-teal-600 hover:bg-yellow-600/10 hover:bg-yellow-600/20 hover:bg-yellow-700 shadow-md shadow-sm text-black text-blue-500 text-blue-600 text-cyan-500 text-cyan-600 text-dark-border text-gray-500 text-gray-600 text-green-500 text-green-600 text-orange-500 text-orange-600 text-pink-500 text-pink-600 text-primary text-purple-500 text-purple-600 text-red-500 text-red-600 text-teal-500 text-teal-600 text-white text-yellow-500 text-yellow-600 text-yellow-700;
+  }
+
+  /* ── Tus colores custom: descomenta y añade clases Tailwind ── */
+  .__tailjng_custom_colors__ {
+    /* @apply bg-indigo-600 text-white hover:bg-indigo-700; */
+  }
+}

package/src/lib/components/colors-config/colors-config.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-/**
- * Configuración de colores/variantes Tailwind del proyecto (sin UI).
- * Los archivos útiles son colors.config.ts y colors.safelist.css en esta carpeta.
- */
-@Component({
-  selector: 'j-colors-config',
-  standalone: true,
-  template: '',
-})
-export class JColorsConfigComponent {}