@kilivi/payloadcms-theme-management 0.1.6 → 0.1.8

package/dist/constants/themeFonts.js

@@ -1,34 +1,103 @@
 // Theme font constants for the plugin
 export const BODY_FONT_OPTIONS = [
-    { label: 'System', value: 'system-ui' },
-    { label: 'Inter', value: 'Inter' },
-    { label: 'Roboto', value: 'Roboto' },
-    { label: 'Open Sans', value: 'Open Sans' },
-    { label: 'Lato', value: 'Lato' },
-    { label: 'Montserrat', value: 'Montserrat' },
-    { label: 'Poppins', value: 'Poppins' },
+    {
+        label: 'System',
+        value: 'system-ui'
+    },
+    {
+        label: 'Inter',
+        value: 'Inter'
+    },
+    {
+        label: 'Roboto',
+        value: 'Roboto'
+    },
+    {
+        label: 'Open Sans',
+        value: 'Open Sans'
+    },
+    {
+        label: 'Lato',
+        value: 'Lato'
+    },
+    {
+        label: 'Montserrat',
+        value: 'Montserrat'
+    },
+    {
+        label: 'Poppins',
+        value: 'Poppins'
+    }
 ];
 export const HEADING_FONT_OPTIONS = [
-    { label: 'System', value: 'system-ui' },
-    { label: 'Inter', value: 'Inter' },
-    { label: 'Playfair Display', value: 'Playfair Display' },
-    { label: 'Merriweather', value: 'Merriweather' },
-    { label: 'Montserrat', value: 'Montserrat' },
-    { label: 'Raleway', value: 'Raleway' },
+    {
+        label: 'System',
+        value: 'system-ui'
+    },
+    {
+        label: 'Inter',
+        value: 'Inter'
+    },
+    {
+        label: 'Playfair Display',
+        value: 'Playfair Display'
+    },
+    {
+        label: 'Merriweather',
+        value: 'Merriweather'
+    },
+    {
+        label: 'Montserrat',
+        value: 'Montserrat'
+    },
+    {
+        label: 'Raleway',
+        value: 'Raleway'
+    }
 ];
 export const BASE_FONT_SIZE_OPTIONS = [
-    { label: '14px', value: '14' },
-    { label: '15px', value: '15' },
-    { label: '16px', value: '16' },
-    { label: '17px', value: '17' },
-    { label: '18px', value: '18' },
+    {
+        label: '14px',
+        value: '14'
+    },
+    {
+        label: '15px',
+        value: '15'
+    },
+    {
+        label: '16px',
+        value: '16'
+    },
+    {
+        label: '17px',
+        value: '17'
+    },
+    {
+        label: '18px',
+        value: '18'
+    }
 ];
 export const LINE_HEIGHT_OPTIONS = [
-    { label: '1.4', value: '1.4' },
-    { label: '1.5', value: '1.5' },
-    { label: '1.6', value: '1.6' },
-    { label: '1.7', value: '1.7' },
-    { label: '1.8', value: '1.8' },
+    {
+        label: '1.4',
+        value: '1.4'
+    },
+    {
+        label: '1.5',
+        value: '1.5'
+    },
+    {
+        label: '1.6',
+        value: '1.6'
+    },
+    {
+        label: '1.7',
+        value: '1.7'
+    },
+    {
+        label: '1.8',
+        value: '1.8'
+    }
 ];
 export const FONT_VALUE_TO_CSS = {
     'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -40,6 +109,7 @@ export const FONT_VALUE_TO_CSS = {
     'Poppins': '"Poppins", sans-serif',
     'Playfair Display': '"Playfair Display", serif',
     'Merriweather': '"Merriweather", serif',
-    'Raleway': '"Raleway", sans-serif',
+    'Raleway': '"Raleway", sans-serif'
 };
+
 //# sourceMappingURL=themeFonts.js.map

