@kilivi/payloadcms-theme-management 0.1.8 → 0.1.10

package/dist/constants/themeFonts.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\r\nexport const BODY_FONT_OPTIONS = [\r\n  { label: 'System', value: 'system-ui' },\r\n  { label: 'Inter', value: 'Inter' },\r\n  { label: 'Roboto', value: 'Roboto' },\r\n  { label: 'Open Sans', value: 'Open Sans' },\r\n  { label: 'Lato', value: 'Lato' },\r\n  { label: 'Montserrat', value: 'Montserrat' },\r\n  { label: 'Poppins', value: 'Poppins' },\r\n] as const;\r\n\r\nexport const HEADING_FONT_OPTIONS = [\r\n  { label: 'System', value: 'system-ui' },\r\n  { label: 'Inter', value: 'Inter' },\r\n  { label: 'Playfair Display', value: 'Playfair Display' },\r\n  { label: 'Merriweather', value: 'Merriweather' },\r\n  { label: 'Montserrat', value: 'Montserrat' },\r\n  { label: 'Raleway', value: 'Raleway' },\r\n] as const;\r\n\r\nexport const BASE_FONT_SIZE_OPTIONS = [\r\n  { label: '14px', value: '14' },\r\n  { label: '15px', value: '15' },\r\n  { label: '16px', value: '16' },\r\n  { label: '17px', value: '17' },\r\n  { label: '18px', value: '18' },\r\n] as const;\r\n\r\nexport const LINE_HEIGHT_OPTIONS = [\r\n  { label: '1.4', value: '1.4' },\r\n  { label: '1.5', value: '1.5' },\r\n  { label: '1.6', value: '1.6' },\r\n  { label: '1.7', value: '1.7' },\r\n  { label: '1.8', value: '1.8' },\r\n] as const;\r\n\r\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\r\n  'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\r\n  'Inter': '\"Inter\", sans-serif',\r\n  'Roboto': '\"Roboto\", sans-serif',\r\n  'Open Sans': '\"Open Sans\", sans-serif',\r\n  'Lato': '\"Lato\", sans-serif',\r\n  'Montserrat': '\"Montserrat\", sans-serif',\r\n  'Poppins': '\"Poppins\", sans-serif',\r\n  'Playfair Display': '\"Playfair Display\", serif',\r\n  'Merriweather': '\"Merriweather\", serif',\r\n  'Raleway': '\"Raleway\", sans-serif',\r\n};\r\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.map

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

