@kilivi/payloadcms-theme-management 0.2.10 → 0.2.11

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,wBA2O5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,wBAwQ5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/fields/ThemeColorPickerField.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, useField, useFormFields, useModal } from '@payloadcms/ui';
+import { useField, useFormFields } from '@payloadcms/ui';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // Import CSS only in browser environment
 // This prevents Node.js from trying to import CSS directly
 // which causes ERR_UNKNOWN_FILE_EXTENSION error
@@ -89,19 +89,32 @@ const ThemeColorPickerField = ({ field, path })=>{
         path
     });
     const [localValue, setLocalValue] = useState(value || '');
-    const { openModal, closeModal } = useModal();
+    const [showPicker, setShowPicker] = useState(false);
     const [hexValue, setHexValue] = useState(toHex(value || ''));
+    const pickerRef = useRef(null);
     const allFields = useFormFields(([fields])=>fields);
     const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode';
     const modePrefix = `themeConfiguration.${mode}`;
-    // Generate unique drawer slug for this color picker instance
-    const drawerSlug = `color-picker-${path.replace(/\./g, '-')}`;
     useEffect(()=>{
         setLocalValue(value || '');
         setHexValue(toHex(value || ''));
     }, [
         value
     ]);
+    // Close picker when clicking outside
+    useEffect(()=>{
+        function handleClickOutside(event) {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+                setShowPicker(false);
+            }
+        }
+        if (showPicker) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return ()=>document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [
+        showPicker
+    ]);
     const colorValues = useMemo(()=>{
         if (!allFields) {
             return {};
@@ -172,6 +185,9 @@ const ThemeColorPickerField = ({ field, path })=>{
             }),
             /*#__PURE__*/ _jsxs("div", {
                 className: "color-picker-container",
+                style: {
+                    position: 'relative'
+                },
                 children: [
                     /*#__PURE__*/ _jsxs("div", {
                         className: "color-input-wrapper",
@@ -182,7 +198,7 @@ const ThemeColorPickerField = ({ field, path })=>{
                                 style: {
                                     backgroundColor: hexValue
                                 },
-                                onClick: ()=>openModal(drawerSlug),
+                                onClick: ()=>setShowPicker(!showPicker),
                                 "aria-label": "Open color picker"
                             }),
                             /*#__PURE__*/ _jsx("input", {
@@ -194,111 +210,119 @@ const ThemeColorPickerField = ({ field, path })=>{
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(Drawer, {
-                        slug: drawerSlug,
-                        title: `Choose ${label}`,
-                        children: /*#__PURE__*/ _jsxs("div", {
-                            style: {
-                                padding: '20px'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(HexColorPicker, {
-                                    color: hexValue,
-                                    onChange: handleHexChange,
-                                    style: {
-                                        width: '100%',
-                                        height: '220px'
-                                    }
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    style: {
-                                        marginTop: '16px',
-                                        display: 'flex',
-                                        gap: '12px',
-                                        alignItems: 'center'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(HexColorInput, {
-                                            color: hexValue,
-                                            onChange: handleHexChange,
-                                            prefixed: true,
-                                            placeholder: "#000000",
-                                            style: {
-                                                flex: 1,
-                                                padding: '10px',
-                                                borderRadius: '6px',
-                                                border: '1px solid var(--theme-elevation-150)',
-                                                fontSize: '14px',
-                                                fontFamily: 'monospace'
-                                            }
-                                        }),
-                                        /*#__PURE__*/ _jsx("button", {
-                                            type: "button",
-                                            onClick: ()=>closeModal(drawerSlug),
-                                            style: {
-                                                padding: '10px 20px',
-                                                borderRadius: '6px',
-                                                border: 'none',
-                                                backgroundColor: 'var(--theme-elevation-500)',
-                                                color: 'var(--theme-elevation-0)',
-                                                cursor: 'pointer',
-                                                fontWeight: 600
-                                            },
-                                            children: "Done"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    style: {
-                                        marginTop: '16px'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx("div", {
-                                            style: {
-                                                fontSize: '12px',
-                                                fontWeight: 600,
-                                                marginBottom: '8px',
-                                                color: 'var(--theme-elevation-500)'
-                                            },
-                                            children: "Quick Colors"
-                                        }),
-                                        /*#__PURE__*/ _jsx("div", {
-                                            style: {
-                                                display: 'grid',
-                                                gridTemplateColumns: 'repeat(8, 1fr)',
-                                                gap: '8px'
-                                            },
-                                            children: [
-                                                '#ef4444',
-                                                '#f97316',
-                                                '#f59e0b',
-                                                '#84cc16',
-                                                '#10b981',
-                                                '#06b6d4',
-                                                '#3b82f6',
-                                                '#8b5cf6',
-                                                '#ec4899',
-                                                '#64748b',
-                                                '#000000',
-                                                '#ffffff'
-                                            ].map((color)=>/*#__PURE__*/ _jsx("button", {
-                                                    type: "button",
-                                                    onClick: ()=>handleHexChange(color),
-                                                    style: {
-                                                        width: '100%',
-                                                        height: '32px',
-                                                        borderRadius: '4px',
-                                                        border: hexValue.toLowerCase() === color.toLowerCase() ? '2px solid var(--theme-elevation-800)' : '1px solid var(--theme-elevation-150)',
-                                                        backgroundColor: color,
-                                                        cursor: 'pointer'
-                                                    },
-                                                    "aria-label": `Select ${color}`
-                                                }, color))
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
+                    showPicker && /*#__PURE__*/ _jsxs("div", {
+                        ref: pickerRef,
+                        style: {
+                            position: 'absolute',
+                            top: '100%',
+                            left: 0,
+                            marginTop: '8px',
+                            padding: '16px',
+                            backgroundColor: 'var(--theme-elevation-0)',
+                            border: '1px solid var(--theme-elevation-200)',
+                            borderRadius: '8px',
+                            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
+                            zIndex: 1000,
+                            width: '280px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(HexColorPicker, {
+                                color: hexValue,
+                                onChange: handleHexChange,
+                                style: {
+                                    width: '100%',
+                                    height: '160px'
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    marginTop: '12px',
+                                    display: 'flex',
+                                    gap: '8px',
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(HexColorInput, {
+                                        color: hexValue,
+                                        onChange: handleHexChange,
+                                        prefixed: true,
+                                        placeholder: "#000000",
+                                        style: {
+                                            flex: 1,
+                                            padding: '8px',
+                                            borderRadius: '4px',
+                                            border: '1px solid var(--theme-elevation-150)',
+                                            fontSize: '13px',
+                                            fontFamily: 'monospace'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>setShowPicker(false),
+                                        style: {
+                                            padding: '8px 14px',
+                                            borderRadius: '4px',
+                                            border: 'none',
+                                            backgroundColor: 'var(--theme-elevation-500)',
+                                            color: 'var(--theme-elevation-0)',
+                                            cursor: 'pointer',
+                                            fontSize: '12px',
+                                            fontWeight: 600
+                                        },
+                                        children: "OK"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    marginTop: '12px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            fontSize: '11px',
+                                            fontWeight: 600,
+                                            marginBottom: '6px',
+                                            color: 'var(--theme-elevation-500)'
+                                        },
+                                        children: "Rychlé barvy"
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            display: 'grid',
+                                            gridTemplateColumns: 'repeat(6, 1fr)',
+                                            gap: '6px'
+                                        },
+                                        children: [
+                                            '#ef4444',
+                                            '#f97316',
+                                            '#f59e0b',
+                                            '#84cc16',
+                                            '#10b981',
+                                            '#06b6d4',
+                                            '#3b82f6',
+                                            '#8b5cf6',
+                                            '#ec4899',
+                                            '#64748b',
+                                            '#000000',
+                                            '#ffffff'
+                                        ].map((color)=>/*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>handleHexChange(color),
+                                                style: {
+                                                    width: '100%',
+                                                    height: '28px',
+                                                    borderRadius: '4px',
+                                                    border: hexValue.toLowerCase() === color.toLowerCase() ? '2px solid var(--theme-elevation-800)' : '1px solid var(--theme-elevation-150)',
+                                                    backgroundColor: color,
+                                                    cursor: 'pointer'
+                                                },
+                                                "aria-label": `Select ${color}`
+                                            }, color))
+                                    })
+                                ]
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ _jsx("div", {
                         className: "color-preview",

package/dist/fields/ThemeColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { Drawer, useField, useFormFields, useModal } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { HexColorInput, HexColorPicker } from 'react-colorful'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\n// Import CSS only in browser environment\n// This prevents Node.js from trying to import CSS directly\n// which causes ERR_UNKNOWN_FILE_EXTENSION error\nif (typeof window !== 'undefined') {\n  // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript\n  import('./ThemeColorPickerField.css').catch((err) => {\n    console.warn('Failed to load CSS file:', err)\n  })\n}\n\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const localized = value as Record<string, unknown>\n    const resolved = localized.en ?? localized.cs ?? localized['']\n    if (typeof resolved === 'string') {\n      return resolved\n    }\n  }\n\n  return fallback\n}\n\n/**\n * Convert various color formats to HEX for the color picker\n */\nfunction toHex(color: string): string {\n  if (!color) return '#000000'\n\n  // Already hex\n  if (color.startsWith('#')) return color\n\n  // OKLCH format - extract hue and convert to approximate hex\n  if (color.startsWith('oklch')) {\n    // For now, return a default - proper conversion requires color-conversion library\n    return '#3b82f6' // blue-500 as default\n  }\n\n  // HSL format\n  if (color.startsWith('hsl')) {\n    const regex = /hsl\\((\\d+),\\s*(\\d+)%,\\s*(\\d+)%\\)/\n    const match = regex.exec(color)\n    if (match) {\n      const [, h, s, l] = match.map(Number)\n      return hslToHex(h, s, l)\n    }\n  }\n\n  return '#000000'\n}\n\n/**\n * Convert HSL to HEX\n */\nfunction hslToHex(h: number, s: number, l: number): string {\n  s /= 100\n  l /= 100\n\n  const c = (1 - Math.abs(2 * l - 1)) * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = l - c / 2\n\n  let r = 0\n  let g = 0\n  let b = 0\n\n  if (h >= 0 && h < 60) {\n    r = c\n    g = x\n  } else if (h >= 60 && h < 120) {\n    r = x\n    g = c\n  } else if (h >= 120 && h < 180) {\n    g = c\n    b = x\n  } else if (h >= 180 && h < 240) {\n    g = x\n    b = c\n  } else if (h >= 240 && h < 300) {\n    r = x\n    b = c\n  } else if (h >= 300 && h < 360) {\n    r = c\n    b = x\n  }\n\n  const toHex = (n: number) => {\n    const hex = Math.round((n + m) * 255).toString(16)\n    return hex.length === 1 ? '0' + hex : hex\n  }\n\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\n  const { openModal, closeModal } = useModal()\n  const [hexValue, setHexValue] = useState(toHex(value || ''))\n  const allFields = useFormFields(([fields]) => fields)\n\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\n  const modePrefix = `themeConfiguration.${mode}`\n\n  // Generate unique drawer slug for this color picker instance\n  const drawerSlug = `color-picker-${path.replace(/\\./g, '-')}`\n\n  useEffect(() => {\n    setLocalValue(value || '')\n    setHexValue(toHex(value || ''))\n  }, [value])\n\n  const colorValues = useMemo(() => {\n    if (!allFields) {\n      return {}\n    }\n\n    const names = [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'popover',\n      'popoverForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n      'border',\n      'input',\n      'ring',\n    ]\n\n    return names.reduce<Record<string, string>>((accumulator, name) => {\n      const fieldState = allFields[`${modePrefix}.${name}`]\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\n      accumulator[name] = parsedValue ?? ''\n      return accumulator\n    }, {})\n  }, [allFields, modePrefix])\n\n  const handleHexChange = useCallback(\n    (hex: string) => {\n      setHexValue(hex)\n      setLocalValue(hex)\n      setValue(hex)\n    },\n    [setValue],\n  )\n\n  const handleTextChange = useCallback(\n    (nextValue: string) => {\n      setLocalValue(nextValue)\n      setValue(nextValue)\n      setHexValue(toHex(nextValue))\n    },\n    [setValue],\n  )\n\n  const fieldName = path.split('.').pop() || ''\n  const label = resolveLocalizedValue(field.label, fieldName)\n  const description = resolveLocalizedValue(field.admin?.description, '')\n\n  return (\n    <div className=\"theme-color-picker-field\">\n      <div className=\"field-header\">\n        <label className=\"field-label\">{label}</label>\n        {description && <div className=\"field-description\">{description}</div>}\n      </div>\n\n      <div className=\"color-picker-container\">\n        <div className=\"color-input-wrapper\">\n          <button\n            type=\"button\"\n            className=\"color-swatch\"\n            style={{ backgroundColor: hexValue }}\n            onClick={() => openModal(drawerSlug)}\n            aria-label=\"Open color picker\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleTextChange(event.target.value)}\n            placeholder=\"oklch(...) or #hex\"\n            className=\"text-input\"\n          />\n        </div>\n\n        {/* Color Picker Modal Drawer */}\n        <Drawer slug={drawerSlug} title={`Choose ${label}`}>\n          <div style={{ padding: '20px' }}>\n            <HexColorPicker\n              color={hexValue}\n              onChange={handleHexChange}\n              style={{ width: '100%', height: '220px' }}\n            />\n            <div style={{ marginTop: '16px', display: 'flex', gap: '12px', alignItems: 'center' }}>\n              <HexColorInput\n                color={hexValue}\n                onChange={handleHexChange}\n                prefixed\n                placeholder=\"#000000\"\n                style={{\n                  flex: 1,\n                  padding: '10px',\n                  borderRadius: '6px',\n                  border: '1px solid var(--theme-elevation-150)',\n                  fontSize: '14px',\n                  fontFamily: 'monospace',\n                }}\n              />\n              <button\n                type=\"button\"\n                onClick={() => closeModal(drawerSlug)}\n                style={{\n                  padding: '10px 20px',\n                  borderRadius: '6px',\n                  border: 'none',\n                  backgroundColor: 'var(--theme-elevation-500)',\n                  color: 'var(--theme-elevation-0)',\n                  cursor: 'pointer',\n                  fontWeight: 600,\n                }}\n              >\n                Done\n              </button>\n            </div>\n\n            {/* Quick Color Swatches */}\n            <div style={{ marginTop: '16px' }}>\n              <div\n                style={{\n                  fontSize: '12px',\n                  fontWeight: 600,\n                  marginBottom: '8px',\n                  color: 'var(--theme-elevation-500)',\n                }}\n              >\n                Quick Colors\n              </div>\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px' }}>\n                {[\n                  '#ef4444',\n                  '#f97316',\n                  '#f59e0b',\n                  '#84cc16',\n                  '#10b981',\n                  '#06b6d4',\n                  '#3b82f6',\n                  '#8b5cf6',\n                  '#ec4899',\n                  '#64748b',\n                  '#000000',\n                  '#ffffff',\n                ].map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    onClick={() => handleHexChange(color)}\n                    style={{\n                      width: '100%',\n                      height: '32px',\n                      borderRadius: '4px',\n                      border:\n                        hexValue.toLowerCase() === color.toLowerCase()\n                          ? '2px solid var(--theme-elevation-800)'\n                          : '1px solid var(--theme-elevation-150)',\n                      backgroundColor: color,\n                      cursor: 'pointer',\n                    }}\n                    aria-label={`Select ${color}`}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n        </Drawer>\n\n        <div className=\"color-preview\" style={{ backgroundColor: hexValue }}>\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\n        </div>\n      </div>\n\n      {(fieldName === 'primary' || fieldName === 'background') && (\n        <div\n          className=\"mini-preview\"\n          style={{\n            backgroundColor: colorValues.background || '#ffffff',\n            color: colorValues.foreground || '#000000',\n            borderColor: colorValues.border || '#e2e8f0',\n          }}\n        >\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: colorValues.card || '#ffffff',\n              color: colorValues.cardForeground || '#000000',\n              borderColor: colorValues.border || '#e2e8f0',\n            }}\n          >\n            <button\n              className=\"preview-button\"\n              style={{\n                backgroundColor: colorValues.primary || '#0070f3',\n                color: colorValues.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              className=\"preview-button secondary\"\n              style={{\n                backgroundColor: colorValues.secondary || '#f1f5f9',\n                color: colorValues.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemeColorPickerField\n"],"names":["Drawer","useField","useFormFields","useModal","HexColorInput","HexColorPicker","useCallback","useEffect","useMemo","useState","window","catch","err","console","warn","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","toHex","color","startsWith","regex","match","exec","h","s","l","map","Number","hslToHex","c","Math","abs","x","m","r","g","b","n","hex","round","toString","length","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","openModal","closeModal","hexValue","setHexValue","allFields","fields","mode","includes","modePrefix","drawerSlug","replace","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleHexChange","handleTextChange","nextValue","fieldName","split","pop","label","description","admin","div","className","button","type","style","backgroundColor","onClick","aria-label","input","onChange","event","target","placeholder","slug","title","padding","width","height","marginTop","display","gap","alignItems","prefixed","flex","borderRadius","border","fontSize","fontFamily","cursor","fontWeight","marginBottom","gridTemplateColumns","toLowerCase","span","background","foreground","borderColor","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,QAAQ,QAAQ,iBAAgB;AAE1E,SAASC,aAAa,EAAEC,cAAc,QAAQ,iBAAgB;AAC9D,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAEjE,yCAAyC;AACzC,2DAA2D;AAC3D,gDAAgD;AAChD,IAAI,OAAOC,WAAW,aAAa;IACjC,2EAA2E;IAC3E,MAAM,CAAC,+BAA+BC,KAAK,CAAC,CAACC;QAC3CC,QAAQC,IAAI,CAAC,4BAA4BF;IAC3C;AACF;AAEA,SAASG,sBAAsBC,KAAc,EAAEC,QAAgB;IAC7D,IAAI,OAAOD,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,IAAI,OAAOA,UAAU,YAAYA,UAAU,MAAM;QAC/C,MAAME,YAAYF;QAClB,MAAMG,WAAWD,UAAUE,EAAE,IAAIF,UAAUG,EAAE,IAAIH,SAAS,CAAC,GAAG;QAC9D,IAAI,OAAOC,aAAa,UAAU;YAChC,OAAOA;QACT;IACF;IAEA,OAAOF;AACT;AAEA;;CAEC,GACD,SAASK,MAAMC,KAAa;IAC1B,IAAI,CAACA,OAAO,OAAO;IAEnB,cAAc;IACd,IAAIA,MAAMC,UAAU,CAAC,MAAM,OAAOD;IAElC,4DAA4D;IAC5D,IAAIA,MAAMC,UAAU,CAAC,UAAU;QAC7B,kFAAkF;QAClF,OAAO,UAAU,sBAAsB;;IACzC;IAEA,aAAa;IACb,IAAID,MAAMC,UAAU,CAAC,QAAQ;QAC3B,MAAMC,QAAQ;QACd,MAAMC,QAAQD,MAAME,IAAI,CAACJ;QACzB,IAAIG,OAAO;YACT,MAAM,GAAGE,GAAGC,GAAGC,EAAE,GAAGJ,MAAMK,GAAG,CAACC;YAC9B,OAAOC,SAASL,GAAGC,GAAGC;QACxB;IACF;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,SAASG,SAASL,CAAS,EAAEC,CAAS,EAAEC,CAAS;IAC/CD,KAAK;IACLC,KAAK;IAEL,MAAMI,IAAI,AAAC,CAAA,IAAIC,KAAKC,GAAG,CAAC,IAAIN,IAAI,EAAC,IAAKD;IACtC,MAAMQ,IAAIH,IAAK,CAAA,IAAIC,KAAKC,GAAG,CAAC,AAAER,IAAI,KAAM,IAAK,EAAC;IAC9C,MAAMU,IAAIR,IAAII,IAAI;IAElB,IAAIK,IAAI;IACR,IAAIC,IAAI;IACR,IAAIC,IAAI;IAER,IAAIb,KAAK,KAAKA,IAAI,IAAI;QACpBW,IAAIL;QACJM,IAAIH;IACN,OAAO,IAAIT,KAAK,MAAMA,IAAI,KAAK;QAC7BW,IAAIF;QACJG,IAAIN;IACN,OAAO,IAAIN,KAAK,OAAOA,IAAI,KAAK;QAC9BY,IAAIN;QACJO,IAAIJ;IACN,OAAO,IAAIT,KAAK,OAAOA,IAAI,KAAK;QAC9BY,IAAIH;QACJI,IAAIP;IACN,OAAO,IAAIN,KAAK,OAAOA,IAAI,KAAK;QAC9BW,IAAIF;QACJI,IAAIP;IACN,OAAO,IAAIN,KAAK,OAAOA,IAAI,KAAK;QAC9BW,IAAIL;QACJO,IAAIJ;IACN;IAEA,MAAMf,QAAQ,CAACoB;QACb,MAAMC,MAAMR,KAAKS,KAAK,CAAC,AAACF,CAAAA,IAAIJ,CAAAA,IAAK,KAAKO,QAAQ,CAAC;QAC/C,OAAOF,IAAIG,MAAM,KAAK,IAAI,MAAMH,MAAMA;IACxC;IAEA,OAAO,CAAC,CAAC,EAAErB,MAAMiB,KAAKjB,MAAMkB,KAAKlB,MAAMmB,IAAI;AAC7C;AAEA,MAAMM,wBAAkD,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAE;IACtE,MAAM,EAAEjC,KAAK,EAAEkC,QAAQ,EAAE,GAAGjD,SAAiB;QAAEgD;IAAK;IACpD,MAAM,CAACE,YAAYC,cAAc,GAAG3C,SAASO,SAAS;IACtD,MAAM,EAAEqC,SAAS,EAAEC,UAAU,EAAE,GAAGnD;IAClC,MAAM,CAACoD,UAAUC,YAAY,GAAG/C,SAASa,MAAMN,SAAS;IACxD,MAAMyC,YAAYvD,cAAc,CAAC,CAACwD,OAAO,GAAKA;IAE9C,MAAMC,OAAOV,KAAKW,QAAQ,CAAC,eAAe,cAAc;IACxD,MAAMC,aAAa,CAAC,mBAAmB,EAAEF,MAAM;IAE/C,6DAA6D;IAC7D,MAAMG,aAAa,CAAC,aAAa,EAAEb,KAAKc,OAAO,CAAC,OAAO,MAAM;IAE7DxD,UAAU;QACR6C,cAAcpC,SAAS;QACvBwC,YAAYlC,MAAMN,SAAS;IAC7B,GAAG;QAACA;KAAM;IAEV,MAAMgD,cAAcxD,QAAQ;QAC1B,IAAI,CAACiD,WAAW;YACd,OAAO,CAAC;QACV;QAEA,MAAMQ,QAAQ;YACZ;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;QAED,OAAOA,MAAMC,MAAM,CAAyB,CAACC,aAAaC;YACxD,MAAMC,aAAaZ,SAAS,CAAC,GAAGI,WAAW,CAAC,EAAEO,MAAM,CAAC;YACrD,MAAME,cAAc,OAAOD,YAAYrD,UAAU,WAAWqD,WAAWrD,KAAK,GAAGuD;YAC/EJ,WAAW,CAACC,KAAK,GAAGE,eAAe;YACnC,OAAOH;QACT,GAAG,CAAC;IACN,GAAG;QAACV;QAAWI;KAAW;IAE1B,MAAMW,kBAAkBlE,YACtB,CAACqC;QACCa,YAAYb;QACZS,cAAcT;QACdO,SAASP;IACX,GACA;QAACO;KAAS;IAGZ,MAAMuB,mBAAmBnE,YACvB,CAACoE;QACCtB,cAAcsB;QACdxB,SAASwB;QACTlB,YAAYlC,MAAMoD;IACpB,GACA;QAACxB;KAAS;IAGZ,MAAMyB,YAAY1B,KAAK2B,KAAK,CAAC,KAAKC,GAAG,MAAM;IAC3C,MAAMC,QAAQ/D,sBAAsBiC,MAAM8B,KAAK,EAAEH;IACjD,MAAMI,cAAchE,sBAAsBiC,MAAMgC,KAAK,EAAED,aAAa;IAEpE,qBACE,MAACE;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMI,WAAU;kCAAeJ;;oBAC/BC,6BAAe,KAACE;wBAAIC,WAAU;kCAAqBH;;;;0BAGtD,MAACE;gBAAIC,WAAU;;kCACb,MAACD;wBAAIC,WAAU;;0CACb,KAACC;gCACCC,MAAK;gCACLF,WAAU;gCACVG,OAAO;oCAAEC,iBAAiB/B;gCAAS;gCACnCgC,SAAS,IAAMlC,UAAUS;gCACzB0B,cAAW;;0CAEb,KAACC;gCACCL,MAAK;gCACLpE,OAAOmC,cAAc;gCACrBuC,UAAU,CAACC,QAAUlB,iBAAiBkB,MAAMC,MAAM,CAAC5E,KAAK;gCACxD6E,aAAY;gCACZX,WAAU;;;;kCAKd,KAAClF;wBAAO8F,MAAMhC;wBAAYiC,OAAO,CAAC,OAAO,EAAEjB,OAAO;kCAChD,cAAA,MAACG;4BAAII,OAAO;gCAAEW,SAAS;4BAAO;;8CAC5B,KAAC3F;oCACCkB,OAAOgC;oCACPmC,UAAUlB;oCACVa,OAAO;wCAAEY,OAAO;wCAAQC,QAAQ;oCAAQ;;8CAE1C,MAACjB;oCAAII,OAAO;wCAAEc,WAAW;wCAAQC,SAAS;wCAAQC,KAAK;wCAAQC,YAAY;oCAAS;;sDAClF,KAAClG;4CACCmB,OAAOgC;4CACPmC,UAAUlB;4CACV+B,QAAQ;4CACRV,aAAY;4CACZR,OAAO;gDACLmB,MAAM;gDACNR,SAAS;gDACTS,cAAc;gDACdC,QAAQ;gDACRC,UAAU;gDACVC,YAAY;4CACd;;sDAEF,KAACzB;4CACCC,MAAK;4CACLG,SAAS,IAAMjC,WAAWQ;4CAC1BuB,OAAO;gDACLW,SAAS;gDACTS,cAAc;gDACdC,QAAQ;gDACRpB,iBAAiB;gDACjB/D,OAAO;gDACPsF,QAAQ;gDACRC,YAAY;4CACd;sDACD;;;;8CAMH,MAAC7B;oCAAII,OAAO;wCAAEc,WAAW;oCAAO;;sDAC9B,KAAClB;4CACCI,OAAO;gDACLsB,UAAU;gDACVG,YAAY;gDACZC,cAAc;gDACdxF,OAAO;4CACT;sDACD;;sDAGD,KAAC0D;4CAAII,OAAO;gDAAEe,SAAS;gDAAQY,qBAAqB;gDAAkBX,KAAK;4CAAM;sDAC9E;gDACC;gDACA;gDACA;gDACA;gDACA;gDACA;gDACA;gDACA;gDACA;gDACA;gDACA;gDACA;6CACD,CAACtE,GAAG,CAAC,CAACR,sBACL,KAAC4D;oDAECC,MAAK;oDACLG,SAAS,IAAMf,gBAAgBjD;oDAC/B8D,OAAO;wDACLY,OAAO;wDACPC,QAAQ;wDACRO,cAAc;wDACdC,QACEnD,SAAS0D,WAAW,OAAO1F,MAAM0F,WAAW,KACxC,yCACA;wDACN3B,iBAAiB/D;wDACjBsF,QAAQ;oDACV;oDACArB,cAAY,CAAC,OAAO,EAAEjE,OAAO;mDAdxBA;;;;;;;kCAsBjB,KAAC0D;wBAAIC,WAAU;wBAAgBG,OAAO;4BAAEC,iBAAiB/B;wBAAS;kCAChE,cAAA,KAAC2D;4BAAKhC,WAAU;sCAAiB/B,cAAc;;;;;YAIjDwB,CAAAA,cAAc,aAAaA,cAAc,YAAW,mBACpD,KAACM;gBACCC,WAAU;gBACVG,OAAO;oBACLC,iBAAiBtB,YAAYmD,UAAU,IAAI;oBAC3C5F,OAAOyC,YAAYoD,UAAU,IAAI;oBACjCC,aAAarD,YAAY0C,MAAM,IAAI;gBACrC;0BAEA,cAAA,MAACzB;oBACCC,WAAU;oBACVG,OAAO;wBACLC,iBAAiBtB,YAAYsD,IAAI,IAAI;wBACrC/F,OAAOyC,YAAYuD,cAAc,IAAI;wBACrCF,aAAarD,YAAY0C,MAAM,IAAI;oBACrC;;sCAEA,KAACvB;4BACCD,WAAU;4BACVG,OAAO;gCACLC,iBAAiBtB,YAAYwD,OAAO,IAAI;gCACxCjG,OAAOyC,YAAYyD,iBAAiB,IAAI;4BAC1C;sCACD;;sCAGD,KAACtC;4BACCD,WAAU;4BACVG,OAAO;gCACLC,iBAAiBtB,YAAY0D,SAAS,IAAI;gCAC1CnG,OAAOyC,YAAY2D,mBAAmB,IAAI;4BAC5C;sCACD;;;;;;;AAQb;AAEA,eAAe5E,sBAAqB"}
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { HexColorInput, HexColorPicker } from 'react-colorful'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\n// Import CSS only in browser environment\n// This prevents Node.js from trying to import CSS directly\n// which causes ERR_UNKNOWN_FILE_EXTENSION error\nif (typeof window !== 'undefined') {\n  // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript\n  import('./ThemeColorPickerField.css').catch((err) => {\n    console.warn('Failed to load CSS file:', err)\n  })\n}\n\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const localized = value as Record<string, unknown>\n    const resolved = localized.en ?? localized.cs ?? localized['']\n    if (typeof resolved === 'string') {\n      return resolved\n    }\n  }\n\n  return fallback\n}\n\n/**\n * Convert various color formats to HEX for the color picker\n */\nfunction toHex(color: string): string {\n  if (!color) return '#000000'\n\n  // Already hex\n  if (color.startsWith('#')) return color\n\n  // OKLCH format - extract hue and convert to approximate hex\n  if (color.startsWith('oklch')) {\n    // For now, return a default - proper conversion requires color-conversion library\n    return '#3b82f6' // blue-500 as default\n  }\n\n  // HSL format\n  if (color.startsWith('hsl')) {\n    const regex = /hsl\\((\\d+),\\s*(\\d+)%,\\s*(\\d+)%\\)/\n    const match = regex.exec(color)\n    if (match) {\n      const [, h, s, l] = match.map(Number)\n      return hslToHex(h, s, l)\n    }\n  }\n\n  return '#000000'\n}\n\n/**\n * Convert HSL to HEX\n */\nfunction hslToHex(h: number, s: number, l: number): string {\n  s /= 100\n  l /= 100\n\n  const c = (1 - Math.abs(2 * l - 1)) * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = l - c / 2\n\n  let r = 0\n  let g = 0\n  let b = 0\n\n  if (h >= 0 && h < 60) {\n    r = c\n    g = x\n  } else if (h >= 60 && h < 120) {\n    r = x\n    g = c\n  } else if (h >= 120 && h < 180) {\n    g = c\n    b = x\n  } else if (h >= 180 && h < 240) {\n    g = x\n    b = c\n  } else if (h >= 240 && h < 300) {\n    r = x\n    b = c\n  } else if (h >= 300 && h < 360) {\n    r = c\n    b = x\n  }\n\n  const toHex = (n: number) => {\n    const hex = Math.round((n + m) * 255).toString(16)\n    return hex.length === 1 ? '0' + hex : hex\n  }\n\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\n  const [showPicker, setShowPicker] = useState(false)\n  const [hexValue, setHexValue] = useState(toHex(value || ''))\n  const pickerRef = useRef<HTMLDivElement>(null)\n  const allFields = useFormFields(([fields]) => fields)\n\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\n  const modePrefix = `themeConfiguration.${mode}`\n\n  useEffect(() => {\n    setLocalValue(value || '')\n    setHexValue(toHex(value || ''))\n  }, [value])\n\n  // Close picker when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {\n        setShowPicker(false)\n      }\n    }\n\n    if (showPicker) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [showPicker])\n\n  const colorValues = useMemo(() => {\n    if (!allFields) {\n      return {}\n    }\n\n    const names = [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'popover',\n      'popoverForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n      'border',\n      'input',\n      'ring',\n    ]\n\n    return names.reduce<Record<string, string>>((accumulator, name) => {\n      const fieldState = allFields[`${modePrefix}.${name}`]\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\n      accumulator[name] = parsedValue ?? ''\n      return accumulator\n    }, {})\n  }, [allFields, modePrefix])\n\n  const handleHexChange = useCallback(\n    (hex: string) => {\n      setHexValue(hex)\n      setLocalValue(hex)\n      setValue(hex)\n    },\n    [setValue],\n  )\n\n  const handleTextChange = useCallback(\n    (nextValue: string) => {\n      setLocalValue(nextValue)\n      setValue(nextValue)\n      setHexValue(toHex(nextValue))\n    },\n    [setValue],\n  )\n\n  const fieldName = path.split('.').pop() || ''\n  const label = resolveLocalizedValue(field.label, fieldName)\n  const description = resolveLocalizedValue(field.admin?.description, '')\n\n  return (\n    <div className=\"theme-color-picker-field\">\n      <div className=\"field-header\">\n        <label className=\"field-label\">{label}</label>\n        {description && <div className=\"field-description\">{description}</div>}\n      </div>\n\n      <div className=\"color-picker-container\" style={{ position: 'relative' }}>\n        <div className=\"color-input-wrapper\">\n          <button\n            type=\"button\"\n            className=\"color-swatch\"\n            style={{ backgroundColor: hexValue }}\n            onClick={() => setShowPicker(!showPicker)}\n            aria-label=\"Open color picker\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleTextChange(event.target.value)}\n            placeholder=\"oklch(...) or #hex\"\n            className=\"text-input\"\n          />\n        </div>\n\n        {/* Compact Color Picker Popover */}\n        {showPicker && (\n          <div\n            ref={pickerRef}\n            style={{\n              position: 'absolute',\n              top: '100%',\n              left: 0,\n              marginTop: '8px',\n              padding: '16px',\n              backgroundColor: 'var(--theme-elevation-0)',\n              border: '1px solid var(--theme-elevation-200)',\n              borderRadius: '8px',\n              boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n              zIndex: 1000,\n              width: '280px',\n            }}\n          >\n            <HexColorPicker\n              color={hexValue}\n              onChange={handleHexChange}\n              style={{ width: '100%', height: '160px' }}\n            />\n\n            <div style={{ marginTop: '12px', display: 'flex', gap: '8px', alignItems: 'center' }}>\n              <HexColorInput\n                color={hexValue}\n                onChange={handleHexChange}\n                prefixed\n                placeholder=\"#000000\"\n                style={{\n                  flex: 1,\n                  padding: '8px',\n                  borderRadius: '4px',\n                  border: '1px solid var(--theme-elevation-150)',\n                  fontSize: '13px',\n                  fontFamily: 'monospace',\n                }}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowPicker(false)}\n                style={{\n                  padding: '8px 14px',\n                  borderRadius: '4px',\n                  border: 'none',\n                  backgroundColor: 'var(--theme-elevation-500)',\n                  color: 'var(--theme-elevation-0)',\n                  cursor: 'pointer',\n                  fontSize: '12px',\n                  fontWeight: 600,\n                }}\n              >\n                OK\n              </button>\n            </div>\n\n            {/* Quick Color Swatches */}\n            <div style={{ marginTop: '12px' }}>\n              <div\n                style={{\n                  fontSize: '11px',\n                  fontWeight: 600,\n                  marginBottom: '6px',\n                  color: 'var(--theme-elevation-500)',\n                }}\n              >\n                Rychlé barvy\n              </div>\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '6px' }}>\n                {[\n                  '#ef4444',\n                  '#f97316',\n                  '#f59e0b',\n                  '#84cc16',\n                  '#10b981',\n                  '#06b6d4',\n                  '#3b82f6',\n                  '#8b5cf6',\n                  '#ec4899',\n                  '#64748b',\n                  '#000000',\n                  '#ffffff',\n                ].map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    onClick={() => handleHexChange(color)}\n                    style={{\n                      width: '100%',\n                      height: '28px',\n                      borderRadius: '4px',\n                      border:\n                        hexValue.toLowerCase() === color.toLowerCase()\n                          ? '2px solid var(--theme-elevation-800)'\n                          : '1px solid var(--theme-elevation-150)',\n                      backgroundColor: color,\n                      cursor: 'pointer',\n                    }}\n                    aria-label={`Select ${color}`}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n        )}\n\n        <div className=\"color-preview\" style={{ backgroundColor: hexValue }}>\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\n        </div>\n      </div>\n\n      {(fieldName === 'primary' || fieldName === 'background') && (\n        <div\n          className=\"mini-preview\"\n          style={{\n            backgroundColor: colorValues.background || '#ffffff',\n            color: colorValues.foreground || '#000000',\n            borderColor: colorValues.border || '#e2e8f0',\n          }}\n        >\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: colorValues.card || '#ffffff',\n              color: colorValues.cardForeground || '#000000',\n              borderColor: colorValues.border || '#e2e8f0',\n            }}\n          >\n            <button\n              className=\"preview-button\"\n              style={{\n                backgroundColor: colorValues.primary || '#0070f3',\n                color: colorValues.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              className=\"preview-button secondary\"\n              style={{\n                backgroundColor: colorValues.secondary || '#f1f5f9',\n                color: colorValues.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemeColorPickerField\n"],"names":["useField","useFormFields","HexColorInput","HexColorPicker","useCallback","useEffect","useMemo","useRef","useState","window","catch","err","console","warn","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","toHex","color","startsWith","regex","match","exec","h","s","l","map","Number","hslToHex","c","Math","abs","x","m","r","g","b","n","hex","round","toString","length","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","showPicker","setShowPicker","hexValue","setHexValue","pickerRef","allFields","fields","mode","includes","modePrefix","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleHexChange","handleTextChange","nextValue","fieldName","split","pop","label","description","admin","div","className","style","position","button","type","backgroundColor","onClick","aria-label","input","onChange","placeholder","ref","top","left","marginTop","padding","border","borderRadius","boxShadow","zIndex","width","height","display","gap","alignItems","prefixed","flex","fontSize","fontFamily","cursor","fontWeight","marginBottom","gridTemplateColumns","toLowerCase","span","background","foreground","borderColor","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}

package/dist/fields/ThemePresetSelectField.d.ts

@@ -0,0 +1,4 @@
+import type { SelectFieldClientComponent } from 'payload';
+declare const ThemePresetSelectField: SelectFieldClientComponent;
+export default ThemePresetSelectField;
+//# sourceMappingURL=ThemePresetSelectField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePresetSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePresetSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAIzD,QAAA,MAAM,sBAAsB,EAAE,0BAsO7B,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/fields/ThemePresetSelectField.js

@@ -0,0 +1,228 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useEffect, useState } from 'react';
+import { allExtendedThemePresets } from '../extended-presets.js';
+const ThemePresetSelectField = ({ field, path })=>{
+    const { value, setValue } = useField({
+        path
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const options = field.options || [];
+    const selectedOption = options.find((opt)=>opt.value === value);
+    const handleSelect = (optionValue)=>{
+        setValue(optionValue);
+        setIsOpen(false);
+    };
+    useEffect(()=>{
+        const handleClickOutside = (e)=>{
+            const target = e.target;
+            if (!target.closest('.theme-preset-select-container')) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return ()=>document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [
+        isOpen
+    ]);
+    const label = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme Preset';
+    const description = typeof field.admin?.description === 'string' ? field.admin.description : field.admin?.description?.en || field.admin?.description?.cs;
+    // Get color swatches for a preset
+    const getPresetColors = (presetValue)=>{
+        const preset = allExtendedThemePresets[presetValue];
+        if (!preset) return [];
+        const colors = [
+            preset.styles.light.primary,
+            preset.styles.light.secondary,
+            preset.styles.light.accent,
+            preset.styles.light.background,
+            preset.styles.light.foreground
+        ].filter(Boolean);
+        return colors.slice(0, 5) // Max 5 swatches
+        ;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "theme-preset-select-container",
+        style: {
+            position: 'relative',
+            marginBottom: '16px'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                style: {
+                    display: 'block',
+                    marginBottom: '6px',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-800)'
+                },
+                children: label
+            }),
+            description && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    fontSize: '12px',
+                    color: 'var(--theme-elevation-500)',
+                    marginBottom: '8px'
+                },
+                children: description
+            }),
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: ()=>setIsOpen(!isOpen),
+                style: {
+                    width: '100%',
+                    padding: '12px 14px',
+                    borderRadius: '6px',
+                    border: '1px solid var(--theme-elevation-200)',
+                    backgroundColor: 'var(--theme-input-bg)',
+                    color: 'var(--theme-elevation-800)',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    fontSize: '14px',
+                    transition: 'border-color 0.2s ease'
+                },
+                onMouseEnter: (e)=>{
+                    e.currentTarget.style.borderColor = 'var(--theme-elevation-400)';
+                },
+                onMouseLeave: (e)=>{
+                    e.currentTarget.style.borderColor = 'var(--theme-elevation-200)';
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '12px',
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    flex: 1
+                                },
+                                children: selectedOption?.label || 'Vyberte téma...'
+                            }),
+                            selectedOption && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '4px'
+                                },
+                                children: getPresetColors(selectedOption.value).map((color, index)=>/*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            width: '20px',
+                                            height: '20px',
+                                            borderRadius: '50%',
+                                            backgroundColor: color,
+                                            border: '1px solid rgba(15, 23, 42, 0.12)',
+                                            boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)'
+                                        }
+                                    }, `${selectedOption.value}-swatch-${index}`))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("svg", {
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 12 12",
+                        fill: "none",
+                        style: {
+                            transition: 'transform 0.2s ease',
+                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                            marginLeft: '8px'
+                        },
+                        children: /*#__PURE__*/ _jsx("path", {
+                            d: "M3 4.5L6 7.5L9 4.5",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        })
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: '4px',
+                    maxHeight: '320px',
+                    overflowY: 'auto',
+                    backgroundColor: 'var(--theme-elevation-0)',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: '8px',
+                    boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
+                    zIndex: 1000
+                },
+                children: options.map((option)=>{
+                    const isSelected = option.value === value;
+                    const colors = getPresetColors(option.value);
+                    return /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>handleSelect(option.value),
+                        style: {
+                            width: '100%',
+                            padding: '12px 14px',
+                            border: 'none',
+                            backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
+                            color: 'var(--theme-elevation-800)',
+                            textAlign: 'left',
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            gap: '12px',
+                            transition: 'background-color 0.15s ease'
+                        },
+                        onMouseEnter: (e)=>{
+                            if (!isSelected) {
+                                e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
+                            }
+                        },
+                        onMouseLeave: (e)=>{
+                            if (!isSelected) {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontWeight: isSelected ? 600 : 500,
+                                    flex: 1
+                                },
+                                children: option.label
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '4px'
+                                },
+                                children: colors.map((color, index)=>/*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            width: '24px',
+                                            height: '24px',
+                                            borderRadius: '50%',
+                                            backgroundColor: color,
+                                            border: '1px solid rgba(15, 23, 42, 0.12)',
+                                            boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)'
+                                        }
+                                    }, `${option.value}-dropdown-swatch-${index}`))
+                            })
+                        ]
+                    }, option.value);
+                })
+            })
+        ]
+    });
+};
+export default ThemePresetSelectField;
+
+//# sourceMappingURL=ThemePresetSelectField.js.map

package/dist/fields/ThemePresetSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemePresetSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\nimport { allExtendedThemePresets } from '../extended-presets.js'\n\nconst ThemePresetSelectField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [isOpen, setIsOpen] = useState(false)\n\n  const options = (field.options as Array<{ label: string; value: string }>) || []\n  const selectedOption = options.find((opt) => opt.value === value)\n\n  const handleSelect = (optionValue: string) => {\n    setValue(optionValue)\n    setIsOpen(false)\n  }\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement\n      if (!target.closest('.theme-preset-select-container')) {\n        setIsOpen(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen])\n\n  const label =\n    typeof field.label === 'string'\n      ? field.label\n      : field.label?.en || field.label?.cs || 'Theme Preset'\n  const description =\n    typeof field.admin?.description === 'string'\n      ? field.admin.description\n      : field.admin?.description?.en || field.admin?.description?.cs\n\n  // Get color swatches for a preset\n  const getPresetColors = (presetValue: string) => {\n    const preset = allExtendedThemePresets[presetValue as keyof typeof allExtendedThemePresets]\n    if (!preset) return []\n\n    const colors = [\n      preset.styles.light.primary,\n      preset.styles.light.secondary,\n      preset.styles.light.accent,\n      preset.styles.light.background,\n      preset.styles.light.foreground,\n    ].filter(Boolean)\n\n    return colors.slice(0, 5) // Max 5 swatches\n  }\n\n  return (\n    <div\n      className=\"theme-preset-select-container\"\n      style={{ position: 'relative', marginBottom: '16px' }}\n    >\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {label}\n      </label>\n\n      {description && (\n        <div\n          style={{\n            fontSize: '12px',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          {description}\n        </div>\n      )}\n\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        style={{\n          width: '100%',\n          padding: '12px 14px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          textAlign: 'left',\n          cursor: 'pointer',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          fontSize: '14px',\n          transition: 'border-color 0.2s ease',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n        }}\n      >\n        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>\n          <span style={{ flex: 1 }}>{selectedOption?.label || 'Vyberte téma...'}</span>\n          {selectedOption && (\n            <div style={{ display: 'flex', gap: '4px' }}>\n              {getPresetColors(selectedOption.value).map((color, index) => (\n                <span\n                  key={`${selectedOption.value}-swatch-${index}`}\n                  style={{\n                    width: '20px',\n                    height: '20px',\n                    borderRadius: '50%',\n                    backgroundColor: color,\n                    border: '1px solid rgba(15, 23, 42, 0.12)',\n                    boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)',\n                  }}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n        <svg\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          style={{\n            transition: 'transform 0.2s ease',\n            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n            marginLeft: '8px',\n          }}\n        >\n          <path\n            d=\"M3 4.5L6 7.5L9 4.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            marginTop: '4px',\n            maxHeight: '320px',\n            overflowY: 'auto',\n            backgroundColor: 'var(--theme-elevation-0)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '8px',\n            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n            zIndex: 1000,\n          }}\n        >\n          {options.map((option) => {\n            const isSelected = option.value === value\n            const colors = getPresetColors(option.value)\n\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => handleSelect(option.value)}\n                style={{\n                  width: '100%',\n                  padding: '12px 14px',\n                  border: 'none',\n                  backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n                  color: 'var(--theme-elevation-800)',\n                  textAlign: 'left',\n                  cursor: 'pointer',\n                  fontSize: '14px',\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  gap: '12px',\n                  transition: 'background-color 0.15s ease',\n                }}\n                onMouseEnter={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n                  }\n                }}\n                onMouseLeave={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'transparent'\n                  }\n                }}\n              >\n                <div\n                  style={{\n                    fontWeight: isSelected ? 600 : 500,\n                    flex: 1,\n                  }}\n                >\n                  {option.label}\n                </div>\n\n                {/* Color Swatches */}\n                <div style={{ display: 'flex', gap: '4px' }}>\n                  {colors.map((color, index) => (\n                    <span\n                      key={`${option.value}-dropdown-swatch-${index}`}\n                      style={{\n                        width: '24px',\n                        height: '24px',\n                        borderRadius: '50%',\n                        backgroundColor: color,\n                        border: '1px solid rgba(15, 23, 42, 0.12)',\n                        boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)',\n                      }}\n                    />\n                  ))}\n                </div>\n              </button>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemePresetSelectField\n"],"names":["useField","useEffect","useState","allExtendedThemePresets","ThemePresetSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","description","admin","getPresetColors","presetValue","preset","colors","styles","light","primary","secondary","accent","background","foreground","filter","Boolean","slice","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","gap","flex","span","map","index","height","boxShadow","svg","viewBox","fill","transform","marginLeft","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","zIndex","option","isSelected"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"extendedThemeFields.d.ts","sourceRoot":"","sources":["../../src/fields/extendedThemeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAsEpC;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,EAgGlC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EA0BnC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,EAoC/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EAmBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,EAa3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,EAOrC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAezC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAoBlC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAoBrC,CAAA;AAID,eAAO,MAAM,sBAAsB;;;;;kBAOmthB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAPxzC,CAAA;AAC1D,eAAO,MAAM,qBAAqB;;;;;kBAMothB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAN1zC,CAAA;AACxD,eAAO,MAAM,gBAAgB,EAIxB,KAAK,CAAA"}
+{"version":3,"file":"extendedThemeFields.d.ts","sourceRoot":"","sources":["../../src/fields/extendedThemeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAsEpC;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,EAgGlC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EA0BnC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,EA0B/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EAiBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,EAS3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,EAKrC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAkBzC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAoBlC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAoBrC,CAAA;AAID,eAAO,MAAM,sBAAsB;;;;;kBAO8thB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAPn0C,CAAA;AAC1D,eAAO,MAAM,qBAAqB;;;;;kBAM+thB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGANr0C,CAAA;AACxD,eAAO,MAAM,gBAAgB,EAIxB,KAAK,CAAA"}

package/dist/fields/extendedThemeFields.js

@@ -344,6 +344,9 @@ import { allExtendedThemePresets } from '../extended-presets.js';
         description: {
             en: 'Select a professional theme with full OKLCH color support (TweakCN compatible)',
             cs: 'Vyberte profesionální téma s plnou podporou OKLCH barev (kompatibilní s TweakCN)'
+        },
+        components: {
+            Field: '@/fields/ThemePresetSelectField#default'
         }
     }
 };

package/dist/fields/extendedThemeFields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/extendedThemeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\nimport { allExtendedThemePresets } from '../extended-presets.js'\n\n/**\n * Extended Theme Configuration Fields\n * Full TweakCN-compatible theme system with:\n * - All shadcn/ui color tokens (19 base + 5 chart = 24 color tokens)\n * - Shadow controls (6 properties)\n * - Font families (3 families: sans, serif, mono)\n * - Advanced typography (letter-spacing, global spacing)\n * - Professional color picker with live preview\n */\n\nconst extendedThemeOptions = Object.values(allExtendedThemePresets).map((preset) => {\n  const primaryColor = preset.styles.light.primary\n  const bgColor = preset.styles.light.background\n  \n  return {\n    label: preset.label,\n    value: preset.value,\n    // Add visual preview in the dropdown\n    __meta: {\n      primary: primaryColor,\n      background: bgColor,\n    },\n  }\n})\n\n/**\n * Creates professional OKLCH color field with enhanced UI\n */\nfunction createColorField(\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) or #rgb or hsl(...)',\n      components: {\n        Field: '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField',\n      },\n    },\n  }\n}\n\n/**\n * Creates text field for non-color values (fonts, shadows, etc.)\n */\nfunction createTextField(\n  name: string,\n  label: { en: string; cs: string },\n  placeholder: string,\n  description?: { en: string; cs: string },\n): Field {\n  return {\n    name,\n    type: 'text',\n    label,\n    admin: {\n      description,\n      placeholder,\n    },\n  }\n}\n\n/**\n * Base Color Tokens (19 tokens)\n * Required for all themes\n */\nexport const baseColorFields: Field[] = [\n  createColorField(\n    'background',\n    { en: 'Background', cs: 'Pozadí' },\n    { en: 'Main page background', cs: 'Hlavní pozadí stránky' },\n  ),\n  createColorField(\n    'foreground',\n    { en: 'Foreground', cs: 'Popředí' },\n    { en: 'Primary text color', cs: 'Primární barva textu' },\n  ),\n  createColorField(\n    'card',\n    { en: 'Card', cs: 'Karta' },\n    { en: 'Card background', cs: 'Pozadí karty' },\n  ),\n  createColorField(\n    'cardForeground',\n    { en: 'Card Foreground', cs: 'Popředí karty' },\n    { en: 'Text on cards', cs: 'Text na kartách' },\n  ),\n  createColorField(\n    'popover',\n    { en: 'Popover', cs: 'Vyskakovací okno' },\n    { en: 'Popover/dropdown background', cs: 'Pozadí vyskakovacích oken' },\n  ),\n  createColorField(\n    'popoverForeground',\n    { en: 'Popover Foreground', cs: 'Popředí vyskakovacího okna' },\n    { en: 'Text in popovers', cs: 'Text ve vyskakovacích oknech' },\n  ),\n  createColorField(\n    'primary',\n    { en: 'Primary', cs: 'Primární' },\n    { en: 'Primary brand color', cs: 'Primární značková barva' },\n  ),\n  createColorField(\n    'primaryForeground',\n    { en: 'Primary Foreground', cs: 'Popředí primární' },\n    { en: 'Text on primary', cs: 'Text na primární barvě' },\n  ),\n  createColorField(\n    'secondary',\n    { en: 'Secondary', cs: 'Sekundární' },\n    { en: 'Secondary accent', cs: 'Sekundární akcent' },\n  ),\n  createColorField(\n    'secondaryForeground',\n    { en: 'Secondary Foreground', cs: 'Popředí sekundární' },\n    { en: 'Text on secondary', cs: 'Text na sekundární' },\n  ),\n  createColorField(\n    'muted',\n    { en: 'Muted', cs: 'Tlumená' },\n    { en: 'Muted background', cs: 'Tlumené pozadí' },\n  ),\n  createColorField(\n    'mutedForeground',\n    { en: 'Muted Foreground', cs: 'Popředí tlumené' },\n    { en: 'Muted text', cs: 'Tlumený text' },\n  ),\n  createColorField(\n    'accent',\n    { en: 'Accent', cs: 'Akcentová' },\n    { en: 'Accent/hover color', cs: 'Akcentová/hover barva' },\n  ),\n  createColorField(\n    'accentForeground',\n    { en: 'Accent Foreground', cs: 'Popředí akcentové' },\n    { en: 'Text on accent', cs: 'Text na akcentové' },\n  ),\n  createColorField(\n    'destructive',\n    { en: 'Destructive', cs: 'Destruktivní' },\n    { en: 'Error/danger color', cs: 'Barva chyby/nebezpečí' },\n  ),\n  createColorField(\n    'destructiveForeground',\n    { en: 'Destructive Foreground', cs: 'Popředí destruktivní' },\n    { en: 'Text on destructive', cs: 'Text na destruktivní' },\n  ),\n  createColorField(\n    'border',\n    { en: 'Border', cs: 'Okraj' },\n    { en: 'Default border color', cs: 'Výchozí barva okraje' },\n  ),\n  createColorField(\n    'input',\n    { en: 'Input', cs: 'Vstupní pole' },\n    { en: 'Input border color', cs: 'Barva okraje vstupu' },\n  ),\n  createColorField(\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 Colors (5 tokens)\n * For data visualization\n */\nexport const chartColorFields: Field[] = [\n  createColorField(\n    'chart1',\n    { en: 'Chart 1', cs: 'Graf 1' },\n    { en: 'First chart color', cs: 'První barva grafu' },\n  ),\n  createColorField(\n    'chart2',\n    { en: 'Chart 2', cs: 'Graf 2' },\n    { en: 'Second chart color', cs: 'Druhá barva grafu' },\n  ),\n  createColorField(\n    'chart3',\n    { en: 'Chart 3', cs: 'Graf 3' },\n    { en: 'Third chart color', cs: 'Třetí barva grafu' },\n  ),\n  createColorField(\n    'chart4',\n    { en: 'Chart 4', cs: 'Graf 4' },\n    { en: 'Fourth chart color', cs: 'Čtvrtá barva grafu' },\n  ),\n  createColorField(\n    'chart5',\n    { en: 'Chart 5', cs: 'Graf 5' },\n    { en: 'Fifth chart color', cs: 'Pátá barva grafu' },\n  ),\n]\n\n/**\n * Shadow Controls (6 properties)\n * TweakCN essential feature\n */\nexport const shadowFields: Field[] = [\n  createColorField(\n    'shadowColor',\n    { en: 'Shadow Color', cs: 'Barva stínu' },\n    { en: 'Base shadow color', cs: 'Základní barva stínu' },\n  ),\n  createTextField(\n    'shadowOpacity',\n    { en: 'Shadow Opacity', cs: 'Průhlednost stínu' },\n    '0.18',\n    { en: 'Shadow opacity (0-1)', cs: 'Průhlednost stínu (0-1)' },\n  ),\n  createTextField(\n    'shadowBlur',\n    { en: 'Shadow Blur', cs: 'Rozmazání stínu' },\n    '2px',\n    { en: 'Blur radius', cs: 'Poloměr rozmazání' },\n  ),\n  createTextField(\n    'shadowSpread',\n    { en: 'Shadow Spread', cs: 'Rozprostření stínu' },\n    '0px',\n    { en: 'Spread radius', cs: 'Poloměr rozprostření' },\n  ),\n  createTextField(\n    'shadowOffsetX',\n    { en: 'Shadow Offset X', cs: 'Posun stínu X' },\n    '0px',\n    { en: 'Horizontal offset', cs: 'Horizontální posun' },\n  ),\n  createTextField(\n    'shadowOffsetY',\n    { en: 'Shadow Offset Y', cs: 'Posun stínu Y' },\n    '1px',\n    { en: 'Vertical offset', cs: 'Vertikální posun' },\n  ),\n]\n\n/**\n * Font Family Configuration (3 families)\n * TweakCN essential feature\n */\nexport const fontFamilyFields: Field[] = [\n  createTextField(\n    'fontSans',\n    { en: 'Sans-Serif Font', cs: 'Bezpatkové písmo' },\n    'Inter, system-ui, sans-serif',\n    { en: 'Primary sans-serif font stack', cs: 'Primární bezpatkové písmo' },\n  ),\n  createTextField(\n    'fontSerif',\n    { en: 'Serif Font', cs: 'Patkové písmo' },\n    'Georgia, serif',\n    { en: 'Serif font stack', cs: 'Patkové písmo' },\n  ),\n  createTextField(\n    'fontMono',\n    { en: 'Monospace Font', cs: 'Monospace písmo' },\n    'JetBrains Mono, monospace',\n    { en: 'Monospace font stack', cs: 'Monospace písmo' },\n  ),\n]\n\n/**\n * Advanced Typography (2 properties)\n */\nexport const advancedTypographyFields: Field[] = [\n  createTextField(\n    'letterSpacing',\n    { en: 'Letter Spacing', cs: 'Rozestup písmen' },\n    '0em',\n    { en: 'Global letter spacing', cs: 'Globální rozestup písmen' },\n  ),\n  createTextField(\n    'spacing',\n    { en: 'Spacing Scale', cs: 'Škála rozestupů' },\n    '0.25rem',\n    { en: 'Base spacing unit', cs: 'Základní jednotka rozestupu' },\n  ),\n]\n\n/**\n * Border Radius Configuration\n */\nexport const designSystemFields: Field[] = [\n  createTextField(\n    'radius',\n    { en: 'Border Radius', cs: 'Zaoblení rohů' },\n    '0.5rem',\n    { en: 'Default border radius', cs: 'Výchozí zaoblení rohů' },\n  ),\n]\n\n/**\n * Extended Theme Selection Field with Visual Preview\n */\nexport const extendedThemeSelectionField: Field = {\n  name: 'extendedTheme',\n  type: 'select',\n  label: {\n    en: '🎨 Theme Preset',\n    cs: '🎨 Přednastavené téma',\n  },\n  defaultValue: 'cool-extended',\n  options: extendedThemeOptions,\n  admin: {\n    description: {\n      en: 'Select a professional theme with full OKLCH color support (TweakCN compatible)',\n      cs: 'Vyberte profesionální téma s plnou podporou OKLCH barev (kompatibilní s TweakCN)',\n    },\n  },\n}\n\n/**\n * Unified Light Mode Configuration\n * Combines all color tokens in one place\n */\nexport const lightModeColorsField: 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: 'Complete color configuration for light mode',\n      cs: 'Kompletní konfigurace barev pro světlý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'extendedLightMode',\n      type: 'group',\n      fields: [...baseColorFields, ...chartColorFields],\n    },\n  ],\n}\n\n/**\n * Unified Dark Mode Configuration\n */\nexport const darkModeColorsField: 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: 'Complete color configuration for dark mode',\n      cs: 'Kompletní konfigurace barev pro tmavý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'extendedDarkMode',\n      type: 'group',\n      fields: [...baseColorFields, ...chartColorFields],\n    },\n  ],\n}\n\n/**\n * Shadow Configuration Section\n */\nexport const shadowConfigField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '🌓 Shadows & Elevation',\n    cs: '🌓 Stíny a výška',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure shadow system for depth and elevation',\n      cs: 'Nakonfigurujte systém stínů pro hloubku a výšku',\n    },\n  },\n  fields: [\n    {\n      name: 'shadows',\n      type: 'group',\n      fields: shadowFields,\n    },\n  ],\n}\n\n/**\n * Typography Configuration Section\n */\nexport const typographyConfigField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '� Typography',\n    cs: '� Typografie',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Font families and advanced typography settings',\n      cs: 'Rodiny písem a pokročilá nastavení typografie',\n    },\n  },\n  fields: [\n    {\n      name: 'typography',\n      type: 'group',\n      fields: [...fontFamilyFields, ...advancedTypographyFields],\n    },\n  ],\n}\n\n/**\n * Design System Configuration\n */\nexport const designSystemConfigField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '⚙️ Design System',\n    cs: '⚙️ Designový systém',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Global design tokens (radius, spacing, etc.)',\n      cs: 'Globální design tokeny (zaoblení, rozestupy, atd.)',\n    },\n  },\n  fields: [\n    {\n      name: 'designSystem',\n      type: 'group',\n      fields: designSystemFields,\n    },\n  ],\n}\n\n// DEPRECATED: Old fields kept for backwards compatibility\n// TODO: Remove in v1.0.0\nexport const extendedLightModeField = lightModeColorsField\nexport const extendedDarkModeField = darkModeColorsField\nexport const chartColorsField = {\n  type: 'group',\n  name: 'chartColors',\n  fields: chartColorFields,\n} as Field\n"],"names":["allExtendedThemePresets","extendedThemeOptions","Object","values","map","preset","primaryColor","styles","light","primary","bgColor","background","label","value","__meta","createColorField","name","description","type","admin","placeholder","components","Field","createTextField","baseColorFields","en","cs","chartColorFields","shadowFields","fontFamilyFields","advancedTypographyFields","designSystemFields","extendedThemeSelectionField","defaultValue","options","lightModeColorsField","initCollapsed","fields","darkModeColorsField","shadowConfigField","typographyConfigField","designSystemConfigField","extendedLightModeField","extendedDarkModeField","chartColorsField"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/extendedThemeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\nimport { allExtendedThemePresets } from '../extended-presets.js'\n\n/**\n * Extended Theme Configuration Fields\n * Full TweakCN-compatible theme system with:\n * - All shadcn/ui color tokens (19 base + 5 chart = 24 color tokens)\n * - Shadow controls (6 properties)\n * - Font families (3 families: sans, serif, mono)\n * - Advanced typography (letter-spacing, global spacing)\n * - Professional color picker with live preview\n */\n\nconst extendedThemeOptions = Object.values(allExtendedThemePresets).map((preset) => {\n  const primaryColor = preset.styles.light.primary\n  const bgColor = preset.styles.light.background\n\n  return {\n    label: preset.label,\n    value: preset.value,\n    // Add visual preview in the dropdown\n    __meta: {\n      primary: primaryColor,\n      background: bgColor,\n    },\n  }\n})\n\n/**\n * Creates professional OKLCH color field with enhanced UI\n */\nfunction createColorField(\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) or #rgb or hsl(...)',\n      components: {\n        Field: '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField',\n      },\n    },\n  }\n}\n\n/**\n * Creates text field for non-color values (fonts, shadows, etc.)\n */\nfunction createTextField(\n  name: string,\n  label: { en: string; cs: string },\n  placeholder: string,\n  description?: { en: string; cs: string },\n): Field {\n  return {\n    name,\n    type: 'text',\n    label,\n    admin: {\n      description,\n      placeholder,\n    },\n  }\n}\n\n/**\n * Base Color Tokens (19 tokens)\n * Required for all themes\n */\nexport const baseColorFields: Field[] = [\n  createColorField(\n    'background',\n    { en: 'Background', cs: 'Pozadí' },\n    { en: 'Main page background', cs: 'Hlavní pozadí stránky' },\n  ),\n  createColorField(\n    'foreground',\n    { en: 'Foreground', cs: 'Popředí' },\n    { en: 'Primary text color', cs: 'Primární barva textu' },\n  ),\n  createColorField(\n    'card',\n    { en: 'Card', cs: 'Karta' },\n    { en: 'Card background', cs: 'Pozadí karty' },\n  ),\n  createColorField(\n    'cardForeground',\n    { en: 'Card Foreground', cs: 'Popředí karty' },\n    { en: 'Text on cards', cs: 'Text na kartách' },\n  ),\n  createColorField(\n    'popover',\n    { en: 'Popover', cs: 'Vyskakovací okno' },\n    { en: 'Popover/dropdown background', cs: 'Pozadí vyskakovacích oken' },\n  ),\n  createColorField(\n    'popoverForeground',\n    { en: 'Popover Foreground', cs: 'Popředí vyskakovacího okna' },\n    { en: 'Text in popovers', cs: 'Text ve vyskakovacích oknech' },\n  ),\n  createColorField(\n    'primary',\n    { en: 'Primary', cs: 'Primární' },\n    { en: 'Primary brand color', cs: 'Primární značková barva' },\n  ),\n  createColorField(\n    'primaryForeground',\n    { en: 'Primary Foreground', cs: 'Popředí primární' },\n    { en: 'Text on primary', cs: 'Text na primární barvě' },\n  ),\n  createColorField(\n    'secondary',\n    { en: 'Secondary', cs: 'Sekundární' },\n    { en: 'Secondary accent', cs: 'Sekundární akcent' },\n  ),\n  createColorField(\n    'secondaryForeground',\n    { en: 'Secondary Foreground', cs: 'Popředí sekundární' },\n    { en: 'Text on secondary', cs: 'Text na sekundární' },\n  ),\n  createColorField(\n    'muted',\n    { en: 'Muted', cs: 'Tlumená' },\n    { en: 'Muted background', cs: 'Tlumené pozadí' },\n  ),\n  createColorField(\n    'mutedForeground',\n    { en: 'Muted Foreground', cs: 'Popředí tlumené' },\n    { en: 'Muted text', cs: 'Tlumený text' },\n  ),\n  createColorField(\n    'accent',\n    { en: 'Accent', cs: 'Akcentová' },\n    { en: 'Accent/hover color', cs: 'Akcentová/hover barva' },\n  ),\n  createColorField(\n    'accentForeground',\n    { en: 'Accent Foreground', cs: 'Popředí akcentové' },\n    { en: 'Text on accent', cs: 'Text na akcentové' },\n  ),\n  createColorField(\n    'destructive',\n    { en: 'Destructive', cs: 'Destruktivní' },\n    { en: 'Error/danger color', cs: 'Barva chyby/nebezpečí' },\n  ),\n  createColorField(\n    'destructiveForeground',\n    { en: 'Destructive Foreground', cs: 'Popředí destruktivní' },\n    { en: 'Text on destructive', cs: 'Text na destruktivní' },\n  ),\n  createColorField(\n    'border',\n    { en: 'Border', cs: 'Okraj' },\n    { en: 'Default border color', cs: 'Výchozí barva okraje' },\n  ),\n  createColorField(\n    'input',\n    { en: 'Input', cs: 'Vstupní pole' },\n    { en: 'Input border color', cs: 'Barva okraje vstupu' },\n  ),\n  createColorField(\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 Colors (5 tokens)\n * For data visualization\n */\nexport const chartColorFields: Field[] = [\n  createColorField(\n    'chart1',\n    { en: 'Chart 1', cs: 'Graf 1' },\n    { en: 'First chart color', cs: 'První barva grafu' },\n  ),\n  createColorField(\n    'chart2',\n    { en: 'Chart 2', cs: 'Graf 2' },\n    { en: 'Second chart color', cs: 'Druhá barva grafu' },\n  ),\n  createColorField(\n    'chart3',\n    { en: 'Chart 3', cs: 'Graf 3' },\n    { en: 'Third chart color', cs: 'Třetí barva grafu' },\n  ),\n  createColorField(\n    'chart4',\n    { en: 'Chart 4', cs: 'Graf 4' },\n    { en: 'Fourth chart color', cs: 'Čtvrtá barva grafu' },\n  ),\n  createColorField(\n    'chart5',\n    { en: 'Chart 5', cs: 'Graf 5' },\n    { en: 'Fifth chart color', cs: 'Pátá barva grafu' },\n  ),\n]\n\n/**\n * Shadow Controls (6 properties)\n * TweakCN essential feature\n */\nexport const shadowFields: Field[] = [\n  createColorField(\n    'shadowColor',\n    { en: 'Shadow Color', cs: 'Barva stínu' },\n    { en: 'Base shadow color', cs: 'Základní barva stínu' },\n  ),\n  createTextField('shadowOpacity', { en: 'Shadow Opacity', cs: 'Průhlednost stínu' }, '0.18', {\n    en: 'Shadow opacity (0-1)',\n    cs: 'Průhlednost stínu (0-1)',\n  }),\n  createTextField('shadowBlur', { en: 'Shadow Blur', cs: 'Rozmazání stínu' }, '2px', {\n    en: 'Blur radius',\n    cs: 'Poloměr rozmazání',\n  }),\n  createTextField('shadowSpread', { en: 'Shadow Spread', cs: 'Rozprostření stínu' }, '0px', {\n    en: 'Spread radius',\n    cs: 'Poloměr rozprostření',\n  }),\n  createTextField('shadowOffsetX', { en: 'Shadow Offset X', cs: 'Posun stínu X' }, '0px', {\n    en: 'Horizontal offset',\n    cs: 'Horizontální posun',\n  }),\n  createTextField('shadowOffsetY', { en: 'Shadow Offset Y', cs: 'Posun stínu Y' }, '1px', {\n    en: 'Vertical offset',\n    cs: 'Vertikální posun',\n  }),\n]\n\n/**\n * Font Family Configuration (3 families)\n * TweakCN essential feature\n */\nexport const fontFamilyFields: Field[] = [\n  createTextField(\n    'fontSans',\n    { en: 'Sans-Serif Font', cs: 'Bezpatkové písmo' },\n    'Inter, system-ui, sans-serif',\n    { en: 'Primary sans-serif font stack', cs: 'Primární bezpatkové písmo' },\n  ),\n  createTextField('fontSerif', { en: 'Serif Font', cs: 'Patkové písmo' }, 'Georgia, serif', {\n    en: 'Serif font stack',\n    cs: 'Patkové písmo',\n  }),\n  createTextField(\n    'fontMono',\n    { en: 'Monospace Font', cs: 'Monospace písmo' },\n    'JetBrains Mono, monospace',\n    { en: 'Monospace font stack', cs: 'Monospace písmo' },\n  ),\n]\n\n/**\n * Advanced Typography (2 properties)\n */\nexport const advancedTypographyFields: Field[] = [\n  createTextField('letterSpacing', { en: 'Letter Spacing', cs: 'Rozestup písmen' }, '0em', {\n    en: 'Global letter spacing',\n    cs: 'Globální rozestup písmen',\n  }),\n  createTextField('spacing', { en: 'Spacing Scale', cs: 'Škála rozestupů' }, '0.25rem', {\n    en: 'Base spacing unit',\n    cs: 'Základní jednotka rozestupu',\n  }),\n]\n\n/**\n * Border Radius Configuration\n */\nexport const designSystemFields: Field[] = [\n  createTextField('radius', { en: 'Border Radius', cs: 'Zaoblení rohů' }, '0.5rem', {\n    en: 'Default border radius',\n    cs: 'Výchozí zaoblení rohů',\n  }),\n]\n\n/**\n * Extended Theme Selection Field with Visual Preview\n */\nexport const extendedThemeSelectionField: Field = {\n  name: 'extendedTheme',\n  type: 'select',\n  label: {\n    en: '🎨 Theme Preset',\n    cs: '🎨 Přednastavené téma',\n  },\n  defaultValue: 'cool-extended',\n  options: extendedThemeOptions,\n  admin: {\n    description: {\n      en: 'Select a professional theme with full OKLCH color support (TweakCN compatible)',\n      cs: 'Vyberte profesionální téma s plnou podporou OKLCH barev (kompatibilní s TweakCN)',\n    },\n    components: {\n      Field: '@/fields/ThemePresetSelectField#default',\n    },\n  },\n}\n\n/**\n * Unified Light Mode Configuration\n * Combines all color tokens in one place\n */\nexport const lightModeColorsField: 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: 'Complete color configuration for light mode',\n      cs: 'Kompletní konfigurace barev pro světlý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'extendedLightMode',\n      type: 'group',\n      fields: [...baseColorFields, ...chartColorFields],\n    },\n  ],\n}\n\n/**\n * Unified Dark Mode Configuration\n */\nexport const darkModeColorsField: 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: 'Complete color configuration for dark mode',\n      cs: 'Kompletní konfigurace barev pro tmavý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'extendedDarkMode',\n      type: 'group',\n      fields: [...baseColorFields, ...chartColorFields],\n    },\n  ],\n}\n\n/**\n * Shadow Configuration Section\n */\nexport const shadowConfigField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '🌓 Shadows & Elevation',\n    cs: '🌓 Stíny a výška',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure shadow system for depth and elevation',\n      cs: 'Nakonfigurujte systém stínů pro hloubku a výšku',\n    },\n  },\n  fields: [\n    {\n      name: 'shadows',\n      type: 'group',\n      fields: shadowFields,\n    },\n  ],\n}\n\n/**\n * Typography Configuration Section\n */\nexport const typographyConfigField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '� Typography',\n    cs: '� Typografie',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Font families and advanced typography settings',\n      cs: 'Rodiny písem a pokročilá nastavení typografie',\n    },\n  },\n  fields: [\n    {\n      name: 'typography',\n      type: 'group',\n      fields: [...fontFamilyFields, ...advancedTypographyFields],\n    },\n  ],\n}\n\n/**\n * Design System Configuration\n */\nexport const designSystemConfigField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '⚙️ Design System',\n    cs: '⚙️ Designový systém',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Global design tokens (radius, spacing, etc.)',\n      cs: 'Globální design tokeny (zaoblení, rozestupy, atd.)',\n    },\n  },\n  fields: [\n    {\n      name: 'designSystem',\n      type: 'group',\n      fields: designSystemFields,\n    },\n  ],\n}\n\n// DEPRECATED: Old fields kept for backwards compatibility\n// TODO: Remove in v1.0.0\nexport const extendedLightModeField = lightModeColorsField\nexport const extendedDarkModeField = darkModeColorsField\nexport const chartColorsField = {\n  type: 'group',\n  name: 'chartColors',\n  fields: chartColorFields,\n} as Field\n"],"names":["allExtendedThemePresets","extendedThemeOptions","Object","values","map","preset","primaryColor","styles","light","primary","bgColor","background","label","value","__meta","createColorField","name","description","type","admin","placeholder","components","Field","createTextField","baseColorFields","en","cs","chartColorFields","shadowFields","fontFamilyFields","advancedTypographyFields","designSystemFields","extendedThemeSelectionField","defaultValue","options","lightModeColorsField","initCollapsed","fields","darkModeColorsField","shadowConfigField","typographyConfigField","designSystemConfigField","extendedLightModeField","extendedDarkModeField","chartColorsField"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilivi/payloadcms-theme-management",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Theme configuration plugin for Payload CMS v3",
   "type": "module",
   "main": "./dist/index.js",