@kilivi/payloadcms-theme-management 0.1.6 → 0.1.7

package/dist/fields/ThemeTokenSelectField.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useCallback, useEffect, useState } from 'react';
+import { defaultThemePresets } from '../presets.js';
+import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js';
+const FALLBACK_TOKENS = [
+    {
+        value: 'background',
+        label: 'Theme background',
+        color: 'var(--background)'
+    },
+    {
+        value: 'card',
+        label: 'Card background',
+        color: 'var(--card)'
+    },
+    {
+        value: 'muted',
+        label: 'Muted surface',
+        color: 'var(--muted)'
+    },
+    {
+        value: 'accent',
+        label: 'Accent surface',
+        color: 'var(--accent)'
+    },
+    {
+        value: 'secondary',
+        label: 'Secondary surface',
+        color: 'var(--secondary)'
+    },
+    {
+        value: 'primary',
+        label: 'Primary surface',
+        color: 'var(--primary)'
+    }
+];
+async function fetchThemeConfiguration() {
+    try {
+        const response = await fetch('/api/site-settings');
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.json();
+        return data?.docs?.[0]?.themeConfiguration ?? null;
+    } catch (error) {
+        console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error);
+        return null;
+    }
+}
+function buildOptionsFromConfiguration(configuration) {
+    if (!configuration) {
+        return FALLBACK_TOKENS;
+    }
+    const resolved = resolveThemeConfiguration(configuration);
+    const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {};
+    const orderedKeys = [
+        'background',
+        'card',
+        'muted',
+        'accent',
+        'secondary',
+        'primary',
+        'popover'
+    ];
+    const typedLightMode = lightMode;
+    const tokens = orderedKeys.map((key)=>{
+        const value = typedLightMode?.[key];
+        if (typeof value !== 'string' || value.trim().length === 0) {
+            return null;
+        }
+        const labelMap = {
+            background: 'Theme background',
+            card: 'Card background',
+            muted: 'Muted surface',
+            accent: 'Accent surface',
+            secondary: 'Secondary surface',
+            primary: 'Primary surface',
+            popover: 'Popover surface'
+        };
+        return {
+            value: key,
+            label: labelMap[key] ?? key,
+            color: value
+        };
+    }).filter((token)=>Boolean(token));
+    return tokens.length > 0 ? tokens : FALLBACK_TOKENS;
+}
+export default function ThemeTokenSelectField(props) {
+    const { path, field } = props;
+    const { value, setValue } = useField({
+        path
+    });
+    const [options, setOptions] = useState(FALLBACK_TOKENS);
+    const selectedValue = value || 'background';
+    useEffect(()=>{
+        let isMounted = true;
+        fetchThemeConfiguration().then((configuration)=>{
+            if (!isMounted) return;
+            setOptions(buildOptionsFromConfiguration(configuration));
+        });
+        return ()=>{
+            isMounted = false;
+        };
+    }, []);
+    const handleSelect = useCallback((nextValue)=>{
+        setValue(nextValue);
+    }, [
+        setValue
+    ]);
+    const label = typeof field.label === 'string' ? field.label : '';
+    let description = '';
+    if (typeof field.admin?.description === 'string') {
+        description = field.admin.description;
+    } else if (field.admin?.description && typeof field.admin.description === 'object' && typeof field.admin.description.en === 'string') {
+        description = field.admin.description.en;
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type theme-token-select",
+        children: [
+            label && /*#__PURE__*/ _jsxs("label", {
+                className: "field-label",
+                htmlFor: path,
+                style: {
+                    display: 'block',
+                    marginBottom: '8px'
+                },
+                children: [
+                    label,
+                    field.required && /*#__PURE__*/ _jsx("span", {
+                        className: "required",
+                        children: "*"
+                    })
+                ]
+            }),
+            description && /*#__PURE__*/ _jsx("div", {
+                className: "field-description",
+                style: {
+                    marginBottom: '12px',
+                    fontSize: '13px',
+                    color: 'var(--theme-elevation-500)'
+                },
+                children: description
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "token-grid",
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+                    gap: '10px'
+                },
+                children: options.map((option)=>{
+                    const isActive = option.value === selectedValue;
+                    return /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>handleSelect(option.value),
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            padding: '10px 12px',
+                            borderRadius: '10px',
+                            border: isActive ? '2px solid var(--theme-primary-500)' : '1px solid var(--theme-elevation-150)',
+                            backgroundColor: 'var(--theme-elevation-0)',
+                            boxShadow: isActive ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)' : '0 1px 2px rgba(15, 23, 42, 0.08)',
+                            cursor: 'pointer',
+                            transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": true,
+                                style: {
+                                    width: '32px',
+                                    height: '32px',
+                                    borderRadius: '8px',
+                                    border: '1px solid rgba(15, 23, 42, 0.08)',
+                                    background: option.color
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    fontSize: '13px',
+                                    fontWeight: 600,
+                                    color: 'var(--theme-elevation-800)'
+                                },
+                                children: option.label
+                            })
+                        ]
+                    }, option.value);
+                })
+            }),
+            /*#__PURE__*/ _jsx("select", {
+                id: path,
+                value: selectedValue,
+                onChange: (event)=>handleSelect(event.target.value),
+                style: {
+                    display: 'none'
+                },
+                children: options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                        value: option.value,
+                        children: option.label
+                    }, option.value))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ThemeTokenSelectField.js.map

