tailjng 0.1.5 → 0.1.7

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

@@ -1,15 +1,53 @@
+import { GeneratedColors } from '../../interfaces/theme/theme-generator.interface';
 import * as i0 from "@angular/core";
 export type ThemeMode = 'light' | 'dark';
 export declare class JThemeService {
     private readonly _theme;
     readonly themeSignal: import("@angular/core").Signal<ThemeMode>;
+    private previewColorsActive;
+    private persistedColors;
+    private activeColors;
     constructor();
     private initializeTheme;
     private listenToExternalChanges;
-    private applyTheme;
+    private applyThemeModeClass;
+    /**
+     * Re-applies the `dark` class on the next frame so Tailwind re-evaluates tokens.
+     */
+    private refreshThemeModeClass;
+    private syncActiveColorsToDocument;
+    private setActiveColors;
+    /**
+     * Loads a previously saved custom palette from localStorage and applies it.
+     */
+    loadPersistedCustomColors(): void;
+    /**
+     * Whether a custom palette is saved in localStorage.
+     * @returns `true` when a persisted palette exists.
+     */
+    hasPersistedCustomColors(): boolean;
+    /**
+     * Saves and applies a custom palette for the whole app (survives reloads).
+     * @param colors Generated palette from the theme generator.
+     */
+    saveCustomColors(colors: GeneratedColors): void;
+    /**
+     * Removes the saved custom palette and restores `@theme` defaults from CSS.
+     */
+    clearPersistedCustomColors(): void;
+    /**
+     * Applies generated palette CSS variables to the document for live preview.
+     * @param colors Palette from the theme generator.
+     */
+    applyPreviewColors(colors: GeneratedColors): void;
+    /**
+     * Ends live preview — reverts to the saved palette or CSS defaults.
+     */
+    clearPreviewColors(): void;
     toggleTheme(): void;
     setTheme(theme: ThemeMode): void;
     getThemeMode(): ThemeMode;
+    private isValidGeneratedColors;
     static ɵfac: i0.ɵɵFactoryDeclaration<JThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<JThemeService>;
 }

package/lib/utils/theme/theme-variables.util.d.ts

@@ -0,0 +1,31 @@
+import { GeneratedColors } from '../../interfaces/theme/theme-generator.interface';
+/** All keys emitted by the theme generator into `@theme`. */
+export declare const GENERATED_COLOR_KEYS: readonly ["background", "foreground", "card", "cardForeground", "popover", "popoverForeground", "primary", "primaryForeground", "secondary", "secondaryForeground", "muted", "mutedForeground", "accent", "accentForeground", "destructive", "destructiveForeground", "border", "input", "ring", "darkBackground", "darkForeground", "darkCard", "darkCardForeground", "darkPopover", "darkPopoverForeground", "darkPrimary", "darkPrimaryForeground", "darkSecondary", "darkSecondaryForeground", "darkMuted", "darkMutedForeground", "darkAccent", "darkAccentForeground", "darkDestructive", "darkDestructiveForeground", "darkBorder", "darkInput", "darkRing"];
+export declare const CUSTOM_THEME_STYLE_ID = "tailjng-custom-theme";
+/**
+ * Converts a generated color key to a Tailwind `@theme` CSS variable name.
+ * @param key Generated palette key.
+ * @returns CSS custom property name.
+ */
+export declare function generatedColorToCssVarName(key: keyof GeneratedColors): string;
+/**
+ * Builds a `:root` CSS block for the generated palette.
+ * @param colors Generated palette.
+ * @returns CSS rules for `:root`.
+ */
+export declare function buildRootThemeCss(colors: GeneratedColors): string;
+/**
+ * Applies generated palette values through a dedicated stylesheet (reliable with Tailwind v4).
+ * @param colors Generated palette.
+ */
+export declare function applyGeneratedColorsToDocument(colors: GeneratedColors): void;
+/**
+ * Removes custom theme overrides from the document.
+ */
+export declare function clearGeneratedColorsFromDocument(): void;
+/**
+ * Builds the `@theme { ... }` block copied by the theme generator.
+ * @param colors Generated palette.
+ * @returns Tailwind v4 `@theme` snippet.
+ */
+export declare function buildThemeCode(colors: GeneratedColors): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/public-api.d.ts

