@kilivi/payloadcms-theme-management 0.1.6 → 0.1.8

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'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useState } from 'react'\nimport { defaultThemePresets } from '../presets.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n  value: string\n  label: string\n  color: string\n  description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n  { value: 'background', label: 'Theme background', color: 'var(--background)' },\n  { value: 'card', label: 'Card background', color: 'var(--card)' },\n  { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\n  { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\n  { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\n  { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\n]\n\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\n  try {\n    const response = await fetch('/api/site-settings')\n    if (!response.ok) {\n      return null\n    }\n    const data = await response.json()\n    return data?.docs?.[0]?.themeConfiguration ?? null\n  } catch (error) {\n    console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\n    return null\n  }\n}\n\nfunction buildOptionsFromConfiguration(configuration: Record<string, unknown> | null): ThemeColorOption[] {\n  if (!configuration) {\n    return FALLBACK_TOKENS\n  }\n\n  const resolved = resolveThemeConfiguration(configuration)\n  const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\n  const orderedKeys: string[] = [\n    'background',\n    'card',\n    'muted',\n    'accent',\n    'secondary',\n    'primary',\n    'popover',\n  ]\n\n  const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n  const tokens = orderedKeys\n    .map((key) => {\n      const value = typedLightMode?.[key]\n      if (typeof value !== 'string' || value.trim().length === 0) {\n        return null\n      }\n\n      const labelMap: Record<string, string> = {\n        background: 'Theme background',\n        card: 'Card background',\n        muted: 'Muted surface',\n        accent: 'Accent surface',\n        secondary: 'Secondary surface',\n        primary: 'Primary surface',\n        popover: 'Popover surface',\n      }\n\n      return {\n        value: key,\n        label: labelMap[key] ?? key,\n        color: value,\n      }\n    })\n    .filter((token): token is ThemeColorOption => Boolean(token))\n\n  return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n  const { path, field } = props\n  const { value, setValue } = useField<string>({ path })\n  const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n  const selectedValue = value || 'background'\n\n  useEffect(() => {\n    let isMounted = true\n\n    fetchThemeConfiguration().then((configuration) => {\n      if (!isMounted) return\n      setOptions(buildOptionsFromConfiguration(configuration))\n    })\n\n    return () => {\n      isMounted = false\n    }\n  }, [])\n\n  const handleSelect = useCallback(\n    (nextValue: string) => {\n      setValue(nextValue)\n    },\n    [setValue],\n  )\n\n  const label = typeof field.label === 'string' ? field.label : ''\n  let description = ''\n  if (typeof field.admin?.description === 'string') {\n    description = field.admin.description\n  } else if (\n    field.admin?.description &&\n    typeof field.admin.description === 'object' &&\n    typeof field.admin.description.en === 'string'\n  ) {\n    description = field.admin.description.en\n  }\n\n  return (\n    <div className=\"field-type theme-token-select\">\n      {label && (\n        <label\n          className=\"field-label\"\n          htmlFor={path}\n          style={{ display: 'block', marginBottom: '8px' }}\n        >\n          {label}\n          {field.required && <span className=\"required\">*</span>}\n        </label>\n      )}\n\n      {description && (\n        <div\n          className=\"field-description\"\n          style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n        >\n          {description}\n        </div>\n      )}\n\n      <div\n        className=\"token-grid\"\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n          gap: '10px',\n        }}\n      >\n        {options.map((option) => {\n          const isActive = option.value === selectedValue\n          return (\n            <button\n              type=\"button\"\n              key={option.value}\n              onClick={() => handleSelect(option.value)}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '10px',\n                padding: '10px 12px',\n                borderRadius: '10px',\n                border: isActive\n                  ? '2px solid var(--theme-primary-500)'\n                  : '1px solid var(--theme-elevation-150)',\n                backgroundColor: 'var(--theme-elevation-0)',\n                boxShadow: isActive\n                  ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n                  : '0 1px 2px rgba(15, 23, 42, 0.08)',\n                cursor: 'pointer',\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n              }}\n            >\n              <span\n                aria-hidden\n                style={{\n                  width: '32px',\n                  height: '32px',\n                  borderRadius: '8px',\n                  border: '1px solid rgba(15, 23, 42, 0.08)',\n                  background: option.color,\n                }}\n              />\n              <span\n                style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n              >\n                {option.label}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n\n      <select\n        id={path}\n        value={selectedValue}\n        onChange={(event) => handleSelect(event.target.value)}\n        style={{ display: 'none' }}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </div>\n  )\n}\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'\n\nconst themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField'\n\ntype LocalizedText = Record<string, string>\n\nconst colorFieldKeys = [\n  'background',\n  'foreground',\n  'primary',\n  'primaryForeground',\n  'card',\n  'cardForeground',\n  'popover',\n  'popoverForeground',\n  'secondary',\n  'secondaryForeground',\n  'muted',\n  'mutedForeground',\n  'accent',\n  'accentForeground',\n  'destructive',\n  'destructiveForeground',\n  'border',\n  'input',\n  'ring',\n] as const\n\ntype ColorToken = (typeof colorFieldKeys)[number]\n\ninterface ColorFieldDefinition {\n  name: ColorToken\n  label: LocalizedText\n  description: LocalizedText\n}\n\ntype ColorPalette = Record<ColorToken, string>\n\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\n  {\n    name: 'background',\n    label: { en: 'Background', cs: 'Pozadí' },\n    description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\n  },\n  {\n    name: 'foreground',\n    label: { en: 'Foreground', cs: 'Popředí' },\n    description: { en: 'Main text color', cs: 'Hlavní barva textu' },\n  },\n  {\n    name: 'primary',\n    label: { en: 'Primary', cs: 'Primární' },\n    description: {\n      en: 'Primary brand color for buttons, links',\n      cs: 'Primární barva značky pro tlačítka, odkazy',\n    },\n  },\n  {\n    name: 'primaryForeground',\n    label: { en: 'Primary Foreground', cs: 'Primární popředí' },\n    description: {\n      en: 'Text color on primary background',\n      cs: 'Barva textu na primárním pozadí',\n    },\n  },\n  {\n    name: 'card',\n    label: { en: 'Card', cs: 'Karta' },\n    description: { en: 'Card background color', cs: 'Barva pozadí karty' },\n  },\n  {\n    name: 'cardForeground',\n    label: { en: 'Card Foreground', cs: 'Karta popředí' },\n    description: {\n      en: 'Text color on card background',\n      cs: 'Barva textu na pozadí karty',\n    },\n  },\n  {\n    name: 'popover',\n    label: { en: 'Popover', cs: 'Popover' },\n    description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\n  },\n  {\n    name: 'popoverForeground',\n    label: { en: 'Popover Foreground', cs: 'Popover popředí' },\n    description: {\n      en: 'Text color on popover background',\n      cs: 'Barva textu na pozadí popoveru',\n    },\n  },\n  {\n    name: 'secondary',\n    label: { en: 'Secondary', cs: 'Sekundární' },\n    description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\n  },\n  {\n    name: 'secondaryForeground',\n    label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\n    description: {\n      en: 'Text color on secondary background',\n      cs: 'Barva textu na sekundárním pozadí',\n    },\n  },\n  {\n    name: 'muted',\n    label: { en: 'Muted', cs: 'Ztlumený' },\n    description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\n  },\n  {\n    name: 'mutedForeground',\n    label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\n    description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\n  },\n  {\n    name: 'accent',\n    label: { en: 'Accent', cs: 'Akcent' },\n    description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\n  },\n  {\n    name: 'accentForeground',\n    label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\n    description: {\n      en: 'Text color on accent background',\n      cs: 'Barva textu na akcentovém pozadí',\n    },\n  },\n  {\n    name: 'destructive',\n    label: { en: 'Destructive', cs: 'Destruktivní' },\n    description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\n  },\n  {\n    name: 'destructiveForeground',\n    label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\n    description: {\n      en: 'Text color on destructive background',\n      cs: 'Barva textu na destruktivním pozadí',\n    },\n  },\n  {\n    name: 'border',\n    label: { en: 'Border', cs: 'Okraj' },\n    description: { en: 'Border color', cs: 'Barva okraje' },\n  },\n  {\n    name: 'input',\n    label: { en: 'Input', cs: 'Vstup' },\n    description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\n  },\n  {\n    name: 'ring',\n    label: { en: 'Ring', cs: 'Prstenec' },\n    description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\n  },\n]\n\n// Light Mode Default Colors (Shadcn UI inspired defaults)\nexport const lightModeDefaults: ColorPalette = {\n  background: '#ffffff',\n  foreground: '#0a0a0a',\n  card: '#ffffff',\n  cardForeground: '#0a0a0a',\n  popover: '#ffffff',\n  popoverForeground: '#0a0a0a',\n  primary: '#9372f7',\n  primaryForeground: '#fafafa',\n  secondary: '#f4f4f5',\n  secondaryForeground: '#18181b',\n  muted: '#f4f4f5',\n  mutedForeground: '#71717a',\n  accent: '#f4f4f5',\n  accentForeground: '#18181b',\n  destructive: '#ef4444',\n  destructiveForeground: '#fafafa',\n  border: '#e4e4e7',\n  input: '#e4e4e7',\n  ring: '#18181b',\n}\n\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\nexport const darkModeDefaults: ColorPalette = {\n  background: '#0a0a0a',\n  foreground: '#fafafa',\n  card: '#09090b',\n  cardForeground: '#fafafa',\n  popover: '#09090b',\n  popoverForeground: '#fafafa',\n  primary: '#9372f7',\n  primaryForeground: '#09090b',\n  secondary: '#27272a',\n  secondaryForeground: '#fafafa',\n  muted: '#27272a',\n  mutedForeground: '#a1a1aa',\n  accent: '#27272a',\n  accentForeground: '#fafafa',\n  destructive: '#7f1d1d',\n  destructiveForeground: '#fafafa',\n  border: '#27272a',\n  input: '#27272a',\n  ring: '#d4d4d8',\n}\n\nfunction createColorFields(defaults: ColorPalette): Field[] {\n  return colorFieldDefinitions.map(({ name, label, description }) => ({\n    name,\n    type: 'text',\n    label,\n    defaultValue: defaults[name],\n    admin: {\n      components: {\n        Field: themeColorPickerComponentPath,\n      },\n      description,\n    },\n  }))\n}\n\nexport const lightModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '☀️ Light Mode Colors',\n    cs: '☀️ Barvy světlého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for light mode',\n      cs: 'Nakonfigurujte barvy pro světlý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'lightMode',\n      type: 'group',\n      fields: createColorFields(lightModeDefaults),\n    },\n  ],\n}\n\nexport const darkModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '🌙 Dark Mode Colors',\n    cs: '🌙 Barvy tmavého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for dark mode',\n      cs: 'Nakonfigurujte barvy pro tmavý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'darkMode',\n      type: 'group',\n      fields: createColorFields(darkModeDefaults),\n    },\n  ],\n}\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":"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"}

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"}