package/dist/fields/ThemeTokenSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport type { SelectFieldClientProps } from 'payload'\r\nimport { useCallback, useEffect, useState } from 'react'\r\nimport { defaultThemePresets } from '../presets.js'\r\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\r\n\r\ninterface ThemeColorOption {\r\n  value: string\r\n  label: string\r\n  color: string\r\n  description?: string\r\n}\r\n\r\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\r\n  { value: 'background', label: 'Theme background', color: 'var(--background)' },\r\n  { value: 'card', label: 'Card background', color: 'var(--card)' },\r\n  { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\r\n  { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\r\n  { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\r\n  { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\r\n]\r\n\r\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\r\n  try {\r\n    const response = await fetch('/api/site-settings')\r\n    if (!response.ok) {\r\n      return null\r\n    }\r\n    const data = await response.json()\r\n    return data?.docs?.[0]?.themeConfiguration ?? null\r\n  } catch (error) {\r\n    console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\r\n    return null\r\n  }\r\n}\r\n\r\nfunction buildOptionsFromConfiguration(configuration: Record<string, unknown> | null): ThemeColorOption[] {\r\n  if (!configuration) {\r\n    return FALLBACK_TOKENS\r\n  }\r\n\r\n  const resolved = resolveThemeConfiguration(configuration)\r\n  const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\r\n  const orderedKeys: string[] = [\r\n    'background',\r\n    'card',\r\n    'muted',\r\n    'accent',\r\n    'secondary',\r\n    'primary',\r\n    'popover',\r\n  ]\r\n\r\n  const typedLightMode = lightMode as Record<string, string | null | undefined>\r\n\r\n  const tokens = orderedKeys\r\n    .map((key) => {\r\n      const value = typedLightMode?.[key]\r\n      if (typeof value !== 'string' || value.trim().length === 0) {\r\n        return null\r\n      }\r\n\r\n      const labelMap: Record<string, string> = {\r\n        background: 'Theme background',\r\n        card: 'Card background',\r\n        muted: 'Muted surface',\r\n        accent: 'Accent surface',\r\n        secondary: 'Secondary surface',\r\n        primary: 'Primary surface',\r\n        popover: 'Popover surface',\r\n      }\r\n\r\n      return {\r\n        value: key,\r\n        label: labelMap[key] ?? key,\r\n        color: value,\r\n      }\r\n    })\r\n    .filter((token): token is ThemeColorOption => Boolean(token))\r\n\r\n  return tokens.length > 0 ? tokens : FALLBACK_TOKENS\r\n}\r\n\r\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\r\n  const { path, field } = props\r\n  const { value, setValue } = useField<string>({ path })\r\n  const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\r\n  const selectedValue = value || 'background'\r\n\r\n  useEffect(() => {\r\n    let isMounted = true\r\n\r\n    fetchThemeConfiguration().then((configuration) => {\r\n      if (!isMounted) return\r\n      setOptions(buildOptionsFromConfiguration(configuration))\r\n    })\r\n\r\n    return () => {\r\n      isMounted = false\r\n    }\r\n  }, [])\r\n\r\n  const handleSelect = useCallback(\r\n    (nextValue: string) => {\r\n      setValue(nextValue)\r\n    },\r\n    [setValue],\r\n  )\r\n\r\n  const label = typeof field.label === 'string' ? field.label : ''\r\n  let description = ''\r\n  if (typeof field.admin?.description === 'string') {\r\n    description = field.admin.description\r\n  } else if (\r\n    field.admin?.description &&\r\n    typeof field.admin.description === 'object' &&\r\n    typeof field.admin.description.en === 'string'\r\n  ) {\r\n    description = field.admin.description.en\r\n  }\r\n\r\n  return (\r\n    <div className=\"field-type theme-token-select\">\r\n      {label && (\r\n        <label\r\n          className=\"field-label\"\r\n          htmlFor={path}\r\n          style={{ display: 'block', marginBottom: '8px' }}\r\n        >\r\n          {label}\r\n          {field.required && <span className=\"required\">*</span>}\r\n        </label>\r\n      )}\r\n\r\n      {description && (\r\n        <div\r\n          className=\"field-description\"\r\n          style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\r\n        >\r\n          {description}\r\n        </div>\r\n      )}\r\n\r\n      <div\r\n        className=\"token-grid\"\r\n        style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\r\n          gap: '10px',\r\n        }}\r\n      >\r\n        {options.map((option) => {\r\n          const isActive = option.value === selectedValue\r\n          return (\r\n            <button\r\n              type=\"button\"\r\n              key={option.value}\r\n              onClick={() => handleSelect(option.value)}\r\n              style={{\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                gap: '10px',\r\n                padding: '10px 12px',\r\n                borderRadius: '10px',\r\n                border: isActive\r\n                  ? '2px solid var(--theme-primary-500)'\r\n                  : '1px solid var(--theme-elevation-150)',\r\n                backgroundColor: 'var(--theme-elevation-0)',\r\n                boxShadow: isActive\r\n                  ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\r\n                  : '0 1px 2px rgba(15, 23, 42, 0.08)',\r\n                cursor: 'pointer',\r\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\r\n              }}\r\n            >\r\n              <span\r\n                aria-hidden\r\n                style={{\r\n                  width: '32px',\r\n                  height: '32px',\r\n                  borderRadius: '8px',\r\n                  border: '1px solid rgba(15, 23, 42, 0.08)',\r\n                  background: option.color,\r\n                }}\r\n              />\r\n              <span\r\n                style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\r\n              >\r\n                {option.label}\r\n              </span>\r\n            </button>\r\n          )\r\n        })}\r\n      </div>\r\n\r\n      <select\r\n        id={path}\r\n        value={selectedValue}\r\n        onChange={(event) => handleSelect(event.target.value)}\r\n        style={{ display: 'none' }}\r\n      >\r\n        {options.map((option) => (\r\n          <option key={option.value} value={option.value}>\r\n            {option.label}\r\n          </option>\r\n        ))}\r\n      </select>\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","useCallback","useEffect","useState","defaultThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","isMounted","then","handleSelect","nextValue","description","admin","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"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"}

package/dist/fields/colorModeFields.js

@@ -18,125 +18,218 @@ const colorFieldKeys = [
     'destructiveForeground',
     'border',
     'input',
-    'ring',
+    'ring'
 ];
 const colorFieldDefinitions = [
     {
         name: 'background',
-        label: { en: 'Background', cs: 'Pozadí' },
-        description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },
+        label: {
+            en: 'Background',
+            cs: 'Pozadí'
+        },
+        description: {
+            en: 'Main background color',
+            cs: 'Hlavní barva pozadí'
+        }
     },
     {
         name: 'foreground',
-        label: { en: 'Foreground', cs: 'Popředí' },
-        description: { en: 'Main text color', cs: 'Hlavní barva textu' },
+        label: {
+            en: 'Foreground',
+            cs: 'Popředí'
+        },
+        description: {
+            en: 'Main text color',
+            cs: 'Hlavní barva textu'
+        }
     },
     {
         name: 'primary',
-        label: { en: 'Primary', cs: 'Primární' },
+        label: {
+            en: 'Primary',
+            cs: 'Primární'
+        },
         description: {
             en: 'Primary brand color for buttons, links',
-            cs: 'Primární barva značky pro tlačítka, odkazy',
-        },
+            cs: 'Primární barva značky pro tlačítka, odkazy'
+        }
     },
     {
         name: 'primaryForeground',
-        label: { en: 'Primary Foreground', cs: 'Primární popředí' },
+        label: {
+            en: 'Primary Foreground',
+            cs: 'Primární popředí'
+        },
         description: {
             en: 'Text color on primary background',
-            cs: 'Barva textu na primárním pozadí',
-        },
+            cs: 'Barva textu na primárním pozadí'
+        }
     },
     {
         name: 'card',
-        label: { en: 'Card', cs: 'Karta' },
-        description: { en: 'Card background color', cs: 'Barva pozadí karty' },
+        label: {
+            en: 'Card',
+            cs: 'Karta'
+        },
+        description: {
+            en: 'Card background color',
+            cs: 'Barva pozadí karty'
+        }
     },
     {
         name: 'cardForeground',
-        label: { en: 'Card Foreground', cs: 'Karta popředí' },
+        label: {
+            en: 'Card Foreground',
+            cs: 'Karta popředí'
+        },
         description: {
             en: 'Text color on card background',
-            cs: 'Barva textu na pozadí karty',
-        },
+            cs: 'Barva textu na pozadí karty'
+        }
     },
     {
         name: 'popover',
-        label: { en: 'Popover', cs: 'Popover' },
-        description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },
+        label: {
+            en: 'Popover',
+            cs: 'Popover'
+        },
+        description: {
+            en: 'Popover background color',
+            cs: 'Barva pozadí popoveru'
+        }
     },
     {
         name: 'popoverForeground',
-        label: { en: 'Popover Foreground', cs: 'Popover popředí' },
+        label: {
+            en: 'Popover Foreground',
+            cs: 'Popover popředí'
+        },
         description: {
             en: 'Text color on popover background',
-            cs: 'Barva textu na pozadí popoveru',
-        },
+            cs: 'Barva textu na pozadí popoveru'
+        }
     },
     {
         name: 'secondary',
-        label: { en: 'Secondary', cs: 'Sekundární' },
-        description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },
+        label: {
+            en: 'Secondary',
+            cs: 'Sekundární'
+        },
+        description: {
+            en: 'Secondary UI elements',
+            cs: 'Sekundární UI prvky'
+        }
     },
     {
         name: 'secondaryForeground',
-        label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },
+        label: {
+            en: 'Secondary Foreground',
+            cs: 'Sekundární popředí'
+        },
         description: {
             en: 'Text color on secondary background',
-            cs: 'Barva textu na sekundárním pozadí',
-        },
+            cs: 'Barva textu na sekundárním pozadí'
+        }
     },
     {
         name: 'muted',
-        label: { en: 'Muted', cs: 'Ztlumený' },
-        description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },
+        label: {
+            en: 'Muted',
+            cs: 'Ztlumený'
+        },
+        description: {
+            en: 'Muted backgrounds',
+            cs: 'Ztlumená pozadí'
+        }
     },
     {
         name: 'mutedForeground',
-        label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },
-        description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },
+        label: {
+            en: 'Muted Foreground',
+            cs: 'Ztlumené popředí'
+        },
+        description: {
+            en: 'Muted text color',
+            cs: 'Ztlumená barva textu'
+        }
     },
     {
         name: 'accent',
-        label: { en: 'Accent', cs: 'Akcent' },
-        description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },
+        label: {
+            en: 'Accent',
+            cs: 'Akcent'
+        },
+        description: {
+            en: 'Accent color for highlights',
+            cs: 'Akcentová barva pro zvýraznění'
+        }
     },
     {
         name: 'accentForeground',
-        label: { en: 'Accent Foreground', cs: 'Akcent popředí' },
+        label: {
+            en: 'Accent Foreground',
+            cs: 'Akcent popředí'
+        },
         description: {
             en: 'Text color on accent background',
-            cs: 'Barva textu na akcentovém pozadí',
-        },
+            cs: 'Barva textu na akcentovém pozadí'
+        }
     },
     {
         name: 'destructive',
-        label: { en: 'Destructive', cs: 'Destruktivní' },
-        description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },
+        label: {
+            en: 'Destructive',
+            cs: 'Destruktivní'
+        },
+        description: {
+            en: 'Error and destructive actions',
+            cs: 'Chyby a destruktivní akce'
+        }
     },
     {
         name: 'destructiveForeground',
-        label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },
+        label: {
+            en: 'Destructive Foreground',
+            cs: 'Destruktivní popředí'
+        },
         description: {
             en: 'Text color on destructive background',
-            cs: 'Barva textu na destruktivním pozadí',
-        },
+            cs: 'Barva textu na destruktivním pozadí'
+        }
     },
     {
         name: 'border',
-        label: { en: 'Border', cs: 'Okraj' },
-        description: { en: 'Border color', cs: 'Barva okraje' },
+        label: {
+            en: 'Border',
+            cs: 'Okraj'
+        },
+        description: {
+            en: 'Border color',
+            cs: 'Barva okraje'
+        }
     },
     {
         name: 'input',
-        label: { en: 'Input', cs: 'Vstup' },
-        description: { en: 'Input border color', cs: 'Barva okraje vstupů' },
+        label: {
+            en: 'Input',
+            cs: 'Vstup'
+        },
+        description: {
+            en: 'Input border color',
+            cs: 'Barva okraje vstupů'
+        }
     },
     {
         name: 'ring',
-        label: { en: 'Ring', cs: 'Prstenec' },
-        description: { en: 'Focus ring color', cs: 'Barva focus prstence' },
-    },
+        label: {
+            en: 'Ring',
+            cs: 'Prstenec'
+        },
+        description: {
+            en: 'Focus ring color',
+            cs: 'Barva focus prstence'
+        }
+    }
 ];
 // Light Mode Default Colors (Shadcn UI inspired defaults)
 export const lightModeDefaults = {
@@ -158,7 +251,7 @@ export const lightModeDefaults = {
     destructiveForeground: '#fafafa',
     border: '#e4e4e7',
     input: '#e4e4e7',
-    ring: '#18181b',
+    ring: '#18181b'
 };
 // Dark Mode Default Colors (Shadcn UI inspired defaults)
 export const darkModeDefaults = {
@@ -180,62 +273,63 @@ export const darkModeDefaults = {
     destructiveForeground: '#fafafa',
     border: '#27272a',
     input: '#27272a',
-    ring: '#d4d4d8',
+    ring: '#d4d4d8'
 };
 function createColorFields(defaults) {
-    return colorFieldDefinitions.map(({ name, label, description }) => ({
-        name,
-        type: 'text',
-        label,
-        defaultValue: defaults[name],
-        admin: {
-            components: {
-                Field: themeColorPickerComponentPath,
-            },
-            description,
-        },
-    }));
+    return colorFieldDefinitions.map(({ name, label, description })=>({
+            name,
+            type: 'text',
+            label,
+            defaultValue: defaults[name],
+            admin: {
+                components: {
+                    Field: themeColorPickerComponentPath
+                },
+                description
+            }
+        }));
 }
 export const lightModeField = {
     type: 'collapsible',
     label: {
         en: '☀️ Light Mode Colors',
-        cs: '☀️ Barvy světlého režimu',
+        cs: '☀️ Barvy světlého režimu'
     },
     admin: {
         initCollapsed: true,
         description: {
             en: 'Configure colors for light mode',
-            cs: 'Nakonfigurujte barvy pro světlý režim',
-        },
+            cs: 'Nakonfigurujte barvy pro světlý režim'
+        }
     },
     fields: [
         {
             name: 'lightMode',
             type: 'group',
-            fields: createColorFields(lightModeDefaults),
-        },
-    ],
+            fields: createColorFields(lightModeDefaults)
+        }
+    ]
 };
 export const darkModeField = {
     type: 'collapsible',
     label: {
         en: '🌙 Dark Mode Colors',
-        cs: '🌙 Barvy tmavého režimu',
+        cs: '🌙 Barvy tmavého režimu'
     },
     admin: {
         initCollapsed: true,
         description: {
             en: 'Configure colors for dark mode',
-            cs: 'Nakonfigurujte barvy pro tmavý režim',
-        },
+            cs: 'Nakonfigurujte barvy pro tmavý režim'
+        }
     },
     fields: [
         {
             name: 'darkMode',
             type: 'group',
-            fields: createColorFields(darkModeDefaults),
-        },
-    ],
+            fields: createColorFields(darkModeDefaults)
+        }
+    ]
 };
