@kilivi/payloadcms-theme-management 0.1.18 → 0.2.1

package/README.md

@@ -2,13 +2,23 @@
 
 A comprehensive theme management plugin for Payload CMS v3 that provides powerful theming capabilities with SSR support, preventing FOUC (Flash of Unstyled Content).
 
+## 🎉 Version 0.2.0 - New Features!
+
+- **✅ Tabs Structure** - Plugin now creates a "Nastavení vzhledu" (Appearance Settings) tab
+- **✅ Extended Theme Support** - OKLCH color format with 19+ semantic tokens
+- **✅ shadcn/ui Compatible** - Works with https://ui.shadcn.com/themes
+- **✅ TweakCN Compatible** - Works with https://tweakcn.com/editor/theme
+- **✅ Chart Colors** - 5 customizable colors for data visualization
+
 ## Features
 
 - 🎨 **Multiple Theme Presets** - Cool, Brutal, Neon, Solar, and more
-- 🎨 **Custom Color Palette** - Full HSL color customization
+- 🎨 **Extended Themes** - OKLCH-based themes with full shadcn/ui token support
+- 🎨 **Custom Color Palette** - Full HSL color customization (19+ semantic tokens)
 - 🔤 **Typography Control** - Google Fonts integration for headings, body, and code
 - 📐 **Border Radius Presets** - Sharp, Rounded, or Pill styles
 - 🌓 **Dark Mode Support** - Built-in light/dark/system mode toggle
+- 📊 **Chart Colors** - Data visualization color palette
 - 🚀 **SSR Theme Injection** - Zero FOUC with server-side rendering
 - ⚡ **Performance Optimized** - Critical CSS inlining, preload links
 - 🎯 **Type Safe** - Full TypeScript support
@@ -371,6 +381,16 @@ Contributions are welcome! Please:
 4. Add tests if applicable
 5. Submit a pull request
 
+## Troubleshooting
+
+### Common Issues
+
+**Error: "right-hand side of 'in' should be an object, got undefined"**
+
+This is a known Payload CMS issue related to user preferences. See [TROUBLESHOOTING.md](./TROUBLESHOOTING.md) for solutions.
+
+**Quick Fix:** Go to `/admin/account` and click "Reset Preferences" at the bottom of the page.
+
 ## License
 
 Apache-2.0

package/dist/fields/extendedThemeFields.d.ts

@@ -0,0 +1,26 @@
+import type { Field } from 'payload';
+/**
+ * Extended Theme Color Fields for Light Mode
+ */
+export declare const extendedLightModeFields: Field[];
+/**
+ * Chart color fields (for data visualization)
+ */
+export declare const chartColorFields: Field[];
+/**
+ * Extended Theme Selection Field
+ */
+export declare const extendedThemeSelectionField: Field;
+/**
+ * Extended Light Mode Configuration
+ */
+export declare const extendedLightModeField: Field;
+/**
+ * Extended Dark Mode Configuration
+ */
+export declare const extendedDarkModeField: Field;
+/**
+ * Chart Colors Configuration
+ */
+export declare const chartColorsField: Field;
+//# sourceMappingURL=extendedThemeFields.d.ts.map

package/dist/fields/extendedThemeFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extendedThemeFields.d.ts","sourceRoot":"","sources":["../../src/fields/extendedThemeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAoCpC;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,EAgG1C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EA0BnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAezC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA"}

package/dist/fields/extendedThemeFields.js