@@ -6,6 +6,7 @@ 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/alert/toast-alert.interface';
 export * from './lib/interfaces/colors/colors-config.interface';
 export * from './lib/shared/form.shared';
 export * from './lib/shared/dialog.shared';
@@ -16,9 +17,9 @@ export * from './lib/services/http/file-http.service';
 export * from './lib/services/http/errorHandler-http.service';
 export * from './lib/services/transformer/calendar.service';
 export * from './lib/services/transformer/transform.service';
-export * from './lib/services/static/icons.service';
 export * from './lib/services/static/theme.service';
 export * from './lib/services/static/colors.service';
+export * from './lib/utils/theme/theme-variables.util';
 export * from './lib/services/alert/dialog-alert.service';
 export * from './lib/services/alert/toast-alert.service';
 export * from './lib/services/report/excel.service';

package/registry/components.json

@@ -1,12 +1,24 @@
 {
   "components": {
     "colors": {
-      "path": "src/lib/components/colors-config",
+      "path": "src/lib/components/.config/colors",
       "dependencies": []
     },
+    "icons": {
+      "path": "src/lib/components/.config/icons",
+      "dependencies": []
+    },
+    "input-classes": {
+      "path": "src/lib/components/.config/input",
+      "dependencies": []
+    },
+    "icon": {
+      "path": "src/lib/components/icon",
+      "dependencies": ["icons"]
+    },
     "mode-toggle": {
       "path": "src/lib/components/mode-toggle",
-      "dependencies": []
+      "dependencies": ["icon", "icons"]
     },
     "tooltip": {
       "path": "src/lib/components/tooltip",
@@ -18,35 +30,39 @@
     },
     "badge": {
       "path": "src/lib/components/badge",
-      "dependencies": ["tooltip"]
+      "dependencies": ["tooltip", "icon", "icons"]
     },
     "label": {
       "path": "src/lib/components/label",
-      "dependencies": ["tooltip"]
+      "dependencies": ["tooltip", "icon", "icons"]
     },
     "toggle-radio": {
-      "path": "src/lib/components/toggle-radio",
-      "dependencies": []
+      "path": "src/lib/components/toggle-radio/toggle-radio",
+      "dependencies": ["icon", "icons"]
+    },
+    "toggle-segment": {
+      "path": "src/lib/components/toggle-radio/toggle-segment",
+      "dependencies": ["icon", "icons"]
     },
     "button": {
       "path": "src/lib/components/button",
-      "dependencies": ["tooltip"]
+      "dependencies": ["tooltip", "icon", "icons"]
     },
     "checkbox-input": {
       "path": "src/lib/components/checkbox/checkbox-input",
-      "dependencies": ["tooltip"]
+      "dependencies": ["tooltip", "icon", "icons"]
     },
     "checkbox-switch": {
       "path": "src/lib/components/checkbox/checkbox-switch",
-      "dependencies": []
+      "dependencies": ["icon", "icons"]
     },
     "alert-dialog": {
       "path": "src/lib/components/alert/alert-dialog",
-      "dependencies": ["button"]
+      "dependencies": ["button", "icon", "icons"]
     },
     "alert-toast": {
       "path": "src/lib/components/alert/alert-toast",
-      "dependencies": ["button"]
+      "dependencies": ["button", "icon", "icons"]
     },
     "progress-bar": {
       "path": "src/lib/components/progress-bar",
@@ -54,11 +70,11 @@
     },
     "viewer-image": {
       "path": "src/lib/components/viewer/viewer-image",
-      "dependencies": ["button"]
+      "dependencies": ["button", "tooltip", "icon", "icons"]
     },
     "viewer-pdf": {
       "path": "src/lib/components/viewer/viewer-pdf",
-      "dependencies": []
+      "dependencies": ["button", "icon", "icons"]
     },
     "dialog": {
       "path": "src/lib/components/dialog",
@@ -66,11 +82,11 @@
     },
     "input-file": {
       "path": "src/lib/components/input/input-file",
-      "dependencies": []
+      "dependencies": ["input-classes", "icon", "icons"]
     },
     "input-textarea": {
       "path": "src/lib/components/input/input-textarea",
-      "dependencies": []
+      "dependencies": ["input-classes", "icon", "icons"]
     },
     "input-range": {
       "path": "src/lib/components/input/input-range",
@@ -78,7 +94,7 @@
     },
     "input": {
       "path": "src/lib/components/input/input",
-      "dependencies": []
+      "dependencies": ["input-classes", "icon", "icons"]
     },
     "select-multi-table": {
       "path": "src/lib/components/select/select-multi-table",
@@ -94,7 +110,7 @@
     },
     "sidebar-static": {
       "path": "src/lib/components/sidebar/sidebar-static",
-      "dependencies": ["checkbox-switch"]
+      "dependencies": ["checkbox-switch", "icon", "icons"]
     },
     "form-container": {
       "path": "src/lib/components/form/form-container",
@@ -162,7 +178,14 @@
     },
     "theme-generator": {
       "path": "src/lib/components/theme-generator",
-      "dependencies": ["input", "input-range", "button", "label", "form-container"]
+      "dependencies": [
+        "input",
+        "input-range",
+        "input-classes",
+        "button",
+        "label",
+        "form-container"
+      ]
     }
   }
 }