+
 //# sourceMappingURL=colorModeFields.js.map

package/dist/fields/colorModeFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorModeFields.js","sourceRoot":"","sources":["../../src/fields/colorModeFields.ts"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\r\n\r\nconst themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField'\r\n\r\ntype LocalizedText = Record<string, string>\r\n\r\nconst colorFieldKeys = [\r\n  'background',\r\n  'foreground',\r\n  'primary',\r\n  'primaryForeground',\r\n  'card',\r\n  'cardForeground',\r\n  'popover',\r\n  'popoverForeground',\r\n  'secondary',\r\n  'secondaryForeground',\r\n  'muted',\r\n  'mutedForeground',\r\n  'accent',\r\n  'accentForeground',\r\n  'destructive',\r\n  'destructiveForeground',\r\n  'border',\r\n  'input',\r\n  'ring',\r\n] as const\r\n\r\ntype ColorToken = (typeof colorFieldKeys)[number]\r\n\r\ninterface ColorFieldDefinition {\r\n  name: ColorToken\r\n  label: LocalizedText\r\n  description: LocalizedText\r\n}\r\n\r\ntype ColorPalette = Record<ColorToken, string>\r\n\r\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\r\n  {\r\n    name: 'background',\r\n    label: { en: 'Background', cs: 'Pozadí' },\r\n    description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\r\n  },\r\n  {\r\n    name: 'foreground',\r\n    label: { en: 'Foreground', cs: 'Popředí' },\r\n    description: { en: 'Main text color', cs: 'Hlavní barva textu' },\r\n  },\r\n  {\r\n    name: 'primary',\r\n    label: { en: 'Primary', cs: 'Primární' },\r\n    description: {\r\n      en: 'Primary brand color for buttons, links',\r\n      cs: 'Primární barva značky pro tlačítka, odkazy',\r\n    },\r\n  },\r\n  {\r\n    name: 'primaryForeground',\r\n    label: { en: 'Primary Foreground', cs: 'Primární popředí' },\r\n    description: {\r\n      en: 'Text color on primary background',\r\n      cs: 'Barva textu na primárním pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'card',\r\n    label: { en: 'Card', cs: 'Karta' },\r\n    description: { en: 'Card background color', cs: 'Barva pozadí karty' },\r\n  },\r\n  {\r\n    name: 'cardForeground',\r\n    label: { en: 'Card Foreground', cs: 'Karta popředí' },\r\n    description: {\r\n      en: 'Text color on card background',\r\n      cs: 'Barva textu na pozadí karty',\r\n    },\r\n  },\r\n  {\r\n    name: 'popover',\r\n    label: { en: 'Popover', cs: 'Popover' },\r\n    description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\r\n  },\r\n  {\r\n    name: 'popoverForeground',\r\n    label: { en: 'Popover Foreground', cs: 'Popover popředí' },\r\n    description: {\r\n      en: 'Text color on popover background',\r\n      cs: 'Barva textu na pozadí popoveru',\r\n    },\r\n  },\r\n  {\r\n    name: 'secondary',\r\n    label: { en: 'Secondary', cs: 'Sekundární' },\r\n    description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\r\n  },\r\n  {\r\n    name: 'secondaryForeground',\r\n    label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\r\n    description: {\r\n      en: 'Text color on secondary background',\r\n      cs: 'Barva textu na sekundárním pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'muted',\r\n    label: { en: 'Muted', cs: 'Ztlumený' },\r\n    description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\r\n  },\r\n  {\r\n    name: 'mutedForeground',\r\n    label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\r\n    description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\r\n  },\r\n  {\r\n    name: 'accent',\r\n    label: { en: 'Accent', cs: 'Akcent' },\r\n    description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\r\n  },\r\n  {\r\n    name: 'accentForeground',\r\n    label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\r\n    description: {\r\n      en: 'Text color on accent background',\r\n      cs: 'Barva textu na akcentovém pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'destructive',\r\n    label: { en: 'Destructive', cs: 'Destruktivní' },\r\n    description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\r\n  },\r\n  {\r\n    name: 'destructiveForeground',\r\n    label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\r\n    description: {\r\n      en: 'Text color on destructive background',\r\n      cs: 'Barva textu na destruktivním pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'border',\r\n    label: { en: 'Border', cs: 'Okraj' },\r\n    description: { en: 'Border color', cs: 'Barva okraje' },\r\n  },\r\n  {\r\n    name: 'input',\r\n    label: { en: 'Input', cs: 'Vstup' },\r\n    description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\r\n  },\r\n  {\r\n    name: 'ring',\r\n    label: { en: 'Ring', cs: 'Prstenec' },\r\n    description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\r\n  },\r\n]\r\n\r\n// Light Mode Default Colors (Shadcn UI inspired defaults)\r\nexport const lightModeDefaults: ColorPalette = {\r\n  background: '#ffffff',\r\n  foreground: '#0a0a0a',\r\n  card: '#ffffff',\r\n  cardForeground: '#0a0a0a',\r\n  popover: '#ffffff',\r\n  popoverForeground: '#0a0a0a',\r\n  primary: '#9372f7',\r\n  primaryForeground: '#fafafa',\r\n  secondary: '#f4f4f5',\r\n  secondaryForeground: '#18181b',\r\n  muted: '#f4f4f5',\r\n  mutedForeground: '#71717a',\r\n  accent: '#f4f4f5',\r\n  accentForeground: '#18181b',\r\n  destructive: '#ef4444',\r\n  destructiveForeground: '#fafafa',\r\n  border: '#e4e4e7',\r\n  input: '#e4e4e7',\r\n  ring: '#18181b',\r\n}\r\n\r\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\r\nexport const darkModeDefaults: ColorPalette = {\r\n  background: '#0a0a0a',\r\n  foreground: '#fafafa',\r\n  card: '#09090b',\r\n  cardForeground: '#fafafa',\r\n  popover: '#09090b',\r\n  popoverForeground: '#fafafa',\r\n  primary: '#9372f7',\r\n  primaryForeground: '#09090b',\r\n  secondary: '#27272a',\r\n  secondaryForeground: '#fafafa',\r\n  muted: '#27272a',\r\n  mutedForeground: '#a1a1aa',\r\n  accent: '#27272a',\r\n  accentForeground: '#fafafa',\r\n  destructive: '#7f1d1d',\r\n  destructiveForeground: '#fafafa',\r\n  border: '#27272a',\r\n  input: '#27272a',\r\n  ring: '#d4d4d8',\r\n}\r\n\r\nfunction createColorFields(defaults: ColorPalette): Field[] {\r\n  return colorFieldDefinitions.map(({ name, label, description }) => ({\r\n    name,\r\n    type: 'text',\r\n    label,\r\n    defaultValue: defaults[name],\r\n    admin: {\r\n      components: {\r\n        Field: themeColorPickerComponentPath,\r\n      },\r\n      description,\r\n    },\r\n  }))\r\n}\r\n\r\nexport const lightModeField: Field = {\r\n  type: 'collapsible',\r\n  label: {\r\n    en: '☀️ Light Mode Colors',\r\n    cs: '☀️ Barvy světlého režimu',\r\n  },\r\n  admin: {\r\n    initCollapsed: true,\r\n    description: {\r\n      en: 'Configure colors for light mode',\r\n      cs: 'Nakonfigurujte barvy pro světlý režim',\r\n    },\r\n  },\r\n  fields: [\r\n    {\r\n      name: 'lightMode',\r\n      type: 'group',\r\n      fields: createColorFields(lightModeDefaults),\r\n    },\r\n  ],\r\n}\r\n\r\nexport const darkModeField: Field = {\r\n  type: 'collapsible',\r\n  label: {\r\n    en: '🌙 Dark Mode Colors',\r\n    cs: '🌙 Barvy tmavého režimu',\r\n  },\r\n  admin: {\r\n    initCollapsed: true,\r\n    description: {\r\n      en: 'Configure colors for dark mode',\r\n      cs: 'Nakonfigurujte barvy pro tmavý režim',\r\n    },\r\n  },\r\n  fields: [\r\n    {\r\n      name: 'darkMode',\r\n      type: 'group',\r\n      fields: createColorFields(darkModeDefaults),\r\n    },\r\n  ],\r\n}\r\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"AAEA,MAAMA,gCAAgC;AAItC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAYD,MAAMC,wBAAgD;IACpD;QACEC,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAcC,IAAI;QAAS;QACxCC,aAAa;YAAEF,IAAI;YAAyBC,IAAI;QAAsB;IACxE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAcC,IAAI;QAAU;QACzCC,aAAa;YAAEF,IAAI;YAAmBC,IAAI;QAAqB;IACjE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAWC,IAAI;QAAW;QACvCC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAsBC,IAAI;QAAmB;QAC1DC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAQC,IAAI;QAAQ;QACjCC,aAAa;YAAEF,IAAI;YAAyBC,IAAI;QAAqB;IACvE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAmBC,IAAI;QAAgB;QACpDC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAWC,IAAI;QAAU;QACtCC,aAAa;YAAEF,IAAI;YAA4BC,IAAI;QAAwB;IAC7E;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAsBC,IAAI;QAAkB;QACzDC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAaC,IAAI;QAAa;QAC3CC,aAAa;YAAEF,IAAI;YAAyBC,IAAI;QAAsB;IACxE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAwBC,IAAI;QAAqB;QAC9DC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAASC,IAAI;QAAW;QACrCC,aAAa;YAAEF,IAAI;YAAqBC,IAAI;QAAkB;IAChE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAoBC,IAAI;QAAmB;QACxDC,aAAa;YAAEF,IAAI;YAAoBC,IAAI;QAAuB;IACpE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAUC,IAAI;QAAS;QACpCC,aAAa;YAAEF,IAAI;YAA+BC,IAAI;QAAiC;IACzF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAqBC,IAAI;QAAiB;QACvDC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAeC,IAAI;QAAe;QAC/CC,aAAa;YAAEF,IAAI;YAAiCC,IAAI;QAA4B;IACtF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAA0BC,IAAI;QAAuB;QAClEC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAUC,IAAI;QAAQ;QACnCC,aAAa;YAAEF,IAAI;YAAgBC,IAAI;QAAe;IACxD;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAASC,IAAI;QAAQ;QAClCC,aAAa;YAAEF,IAAI;YAAsBC,IAAI;QAAsB;IACrE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAQC,IAAI;QAAW;QACpCC,aAAa;YAAEF,IAAI;YAAoBC,IAAI;QAAuB;IACpE;CACD;AAED,0DAA0D;AAC1D,OAAO,MAAME,oBAAkC;IAC7CC,YAAY;IACZC,YAAY;IACZC,MAAM;IACNC,gBAAgB;IAChBC,SAAS;IACTC,mBAAmB;IACnBC,SAAS;IACTC,mBAAmB;IACnBC,WAAW;IACXC,qBAAqB;IACrBC,OAAO;IACPC,iBAAiB;IACjBC,QAAQ;IACRC,kBAAkB;IAClBC,aAAa;IACbC,uBAAuB;IACvBC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAC;AAED,yDAAyD;AACzD,OAAO,MAAMC,mBAAiC;IAC5CnB,YAAY;IACZC,YAAY;IACZC,MAAM;IACNC,gBAAgB;IAChBC,SAAS;IACTC,mBAAmB;IACnBC,SAAS;IACTC,mBAAmB;IACnBC,WAAW;IACXC,qBAAqB;IACrBC,OAAO;IACPC,iBAAiB;IACjBC,QAAQ;IACRC,kBAAkB;IAClBC,aAAa;IACbC,uBAAuB;IACvBC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAC;AAED,SAASE,kBAAkBC,QAAsB;IAC/C,OAAO5B,sBAAsB6B,GAAG,CAAC,CAAC,EAAE5B,IAAI,EAAEC,KAAK,EAAEG,WAAW,EAAE,GAAM,CAAA;YAClEJ;YACA6B,MAAM;YACN5B;YACA6B,cAAcH,QAAQ,CAAC3B,KAAK;YAC5B+B,OAAO;gBACLC,YAAY;oBACVC,OAAOpC;gBACT;gBACAO;YACF;QACF,CAAA;AACF;AAEA,OAAO,MAAM8B,iBAAwB;IACnCL,MAAM;IACN5B,OAAO;QACLC,IAAI;QACJC,IAAI;IACN;IACA4B,OAAO;QACLI,eAAe;QACf/B,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACAiC,QAAQ;QACN;YACEpC,MAAM;YACN6B,MAAM;YACNO,QAAQV,kBAAkBrB;QAC5B;KACD;AACH,EAAC;AAED,OAAO,MAAMgC,gBAAuB;IAClCR,MAAM;IACN5B,OAAO;QACLC,IAAI;QACJC,IAAI;IACN;IACA4B,OAAO;QACLI,eAAe;QACf/B,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACAiC,QAAQ;QACN;YACEpC,MAAM;YACN6B,MAAM;YACNO,QAAQV,kBAAkBD;QAC5B;KACD;AACH,EAAC"}

package/dist/fields/themeConfigurationField.d.ts

@@ -1,5 +1,5 @@
 import type { Field } from 'payload';
-import type { ThemePreset } from '../index';
+import type { ThemePreset } from '../index.js';
 interface ThemeConfigurationFieldOptions {
     themePresets: ThemePreset[];
     defaultTheme: string;

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,UAAU,CAAA;AAG3C,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;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"}