tailjng 0.1.1 → 0.1.2

package/lib/config/colors-config.token.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import { TailjngColorsConfig } from '../interfaces/colors/colors-config.interface';
+export declare const TAILJNG_COLORS_CONFIG: InjectionToken<TailjngColorsConfig>;

package/lib/interfaces/colors/colors-config.interface.d.ts

@@ -0,0 +1,4 @@
+export interface TailjngColorsConfig {
+    /** Variantes extra o overrides: clave = nombre (ej. brand), valor = clases Tailwind */
+    variants?: Record<string, string>;
+}

package/lib/services/static/colors.service.d.ts

@@ -1,6 +1,10 @@
 import * as i0 from "@angular/core";
+export declare const JCOLORS_DEFAULT_VARIANTS: {
+    [key: string]: string;
+};
 export declare class JColorsService {
-    variants: {
+    private readonly colorsConfig;
+    readonly variants: {
         [key: string]: string;
     };
     getVariantClass(type: string, hasShadow?: boolean, hasBorder?: boolean): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",
@@ -10,7 +10,8 @@
     "tailwindcss": ">=4.0.9",
     "date-fns": ">=4.1.0",
     "exceljs": ">=4.4.0",
-    "xlsx": ">=0.18.5"
+    "xlsx": ">=0.18.5",
+    "file-saver": ">=2.0.5"
   },
   "bin": {
     "tailjng": "./cli/index.js"

package/public-api.d.ts

@@ -1,10 +1,12 @@
 export * from './lib/config/tailjng-config.token';
+export * from './lib/config/colors-config.token';
 export * from './lib/interfaces/crud/crud.interface';
 export * from './lib/interfaces/crud/params.interface';
 export * from './lib/interfaces/crud/filter.interface';
 export * from './lib/interfaces/crud/form.interface';
 export * from './lib/interfaces/theme/theme-generator.interface';
 export * from './lib/interfaces/alert/dialog-alert.interface';
+export * from './lib/interfaces/colors/colors-config.interface';
 export * from './lib/shared/form.shared';
 export * from './lib/shared/dialog.shared';
 export * from './lib/services/crud/converter-crud.service';

package/registry/components.json

@@ -1,5 +1,9 @@
 {
   "components": {
+    "colors-config": {
+      "path": "src/lib/components/colors-config",
+      "dependencies": []
+    },
     "mode-toggle": {
       "path": "src/lib/components/mode-toggle",
       "dependencies": []

package/src/colors.safelist.css

@@ -0,0 +1,4 @@
+/* AUTO-GENERATED — do not edit. Run: node scripts/generate-colors-safelist.mjs */
+/* Tailwind v4 safelist for JColorsService dynamic classes (npm bundle). */
+
+@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");

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

@@ -0,0 +1,12 @@
+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 {}

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

@@ -0,0 +1,19 @@
+import { TAILJNG_COLORS_CONFIG } from 'tailjng';
+
+/**
+ * Variantes de color personalizadas del proyecto.
+ * Uso en componentes: classes="brand" o classes="brand_soft"
+ *
+ * Importante: cada clase Tailwind que uses aquí debe estar también en colors.safelist.css
+ * (@source inline) para que el build las genere.
+ */
+export const customColorVariants: Record<string, string> = {
+  // 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,
+  },
+};

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

@@ -0,0 +1,7 @@
+/**
+ * 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("");