package/src/colors.safelist.css

@@ -1,5 +1,5 @@
 /* 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 */
+/* npm fallback — prefer src/app/tailjng/.config/colors/colors.safelist.css in projects */
 
 @layer utilities {
   .__tailjng_colors_safelist_1__ {
@@ -22,7 +22,7 @@
     @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 ── */
+  /* ── Custom colors: uncomment and add Tailwind classes ── */
   .__tailjng_custom_colors__ {
     /* @apply bg-indigo-600 text-white hover:bg-indigo-700; */
   }

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

@@ -0,0 +1,11 @@
+# Tailjng — configuración del proyecto
+
+Carpeta copiada a `src/app/tailjng/.config/` por `init:app`, `sync:app` o `npx tailjng add colors|icons`.
+
+| Subcarpeta | Contenido |
+|------------|-----------|
+| `colors/` | Variantes de color + safelist Tailwind |
+| `icons/` | Registro `Icons` (Lucide) para TS y templates |
+| `input/` | Clases Tailwind compartidas para inputs (`input.classes.ts`) |
+
+No confundir con los componentes UI en `src/app/tailjng/` (button, table, …).

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

@@ -0,0 +1,38 @@
+# Tailjng colors — project configuration
+
+Folder generated at `src/app/tailjng/.config/colors/` by `init:app`, `sync:app`, or `npx tailjng add colors`.
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `colors.config.ts` | Variants (`primary`, `success_soft`, …) plus your own (`brand`, etc.) |
+| `colors.safelist.css` | Tailwind classes the build must generate (`@apply`) |
+
+## Add a custom color
+
+**1.** In `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.** In `colors.safelist.css`, inside the `@layer utilities` block:
+
+```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.** Usage in components:
+
+```html
+<JButton classes="brand" text="Save" />
+<JBadge classes="brand_soft" value="N" />
+```
+
+## Provider
+
+`app.config.ts` must include `tailjngColorsProvider` (added by `init:app` / `sync:app`).

package/src/lib/components/{colors-config → .config/colors}/colors.config.ts

@@ -1,11 +1,11 @@
 import { TAILJNG_COLORS_CONFIG } from 'tailjng';
 
 /**
- * Variantes de color — edita las existentes o añade las tuyas al final.
- * Uso en componentes: classes="primary" | classes="success_soft" | classes="brand"
+ * Color variants — edit existing entries or add your own at the end.
+ * Component usage: classes="primary" | classes="success_soft" | classes="brand"
  *
- * Si añades variantes nuevas con clases Tailwind nuevas, regístralas también
- * en colors.safelist.css (bloque .__tailjng_custom_colors__).
+ * When adding variants with new Tailwind classes, register them in
+ * colors.safelist.css as well (block .__tailjng_custom_colors__).
  */
 export const colorVariants: Record<string, string> = {
 
@@ -102,7 +102,7 @@ export const colorVariants: Record<string, string> = {
         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 ──
+  // ── Custom — add your own variants below ──
   // brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
 };
 

package/src/lib/components/{colors-config → .config/colors}/colors.safelist.css

@@ -1,5 +1,5 @@
 /* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
-/* Importar en styles.css DESPUÉS de @import "tailwindcss". */
+/* Import in styles.css AFTER @import "tailwindcss". */
 
 @layer utilities {
   .__tailjng_colors_safelist_1__ {
@@ -22,7 +22,7 @@
     @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 ── */
+  /* ── Custom colors: uncomment and add Tailwind classes ── */
   .__tailjng_custom_colors__ {
     /* @apply bg-indigo-600 text-white hover:bg-indigo-700; */
   }

package/src/lib/components/.config/icons/README.md

@@ -0,0 +1,26 @@
+# Iconos Tailjng — registro del proyecto
+
+Carpeta generada en `src/app/tailjng/.config/icons/` por `init:app`, `sync:app` o `npx tailjng add icons`.
+
+## Uso
+
+```typescript
+import { Icons } from '../.config/icons/icons.lucide';
+
+export class MyPageComponent {
+  readonly Icons = Icons;
+}
+```
+
+```html
+<JIcon [icon]="Icons.Save" [size]="18" />
+<JIcon [icon]="Icons.Loader2" iconClass="animate-spin" />
+```
+
+## Añadir un icono
+
+1. Importa desde `lucide-angular` en `icons.lucide.ts`
+2. Añade `static readonly NombreLucide = NombreLucide;` (PascalCase, igual que en Lucide)
+3. Usa `[icon]="Icons.NombreLucide"`
+
+Los nombres son los oficiales de Lucide (`Loader2`, `Save`, `CircleCheck`, …), no alias semánticos.

package/src/lib/components/.config/icons/icons.lucide.ts

@@ -0,0 +1,134 @@
+import {
+  ArrowBigRight,
+  ArrowDownWideNarrow,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  CircleHelp,
+  CircleX,
+  Clipboard,
+  Clock,
+  Copy,
+  Cpu,
+  Download,
+  Edit,
+  EllipsisVertical,
+  Eraser,
+  Eye,
+  FileSpreadsheet,
+  FileUp,
+  Filter,
+  Image,
+  ImageOff,
+  Images,
+  Info,
+  Link,
+  Link2Off,
+  ListFilter,
+  ListRestart,
+  Loader2,
+  Minimize2,
+  MonitorUp,
+  Moon,
+  Pencil,
+  PencilLine,
+  RefreshCcw,
+  RotateCcw,
+  RotateCw,
+  Save,
+  Scan,
+  Search,
+  SquareDashedMousePointer,
+  Sun,
+  Table,
+  Trash,
+  Trash2,
+  TriangleAlert,
+  Upload,
+  X,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-angular';
+
+// Icon registry — Lucide names in PascalCase (Icons.Loader2, Icons.Save, …)
+//
+// my-feature.component.ts:
+//   import { Icons } from '../.config/icons/icons.lucide';
+//   readonly Icons = Icons;
+//
+// template:
+//   <JIcon [icon]="Icons.Loader2" [size]="18" />
+export class Icons {
+  static readonly Info = Info;
+  static readonly CircleCheck = CircleCheck;
+  static readonly CircleX = CircleX;
+  static readonly TriangleAlert = TriangleAlert;
+  static readonly CircleHelp = CircleHelp;
+  static readonly X = X;
+  static readonly Check = Check;
+  static readonly ZoomIn = ZoomIn;
+  static readonly ZoomOut = ZoomOut;
+  static readonly RotateCw = RotateCw;
+  static readonly RotateCcw = RotateCcw;
+  static readonly RefreshCcw = RefreshCcw;
+  static readonly Scan = Scan;
+  static readonly Minimize2 = Minimize2;
+  static readonly Image = Image;
+  static readonly Images = Images;
+  static readonly ImageOff = ImageOff;
+  static readonly Upload = Upload;
+  static readonly Eye = Eye;
+  static readonly ChevronUp = ChevronUp;
+  static readonly ChevronDown = ChevronDown;
+  static readonly ChevronsUpDown = ChevronsUpDown;
+  static readonly SquareDashedMousePointer = SquareDashedMousePointer;
+  static readonly Search = Search;
+  static readonly Copy = Copy;
+  static readonly Save = Save;
+  static readonly Sun = Sun;
+  static readonly Moon = Moon;
+  static readonly Loader2 = Loader2;
+  static readonly Table = Table;
+  static readonly ListFilter = ListFilter;
+
+  static readonly ChevronsLeft = ChevronsLeft;
+  static readonly ChevronLeft = ChevronLeft;
+  static readonly ChevronRight = ChevronRight;
+  static readonly ChevronsRight = ChevronsRight;
+
+  static readonly ArrowBigRight = ArrowBigRight;
+
+  static readonly Filter = Filter;
+  static readonly ArrowDownWideNarrow = ArrowDownWideNarrow;
+  static readonly Eraser = Eraser;
+  static readonly Trash2 = Trash2;
+  static readonly Trash = Trash;
+  static readonly Cpu = Cpu;
+  static readonly FileSpreadsheet = FileSpreadsheet;
+  static readonly MonitorUp = MonitorUp;
+  static readonly Download = Download;
+  static readonly FileUp = FileUp;
+  static readonly ListRestart = ListRestart;
+  static readonly PencilLine = PencilLine;
+  static readonly Pencil = Pencil;
+  static readonly Edit = Edit;
+  static readonly EllipsisVertical = EllipsisVertical;
+  static readonly Calendar = Calendar;
+  static readonly Clock = Clock;
+  static readonly CircleAlert = CircleAlert;
+  static readonly Clipboard = Clipboard;
+  static readonly Link = Link;
+  static readonly Link2Off = Link2Off;
+
+  // ── Custom (import above and add entries here) ──
+  // static readonly Home = Home;
+  // static readonly Settings = Settings;
+}

package/src/lib/components/.config/input/README.md

@@ -0,0 +1,24 @@
+# Input styles
+
+Shared Tailwind class maps for `JInput`, `JTextareaInput`, `JFileInput`, and related components.
+
+Copied to `src/app/tailjng/.config/input/` when you install any input component (registry dependency `input-classes`).
+
+## Customize
+
+Edit **`input.classes.ts`** to change borders, colors, typography, focus ring, heights, or padding for all inputs at once.
+
+| Export | Used by |
+|--------|---------|
+| `INPUT_SURFACE_CLASSES` | All text-like inputs |
+| `INPUT_SINGLE_LINE_HEIGHT_CLASSES` | JInput, JFileInput |
+| `INPUT_TEXTAREA_HEIGHT_CLASSES` | JTextareaInput |
+| `INPUT_FOCUS_CLASSES` | JInput, JTextareaInput |
+| `INPUT_FOCUS_WITHIN_CLASSES` | JFileInput label |
+| `INPUT_PADDING_X_*` | Per control type |
+| `INPUT_FILE_LABEL_LAYOUT_CLASSES` | JFileInput only |
+| `inputActionButtonClasses()` | Clear / clipboard buttons |
+
+Component-specific behavior (clear-button padding, textarea resize, range slider thumb) stays in each component.
+
+Global pseudo-element rules (placeholder, autofill, date picker) live in app **`styles.css`** under `.input`.

package/src/lib/components/.config/input/input.classes.ts

@@ -0,0 +1,119 @@
+/**
+ * Shared Tailwind class maps for input components (JInput, JTextareaInput, JFileInput, …).
+ *
+ * Edit this file to change the default look of all inputs from one place.
+ * Component-specific layout (heights, padding, resize) stays in each component.
+ */
+
+/** Marker class — hooks global `.input` styles in `styles.css`. */
+export const INPUT_MARKER = 'input';
+
+/** Border, colors, typography, transitions — shared by all text-like inputs. */
+export const INPUT_SURFACE_CLASSES: Record<string, boolean> = {
+  [INPUT_MARKER]: true,
+  'w-full': true,
+  'text-[12px]': true,
+  'bg-background': true,
+  'dark:bg-dark-background': true,
+  border: true,
+  'border-border': true,
+  'dark:border-dark-border': true,
+  'text-black': true,
+  'dark:text-white': true,
+  'placeholder:text-muted-foreground/70': true,
+  'dark:placeholder:text-dark-muted-foreground/70': true,
+  rounded: true,
+  'py-2': true,
+  transition: true,
+  'duration-200': true,
+  'disabled:opacity-60': true,
+  'disabled:cursor-not-allowed': true,
+};
+
+/** Default height for single-line fields (JInput, JFileInput label). */
+export const INPUT_SINGLE_LINE_HEIGHT_CLASSES: Record<string, boolean> = {
+  'h-[40px]': true,
+  'max-[400px]:h-[35px]': true,
+};
+
+/** Default height for JTextareaInput. */
+export const INPUT_TEXTAREA_HEIGHT_CLASSES: Record<string, boolean> = {
+  'h-[70px]': true,
+  'max-[400px]:h-[35px]': true,
+  'min-h-[70px]': true,
+};
+
+/** Focus ring for native `<input>` / `<textarea>`. */
+export const INPUT_FOCUS_CLASSES: Record<string, boolean> = {
+  'focus:outline-none': true,
+  'focus:ring-2': true,
+  'focus:ring-primary': true,
+  'dark:focus:ring-dark-primary': true,
+};
+
+/** Focus ring for clickable labels (JFileInput). */
+export const INPUT_FOCUS_WITHIN_CLASSES: Record<string, boolean> = {
+  'focus-within:outline-none': true,
+  'focus-within:ring-2': true,
+  'focus-within:ring-primary': true,
+  'dark:focus-within:ring-dark-primary': true,
+};
+
+/** Horizontal padding for single-line inputs. */
+export const INPUT_PADDING_X_SINGLE: Record<string, boolean> = {
+  'pl-3': true,
+};
+
+/** Horizontal padding for textarea. */
+export const INPUT_PADDING_X_TEXTAREA: Record<string, boolean> = {
+  'px-3': true,
+};
+
+/** Layout utilities for the JFileInput visible label. */
+export const INPUT_FILE_LABEL_LAYOUT_CLASSES: Record<string, boolean> = {
+  block: true,
+  flex: true,
+  'items-center': true,
+  'justify-between': true,
+  'gap-2': true,
+  'select-none': true,
+  'cursor-pointer': true,
+  'pr-2': true,
+};
+
+/** Enabled state for clear / icon action buttons. */
+export const INPUT_ACTION_BUTTON_ENABLED_CLASSES: Record<string, boolean> = {
+  'text-muted-foreground hover:text-foreground dark:text-dark-muted-foreground dark:hover:text-dark-foreground': true,
+};
+
+/** Disabled state for clear / icon action buttons. */
+export const INPUT_ACTION_BUTTON_DISABLED_CLASSES: Record<string, boolean> = {
+  'cursor-not-allowed opacity-50': true,
+};
+
+/** Programmatic disabled overlay on the field itself. */
+export const INPUT_DISABLED_OVERLAY_CLASSES: Record<string, boolean> = {
+  'opacity-50': true,
+};
+
+/**
+ * Merges multiple class maps into one object.
+ * @param maps Class maps to combine (later entries override earlier keys).
+ * @returns Merged class map.
+ */
+export function mergeInputClasses(
+  ...maps: Record<string, boolean>[]
+): Record<string, boolean> {
+  return Object.assign({}, ...maps);
+}
+
+/**
+ * Class map for clear / icon action buttons.
+ * @param isDisabled Whether the parent control is disabled.
+ * @returns Enabled or enabled+disabled utility classes.
+ */
+export function inputActionButtonClasses(isDisabled: boolean): Record<string, boolean> {
+  return isDisabled
+    ? mergeInputClasses(INPUT_ACTION_BUTTON_ENABLED_CLASSES, INPUT_ACTION_BUTTON_DISABLED_CLASSES)
+    : INPUT_ACTION_BUTTON_ENABLED_CLASSES;
+}