@@ -0,0 +1,290 @@
+import { extendedThemePresets } from '../extended-presets.js';
+/**
+ * Extended Theme Configuration Fields
+ * Provides advanced color token configuration using OKLCH format
+ * Compatible with shadcn/ui and TweakCN theme editors
+ */ const extendedThemeOptions = Object.values(extendedThemePresets).map((preset)=>({
+        label: preset.label,
+        value: preset.value
+    }));
+/**
+ * Creates OKLCH color input field
+ */ function createOKLCHColorField(name, label, description) {
+    return {
+        name,
+        type: 'text',
+        label,
+        admin: {
+            description,
+            placeholder: 'oklch(0.5 0.2 250)',
+            components: {
+                Field: '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField'
+            }
+        }
+    };
+}
+/**
+ * Extended Theme Color Fields for Light Mode
+ */ export const extendedLightModeFields = [
+    createOKLCHColorField('background', {
+        en: 'Background',
+        cs: 'Pozadí'
+    }, {
+        en: 'Main background color',
+        cs: 'Hlavní barva pozadí'
+    }),
+    createOKLCHColorField('foreground', {
+        en: 'Foreground',
+        cs: 'Popředí'
+    }, {
+        en: 'Main text color',
+        cs: 'Hlavní barva textu'
+    }),
+    createOKLCHColorField('card', {
+        en: 'Card',
+        cs: 'Karta'
+    }, {
+        en: 'Card background',
+        cs: 'Pozadí karty'
+    }),
+    createOKLCHColorField('cardForeground', {
+        en: 'Card Foreground',
+        cs: 'Popředí karty'
+    }, {
+        en: 'Card text color',
+        cs: 'Barva textu karty'
+    }),
+    createOKLCHColorField('popover', {
+        en: 'Popover',
+        cs: 'Vyskakovací okno'
+    }, {
+        en: 'Popover background',
+        cs: 'Pozadí vyskakovacího okna'
+    }),
+    createOKLCHColorField('popoverForeground', {
+        en: 'Popover Foreground',
+        cs: 'Popředí vyskakovacího okna'
+    }, {
+        en: 'Popover text color',
+        cs: 'Barva textu vyskakovacího okna'
+    }),
+    createOKLCHColorField('primary', {
+        en: 'Primary',
+        cs: 'Primární'
+    }, {
+        en: 'Primary brand color',
+        cs: 'Primární značková barva'
+    }),
+    createOKLCHColorField('primaryForeground', {
+        en: 'Primary Foreground',
+        cs: 'Popředí primární'
+    }, {
+        en: 'Text on primary color',
+        cs: 'Text na primární barvě'
+    }),
+    createOKLCHColorField('secondary', {
+        en: 'Secondary',
+        cs: 'Sekundární'
+    }, {
+        en: 'Secondary accent color',
+        cs: 'Sekundární akcentová barva'
+    }),
+    createOKLCHColorField('secondaryForeground', {
+        en: 'Secondary Foreground',
+        cs: 'Popředí sekundární'
+    }, {
+        en: 'Text on secondary color',
+        cs: 'Text na sekundární barvě'
+    }),
+    createOKLCHColorField('muted', {
+        en: 'Muted',
+        cs: 'Tlumená'
+    }, {
+        en: 'Muted background color',
+        cs: 'Tlumená barva pozadí'
+    }),
+    createOKLCHColorField('mutedForeground', {
+        en: 'Muted Foreground',
+        cs: 'Popředí tlumené'
+    }, {
+        en: 'Muted text color',
+        cs: 'Tlumená barva textu'
+    }),
+    createOKLCHColorField('accent', {
+        en: 'Accent',
+        cs: 'Akcentová'
+    }, {
+        en: 'Accent color',
+        cs: 'Akcentová barva'
+    }),
+    createOKLCHColorField('accentForeground', {
+        en: 'Accent Foreground',
+        cs: 'Popředí akcentové'
+    }, {
+        en: 'Text on accent color',
+        cs: 'Text na akcentové barvě'
+    }),
+    createOKLCHColorField('destructive', {
+        en: 'Destructive',
+        cs: 'Destruktivní'
+    }, {
+        en: 'Error/danger color',
+        cs: 'Barva chyby/nebezpečí'
+    }),
+    createOKLCHColorField('destructiveForeground', {
+        en: 'Destructive Foreground',
+        cs: 'Popředí destruktivní'
+    }, {
+        en: 'Text on destructive color',
+        cs: 'Text na destruktivní barvě'
+    }),
+    createOKLCHColorField('border', {
+        en: 'Border',
+        cs: 'Okraj'
+    }, {
+        en: 'Border color',
+        cs: 'Barva okraje'
+    }),
+    createOKLCHColorField('input', {
+        en: 'Input',
+        cs: 'Vstup'
+    }, {
+        en: 'Input border color',
+        cs: 'Barva okraje vstupu'
+    }),
+    createOKLCHColorField('ring', {
+        en: 'Ring',
+        cs: 'Zvýraznění'
+    }, {
+        en: 'Focus ring color',
+        cs: 'Barva zvýraznění focus'
+    })
+];
+/**
+ * Chart color fields (for data visualization)
+ */ export const chartColorFields = [
+    createOKLCHColorField('chart1', {
+        en: 'Chart Color 1',
+        cs: 'Barva grafu 1'
+    }, {
+        en: 'First chart color',
+        cs: 'První barva grafu'
+    }),
+    createOKLCHColorField('chart2', {
+        en: 'Chart Color 2',
+        cs: 'Barva grafu 2'
+    }, {
+        en: 'Second chart color',
+        cs: 'Druhá barva grafu'
+    }),
+    createOKLCHColorField('chart3', {
+        en: 'Chart Color 3',
+        cs: 'Barva grafu 3'
+    }, {
+        en: 'Third chart color',
+        cs: 'Třetí barva grafu'
+    }),
+    createOKLCHColorField('chart4', {
+        en: 'Chart Color 4',
+        cs: 'Barva grafu 4'
+    }, {
+        en: 'Fourth chart color',
+        cs: 'Čtvrtá barva grafu'
+    }),
+    createOKLCHColorField('chart5', {
+        en: 'Chart Color 5',
+        cs: 'Barva grafu 5'
+    }, {
+        en: 'Fifth chart color',
+        cs: 'Pátá barva grafu'
+    })
+];
+/**
+ * Extended Theme Selection Field
+ */ export const extendedThemeSelectionField = {
+    name: 'extendedTheme',
+    type: 'select',
+    label: {
+        en: '🎨 Extended Theme',
+        cs: '🎨 Rozšířené téma'
+    },
+    defaultValue: 'cool-extended',
+    options: extendedThemeOptions,
+    admin: {
+        description: {
+            en: 'Select an extended theme with full OKLCH color support. Compatible with shadcn/ui.',
+            cs: 'Vyberte rozšířené téma s plnou podporou OKLCH barev. Kompatibilní s shadcn/ui.'
+        }
+    }
+};
+/**
+ * Extended Light Mode Configuration
+ */ export const extendedLightModeField = {
+    type: 'collapsible',
+    label: {
+        en: '☀️ Extended Light Mode',
+        cs: '☀️ Rozšířený světlý režim'
+    },
+    admin: {
+        initCollapsed: true,
+        description: {
+            en: 'Advanced color configuration for light mode using OKLCH format',
+            cs: 'Pokročilá konfigurace barev pro světlý režim pomocí formátu OKLCH'
+        }
+    },
+    fields: [
+        {
+            name: 'extendedLightMode',
+            type: 'group',
+            fields: extendedLightModeFields
+        }
+    ]
+};
+/**
+ * Extended Dark Mode Configuration
+ */ export const extendedDarkModeField = {
+    type: 'collapsible',
+    label: {
+        en: '🌙 Extended Dark Mode',
+        cs: '🌙 Rozšířený tmavý režim'
+    },
+    admin: {
+        initCollapsed: true,
+        description: {
+            en: 'Advanced color configuration for dark mode using OKLCH format',
+            cs: 'Pokročilá konfigurace barev pro tmavý režim pomocí formátu OKLCH'
+        }
+    },
+    fields: [
+        {
+            name: 'extendedDarkMode',
+            type: 'group',
+            fields: extendedLightModeFields
+        }
+    ]
+};
+/**
+ * Chart Colors Configuration
+ */ export const chartColorsField = {
+    type: 'collapsible',
+    label: {
+        en: '📊 Chart Colors',
+        cs: '📊 Barvy grafů'
+    },
+    admin: {
+        initCollapsed: true,
+        description: {
+            en: 'Configure colors for data visualization and charts',
+            cs: 'Nakonfigurujte barvy pro vizualizaci dat a grafy'
+        }
+    },
+    fields: [
+        {
+            name: 'chartColors',
+            type: 'group',
+            fields: chartColorFields
+        }
+    ]
+};
+
+//# sourceMappingURL=extendedThemeFields.js.map