package/dist/constants/themeFonts.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeFonts.js","sourceRoot":"","sources":["../../src/constants/themeFonts.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE;IACvC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;IAC1C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;IAC5C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CAC9B,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE;IACvC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IACxD,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IAChD,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;IAC5C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CAC9B,CAAC;AAEX,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;IAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;IAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;IAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;IAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;CACtB,CAAC;AAEX,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;CACtB,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAA2B;IACvD,WAAW,EAAE,sEAAsE;IACnF,OAAO,EAAE,qBAAqB;IAC9B,QAAQ,EAAE,sBAAsB;IAChC,WAAW,EAAE,yBAAyB;IACtC,MAAM,EAAE,oBAAoB;IAC5B,YAAY,EAAE,0BAA0B;IACxC,SAAS,EAAE,uBAAuB;IAClC,kBAAkB,EAAE,2BAA2B;IAC/C,cAAc,EAAE,uBAAuB;IACvC,SAAS,EAAE,uBAAuB;CACnC,CAAC"}
+{"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\nexport const BODY_FONT_OPTIONS = [\n  { label: 'System', value: 'system-ui' },\n  { label: 'Inter', value: 'Inter' },\n  { label: 'Roboto', value: 'Roboto' },\n  { label: 'Open Sans', value: 'Open Sans' },\n  { label: 'Lato', value: 'Lato' },\n  { label: 'Montserrat', value: 'Montserrat' },\n  { label: 'Poppins', value: 'Poppins' },\n] as const;\n\nexport const HEADING_FONT_OPTIONS = [\n  { label: 'System', value: 'system-ui' },\n  { label: 'Inter', value: 'Inter' },\n  { label: 'Playfair Display', value: 'Playfair Display' },\n  { label: 'Merriweather', value: 'Merriweather' },\n  { label: 'Montserrat', value: 'Montserrat' },\n  { label: 'Raleway', value: 'Raleway' },\n] as const;\n\nexport const BASE_FONT_SIZE_OPTIONS = [\n  { label: '14px', value: '14' },\n  { label: '15px', value: '15' },\n  { label: '16px', value: '16' },\n  { label: '17px', value: '17' },\n  { label: '18px', value: '18' },\n] as const;\n\nexport const LINE_HEIGHT_OPTIONS = [\n  { label: '1.4', value: '1.4' },\n  { label: '1.5', value: '1.5' },\n  { label: '1.6', value: '1.6' },\n  { label: '1.7', value: '1.7' },\n  { label: '1.8', value: '1.8' },\n] as const;\n\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\n  'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n  'Inter': '\"Inter\", sans-serif',\n  'Roboto': '\"Roboto\", sans-serif',\n  'Open Sans': '\"Open Sans\", sans-serif',\n  'Lato': '\"Lato\", sans-serif',\n  'Montserrat': '\"Montserrat\", sans-serif',\n  'Poppins': '\"Poppins\", sans-serif',\n  'Playfair Display': '\"Playfair Display\", serif',\n  'Merriweather': '\"Merriweather\", serif',\n  'Raleway': '\"Raleway\", sans-serif',\n};\n"],"names":["BODY_FONT_OPTIONS","label","value","HEADING_FONT_OPTIONS","BASE_FONT_SIZE_OPTIONS","LINE_HEIGHT_OPTIONS","FONT_VALUE_TO_CSS"],"mappings":"AAAA,sCAAsC;AACtC,OAAO,MAAMA,oBAAoB;IAC/B;QAAEC,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAMC,uBAAuB;IAClC;QAAEF,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAoBC,OAAO;IAAmB;IACvD;QAAED,OAAO;QAAgBC,OAAO;IAAe;IAC/C;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAME,yBAAyB;IACpC;QAAEH,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;CAC9B,CAAU;AAEX,OAAO,MAAMG,sBAAsB;IACjC;QAAEJ,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;CAC9B,CAAU;AAEX,OAAO,MAAMI,oBAA4C;IACvD,aAAa;IACb,SAAS;IACT,UAAU;IACV,aAAa;IACb,QAAQ;IACR,cAAc;IACd,WAAW;IACX,oBAAoB;IACpB,gBAAgB;IAChB,WAAW;AACb,EAAE"}

package/dist/fields/ColorPickerField.js