package/dist/fields/RadiusField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/RadiusField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useMemo } from 'react'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\n\ntype RadiusPresetKey = Extract<keyof typeof borderRadiusPresets, string>\n\ninterface RadiusOptionCard {\n  key: RadiusPresetKey\n  label: string\n  css: Record<string, string>\n}\n\nexport default function RadiusField({ field, ...props }: SelectFieldClientProps) {\n  const { value, setValue } = useField<string>({ path: props.path })\n  const label = typeof field.label === 'string' ? field.label : ''\n\n  const radiusOptions = useMemo<RadiusOptionCard[]>(() => {\n    const entries = Object.entries(borderRadiusPresets) as Array<\n      [RadiusPresetKey, (typeof borderRadiusPresets)[RadiusPresetKey]]\n    >\n    return entries.map(([key, preset]) => ({\n      key,\n      label: preset.label,\n      css: preset.css,\n    }))\n  }, [])\n\n  const fallbackKey: RadiusPresetKey = radiusOptions[2]?.key ?? radiusOptions[0]?.key ?? 'medium'\n  const currentKey =\n    typeof value === 'string' && value in borderRadiusPresets\n      ? (value as RadiusPresetKey)\n      : fallbackKey\n\n  const description =\n    typeof field.admin?.description === 'string'\n      ? field.admin.description\n      : field.admin?.description?.en || field.admin?.description?.cs || null\n\n  return (\n    <div className=\"field-type\">\n      <label className=\"field-label\" htmlFor={props.path}>\n        {label}\n        {field.required && <span className=\"required\">*</span>}\n      </label>\n\n      {description && (\n        <p\n          style={{\n            marginTop: '4px',\n            fontSize: '12px',\n            lineHeight: 1.5,\n            color: 'var(--theme-elevation-600)',\n          }}\n        >\n          {description}\n        </p>\n      )}\n\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',\n          gap: '16px',\n          marginTop: '16px',\n        }}\n      >\n  {radiusOptions.map((option) => {\n          const isSelected = option.key === currentKey\n          const cardRadius =\n            option.css['--radius-large'] ??\n            option.css['--radius-default'] ??\n            option.css['--radius-medium']\n          const chipRadius = option.css['--radius-default'] ?? option.css['--radius-small']\n          const pillRadius = option.css['--radius-xl'] ?? option.css['--radius-large'] ?? '999px'\n\n          return (\n            <button\n              key={option.key}\n              type=\"button\"\n              onClick={() => setValue(option.key)}\n              aria-pressed={isSelected}\n              style={{\n                border: isSelected\n                  ? '2px solid var(--theme-success-500)'\n                  : '1px solid var(--theme-elevation-150)',\n                borderRadius: '14px',\n                backgroundColor: 'var(--theme-elevation-25)',\n                padding: '16px',\n                display: 'grid',\n                gap: '10px',\n                textAlign: 'left',\n                cursor: 'pointer',\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease',\n                boxShadow: isSelected\n                  ? '0 10px 20px rgba(34, 197, 94, 0.18)'\n                  : '0 6px 18px rgba(15, 23, 42, 0.08)',\n                transform: isSelected ? 'translateY(-2px)' : 'translateY(0)',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  fontWeight: 600,\n                  fontSize: '13px',\n                  color: 'var(--theme-elevation-800)',\n                }}\n              >\n                <span>{option.label}</span>\n                  <span style={{ fontSize: '11px', opacity: 0.7 }}>{option.key}</span>\n              </div>\n\n              <div\n                style={{\n                  display: 'grid',\n                  gap: '10px',\n                }}\n              >\n                <div\n                  style={{\n                    display: 'flex',\n                    gap: '8px',\n                    alignItems: 'center',\n                  }}\n                >\n                  <div\n                    style={{\n                      width: '50px',\n                      height: '34px',\n                      backgroundColor: 'var(--theme-elevation-100)',\n                      border: '1px solid var(--theme-elevation-200)',\n                      borderRadius: cardRadius ?? '0',\n                    }}\n                  />\n                  <div\n                    style={{\n                      flex: 1,\n                      height: '14px',\n                      backgroundColor: 'var(--theme-primary-500)',\n                      borderRadius: pillRadius,\n                    }}\n                  />\n                </div>\n\n                <div\n                  style={{\n                    display: 'flex',\n                    gap: '6px',\n                    flexWrap: 'wrap',\n                    fontSize: '11px',\n                    color: 'var(--theme-elevation-600)',\n                  }}\n                >\n                  <span>Card {cardRadius ?? '—'}</span>\n                  <span>Chip {chipRadius ?? '—'}</span>\n                  <span>Pill {pillRadius}</span>\n                </div>\n              </div>\n            </button>\n          )\n        })}\n      </div>\n\n  <input type=\"hidden\" id={props.path} value={currentKey} readOnly />\n    </div>\n  )\n}\n"],"names":["useField","useMemo","borderRadiusPresets","RadiusField","field","props","value","setValue","path","label","radiusOptions","entries","Object","map","key","preset","css","fallbackKey","currentKey","description","admin","en","cs","div","className","htmlFor","required","span","p","style","marginTop","fontSize","lineHeight","color","display","gridTemplateColumns","gap","option","isSelected","cardRadius","chipRadius","pillRadius","button","type","onClick","aria-pressed","border","borderRadius","backgroundColor","padding","textAlign","cursor","transition","boxShadow","transform","alignItems","justifyContent","fontWeight","opacity","width","height","flex","flexWrap","input","id","readOnly"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/RadiusField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport type { SelectFieldClientProps } from 'payload'\r\nimport { useMemo } from 'react'\r\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\r\n\r\ntype RadiusPresetKey = Extract<keyof typeof borderRadiusPresets, string>\r\n\r\ninterface RadiusOptionCard {\r\n  key: RadiusPresetKey\r\n  label: string\r\n  css: Record<string, string>\r\n}\r\n\r\nexport default function RadiusField({ field, ...props }: SelectFieldClientProps) {\r\n  const { value, setValue } = useField<string>({ path: props.path })\r\n  const label = typeof field.label === 'string' ? field.label : ''\r\n\r\n  const radiusOptions = useMemo<RadiusOptionCard[]>(() => {\r\n    const entries = Object.entries(borderRadiusPresets) as Array<\r\n      [RadiusPresetKey, (typeof borderRadiusPresets)[RadiusPresetKey]]\r\n    >\r\n    return entries.map(([key, preset]) => ({\r\n      key,\r\n      label: preset.label,\r\n      css: preset.css,\r\n    }))\r\n  }, [])\r\n\r\n  const fallbackKey: RadiusPresetKey = radiusOptions[2]?.key ?? radiusOptions[0]?.key ?? 'medium'\r\n  const currentKey =\r\n    typeof value === 'string' && value in borderRadiusPresets\r\n      ? (value as RadiusPresetKey)\r\n      : fallbackKey\r\n\r\n  const description =\r\n    typeof field.admin?.description === 'string'\r\n      ? field.admin.description\r\n      : field.admin?.description?.en || field.admin?.description?.cs || null\r\n\r\n  return (\r\n    <div className=\"field-type\">\r\n      <label className=\"field-label\" htmlFor={props.path}>\r\n        {label}\r\n        {field.required && <span className=\"required\">*</span>}\r\n      </label>\r\n\r\n      {description && (\r\n        <p\r\n          style={{\r\n            marginTop: '4px',\r\n            fontSize: '12px',\r\n            lineHeight: 1.5,\r\n            color: 'var(--theme-elevation-600)',\r\n          }}\r\n        >\r\n          {description}\r\n        </p>\r\n      )}\r\n\r\n      <div\r\n        style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',\r\n          gap: '16px',\r\n          marginTop: '16px',\r\n        }}\r\n      >\r\n  {radiusOptions.map((option) => {\r\n          const isSelected = option.key === currentKey\r\n          const cardRadius =\r\n            option.css['--radius-large'] ??\r\n            option.css['--radius-default'] ??\r\n            option.css['--radius-medium']\r\n          const chipRadius = option.css['--radius-default'] ?? option.css['--radius-small']\r\n          const pillRadius = option.css['--radius-xl'] ?? option.css['--radius-large'] ?? '999px'\r\n\r\n          return (\r\n            <button\r\n              key={option.key}\r\n              type=\"button\"\r\n              onClick={() => setValue(option.key)}\r\n              aria-pressed={isSelected}\r\n              style={{\r\n                border: isSelected\r\n                  ? '2px solid var(--theme-success-500)'\r\n                  : '1px solid var(--theme-elevation-150)',\r\n                borderRadius: '14px',\r\n                backgroundColor: 'var(--theme-elevation-25)',\r\n                padding: '16px',\r\n                display: 'grid',\r\n                gap: '10px',\r\n                textAlign: 'left',\r\n                cursor: 'pointer',\r\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease',\r\n                boxShadow: isSelected\r\n                  ? '0 10px 20px rgba(34, 197, 94, 0.18)'\r\n                  : '0 6px 18px rgba(15, 23, 42, 0.08)',\r\n                transform: isSelected ? 'translateY(-2px)' : 'translateY(0)',\r\n              }}\r\n            >\r\n              <div\r\n                style={{\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'space-between',\r\n                  fontWeight: 600,\r\n                  fontSize: '13px',\r\n                  color: 'var(--theme-elevation-800)',\r\n                }}\r\n              >\r\n                <span>{option.label}</span>\r\n                  <span style={{ fontSize: '11px', opacity: 0.7 }}>{option.key}</span>\r\n              </div>\r\n\r\n              <div\r\n                style={{\r\n                  display: 'grid',\r\n                  gap: '10px',\r\n                }}\r\n              >\r\n                <div\r\n                  style={{\r\n                    display: 'flex',\r\n                    gap: '8px',\r\n                    alignItems: 'center',\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      width: '50px',\r\n                      height: '34px',\r\n                      backgroundColor: 'var(--theme-elevation-100)',\r\n                      border: '1px solid var(--theme-elevation-200)',\r\n                      borderRadius: cardRadius ?? '0',\r\n                    }}\r\n                  />\r\n                  <div\r\n                    style={{\r\n                      flex: 1,\r\n                      height: '14px',\r\n                      backgroundColor: 'var(--theme-primary-500)',\r\n                      borderRadius: pillRadius,\r\n                    }}\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  style={{\r\n                    display: 'flex',\r\n                    gap: '6px',\r\n                    flexWrap: 'wrap',\r\n                    fontSize: '11px',\r\n                    color: 'var(--theme-elevation-600)',\r\n                  }}\r\n                >\r\n                  <span>Card {cardRadius ?? '—'}</span>\r\n                  <span>Chip {chipRadius ?? '—'}</span>\r\n                  <span>Pill {pillRadius}</span>\r\n                </div>\r\n              </div>\r\n            </button>\r\n          )\r\n        })}\r\n      </div>\r\n\r\n  <input type=\"hidden\" id={props.path} value={currentKey} readOnly />\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","useMemo","borderRadiusPresets","RadiusField","field","props","value","setValue","path","label","radiusOptions","entries","Object","map","key","preset","css","fallbackKey","currentKey","description","admin","en","cs","div","className","htmlFor","required","span","p","style","marginTop","fontSize","lineHeight","color","display","gridTemplateColumns","gap","option","isSelected","cardRadius","chipRadius","pillRadius","button","type","onClick","aria-pressed","border","borderRadius","backgroundColor","padding","textAlign","cursor","transition","boxShadow","transform","alignItems","justifyContent","fontWeight","opacity","width","height","flex","flexWrap","input","id","readOnly"],"mappings":"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"}

package/dist/fields/ThemeColorPickerField.css

@@ -1,138 +1,138 @@
-.theme-color-picker-field {
-  margin-bottom: 1rem;
-}
-
-.theme-color-picker-field .field-header {
-  margin-bottom: 0.5rem;
-}
-
-.theme-color-picker-field .field-label {
-  display: block;
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--theme-text);
-  margin-bottom: 0.25rem;
-}
-
-.theme-color-picker-field .field-description {
-  font-size: 0.75rem;
-  color: var(--theme-elevation-400);
-  margin-top: 0.25rem;
-}
-
-.theme-color-picker-field .color-picker-container {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.theme-color-picker-field .color-input-wrapper {
-  display: flex;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.theme-color-picker-field .color-input {
-  width: 60px;
-  height: 38px;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 2px;
-}
-
-.theme-color-picker-field .color-input:hover {
-  border-color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .color-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-}
-
-.theme-color-picker-field .text-input {
-  flex: 1;
-  height: 38px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 0.875rem;
-  background: var(--theme-elevation-0);
-  color: var(--theme-text);
-}
-
-.theme-color-picker-field .text-input:hover {
-  border-color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .text-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-  border-color: var(--theme-elevation-500);
-}
-
-.theme-color-picker-field .text-input::placeholder {
-  color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .text-input:invalid {
-  border-color: #ef4444;
-}
-
-.theme-color-picker-field .color-preview {
-  width: 120px;
-  height: 38px;
-  border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.theme-color-picker-field .color-preview .preview-label {
-  font-size: 0.75rem;
-  font-family: monospace;
-  padding: 0.25rem 0.5rem;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 2px;
-  backdrop-filter: blur(4px);
-  color: #000;
-  font-weight: 500;
-}
-
-.theme-color-picker-field .mini-preview {
-  margin-top: 1rem;
-  padding: 1rem;
-  border-radius: 6px;
-  border: 1px solid;
-}
-
-.theme-color-picker-field .mini-preview .preview-card {
-  padding: 1rem;
-  border-radius: 4px;
-  border: 1px solid;
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.theme-color-picker-field .mini-preview .preview-button {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  border: none;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.theme-color-picker-field .mini-preview .preview-button:hover {
-  opacity: 0.9;
-}
-
-.theme-color-picker-field .mini-preview .preview-button.secondary {
-  border: 1px solid currentColor;
-}
+.theme-color-picker-field {
+  margin-bottom: 1rem;
+}
+
+.theme-color-picker-field .field-header {
+  margin-bottom: 0.5rem;
+}
+
+.theme-color-picker-field .field-label {
+  display: block;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--theme-text);
+  margin-bottom: 0.25rem;
+}
+
+.theme-color-picker-field .field-description {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-400);
+  margin-top: 0.25rem;
+}
+
+.theme-color-picker-field .color-picker-container {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.theme-color-picker-field .color-input-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.theme-color-picker-field .color-input {
+  width: 60px;
+  height: 38px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.theme-color-picker-field .color-input:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .color-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+}
+
+.theme-color-picker-field .text-input {
+  flex: 1;
+  height: 38px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.875rem;
+  background: var(--theme-elevation-0);
+  color: var(--theme-text);
+}
+
+.theme-color-picker-field .text-input:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .text-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+  border-color: var(--theme-elevation-500);
+}
+
+.theme-color-picker-field .text-input::placeholder {
+  color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .text-input:invalid {
+  border-color: #ef4444;
+}
+
+.theme-color-picker-field .color-preview {
+  width: 120px;
+  height: 38px;
+  border-radius: 4px;
+  border: 1px solid var(--theme-elevation-200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-color-picker-field .color-preview .preview-label {
+  font-size: 0.75rem;
+  font-family: monospace;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 2px;
+  backdrop-filter: blur(4px);
+  color: #000;
+  font-weight: 500;
+}
+
+.theme-color-picker-field .mini-preview {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 6px;
+  border: 1px solid;
+}
+
+.theme-color-picker-field .mini-preview .preview-card {
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.theme-color-picker-field .mini-preview .preview-button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.theme-color-picker-field .mini-preview .preview-button:hover {
+  opacity: 0.9;
+}
+
+.theme-color-picker-field .mini-preview .preview-button.secondary {
+  border: 1px solid currentColor;
+}

package/dist/fields/ThemeColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { useEffect, useMemo, useState } from 'react'\nimport './ThemeColorPickerField.css'\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\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\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  }, [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  function handleChange(nextValue: string) {\n    setLocalValue(nextValue)\n    setValue(nextValue)\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          <input\n            type=\"color\"\n            value={localValue || '#000000'}\n            onChange={(event) => handleChange(event.target.value)}\n            className=\"color-input\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleChange(event.target.value)}\n            placeholder=\"#000000\"\n            className=\"text-input\"\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\n          />\n        </div>\n\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\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","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField, useFormFields } from '@payloadcms/ui'\r\nimport type { TextFieldClientComponent } from 'payload'\r\nimport { useEffect, useMemo, useState } from 'react'\r\nimport './ThemeColorPickerField.css'\r\n\r\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\r\n  if (typeof value === 'string') {\r\n    return value\r\n  }\r\n\r\n  if (typeof value === 'object' && value !== null) {\r\n    const localized = value as Record<string, unknown>\r\n    const resolved = localized.en ?? localized.cs ?? localized['']\r\n    if (typeof resolved === 'string') {\r\n      return resolved\r\n    }\r\n  }\r\n\r\n  return fallback\r\n}\r\n\r\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\r\n  const { value, setValue } = useField<string>({ path })\r\n  const [localValue, setLocalValue] = useState(value || '')\r\n  const allFields = useFormFields(([fields]) => fields)\r\n\r\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\r\n  const modePrefix = `themeConfiguration.${mode}`\r\n\r\n  useEffect(() => {\r\n    setLocalValue(value || '')\r\n  }, [value])\r\n\r\n  const colorValues = useMemo(() => {\r\n    if (!allFields) {\r\n      return {}\r\n    }\r\n\r\n    const names = [\r\n      'background',\r\n      'foreground',\r\n      'card',\r\n      'cardForeground',\r\n      'popover',\r\n      'popoverForeground',\r\n      'primary',\r\n      'primaryForeground',\r\n      'secondary',\r\n      'secondaryForeground',\r\n      'muted',\r\n      'mutedForeground',\r\n      'accent',\r\n      'accentForeground',\r\n      'destructive',\r\n      'destructiveForeground',\r\n      'border',\r\n      'input',\r\n      'ring',\r\n    ]\r\n\r\n    return names.reduce<Record<string, string>>((accumulator, name) => {\r\n      const fieldState = allFields[`${modePrefix}.${name}`]\r\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\r\n      accumulator[name] = parsedValue ?? ''\r\n      return accumulator\r\n    }, {})\r\n  }, [allFields, modePrefix])\r\n\r\n  function handleChange(nextValue: string) {\r\n    setLocalValue(nextValue)\r\n    setValue(nextValue)\r\n  }\r\n\r\n  const fieldName = path.split('.').pop() || ''\r\n  const label = resolveLocalizedValue(field.label, fieldName)\r\n  const description = resolveLocalizedValue(field.admin?.description, '')\r\n\r\n  return (\r\n    <div className=\"theme-color-picker-field\">\r\n      <div className=\"field-header\">\r\n        <label className=\"field-label\">{label}</label>\r\n        {description && <div className=\"field-description\">{description}</div>}\r\n      </div>\r\n\r\n      <div className=\"color-picker-container\">\r\n        <div className=\"color-input-wrapper\">\r\n          <input\r\n            type=\"color\"\r\n            value={localValue || '#000000'}\r\n            onChange={(event) => handleChange(event.target.value)}\r\n            className=\"color-input\"\r\n          />\r\n          <input\r\n            type=\"text\"\r\n            value={localValue || ''}\r\n            onChange={(event) => handleChange(event.target.value)}\r\n            placeholder=\"#000000\"\r\n            className=\"text-input\"\r\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\r\n          />\r\n        </div>\r\n\r\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\r\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\r\n        </div>\r\n      </div>\r\n\r\n      {(fieldName === 'primary' || fieldName === 'background') && (\r\n        <div\r\n          className=\"mini-preview\"\r\n          style={{\r\n            backgroundColor: colorValues.background || '#ffffff',\r\n            color: colorValues.foreground || '#000000',\r\n            borderColor: colorValues.border || '#e2e8f0',\r\n          }}\r\n        >\r\n          <div\r\n            className=\"preview-card\"\r\n            style={{\r\n              backgroundColor: colorValues.card || '#ffffff',\r\n              color: colorValues.cardForeground || '#000000',\r\n              borderColor: colorValues.border || '#e2e8f0',\r\n            }}\r\n          >\r\n            <button\r\n              className=\"preview-button\"\r\n              style={{\r\n                backgroundColor: colorValues.primary || '#0070f3',\r\n                color: colorValues.primaryForeground || '#ffffff',\r\n              }}\r\n            >\r\n              Primary Button\r\n            </button>\r\n            <button\r\n              className=\"preview-button secondary\"\r\n              style={{\r\n                backgroundColor: colorValues.secondary || '#f1f5f9',\r\n                color: colorValues.secondaryForeground || '#0f172a',\r\n              }}\r\n            >\r\n              Secondary\r\n            </button>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default ThemeColorPickerField\r\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}