@kilivi/payloadcms-theme-management 0.2.10 → 0.2.12

package/dist/fields/ExtendedThemeAutoPopulateField.d.ts

@@ -0,0 +1,12 @@
+import type { SelectFieldClientComponent } from 'payload';
+/**
+ * Extended Theme Field with Auto-Population
+ *
+ * This component:
+ * 1. Shows color swatches for each theme option
+ * 2. Auto-populates ALL color fields when a theme is selected
+ * 3. Fills in ALL light mode and dark mode colors with preset defaults
+ */
+declare const ExtendedThemeAutoPopulateField: SelectFieldClientComponent;
+export default ExtendedThemeAutoPopulateField;
+//# sourceMappingURL=ExtendedThemeAutoPopulateField.d.ts.map

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

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

package/dist/fields/ExtendedThemeAutoPopulateField.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useForm } from '@payloadcms/ui';
+import { useCallback, useEffect, useRef } from 'react';
+import { allExtendedThemePresets } from '../extended-presets.js';
+/**
+ * Extended Theme Field with Auto-Population
+ *
+ * This component:
+ * 1. Shows color swatches for each theme option
+ * 2. Auto-populates ALL color fields when a theme is selected
+ * 3. Fills in ALL light mode and dark mode colors with preset defaults
+ */ const ExtendedThemeAutoPopulateField = ({ field, path })=>{
+    const { value, setValue } = useField({
+        path
+    });
+    const { dispatchFields } = useForm();
+    const hasInitializedRef = useRef(false);
+    const options = field.options || [];
+    const selectedOption = options.find((opt)=>opt.value === value);
+    // Auto-populate colors when theme is selected
+    const applyThemePreset = useCallback((presetKey)=>{
+        const preset = allExtendedThemePresets[presetKey];
+        if (!preset) return;
+        // Apply all light mode colors
+        Object.entries(preset.styles.light).forEach(([key, colorValue])=>{
+            dispatchFields({
+                type: 'UPDATE',
+                path: `themeConfiguration.extendedLightMode.${key}`,
+                value: colorValue
+            });
+        });
+        // Apply all dark mode colors
+        Object.entries(preset.styles.dark).forEach(([key, colorValue])=>{
+            dispatchFields({
+                type: 'UPDATE',
+                path: `themeConfiguration.extendedDarkMode.${key}`,
+                value: colorValue
+            });
+        });
+    }, [
+        dispatchFields
+    ]);
+    const handleChange = useCallback((newValue)=>{
+        setValue(newValue);
+        if (newValue) {
+            applyThemePreset(newValue);
+        }
+    }, [
+        setValue,
+        applyThemePreset
+    ]);
+    // Auto-populate on initial load if value exists
+    useEffect(()=>{
+        if (!hasInitializedRef.current && value) {
+            applyThemePreset(value);
+            hasInitializedRef.current = true;
+        }
+    }, [
+        value,
+        applyThemePreset
+    ]);
+    // 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);
+    };
+    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;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            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("select", {
+                value: value || '',
+                onChange: (e)=>handleChange(e.target.value),
+                style: {
+                    width: '100%',
+                    padding: '10px 12px',
+                    borderRadius: '6px',
+                    border: '1px solid var(--theme-elevation-200)',
+                    backgroundColor: 'var(--theme-input-bg)',
+                    color: 'var(--theme-elevation-800)',
+                    fontSize: '14px',
+                    cursor: 'pointer'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("option", {
+                        value: "",
+                        children: "Select a theme..."
+                    }),
+                    options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
+                ]
+            }),
+            selectedOption && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginTop: '12px',
+                    padding: '12px',
+                    borderRadius: '8px',
+                    backgroundColor: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-200)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            fontSize: '12px',
+                            fontWeight: 600,
+                            marginBottom: '8px',
+                            color: 'var(--theme-elevation-700)'
+                        },
+                        children: selectedOption.label
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            gap: '8px',
+                            alignItems: 'center'
+                        },
+                        children: getPresetColors(selectedOption.value).map((color, index)=>/*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    width: '32px',
+                                    height: '32px',
+                                    borderRadius: '6px',
+                                    backgroundColor: color,
+                                    border: '1px solid rgba(0, 0, 0, 0.1)',
+                                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
+                                },
+                                title: color
+                            }, `${selectedOption.value}-${index}`))
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            marginTop: '8px',
+                            fontSize: '11px',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "✅ All colors auto-populated from this theme"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default ExtendedThemeAutoPopulateField;
+
+//# sourceMappingURL=ExtendedThemeAutoPopulateField.js.map

package/dist/fields/ExtendedThemeAutoPopulateField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ExtendedThemeAutoPopulateField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { allExtendedThemePresets } from '../extended-presets.js'\n\n/**\n * Extended Theme Field with Auto-Population\n *\n * This component:\n * 1. Shows color swatches for each theme option\n * 2. Auto-populates ALL color fields when a theme is selected\n * 3. Fills in ALL light mode and dark mode colors with preset defaults\n */\nconst ExtendedThemeAutoPopulateField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const hasInitializedRef = useRef(false)\n\n  const options = (field.options as Array<{ label: string; value: string }>) || []\n  const selectedOption = options.find((opt) => opt.value === value)\n\n  // Auto-populate colors when theme is selected\n  const applyThemePreset = useCallback(\n    (presetKey: string) => {\n      const preset = allExtendedThemePresets[presetKey as keyof typeof allExtendedThemePresets]\n      if (!preset) return\n\n      // Apply all light mode colors\n      Object.entries(preset.styles.light).forEach(([key, colorValue]) => {\n        dispatchFields({\n          type: 'UPDATE',\n          path: `themeConfiguration.extendedLightMode.${key}`,\n          value: colorValue,\n        })\n      })\n\n      // Apply all dark mode colors\n      Object.entries(preset.styles.dark).forEach(([key, colorValue]) => {\n        dispatchFields({\n          type: 'UPDATE',\n          path: `themeConfiguration.extendedDarkMode.${key}`,\n          value: colorValue,\n        })\n      })\n    },\n    [dispatchFields],\n  )\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      setValue(newValue)\n      if (newValue) {\n        applyThemePreset(newValue)\n      }\n    },\n    [setValue, applyThemePreset],\n  )\n\n  // Auto-populate on initial load if value exists\n  useEffect(() => {\n    if (!hasInitializedRef.current && value) {\n      applyThemePreset(value)\n      hasInitializedRef.current = true\n    }\n  }, [value, applyThemePreset])\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)\n  }\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  return (\n    <div style={{ marginBottom: '16px' }}>\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      <select\n        value={value || ''}\n        onChange={(e) => handleChange(e.target.value)}\n        style={{\n          width: '100%',\n          padding: '10px 12px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          fontSize: '14px',\n          cursor: 'pointer',\n        }}\n      >\n        <option value=\"\">Select a theme...</option>\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n\n      {/* Show color swatches for selected theme */}\n      {selectedOption && (\n        <div\n          style={{\n            marginTop: '12px',\n            padding: '12px',\n            borderRadius: '8px',\n            backgroundColor: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n          }}\n        >\n          <div\n            style={{\n              fontSize: '12px',\n              fontWeight: 600,\n              marginBottom: '8px',\n              color: 'var(--theme-elevation-700)',\n            }}\n          >\n            {selectedOption.label}\n          </div>\n          <div\n            style={{\n              display: 'flex',\n              gap: '8px',\n              alignItems: 'center',\n            }}\n          >\n            {getPresetColors(selectedOption.value).map((color, index) => (\n              <div\n                key={`${selectedOption.value}-${index}`}\n                style={{\n                  width: '32px',\n                  height: '32px',\n                  borderRadius: '6px',\n                  backgroundColor: color,\n                  border: '1px solid rgba(0, 0, 0, 0.1)',\n                  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',\n                }}\n                title={color}\n              />\n            ))}\n          </div>\n          <div\n            style={{\n              marginTop: '8px',\n              fontSize: '11px',\n              color: 'var(--theme-elevation-500)',\n            }}\n          >\n            ✅ All colors auto-populated from this theme\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ExtendedThemeAutoPopulateField\n"],"names":["useField","useForm","useCallback","useEffect","useRef","allExtendedThemePresets","ExtendedThemeAutoPopulateField","field","path","value","setValue","dispatchFields","hasInitializedRef","options","selectedOption","find","opt","applyThemePreset","presetKey","preset","Object","entries","styles","light","forEach","key","colorValue","type","dark","handleChange","newValue","current","getPresetColors","presetValue","colors","primary","secondary","accent","background","foreground","filter","Boolean","slice","label","en","cs","description","admin","div","style","marginBottom","display","fontSize","fontWeight","color","select","onChange","e","target","width","padding","borderRadius","border","backgroundColor","cursor","option","map","marginTop","gap","alignItems","index","height","boxShadow","title"],"mappings":"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"}

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/extendedThemeFields.d.ts

@@ -28,7 +28,8 @@ export declare const advancedTypographyFields: Field[];
  */
 export declare const designSystemFields: Field[];
 /**
- * Extended Theme Selection Field with Visual Preview
+ * Extended Theme Selection Field with Visual Preview and Auto-Population
+ * Automatically fills all color fields when a theme is selected
  */
 export declare const extendedThemeSelectionField: Field;
 /**