@@ -0,0 +1,332 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+const colorPresets = {
+    'Theme Colors': [
+        '#3b82f6',
+        '#1e40af',
+        '#b45309',
+        '#78716c',
+        '#8b5cf6',
+        '#f97316'
+    ],
+    'Common Colors': [
+        '#ef4444',
+        '#10b981',
+        '#f59e0b',
+        '#06b6d4',
+        '#ec4899',
+        '#6b7280'
+    ],
+    'Neutral Tones': [
+        '#000000',
+        '#1f2937',
+        '#6b7280',
+        '#d1d5db',
+        '#f3f4f6',
+        '#ffffff'
+    ]
+};
+function resolveLocalizedValue(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'object' && value !== null) {
+        const localized = value;
+        const fallback = localized.en ?? localized.cs ?? localized[''];
+        return typeof fallback === 'string' ? fallback : '';
+    }
+    return '';
+}
+export default function ColorPickerField(props) {
+    const { field, path } = props;
+    const { value = '#000000', setValue } = useField({
+        path
+    });
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const pickerRef = useRef(null);
+    const fieldLabel = resolveLocalizedValue(field.label);
+    const fieldDescription = resolveLocalizedValue(field.admin?.description);
+    const placeholder = resolveLocalizedValue(field.admin?.placeholder) || 'e.g., #3b82f6, hsl(...)';
+    const handleColorChange = useCallback((color)=>{
+        setValue(color);
+    }, [
+        setValue
+    ]);
+    const handleInputChange = useCallback((event)=>{
+        handleColorChange(event.target.value);
+    }, [
+        handleColorChange
+    ]);
+    const togglePicker = useCallback(()=>{
+        setIsPickerOpen((previous)=>!previous);
+    }, []);
+    useEffect(()=>{
+        if (!isPickerOpen) {
+            return;
+        }
+        function handleClickOutside(event) {
+            if (!pickerRef.current) {
+                return;
+            }
+            if (!pickerRef.current.contains(event.target)) {
+                setIsPickerOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>{
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [
+        isPickerOpen
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type color-picker-field",
+        style: {
+            position: 'relative'
+        },
+        children: [
+            fieldLabel && /*#__PURE__*/ _jsxs("label", {
+                htmlFor: path,
+                className: "field-label",
+                style: {
+                    display: 'block',
+                    marginBottom: '8px',
+                    fontSize: '13px',
+                    fontWeight: 600
+                },
+                children: [
+                    fieldLabel,
+                    field.required && /*#__PURE__*/ _jsx("span", {
+                        className: "required",
+                        style: {
+                            color: 'var(--theme-error-500)',
+                            marginLeft: '4px'
+                        },
+                        children: "*"
+                    })
+                ]
+            }),
+            fieldDescription && /*#__PURE__*/ _jsx("div", {
+                className: "field-description",
+                style: {
+                    marginBottom: '8px',
+                    fontSize: '13px',
+                    color: 'var(--theme-elevation-500)',
+                    lineHeight: 1.5
+                },
+                children: fieldDescription
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "color-picker-input-group",
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: togglePicker,
+                        className: "color-preview-button",
+                        style: {
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: '6px',
+                            border: '2px solid #e5e7eb',
+                            backgroundColor: value || '#ffffff',
+                            cursor: 'pointer',
+                            position: 'relative',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        },
+                        title: value ? `Current color: ${value}` : 'Select a color',
+                        children: !value && /*#__PURE__*/ _jsx("span", {
+                            style: {
+                                fontSize: '20px',
+                                color: '#9ca3af'
+                            },
+                            children: "?"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        id: path,
+                        type: "text",
+                        value: value || '',
+                        onChange: handleInputChange,
+                        placeholder: placeholder,
+                        style: {
+                            flex: 1,
+                            padding: '8px 12px',
+                            border: '1px solid var(--theme-elevation-150)',
+                            borderRadius: '6px',
+                            fontSize: '14px',
+                            fontFamily: 'monospace',
+                            backgroundColor: 'var(--theme-elevation-0)',
+                            color: 'var(--theme-elevation-1000)'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        type: "color",
+                        value: value?.startsWith('#') ? value : '#3b82f6',
+                        onChange: handleInputChange,
+                        title: "Pick a color",
+                        style: {
+                            width: '40px',
+                            height: '40px',
+                            border: 'none',
+                            borderRadius: '6px',
+                            cursor: 'pointer'
+                        }
+                    })
+                ]
+            }),
+            isPickerOpen && /*#__PURE__*/ _jsxs("div", {
+                ref: pickerRef,
+                className: "color-presets",
+                style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    zIndex: 1000,
+                    marginTop: '4px',
+                    padding: '16px',
+                    border: '1px solid var(--theme-elevation-150)',
+                    borderRadius: '8px',
+                    backgroundColor: 'var(--theme-elevation-0)',
+                    boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                    maxHeight: '300px',
+                    overflowY: 'auto'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            marginBottom: '16px',
+                            fontSize: '14px',
+                            fontWeight: 600,
+                            color: 'var(--theme-elevation-800)'
+                        },
+                        children: "🎨 Professional Color Picker"
+                    }),
+                    Object.entries(colorPresets).map(([groupName, colors])=>/*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                marginBottom: '16px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        marginBottom: '8px',
+                                        fontSize: '12px',
+                                        fontWeight: 500,
+                                        color: 'var(--theme-elevation-600)',
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.05em'
+                                    },
+                                    children: groupName
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        display: 'grid',
+                                        gridTemplateColumns: 'repeat(6, 1fr)',
+                                        gap: '6px'
+                                    },
+                                    children: colors.map((color)=>/*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: ()=>handleColorChange(color),
+                                            style: {
+                                                width: '36px',
+                                                height: '36px',
+                                                borderRadius: '6px',
+                                                border: value === color ? '3px solid var(--theme-primary-500)' : '1px solid var(--theme-elevation-150)',
+                                                backgroundColor: color,
+                                                cursor: 'pointer',
+                                                transition: 'all 0.2s ease',
+                                                position: 'relative',
+                                                overflow: 'hidden',
+                                                boxShadow: value === color ? '0 0 0 2px var(--theme-primary-200)' : '0 1px 3px rgba(0, 0, 0, 0.1)'
+                                            },
+                                            title: `${color} - Click to select`,
+                                            onMouseEnter: (event)=>{
+                                                event.currentTarget.style.transform = 'scale(1.1)';
+                                            },
+                                            onMouseLeave: (event)=>{
+                                                event.currentTarget.style.transform = 'scale(1)';
+                                            },
+                                            children: color === '#ffffff' && /*#__PURE__*/ _jsx("div", {
+                                                style: {
+                                                    position: 'absolute',
+                                                    inset: 0,
+                                                    border: '1px solid var(--theme-elevation-150)',
+                                                    borderRadius: 'inherit'
+                                                }
+                                            })
+                                        }, color))
+                                })
+                            ]
+                        }, groupName)),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            marginTop: '16px',
+                            paddingTop: '16px',
+                            borderTop: '1px solid var(--theme-elevation-100)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    marginBottom: '8px',
+                                    fontSize: '12px',
+                                    fontWeight: 500,
+                                    color: 'var(--theme-elevation-600)'
+                                },
+                                children: "CUSTOM COLOR"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '8px',
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "color",
+                                        value: value?.startsWith('#') ? value : '#3b82f6',
+                                        onChange: handleInputChange,
+                                        style: {
+                                            width: '36px',
+                                            height: '36px',
+                                            border: 'none',
+                                            borderRadius: '6px',
+                                            cursor: 'pointer'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            fontSize: '11px',
+                                            color: '#9ca3af',
+                                            lineHeight: 1.3
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                children: /*#__PURE__*/ _jsx("strong", {
+                                                    children: "Formats:"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                children: "Hex, RGB, HSL, CSS vars"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ColorPickerField.js.map

package/dist/fields/ColorPickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nconst colorPresets: Record<string, string[]> = {\n  'Theme Colors': ['#3b82f6', '#1e40af', '#b45309', '#78716c', '#8b5cf6', '#f97316'],\n  'Common Colors': ['#ef4444', '#10b981', '#f59e0b', '#06b6d4', '#ec4899', '#6b7280'],\n  'Neutral Tones': ['#000000', '#1f2937', '#6b7280', '#d1d5db', '#f3f4f6', '#ffffff'],\n}\n\nfunction resolveLocalizedValue(value: unknown): 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 fallback = localized.en ?? localized.cs ?? localized['']\n    return typeof fallback === 'string' ? fallback : ''\n  }\n\n  return ''\n}\n\nexport default function ColorPickerField(props: TextFieldClientProps) {\n  const { field, path } = props\n  const { value = '#000000', setValue } = useField<string>({ path })\n  const [isPickerOpen, setIsPickerOpen] = useState(false)\n  const pickerRef = useRef<HTMLDivElement>(null)\n\n  const fieldLabel = resolveLocalizedValue(field.label)\n  const fieldDescription = resolveLocalizedValue(field.admin?.description)\n  const placeholder = resolveLocalizedValue(field.admin?.placeholder) || 'e.g., #3b82f6, hsl(...)'\n\n  const handleColorChange = useCallback(\n    (color: string) => {\n      setValue(color)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      handleColorChange(event.target.value)\n    },\n    [handleColorChange],\n  )\n\n  const togglePicker = useCallback(() => {\n    setIsPickerOpen((previous) => !previous)\n  }, [])\n\n  useEffect(() => {\n    if (!isPickerOpen) {\n      return\n    }\n\n    function handleClickOutside(event: MouseEvent) {\n      if (!pickerRef.current) {\n        return\n      }\n\n      if (!pickerRef.current.contains(event.target as Node)) {\n        setIsPickerOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isPickerOpen])\n\n  return (\n    <div className=\"field-type color-picker-field\" style={{ position: 'relative' }}>\n      {fieldLabel && (\n        <label\n          htmlFor={path}\n          className=\"field-label\"\n          style={{ display: 'block', marginBottom: '8px', fontSize: '13px', fontWeight: 600 }}\n        >\n          {fieldLabel}\n          {field.required && (\n            <span\n              className=\"required\"\n              style={{ color: 'var(--theme-error-500)', marginLeft: '4px' }}\n            >\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      {fieldDescription && (\n        <div\n          className=\"field-description\"\n          style={{\n            marginBottom: '8px',\n            fontSize: '13px',\n            color: 'var(--theme-elevation-500)',\n            lineHeight: 1.5,\n          }}\n        >\n          {fieldDescription}\n        </div>\n      )}\n\n      <div\n        className=\"color-picker-input-group\"\n        style={{ display: 'flex', alignItems: 'center', gap: '8px' }}\n      >\n        <button\n          type=\"button\"\n          onClick={togglePicker}\n          className=\"color-preview-button\"\n          style={{\n            width: '40px',\n            height: '40px',\n            borderRadius: '6px',\n            border: '2px solid #e5e7eb',\n            backgroundColor: value || '#ffffff',\n            cursor: 'pointer',\n            position: 'relative',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n          title={value ? `Current color: ${value}` : 'Select a color'}\n        >\n          {!value && <span style={{ fontSize: '20px', color: '#9ca3af' }}>?</span>}\n        </button>\n\n        <input\n          id={path}\n          type=\"text\"\n          value={value || ''}\n          onChange={handleInputChange}\n          placeholder={placeholder}\n          style={{\n            flex: 1,\n            padding: '8px 12px',\n            border: '1px solid var(--theme-elevation-150)',\n            borderRadius: '6px',\n            fontSize: '14px',\n            fontFamily: 'monospace',\n            backgroundColor: 'var(--theme-elevation-0)',\n            color: 'var(--theme-elevation-1000)',\n          }}\n        />\n\n        <input\n          type=\"color\"\n          value={value?.startsWith('#') ? value : '#3b82f6'}\n          onChange={handleInputChange}\n          title=\"Pick a color\"\n          style={{\n            width: '40px',\n            height: '40px',\n            border: 'none',\n            borderRadius: '6px',\n            cursor: 'pointer',\n          }}\n        />\n      </div>\n\n      {isPickerOpen && (\n        <div\n          ref={pickerRef}\n          className=\"color-presets\"\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            zIndex: 1000,\n            marginTop: '4px',\n            padding: '16px',\n            border: '1px solid var(--theme-elevation-150)',\n            borderRadius: '8px',\n            backgroundColor: 'var(--theme-elevation-0)',\n            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n            maxHeight: '300px',\n            overflowY: 'auto',\n          }}\n        >\n          <div\n            style={{\n              marginBottom: '16px',\n              fontSize: '14px',\n              fontWeight: 600,\n              color: 'var(--theme-elevation-800)',\n            }}\n          >\n            🎨 Professional Color Picker\n          </div>\n\n          {Object.entries(colorPresets).map(([groupName, colors]) => (\n            <div key={groupName} style={{ marginBottom: '16px' }}>\n              <div\n                style={{\n                  marginBottom: '8px',\n                  fontSize: '12px',\n                  fontWeight: 500,\n                  color: 'var(--theme-elevation-600)',\n                  textTransform: 'uppercase',\n                  letterSpacing: '0.05em',\n                }}\n              >\n                {groupName}\n              </div>\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '6px' }}>\n                {colors.map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    onClick={() => handleColorChange(color)}\n                    style={{\n                      width: '36px',\n                      height: '36px',\n                      borderRadius: '6px',\n                      border:\n                        value === color\n                          ? '3px solid var(--theme-primary-500)'\n                          : '1px solid var(--theme-elevation-150)',\n                      backgroundColor: color,\n                      cursor: 'pointer',\n                      transition: 'all 0.2s ease',\n                      position: 'relative',\n                      overflow: 'hidden',\n                      boxShadow:\n                        value === color\n                          ? '0 0 0 2px var(--theme-primary-200)'\n                          : '0 1px 3px rgba(0, 0, 0, 0.1)',\n                    }}\n                    title={`${color} - Click to select`}\n                    onMouseEnter={(event) => {\n                      event.currentTarget.style.transform = 'scale(1.1)'\n                    }}\n                    onMouseLeave={(event) => {\n                      event.currentTarget.style.transform = 'scale(1)'\n                    }}\n                  >\n                    {color === '#ffffff' && (\n                      <div\n                        style={{\n                          position: 'absolute',\n                          inset: 0,\n                          border: '1px solid var(--theme-elevation-150)',\n                          borderRadius: 'inherit',\n                        }}\n                      />\n                    )}\n                  </button>\n                ))}\n              </div>\n            </div>\n          ))}\n\n          <div\n            style={{\n              marginTop: '16px',\n              paddingTop: '16px',\n              borderTop: '1px solid var(--theme-elevation-100)',\n            }}\n          >\n            <div\n              style={{\n                marginBottom: '8px',\n                fontSize: '12px',\n                fontWeight: 500,\n                color: 'var(--theme-elevation-600)',\n              }}\n            >\n              CUSTOM COLOR\n            </div>\n            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n              <input\n                type=\"color\"\n                value={value?.startsWith('#') ? value : '#3b82f6'}\n                onChange={handleInputChange}\n                style={{\n                  width: '36px',\n                  height: '36px',\n                  border: 'none',\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                }}\n              />\n              <div style={{ fontSize: '11px', color: '#9ca3af', lineHeight: 1.3 }}>\n                <div>\n                  <strong>Formats:</strong>\n                </div>\n                <div>Hex, RGB, HSL, CSS vars</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useField","useCallback","useEffect","useRef","useState","colorPresets","resolveLocalizedValue","value","localized","fallback","en","cs","ColorPickerField","props","field","path","setValue","isPickerOpen","setIsPickerOpen","pickerRef","fieldLabel","label","fieldDescription","admin","description","placeholder","handleColorChange","color","handleInputChange","event","target","togglePicker","previous","handleClickOutside","current","contains","document","addEventListener","removeEventListener","div","className","style","position","htmlFor","display","marginBottom","fontSize","fontWeight","required","span","marginLeft","lineHeight","alignItems","gap","button","type","onClick","width","height","borderRadius","border","backgroundColor","cursor","justifyContent","title","input","id","onChange","flex","padding","fontFamily","startsWith","ref","top","left","right","zIndex","marginTop","boxShadow","maxHeight","overflowY","Object","entries","map","groupName","colors","textTransform","letterSpacing","gridTemplateColumns","transition","overflow","onMouseEnter","currentTarget","transform","onMouseLeave","inset","paddingTop","borderTop","strong"],"mappings":"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"}