package/dist/fields/extendedThemeFields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/extendedThemeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\nimport { extendedThemePresets } from '../extended-presets.js'\n\n/**\n * Extended Theme Configuration Fields\n * Provides advanced color token configuration using OKLCH format\n * Compatible with shadcn/ui and TweakCN theme editors\n */\n\nconst extendedThemeOptions = Object.values(extendedThemePresets).map((preset) => ({\n  label: preset.label,\n  value: preset.value,\n}))\n\n/**\n * Creates OKLCH color input field\n */\nfunction createOKLCHColorField(\n  name: string,\n  label: { en: string; cs: string },\n  description?: { en: string; cs: string },\n): Field {\n  return {\n    name,\n    type: 'text',\n    label,\n    admin: {\n      description,\n      placeholder: 'oklch(0.5 0.2 250)',\n      components: {\n        Field: '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField',\n      },\n    },\n  }\n}\n\n/**\n * Extended Theme Color Fields for Light Mode\n */\nexport const extendedLightModeFields: Field[] = [\n  createOKLCHColorField(\n    'background',\n    { en: 'Background', cs: 'Pozadí' },\n    { en: 'Main background color', cs: 'Hlavní barva pozadí' },\n  ),\n  createOKLCHColorField(\n    'foreground',\n    { en: 'Foreground', cs: 'Popředí' },\n    { en: 'Main text color', cs: 'Hlavní barva textu' },\n  ),\n  createOKLCHColorField(\n    'card',\n    { en: 'Card', cs: 'Karta' },\n    { en: 'Card background', cs: 'Pozadí karty' },\n  ),\n  createOKLCHColorField(\n    'cardForeground',\n    { en: 'Card Foreground', cs: 'Popředí karty' },\n    { en: 'Card text color', cs: 'Barva textu karty' },\n  ),\n  createOKLCHColorField(\n    'popover',\n    { en: 'Popover', cs: 'Vyskakovací okno' },\n    { en: 'Popover background', cs: 'Pozadí vyskakovacího okna' },\n  ),\n  createOKLCHColorField(\n    'popoverForeground',\n    { en: 'Popover Foreground', cs: 'Popředí vyskakovacího okna' },\n    { en: 'Popover text color', cs: 'Barva textu vyskakovacího okna' },\n  ),\n  createOKLCHColorField(\n    'primary',\n    { en: 'Primary', cs: 'Primární' },\n    { en: 'Primary brand color', cs: 'Primární značková barva' },\n  ),\n  createOKLCHColorField(\n    'primaryForeground',\n    { en: 'Primary Foreground', cs: 'Popředí primární' },\n    { en: 'Text on primary color', cs: 'Text na primární barvě' },\n  ),\n  createOKLCHColorField(\n    'secondary',\n    { en: 'Secondary', cs: 'Sekundární' },\n    { en: 'Secondary accent color', cs: 'Sekundární akcentová barva' },\n  ),\n  createOKLCHColorField(\n    'secondaryForeground',\n    { en: 'Secondary Foreground', cs: 'Popředí sekundární' },\n    { en: 'Text on secondary color', cs: 'Text na sekundární barvě' },\n  ),\n  createOKLCHColorField(\n    'muted',\n    { en: 'Muted', cs: 'Tlumená' },\n    { en: 'Muted background color', cs: 'Tlumená barva pozadí' },\n  ),\n  createOKLCHColorField(\n    'mutedForeground',\n    { en: 'Muted Foreground', cs: 'Popředí tlumené' },\n    { en: 'Muted text color', cs: 'Tlumená barva textu' },\n  ),\n  createOKLCHColorField(\n    'accent',\n    { en: 'Accent', cs: 'Akcentová' },\n    { en: 'Accent color', cs: 'Akcentová barva' },\n  ),\n  createOKLCHColorField(\n    'accentForeground',\n    { en: 'Accent Foreground', cs: 'Popředí akcentové' },\n    { en: 'Text on accent color', cs: 'Text na akcentové barvě' },\n  ),\n  createOKLCHColorField(\n    'destructive',\n    { en: 'Destructive', cs: 'Destruktivní' },\n    { en: 'Error/danger color', cs: 'Barva chyby/nebezpečí' },\n  ),\n  createOKLCHColorField(\n    'destructiveForeground',\n    { en: 'Destructive Foreground', cs: 'Popředí destruktivní' },\n    { en: 'Text on destructive color', cs: 'Text na destruktivní barvě' },\n  ),\n  createOKLCHColorField(\n    'border',\n    { en: 'Border', cs: 'Okraj' },\n    { en: 'Border color', cs: 'Barva okraje' },\n  ),\n  createOKLCHColorField(\n    'input',\n    { en: 'Input', cs: 'Vstup' },\n    { en: 'Input border color', cs: 'Barva okraje vstupu' },\n  ),\n  createOKLCHColorField(\n    'ring',\n    { en: 'Ring', cs: 'Zvýraznění' },\n    { en: 'Focus ring color', cs: 'Barva zvýraznění focus' },\n  ),\n]\n\n/**\n * Chart color fields (for data visualization)\n */\nexport const chartColorFields: Field[] = [\n  createOKLCHColorField(\n    'chart1',\n    { en: 'Chart Color 1', cs: 'Barva grafu 1' },\n    { en: 'First chart color', cs: 'První barva grafu' },\n  ),\n  createOKLCHColorField(\n    'chart2',\n    { en: 'Chart Color 2', cs: 'Barva grafu 2' },\n    { en: 'Second chart color', cs: 'Druhá barva grafu' },\n  ),\n  createOKLCHColorField(\n    'chart3',\n    { en: 'Chart Color 3', cs: 'Barva grafu 3' },\n    { en: 'Third chart color', cs: 'Třetí barva grafu' },\n  ),\n  createOKLCHColorField(\n    'chart4',\n    { en: 'Chart Color 4', cs: 'Barva grafu 4' },\n    { en: 'Fourth chart color', cs: 'Čtvrtá barva grafu' },\n  ),\n  createOKLCHColorField(\n    'chart5',\n    { en: 'Chart Color 5', cs: 'Barva grafu 5' },\n    { en: 'Fifth chart color', cs: 'Pátá barva grafu' },\n  ),\n]\n\n/**\n * Extended Theme Selection Field\n */\nexport const extendedThemeSelectionField: Field = {\n  name: 'extendedTheme',\n  type: 'select',\n  label: {\n    en: '🎨 Extended Theme',\n    cs: '🎨 Rozšířené téma',\n  },\n  defaultValue: 'cool-extended',\n  options: extendedThemeOptions,\n  admin: {\n    description: {\n      en: 'Select an extended theme with full OKLCH color support. Compatible with shadcn/ui.',\n      cs: 'Vyberte rozšířené téma s plnou podporou OKLCH barev. Kompatibilní s shadcn/ui.',\n    },\n  },\n}\n\n/**\n * Extended Light Mode Configuration\n */\nexport const extendedLightModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '☀️ Extended Light Mode',\n    cs: '☀️ Rozšířený světlý režim',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Advanced color configuration for light mode using OKLCH format',\n      cs: 'Pokročilá konfigurace barev pro světlý režim pomocí formátu OKLCH',\n    },\n  },\n  fields: [\n    {\n      name: 'extendedLightMode',\n      type: 'group',\n      fields: extendedLightModeFields,\n    },\n  ],\n}\n\n/**\n * Extended Dark Mode Configuration\n */\nexport const extendedDarkModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '🌙 Extended Dark Mode',\n    cs: '🌙 Rozšířený tmavý režim',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Advanced color configuration for dark mode using OKLCH format',\n      cs: 'Pokročilá konfigurace barev pro tmavý režim pomocí formátu OKLCH',\n    },\n  },\n  fields: [\n    {\n      name: 'extendedDarkMode',\n      type: 'group',\n      fields: extendedLightModeFields, // Same structure, different values\n    },\n  ],\n}\n\n/**\n * Chart Colors Configuration\n */\nexport const chartColorsField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '📊 Chart Colors',\n    cs: '📊 Barvy grafů',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for data visualization and charts',\n      cs: 'Nakonfigurujte barvy pro vizualizaci dat a grafy',\n    },\n  },\n  fields: [\n    {\n      name: 'chartColors',\n      type: 'group',\n      fields: chartColorFields,\n    },\n  ],\n}\n"],"names":["extendedThemePresets","extendedThemeOptions","Object","values","map","preset","label","value","createOKLCHColorField","name","description","type","admin","placeholder","components","Field","extendedLightModeFields","en","cs","chartColorFields","extendedThemeSelectionField","defaultValue","options","extendedLightModeField","initCollapsed","fields","extendedDarkModeField","chartColorsField"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,yBAAwB;AAE7D;;;;CAIC,GAED,MAAMC,uBAAuBC,OAAOC,MAAM,CAACH,sBAAsBI,GAAG,CAAC,CAACC,SAAY,CAAA;QAChFC,OAAOD,OAAOC,KAAK;QACnBC,OAAOF,OAAOE,KAAK;IACrB,CAAA;AAEA;;CAEC,GACD,SAASC,sBACPC,IAAY,EACZH,KAAiC,EACjCI,WAAwC;IAExC,OAAO;QACLD;QACAE,MAAM;QACNL;QACAM,OAAO;YACLF;YACAG,aAAa;YACbC,YAAY;gBACVC,OAAO;YACT;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAAmC;IAC9CR,sBACE,cACA;QAAES,IAAI;QAAcC,IAAI;IAAS,GACjC;QAAED,IAAI;QAAyBC,IAAI;IAAsB;IAE3DV,sBACE,cACA;QAAES,IAAI;QAAcC,IAAI;IAAU,GAClC;QAAED,IAAI;QAAmBC,IAAI;IAAqB;IAEpDV,sBACE,QACA;QAAES,IAAI;QAAQC,IAAI;IAAQ,GAC1B;QAAED,IAAI;QAAmBC,IAAI;IAAe;IAE9CV,sBACE,kBACA;QAAES,IAAI;QAAmBC,IAAI;IAAgB,GAC7C;QAAED,IAAI;QAAmBC,IAAI;IAAoB;IAEnDV,sBACE,WACA;QAAES,IAAI;QAAWC,IAAI;IAAmB,GACxC;QAAED,IAAI;QAAsBC,IAAI;IAA4B;IAE9DV,sBACE,qBACA;QAAES,IAAI;QAAsBC,IAAI;IAA6B,GAC7D;QAAED,IAAI;QAAsBC,IAAI;IAAiC;IAEnEV,sBACE,WACA;QAAES,IAAI;QAAWC,IAAI;IAAW,GAChC;QAAED,IAAI;QAAuBC,IAAI;IAA0B;IAE7DV,sBACE,qBACA;QAAES,IAAI;QAAsBC,IAAI;IAAmB,GACnD;QAAED,IAAI;QAAyBC,IAAI;IAAyB;IAE9DV,sBACE,aACA;QAAES,IAAI;QAAaC,IAAI;IAAa,GACpC;QAAED,IAAI;QAA0BC,IAAI;IAA6B;IAEnEV,sBACE,uBACA;QAAES,IAAI;QAAwBC,IAAI;IAAqB,GACvD;QAAED,IAAI;QAA2BC,IAAI;IAA2B;IAElEV,sBACE,SACA;QAAES,IAAI;QAASC,IAAI;IAAU,GAC7B;QAAED,IAAI;QAA0BC,IAAI;IAAuB;IAE7DV,sBACE,mBACA;QAAES,IAAI;QAAoBC,IAAI;IAAkB,GAChD;QAAED,IAAI;QAAoBC,IAAI;IAAsB;IAEtDV,sBACE,UACA;QAAES,IAAI;QAAUC,IAAI;IAAY,GAChC;QAAED,IAAI;QAAgBC,IAAI;IAAkB;IAE9CV,sBACE,oBACA;QAAES,IAAI;QAAqBC,IAAI;IAAoB,GACnD;QAAED,IAAI;QAAwBC,IAAI;IAA0B;IAE9DV,sBACE,eACA;QAAES,IAAI;QAAeC,IAAI;IAAe,GACxC;QAAED,IAAI;QAAsBC,IAAI;IAAwB;IAE1DV,sBACE,yBACA;QAAES,IAAI;QAA0BC,IAAI;IAAuB,GAC3D;QAAED,IAAI;QAA6BC,IAAI;IAA6B;IAEtEV,sBACE,UACA;QAAES,IAAI;QAAUC,IAAI;IAAQ,GAC5B;QAAED,IAAI;QAAgBC,IAAI;IAAe;IAE3CV,sBACE,SACA;QAAES,IAAI;QAASC,IAAI;IAAQ,GAC3B;QAAED,IAAI;QAAsBC,IAAI;IAAsB;IAExDV,sBACE,QACA;QAAES,IAAI;QAAQC,IAAI;IAAa,GAC/B;QAAED,IAAI;QAAoBC,IAAI;IAAyB;CAE1D,CAAA;AAED;;CAEC,GACD,OAAO,MAAMC,mBAA4B;IACvCX,sBACE,UACA;QAAES,IAAI;QAAiBC,IAAI;IAAgB,GAC3C;QAAED,IAAI;QAAqBC,IAAI;IAAoB;IAErDV,sBACE,UACA;QAAES,IAAI;QAAiBC,IAAI;IAAgB,GAC3C;QAAED,IAAI;QAAsBC,IAAI;IAAoB;IAEtDV,sBACE,UACA;QAAES,IAAI;QAAiBC,IAAI;IAAgB,GAC3C;QAAED,IAAI;QAAqBC,IAAI;IAAoB;IAErDV,sBACE,UACA;QAAES,IAAI;QAAiBC,IAAI;IAAgB,GAC3C;QAAED,IAAI;QAAsBC,IAAI;IAAqB;IAEvDV,sBACE,UACA;QAAES,IAAI;QAAiBC,IAAI;IAAgB,GAC3C;QAAED,IAAI;QAAqBC,IAAI;IAAmB;CAErD,CAAA;AAED;;CAEC,GACD,OAAO,MAAME,8BAAqC;IAChDX,MAAM;IACNE,MAAM;IACNL,OAAO;QACLW,IAAI;QACJC,IAAI;IACN;IACAG,cAAc;IACdC,SAASrB;IACTW,OAAO;QACLF,aAAa;YACXO,IAAI;YACJC,IAAI;QACN;IACF;AACF,EAAC;AAED;;CAEC,GACD,OAAO,MAAMK,yBAAgC;IAC3CZ,MAAM;IACNL,OAAO;QACLW,IAAI;QACJC,IAAI;IACN;IACAN,OAAO;QACLY,eAAe;QACfd,aAAa;YACXO,IAAI;YACJC,IAAI;QACN;IACF;IACAO,QAAQ;QACN;YACEhB,MAAM;YACNE,MAAM;YACNc,QAAQT;QACV;KACD;AACH,EAAC;AAED;;CAEC,GACD,OAAO,MAAMU,wBAA+B;IAC1Cf,MAAM;IACNL,OAAO;QACLW,IAAI;QACJC,IAAI;IACN;IACAN,OAAO;QACLY,eAAe;QACfd,aAAa;YACXO,IAAI;YACJC,IAAI;QACN;IACF;IACAO,QAAQ;QACN;YACEhB,MAAM;YACNE,MAAM;YACNc,QAAQT;QACV;KACD;AACH,EAAC;AAED;;CAEC,GACD,OAAO,MAAMW,mBAA0B;IACrChB,MAAM;IACNL,OAAO;QACLW,IAAI;QACJC,IAAI;IACN;IACAN,OAAO;QACLY,eAAe;QACfd,aAAa;YACXO,IAAI;YACJC,IAAI;QACN;IACF;IACAO,QAAQ;QACN;YACEhB,MAAM;YACNE,MAAM;YACNc,QAAQN;QACV;KACD;AACH,EAAC"}

package/dist/fields/themeConfigurationField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAG9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,KAAK,CA4Y5F"}
+{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAS9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,KAAK,CAya5F"}

package/dist/fields/themeConfigurationField.js

@@ -1,5 +1,6 @@
 import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS } from '../constants/themeFonts.js';
 import { darkModeField, lightModeField } from './colorModeFields.js';
+import { extendedThemeSelectionField, extendedLightModeField, extendedDarkModeField, chartColorsField } from './extendedThemeFields.js';
 /**
  * Theme Configuration Field with Theme Selection as default value setter
  * Theme Selection populates lightMode/darkMode colors automatically
@@ -33,8 +34,31 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
                     Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField'
                 }
             }
-        }
+        },
+        extendedThemeSelectionField
     ];
+    // Extended Theme Configuration (OKLCH colors, shadcn/ui compatible)
+    if (enableAdvancedFeatures) {
+        fields.push({
+            type: 'collapsible',
+            label: {
+                en: '🎨 Extended Theme Configuration',
+                cs: '🎨 Rozšířená konfigurace tématu'
+            },
+            admin: {
+                initCollapsed: true,
+                description: {
+                    en: 'Advanced color configuration using OKLCH format. Compatible with shadcn/ui and TweakCN.',
+                    cs: 'Pokročilá konfigurace barev pomocí formátu OKLCH. Kompatibilní s shadcn/ui a TweakCN.'
+                }
+            },
+            fields: [
+                extendedLightModeField,
+                extendedDarkModeField,
+                chartColorsField
+            ]
+        });
+    }
     // Color Mode Settings
     if (includeColorModeToggle) {
         fields.push({
@@ -466,16 +490,21 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
         });
     }
     return {
-        name: 'themeConfiguration',
-        type: 'group',
-        label: false,
-        admin: {
-            description: {
-                en: 'Configure website appearance and styling',
-                cs: 'Nakonfigurujte vzhled a stylování webu'
+        type: 'tabs',
+        tabs: [
+            {
+                name: 'themeConfiguration',
+                label: {
+                    en: '🎨 Appearance Settings',
+                    cs: '🎨 Nastavení vzhledu'
+                },
+                description: {
+                    en: 'Configure website appearance and styling',
+                    cs: 'Nakonfigurujte vzhled a stylování webu'
+                },
+                fields
             }
-        },
-        fields
+        ]
     };
 }
 

package/dist/fields/themeConfigurationField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/themeConfigurationField.ts"],"sourcesContent":["import type { Field } from 'payload'\nimport {\n  BASE_FONT_SIZE_OPTIONS,\n  BODY_FONT_OPTIONS,\n  HEADING_FONT_OPTIONS,\n  LINE_HEIGHT_OPTIONS,\n} from '../constants/themeFonts.js'\nimport type { ThemePreset } from '../index.js'\nimport { darkModeField, lightModeField } from './colorModeFields.js'\n\ninterface ThemeConfigurationFieldOptions {\n  themePresets: ThemePreset[]\n  defaultTheme: string\n  includeColorModeToggle: boolean\n  includeCustomCSS: boolean\n  includeBrandIdentity: boolean\n  enableAdvancedFeatures?: boolean\n}\n\n/**\n * Theme Configuration Field with Theme Selection as default value setter\n * Theme Selection populates lightMode/darkMode colors automatically\n */\nexport function createThemeConfigurationField(options: ThemeConfigurationFieldOptions): Field {\n  const {\n    themePresets,\n    defaultTheme,\n    includeColorModeToggle,\n    includeCustomCSS,\n    enableAdvancedFeatures = true,\n  } = options\n\n  const themeOptions = themePresets.map((preset) => {\n    const previewColor = preset.preview?.colors.primary\n    const label = previewColor ? `${preset.label} • ${previewColor}` : preset.label\n    return {\n      label,\n      value: preset.name,\n    }\n  })\n\n  const fields: Field[] = [\n    {\n      name: 'theme',\n      type: 'select',\n      required: true,\n      defaultValue: defaultTheme,\n      options: themeOptions,\n      label: {\n        en: '🎨 Theme Selection',\n        cs: '🎨 Výběr tématu',\n      },\n      admin: {\n        description: {\n          en: 'Select a theme to auto-populate color values. You can customize colors after selection.',\n          cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',\n        },\n        components: {\n          Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField',\n        },\n      },\n    },\n  ]\n\n  // Color Mode Settings\n  if (includeColorModeToggle) {\n    fields.push({\n      type: 'collapsible',\n      label: {\n        en: '🌗 Color Mode Settings',\n        cs: '🌗 Nastavení barevného režimu',\n      },\n      admin: {\n        initCollapsed: false,\n        description: {\n          en: 'Configure light and dark mode colors. Changes here override theme selection.',\n          cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',\n        },\n      },\n      fields: [\n        {\n          type: 'row',\n          fields: [\n            {\n              name: 'colorMode',\n              type: 'select',\n              label: {\n                en: 'Default Color Mode',\n                cs: 'Výchozí barevný režim',\n              },\n              defaultValue: 'auto',\n              options: [\n                {\n                  label: {\n                    en: 'Auto (System)',\n                    cs: 'Automaticky (Systém)',\n                  },\n                  value: 'auto',\n                },\n                {\n                  label: { en: 'Light', cs: 'Světlý' },\n                  value: 'light',\n                },\n                {\n                  label: { en: 'Dark', cs: 'Tmavý' },\n                  value: 'dark',\n                },\n              ],\n              admin: {\n                description: {\n                  en: 'Default color mode for visitors',\n                  cs: 'Výchozí barevný režim pro návštěvníky',\n                },\n                width: '50%',\n              },\n            },\n            {\n              name: 'allowColorModeToggle',\n              type: 'checkbox',\n              label: {\n                en: 'Enable Mode Toggle',\n                cs: 'Povolit přepínač režimu',\n              },\n              defaultValue: true,\n              admin: {\n                description: {\n                  en: 'Let visitors switch modes',\n                  cs: 'Umožnit návštěvníkům přepínat režimy',\n                },\n                width: '50%',\n              },\n            },\n          ],\n        },\n        lightModeField,\n        darkModeField,\n      ],\n    })\n  }\n\n  fields.push({\n    type: 'collapsible',\n    label: {\n      en: '🅰️ Typography',\n      cs: '🅰️ Typografie',\n    },\n    admin: {\n      initCollapsed: true,\n      description: {\n        en: 'Choose font families and base typography settings. Leave fields on \"Use preset\" to inherit the theme defaults.',\n        cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota \"Použít výchozí\" zachová nastavení motivu.',\n      },\n    },\n    fields: [\n      {\n        name: 'typography',\n        type: 'group',\n        fields: [\n          {\n            type: 'row',\n            fields: [\n              {\n                name: 'bodyFont',\n                type: 'select',\n                label: {\n                  en: 'Body font',\n                  cs: 'Písmo pro text',\n                },\n                defaultValue: 'preset',\n                options: BODY_FONT_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n              {\n                name: 'headingFont',\n                type: 'select',\n                label: {\n                  en: 'Heading font',\n                  cs: 'Písmo pro nadpisy',\n                },\n                defaultValue: 'preset',\n                options: HEADING_FONT_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n            ],\n          },\n          {\n            type: 'row',\n            fields: [\n              {\n                name: 'bodyFontCustom',\n                type: 'text',\n                label: {\n                  en: 'Custom body font stack',\n                  cs: 'Vlastní písmo pro text',\n                },\n                admin: {\n                  width: '50%',\n                  placeholder: '\"IBM Plex Sans\", sans-serif',\n                  description: {\n                    en: 'Provide full CSS font-family stack when using a custom font.',\n                    cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',\n                  },\n                  condition: (_, siblingData) => siblingData?.bodyFont === 'custom',\n                },\n              },\n              {\n                name: 'headingFontCustom',\n                type: 'text',\n                label: {\n                  en: 'Custom heading font stack',\n                  cs: 'Vlastní písmo pro nadpisy',\n                },\n                admin: {\n                  width: '50%',\n                  placeholder: '\"Cormorant Garamond\", serif',\n                  description: {\n                    en: 'Provide full CSS font-family stack when using a custom heading font.',\n                    cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',\n                  },\n                  condition: (_, siblingData) => siblingData?.headingFont === 'custom',\n                },\n              },\n            ],\n          },\n          {\n            type: 'row',\n            fields: [\n              {\n                name: 'baseFontSize',\n                type: 'select',\n                label: {\n                  en: 'Base font size',\n                  cs: 'Základní velikost písma',\n                },\n                defaultValue: 'preset',\n                options: BASE_FONT_SIZE_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n              {\n                name: 'lineHeight',\n                type: 'select',\n                label: {\n                  en: 'Line height',\n                  cs: 'Řádkování',\n                },\n                defaultValue: 'preset',\n                options: LINE_HEIGHT_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  })\n\n  // Design Customization\n  fields.push({\n    type: 'collapsible',\n    label: {\n      en: '✨ Design Customization',\n      cs: '✨ Přizpůsobení designu',\n    },\n    admin: {\n      initCollapsed: true,\n    },\n    fields: [\n      {\n        name: 'borderRadius',\n        type: 'select',\n        label: {\n          en: 'Border Radius',\n          cs: 'Zaoblení rohů',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n          { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\n          { label: { en: 'Full', cs: 'Plné' }, value: 'xl' },\n        ],\n        admin: {\n          components: {\n            Field: '@kilivi/payloadcms-theme-management/fields/RadiusField',\n          },\n          width: '33%',\n        },\n      },\n      {\n        name: 'fontScale',\n        type: 'select',\n        label: {\n          en: 'Font Scale',\n          cs: 'Velikost písma',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\n        ],\n        admin: {\n          width: '33%',\n        },\n      },\n      {\n        name: 'spacing',\n        type: 'select',\n        label: {\n          en: 'Spacing',\n          cs: 'Mezery',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'Spacious', cs: 'Prostorné' }, value: 'spacious' },\n        ],\n        admin: {\n          width: '34%',\n        },\n      },\n    ],\n  })\n\n  // Advanced Settings\n  if (enableAdvancedFeatures) {\n    const advancedFields: Field[] = [\n      {\n        name: 'animationLevel',\n        type: 'select',\n        label: {\n          en: 'Animation Level',\n          cs: 'Úroveň animací',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n          { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },\n        ],\n        admin: {\n          description: {\n            en: 'Control website animations and transitions',\n            cs: 'Kontrola animací a přechodů na webu',\n          },\n          width: '50%',\n        },\n      },\n    ]\n\n    if (includeCustomCSS) {\n      advancedFields.push({\n        name: 'customCSS',\n        type: 'code',\n        label: {\n          en: 'Custom CSS',\n          cs: 'Vlastní CSS',\n        },\n        admin: {\n          language: 'css',\n          description: {\n            en: 'Add custom CSS to override default styles',\n            cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',\n          },\n          // placeholder:\n          //   ':root {\\n  --primary: #your-color;\\n  --border-radius: 8px;\\n  --font-family: \"Your Font\";\\n}\\n\\n.custom-class {\\n  /* Your custom styles */\\n}',\n          // rows: 8,\n        },\n      })\n    }\n\n    fields.push({\n      type: 'collapsible',\n      label: {\n        en: '⚙️ Advanced Settings',\n        cs: '⚙️ Pokročilé nastavení',\n      },\n      admin: {\n        initCollapsed: true,\n      },\n      fields: advancedFields,\n    })\n  }\n\n  return {\n    name: 'themeConfiguration',\n    type: 'group',\n    label: false,\n    admin: {\n      description: {\n        en: 'Configure website appearance and styling',\n        cs: 'Nakonfigurujte vzhled a stylování webu',\n      },\n    },\n    fields,\n  }\n}\n"],"names":["BASE_FONT_SIZE_OPTIONS","BODY_FONT_OPTIONS","HEADING_FONT_OPTIONS","LINE_HEIGHT_OPTIONS","darkModeField","lightModeField","createThemeConfigurationField","options","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","enableAdvancedFeatures","themeOptions","map","preset","previewColor","preview","colors","primary","label","value","name","fields","type","required","defaultValue","en","cs","admin","description","components","Field","push","initCollapsed","width","option","placeholder","condition","_","siblingData","bodyFont","headingFont","advancedFields","language"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/themeConfigurationField.ts"],"sourcesContent":["import type { Field } from 'payload'\nimport {\n  BASE_FONT_SIZE_OPTIONS,\n  BODY_FONT_OPTIONS,\n  HEADING_FONT_OPTIONS,\n  LINE_HEIGHT_OPTIONS,\n} from '../constants/themeFonts.js'\nimport type { ThemePreset } from '../index.js'\nimport { darkModeField, lightModeField } from './colorModeFields.js'\nimport {\n  extendedThemeSelectionField,\n  extendedLightModeField,\n  extendedDarkModeField,\n  chartColorsField,\n} from './extendedThemeFields.js'\n\ninterface ThemeConfigurationFieldOptions {\n  themePresets: ThemePreset[]\n  defaultTheme: string\n  includeColorModeToggle: boolean\n  includeCustomCSS: boolean\n  includeBrandIdentity: boolean\n  enableAdvancedFeatures?: boolean\n}\n\n/**\n * Theme Configuration Field with Theme Selection as default value setter\n * Theme Selection populates lightMode/darkMode colors automatically\n */\nexport function createThemeConfigurationField(options: ThemeConfigurationFieldOptions): Field {\n  const {\n    themePresets,\n    defaultTheme,\n    includeColorModeToggle,\n    includeCustomCSS,\n    enableAdvancedFeatures = true,\n  } = options\n\n  const themeOptions = themePresets.map((preset) => {\n    const previewColor = preset.preview?.colors.primary\n    const label = previewColor ? `${preset.label} • ${previewColor}` : preset.label\n    return {\n      label,\n      value: preset.name,\n    }\n  })\n\n  const fields: Field[] = [\n    {\n      name: 'theme',\n      type: 'select',\n      required: true,\n      defaultValue: defaultTheme,\n      options: themeOptions,\n      label: {\n        en: '🎨 Theme Selection',\n        cs: '🎨 Výběr tématu',\n      },\n      admin: {\n        description: {\n          en: 'Select a theme to auto-populate color values. You can customize colors after selection.',\n          cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',\n        },\n        components: {\n          Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField',\n        },\n      },\n    },\n    extendedThemeSelectionField,\n  ]\n\n  // Extended Theme Configuration (OKLCH colors, shadcn/ui compatible)\n  if (enableAdvancedFeatures) {\n    fields.push({\n      type: 'collapsible',\n      label: {\n        en: '🎨 Extended Theme Configuration',\n        cs: '🎨 Rozšířená konfigurace tématu',\n      },\n      admin: {\n        initCollapsed: true,\n        description: {\n          en: 'Advanced color configuration using OKLCH format. Compatible with shadcn/ui and TweakCN.',\n          cs: 'Pokročilá konfigurace barev pomocí formátu OKLCH. Kompatibilní s shadcn/ui a TweakCN.',\n        },\n      },\n      fields: [\n        extendedLightModeField,\n        extendedDarkModeField,\n        chartColorsField,\n      ],\n    })\n  }\n\n  // Color Mode Settings\n  if (includeColorModeToggle) {\n    fields.push({\n      type: 'collapsible',\n      label: {\n        en: '🌗 Color Mode Settings',\n        cs: '🌗 Nastavení barevného režimu',\n      },\n      admin: {\n        initCollapsed: false,\n        description: {\n          en: 'Configure light and dark mode colors. Changes here override theme selection.',\n          cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',\n        },\n      },\n      fields: [\n        {\n          type: 'row',\n          fields: [\n            {\n              name: 'colorMode',\n              type: 'select',\n              label: {\n                en: 'Default Color Mode',\n                cs: 'Výchozí barevný režim',\n              },\n              defaultValue: 'auto',\n              options: [\n                {\n                  label: {\n                    en: 'Auto (System)',\n                    cs: 'Automaticky (Systém)',\n                  },\n                  value: 'auto',\n                },\n                {\n                  label: { en: 'Light', cs: 'Světlý' },\n                  value: 'light',\n                },\n                {\n                  label: { en: 'Dark', cs: 'Tmavý' },\n                  value: 'dark',\n                },\n              ],\n              admin: {\n                description: {\n                  en: 'Default color mode for visitors',\n                  cs: 'Výchozí barevný režim pro návštěvníky',\n                },\n                width: '50%',\n              },\n            },\n            {\n              name: 'allowColorModeToggle',\n              type: 'checkbox',\n              label: {\n                en: 'Enable Mode Toggle',\n                cs: 'Povolit přepínač režimu',\n              },\n              defaultValue: true,\n              admin: {\n                description: {\n                  en: 'Let visitors switch modes',\n                  cs: 'Umožnit návštěvníkům přepínat režimy',\n                },\n                width: '50%',\n              },\n            },\n          ],\n        },\n        lightModeField,\n        darkModeField,\n      ],\n    })\n  }\n\n  fields.push({\n    type: 'collapsible',\n    label: {\n      en: '🅰️ Typography',\n      cs: '🅰️ Typografie',\n    },\n    admin: {\n      initCollapsed: true,\n      description: {\n        en: 'Choose font families and base typography settings. Leave fields on \"Use preset\" to inherit the theme defaults.',\n        cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota \"Použít výchozí\" zachová nastavení motivu.',\n      },\n    },\n    fields: [\n      {\n        name: 'typography',\n        type: 'group',\n        fields: [\n          {\n            type: 'row',\n            fields: [\n              {\n                name: 'bodyFont',\n                type: 'select',\n                label: {\n                  en: 'Body font',\n                  cs: 'Písmo pro text',\n                },\n                defaultValue: 'preset',\n                options: BODY_FONT_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n              {\n                name: 'headingFont',\n                type: 'select',\n                label: {\n                  en: 'Heading font',\n                  cs: 'Písmo pro nadpisy',\n                },\n                defaultValue: 'preset',\n                options: HEADING_FONT_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n            ],\n          },\n          {\n            type: 'row',\n            fields: [\n              {\n                name: 'bodyFontCustom',\n                type: 'text',\n                label: {\n                  en: 'Custom body font stack',\n                  cs: 'Vlastní písmo pro text',\n                },\n                admin: {\n                  width: '50%',\n                  placeholder: '\"IBM Plex Sans\", sans-serif',\n                  description: {\n                    en: 'Provide full CSS font-family stack when using a custom font.',\n                    cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',\n                  },\n                  condition: (_, siblingData) => siblingData?.bodyFont === 'custom',\n                },\n              },\n              {\n                name: 'headingFontCustom',\n                type: 'text',\n                label: {\n                  en: 'Custom heading font stack',\n                  cs: 'Vlastní písmo pro nadpisy',\n                },\n                admin: {\n                  width: '50%',\n                  placeholder: '\"Cormorant Garamond\", serif',\n                  description: {\n                    en: 'Provide full CSS font-family stack when using a custom heading font.',\n                    cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',\n                  },\n                  condition: (_, siblingData) => siblingData?.headingFont === 'custom',\n                },\n              },\n            ],\n          },\n          {\n            type: 'row',\n            fields: [\n              {\n                name: 'baseFontSize',\n                type: 'select',\n                label: {\n                  en: 'Base font size',\n                  cs: 'Základní velikost písma',\n                },\n                defaultValue: 'preset',\n                options: BASE_FONT_SIZE_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n              {\n                name: 'lineHeight',\n                type: 'select',\n                label: {\n                  en: 'Line height',\n                  cs: 'Řádkování',\n                },\n                defaultValue: 'preset',\n                options: LINE_HEIGHT_OPTIONS.map((option) => ({\n                  label: option.label,\n                  value: option.value,\n                })),\n                admin: {\n                  width: '50%',\n                },\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  })\n\n  // Design Customization\n  fields.push({\n    type: 'collapsible',\n    label: {\n      en: '✨ Design Customization',\n      cs: '✨ Přizpůsobení designu',\n    },\n    admin: {\n      initCollapsed: true,\n    },\n    fields: [\n      {\n        name: 'borderRadius',\n        type: 'select',\n        label: {\n          en: 'Border Radius',\n          cs: 'Zaoblení rohů',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n          { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\n          { label: { en: 'Full', cs: 'Plné' }, value: 'xl' },\n        ],\n        admin: {\n          components: {\n            Field: '@kilivi/payloadcms-theme-management/fields/RadiusField',\n          },\n          width: '33%',\n        },\n      },\n      {\n        name: 'fontScale',\n        type: 'select',\n        label: {\n          en: 'Font Scale',\n          cs: 'Velikost písma',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\n        ],\n        admin: {\n          width: '33%',\n        },\n      },\n      {\n        name: 'spacing',\n        type: 'select',\n        label: {\n          en: 'Spacing',\n          cs: 'Mezery',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'Spacious', cs: 'Prostorné' }, value: 'spacious' },\n        ],\n        admin: {\n          width: '34%',\n        },\n      },\n    ],\n  })\n\n  // Advanced Settings\n  if (enableAdvancedFeatures) {\n    const advancedFields: Field[] = [\n      {\n        name: 'animationLevel',\n        type: 'select',\n        label: {\n          en: 'Animation Level',\n          cs: 'Úroveň animací',\n        },\n        defaultValue: 'medium',\n        options: [\n          { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n          { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },\n          { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n          { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },\n        ],\n        admin: {\n          description: {\n            en: 'Control website animations and transitions',\n            cs: 'Kontrola animací a přechodů na webu',\n          },\n          width: '50%',\n        },\n      },\n    ]\n\n    if (includeCustomCSS) {\n      advancedFields.push({\n        name: 'customCSS',\n        type: 'code',\n        label: {\n          en: 'Custom CSS',\n          cs: 'Vlastní CSS',\n        },\n        admin: {\n          language: 'css',\n          description: {\n            en: 'Add custom CSS to override default styles',\n            cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',\n          },\n          // placeholder:\n          //   ':root {\\n  --primary: #your-color;\\n  --border-radius: 8px;\\n  --font-family: \"Your Font\";\\n}\\n\\n.custom-class {\\n  /* Your custom styles */\\n}',\n          // rows: 8,\n        },\n      })\n    }\n\n    fields.push({\n      type: 'collapsible',\n      label: {\n        en: '⚙️ Advanced Settings',\n        cs: '⚙️ Pokročilé nastavení',\n      },\n      admin: {\n        initCollapsed: true,\n      },\n      fields: advancedFields,\n    })\n  }\n\n  return {\n    type: 'tabs',\n    tabs: [\n      {\n        name: 'themeConfiguration',\n        label: {\n          en: '🎨 Appearance Settings',\n          cs: '🎨 Nastavení vzhledu',\n        },\n        description: {\n          en: 'Configure website appearance and styling',\n          cs: 'Nakonfigurujte vzhled a stylování webu',\n        },\n        fields,\n      },\n    ],\n  }\n}\n"],"names":["BASE_FONT_SIZE_OPTIONS","BODY_FONT_OPTIONS","HEADING_FONT_OPTIONS","LINE_HEIGHT_OPTIONS","darkModeField","lightModeField","extendedThemeSelectionField","extendedLightModeField","extendedDarkModeField","chartColorsField","createThemeConfigurationField","options","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","enableAdvancedFeatures","themeOptions","map","preset","previewColor","preview","colors","primary","label","value","name","fields","type","required","defaultValue","en","cs","admin","description","components","Field","push","initCollapsed","width","option","placeholder","condition","_","siblingData","bodyFont","headingFont","advancedFields","language","tabs"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilivi/payloadcms-theme-management",
-  "version": "0.1.18",
+  "version": "0.2.1",
   "description": "Theme configuration plugin for Payload CMS v3",
   "type": "module",
   "main": "./dist/index.js",
@@ -58,12 +58,17 @@
     "@payloadcms/richtext-lexical": "^3.0.0",
     "@swc/cli": "^0.1.65",
     "@swc/core": "^1.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.3.12",
     "copyfiles": "^2.4.1",
+    "jest": "^30.2.0",
     "payload": "^3.58.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rimraf": "^5.0.5",
+    "ts-jest": "^29.4.4",
     "typescript": "^5.5.3"
   },
   "publishConfig": {
@@ -78,6 +83,9 @@
     "dev": "swc src -d dist --config-file .swcrc --watch",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "lint": "eslint src",
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   }