@kilivi/payloadcms-theme-management 0.1.13 → 0.1.16

package/dist/fields/ColorPickerField.js.map

@@ -1 +1 @@
-{"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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"}
+{"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":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAEhE,MAAMC,eAAyC;IAC7C,gBAAgB;QAAC;QAAW;QAAW;QAAW;QAAW;QAAW;KAAU;IAClF,iBAAiB;QAAC;QAAW;QAAW;QAAW;QAAW;QAAW;KAAU;IACnF,iBAAiB;QAAC;QAAW;QAAW;QAAW;QAAW;QAAW;KAAU;AACrF;AAEA,SAASC,sBAAsBC,KAAc;IAC3C,IAAI,OAAOA,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,IAAI,OAAOA,UAAU,YAAYA,UAAU,MAAM;QAC/C,MAAMC,YAAYD;QAClB,MAAME,WAAWD,UAAUE,EAAE,IAAIF,UAAUG,EAAE,IAAIH,SAAS,CAAC,GAAG;QAC9D,OAAO,OAAOC,aAAa,WAAWA,WAAW;IACnD;IAEA,OAAO;AACT;AAEA,eAAe,SAASG,iBAAiBC,KAA2B;IAClE,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGF;IACxB,MAAM,EAAEN,QAAQ,SAAS,EAAES,QAAQ,EAAE,GAAGhB,SAAiB;QAAEe;IAAK;IAChE,MAAM,CAACE,cAAcC,gBAAgB,GAAGd,SAAS;IACjD,MAAMe,YAAYhB,OAAuB;IAEzC,MAAMiB,aAAad,sBAAsBQ,MAAMO,KAAK;IACpD,MAAMC,mBAAmBhB,sBAAsBQ,MAAMS,KAAK,EAAEC;IAC5D,MAAMC,cAAcnB,sBAAsBQ,MAAMS,KAAK,EAAEE,gBAAgB;IAEvE,MAAMC,oBAAoBzB,YACxB,CAAC0B;QACCX,SAASW;IACX,GACA;QAACX;KAAS;IAGZ,MAAMY,oBAAoB3B,YACxB,CAAC4B;QACCH,kBAAkBG,MAAMC,MAAM,CAACvB,KAAK;IACtC,GACA;QAACmB;KAAkB;IAGrB,MAAMK,eAAe9B,YAAY;QAC/BiB,gBAAgB,CAACc,WAAa,CAACA;IACjC,GAAG,EAAE;IAEL9B,UAAU;QACR,IAAI,CAACe,cAAc;YACjB;QACF;QAEA,SAASgB,mBAAmBJ,KAAiB;YAC3C,IAAI,CAACV,UAAUe,OAAO,EAAE;gBACtB;YACF;YAEA,IAAI,CAACf,UAAUe,OAAO,CAACC,QAAQ,CAACN,MAAMC,MAAM,GAAW;gBACrDZ,gBAAgB;YAClB;QACF;QAEAkB,SAASC,gBAAgB,CAAC,aAAaJ;QAEvC,OAAO;YACLG,SAASE,mBAAmB,CAAC,aAAaL;QAC5C;IACF,GAAG;QAAChB;KAAa;IAEjB,qBACE,MAACsB;QAAIC,WAAU;QAAgCC,OAAO;YAAEC,UAAU;QAAW;;YAC1EtB,4BACC,MAACC;gBACCsB,SAAS5B;gBACTyB,WAAU;gBACVC,OAAO;oBAAEG,SAAS;oBAASC,cAAc;oBAAOC,UAAU;oBAAQC,YAAY;gBAAI;;oBAEjF3B;oBACAN,MAAMkC,QAAQ,kBACb,KAACC;wBACCT,WAAU;wBACVC,OAAO;4BAAEd,OAAO;4BAA0BuB,YAAY;wBAAM;kCAC7D;;;;YAON5B,kCACC,KAACiB;gBACCC,WAAU;gBACVC,OAAO;oBACLI,cAAc;oBACdC,UAAU;oBACVnB,OAAO;oBACPwB,YAAY;gBACd;0BAEC7B;;0BAIL,MAACiB;gBACCC,WAAU;gBACVC,OAAO;oBAAEG,SAAS;oBAAQQ,YAAY;oBAAUC,KAAK;gBAAM;;kCAE3D,KAACC;wBACCC,MAAK;wBACLC,SAASzB;wBACTS,WAAU;wBACVC,OAAO;4BACLgB,OAAO;4BACPC,QAAQ;4BACRC,cAAc;4BACdC,QAAQ;4BACRC,iBAAiBtD,SAAS;4BAC1BuD,QAAQ;4BACRpB,UAAU;4BACVE,SAAS;4BACTQ,YAAY;4BACZW,gBAAgB;wBAClB;wBACAC,OAAOzD,QAAQ,CAAC,eAAe,EAAEA,OAAO,GAAG;kCAE1C,CAACA,uBAAS,KAAC0C;4BAAKR,OAAO;gCAAEK,UAAU;gCAAQnB,OAAO;4BAAU;sCAAG;;;kCAGlE,KAACsC;wBACCC,IAAInD;wBACJwC,MAAK;wBACLhD,OAAOA,SAAS;wBAChB4D,UAAUvC;wBACVH,aAAaA;wBACbgB,OAAO;4BACL2B,MAAM;4BACNC,SAAS;4BACTT,QAAQ;4BACRD,cAAc;4BACdb,UAAU;4BACVwB,YAAY;4BACZT,iBAAiB;4BACjBlC,OAAO;wBACT;;kCAGF,KAACsC;wBACCV,MAAK;wBACLhD,OAAOA,OAAOgE,WAAW,OAAOhE,QAAQ;wBACxC4D,UAAUvC;wBACVoC,OAAM;wBACNvB,OAAO;4BACLgB,OAAO;4BACPC,QAAQ;4BACRE,QAAQ;4BACRD,cAAc;4BACdG,QAAQ;wBACV;;;;YAIH7C,8BACC,MAACsB;gBACCiC,KAAKrD;gBACLqB,WAAU;gBACVC,OAAO;oBACLC,UAAU;oBACV+B,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,WAAW;oBACXR,SAAS;oBACTT,QAAQ;oBACRD,cAAc;oBACdE,iBAAiB;oBACjBiB,WAAW;oBACXC,WAAW;oBACXC,WAAW;gBACb;;kCAEA,KAACzC;wBACCE,OAAO;4BACLI,cAAc;4BACdC,UAAU;4BACVC,YAAY;4BACZpB,OAAO;wBACT;kCACD;;oBAIAsD,OAAOC,OAAO,CAAC7E,cAAc8E,GAAG,CAAC,CAAC,CAACC,WAAWC,OAAO,iBACpD,MAAC9C;4BAAoBE,OAAO;gCAAEI,cAAc;4BAAO;;8CACjD,KAACN;oCACCE,OAAO;wCACLI,cAAc;wCACdC,UAAU;wCACVC,YAAY;wCACZpB,OAAO;wCACP2D,eAAe;wCACfC,eAAe;oCACjB;8CAECH;;8CAEH,KAAC7C;oCAAIE,OAAO;wCAAEG,SAAS;wCAAQ4C,qBAAqB;wCAAkBnC,KAAK;oCAAM;8CAC9EgC,OAAOF,GAAG,CAAC,CAACxD,sBACX,KAAC2B;4CAECC,MAAK;4CACLC,SAAS,IAAM9B,kBAAkBC;4CACjCc,OAAO;gDACLgB,OAAO;gDACPC,QAAQ;gDACRC,cAAc;gDACdC,QACErD,UAAUoB,QACN,uCACA;gDACNkC,iBAAiBlC;gDACjBmC,QAAQ;gDACR2B,YAAY;gDACZ/C,UAAU;gDACVgD,UAAU;gDACVZ,WACEvE,UAAUoB,QACN,uCACA;4CACR;4CACAqC,OAAO,GAAGrC,MAAM,kBAAkB,CAAC;4CACnCgE,cAAc,CAAC9D;gDACbA,MAAM+D,aAAa,CAACnD,KAAK,CAACoD,SAAS,GAAG;4CACxC;4CACAC,cAAc,CAACjE;gDACbA,MAAM+D,aAAa,CAACnD,KAAK,CAACoD,SAAS,GAAG;4CACxC;sDAEClE,UAAU,2BACT,KAACY;gDACCE,OAAO;oDACLC,UAAU;oDACVqD,OAAO;oDACPnC,QAAQ;oDACRD,cAAc;gDAChB;;2CApCChC;;;2BAhBHyD;kCA6DZ,MAAC7C;wBACCE,OAAO;4BACLoC,WAAW;4BACXmB,YAAY;4BACZC,WAAW;wBACb;;0CAEA,KAAC1D;gCACCE,OAAO;oCACLI,cAAc;oCACdC,UAAU;oCACVC,YAAY;oCACZpB,OAAO;gCACT;0CACD;;0CAGD,MAACY;gCAAIE,OAAO;oCAAEG,SAAS;oCAAQS,KAAK;oCAAOD,YAAY;gCAAS;;kDAC9D,KAACa;wCACCV,MAAK;wCACLhD,OAAOA,OAAOgE,WAAW,OAAOhE,QAAQ;wCACxC4D,UAAUvC;wCACVa,OAAO;4CACLgB,OAAO;4CACPC,QAAQ;4CACRE,QAAQ;4CACRD,cAAc;4CACdG,QAAQ;wCACV;;kDAEF,MAACvB;wCAAIE,OAAO;4CAAEK,UAAU;4CAAQnB,OAAO;4CAAWwB,YAAY;wCAAI;;0DAChE,KAACZ;0DACC,cAAA,KAAC2D;8DAAO;;;0DAEV,KAAC3D;0DAAI;;;;;;;;;;;;AAQrB"}

package/dist/fields/RadiusField.js.map

@@ -1 +1 @@
-{"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":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,OAAO,QAAQ,QAAO;AAC/B,SAASC,mBAAmB,QAAQ,oCAAmC;AAUvE,eAAe,SAASC,YAAY,EAAEC,KAAK,EAAE,GAAGC,OAA+B;IAC7E,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGP,SAAiB;QAAEQ,MAAMH,MAAMG,IAAI;IAAC;IAChE,MAAMC,QAAQ,OAAOL,MAAMK,KAAK,KAAK,WAAWL,MAAMK,KAAK,GAAG;IAE9D,MAAMC,gBAAgBT,QAA4B;QAChD,MAAMU,UAAUC,OAAOD,OAAO,CAACT;QAG/B,OAAOS,QAAQE,GAAG,CAAC,CAAC,CAACC,KAAKC,OAAO,GAAM,CAAA;gBACrCD;gBACAL,OAAOM,OAAON,KAAK;gBACnBO,KAAKD,OAAOC,GAAG;YACjB,CAAA;IACF,GAAG,EAAE;IAEL,MAAMC,cAA+BP,aAAa,CAAC,EAAE,EAAEI,OAAOJ,aAAa,CAAC,EAAE,EAAEI,OAAO;IACvF,MAAMI,aACJ,OAAOZ,UAAU,YAAYA,SAASJ,sBACjCI,QACDW;IAEN,MAAME,cACJ,OAAOf,MAAMgB,KAAK,EAAED,gBAAgB,WAChCf,MAAMgB,KAAK,CAACD,WAAW,GACvBf,MAAMgB,KAAK,EAAED,aAAaE,MAAMjB,MAAMgB,KAAK,EAAED,aAAaG,MAAM;IAEtE,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACf;gBAAMe,WAAU;gBAAcC,SAASpB,MAAMG,IAAI;;oBAC/CC;oBACAL,MAAMsB,QAAQ,kBAAI,KAACC;wBAAKH,WAAU;kCAAW;;;;YAG/CL,6BACC,KAACS;gBACCC,OAAO;oBACLC,WAAW;oBACXC,UAAU;oBACVC,YAAY;oBACZC,OAAO;gBACT;0BAECd;;0BAIL,KAACI;gBACCM,OAAO;oBACLK,SAAS;oBACTC,qBAAqB;oBACrBC,KAAK;oBACLN,WAAW;gBACb;0BAELpB,cAAcG,GAAG,CAAC,CAACwB;oBACZ,MAAMC,aAAaD,OAAOvB,GAAG,KAAKI;oBAClC,MAAMqB,aACJF,OAAOrB,GAAG,CAAC,iBAAiB,IAC5BqB,OAAOrB,GAAG,CAAC,mBAAmB,IAC9BqB,OAAOrB,GAAG,CAAC,kBAAkB;oBAC/B,MAAMwB,aAAaH,OAAOrB,GAAG,CAAC,mBAAmB,IAAIqB,OAAOrB,GAAG,CAAC,iBAAiB;oBACjF,MAAMyB,aAAaJ,OAAOrB,GAAG,CAAC,cAAc,IAAIqB,OAAOrB,GAAG,CAAC,iBAAiB,IAAI;oBAEhF,qBACE,MAAC0B;wBAECC,MAAK;wBACLC,SAAS,IAAMrC,SAAS8B,OAAOvB,GAAG;wBAClC+B,gBAAcP;wBACdT,OAAO;4BACLiB,QAAQR,aACJ,uCACA;4BACJS,cAAc;4BACdC,iBAAiB;4BACjBC,SAAS;4BACTf,SAAS;4BACTE,KAAK;4BACLc,WAAW;4BACXC,QAAQ;4BACRC,YAAY;4BACZC,WAAWf,aACP,wCACA;4BACJgB,WAAWhB,aAAa,qBAAqB;wBAC/C;;0CAEA,MAACf;gCACCM,OAAO;oCACLK,SAAS;oCACTqB,YAAY;oCACZC,gBAAgB;oCAChBC,YAAY;oCACZ1B,UAAU;oCACVE,OAAO;gCACT;;kDAEA,KAACN;kDAAMU,OAAO5B,KAAK;;kDACjB,KAACkB;wCAAKE,OAAO;4CAAEE,UAAU;4CAAQ2B,SAAS;wCAAI;kDAAIrB,OAAOvB,GAAG;;;;0CAGhE,MAACS;gCACCM,OAAO;oCACLK,SAAS;oCACTE,KAAK;gCACP;;kDAEA,MAACb;wCACCM,OAAO;4CACLK,SAAS;4CACTE,KAAK;4CACLmB,YAAY;wCACd;;0DAEA,KAAChC;gDACCM,OAAO;oDACL8B,OAAO;oDACPC,QAAQ;oDACRZ,iBAAiB;oDACjBF,QAAQ;oDACRC,cAAcR,cAAc;gDAC9B;;0DAEF,KAAChB;gDACCM,OAAO;oDACLgC,MAAM;oDACND,QAAQ;oDACRZ,iBAAiB;oDACjBD,cAAcN;gDAChB;;;;kDAIJ,MAAClB;wCACCM,OAAO;4CACLK,SAAS;4CACTE,KAAK;4CACL0B,UAAU;4CACV/B,UAAU;4CACVE,OAAO;wCACT;;0DAEA,MAACN;;oDAAK;oDAAMY,cAAc;;;0DAC1B,MAACZ;;oDAAK;oDAAMa,cAAc;;;0DAC1B,MAACb;;oDAAK;oDAAMc;;;;;;;;uBA/EXJ,OAAOvB,GAAG;gBAoFrB;;0BAGN,KAACiD;gBAAMpB,MAAK;gBAASqB,IAAI3D,MAAMG,IAAI;gBAAEF,OAAOY;gBAAY+C,QAAQ;;;;AAGlE"}
+{"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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"}

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'\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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"}
+{"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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"}

package/dist/fields/ThemePreviewField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\r\nimport type { SelectFieldClientProps } from 'payload'\r\nimport { useCallback, useEffect, useMemo, useRef, type ChangeEvent } from 'react'\r\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\r\nimport type {\r\n  ResolvedTypographyPreview,\r\n  TypographySelection,\r\n} from '../components/typographyPreviewUtils.js'\r\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\r\nimport { defaultThemePresets } from '../index.js'\r\nimport type { ThemeTypographyPreset } from '../presets.js'\r\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.js'\r\n\r\ninterface ColorModeColors {\r\n  background?: string\r\n  foreground?: string\r\n  card?: string\r\n  cardForeground?: string\r\n  popover?: string\r\n  popoverForeground?: string\r\n  primary?: string\r\n  primaryForeground?: string\r\n  secondary?: string\r\n  secondaryForeground?: string\r\n  muted?: string\r\n  mutedForeground?: string\r\n  accent?: string\r\n  accentForeground?: string\r\n  destructive?: string\r\n  destructiveForeground?: string\r\n  border?: string\r\n  input?: string\r\n  ring?: string\r\n}\r\n\r\ninterface ThemePresetDefinition {\r\n  label: string\r\n  lightMode: ColorModeColors\r\n  darkMode: ColorModeColors\r\n  typography?: ThemeTypographyPreset\r\n  borderRadius: 'none' | 'small' | 'medium' | 'large' | 'xl'\r\n}\r\n\r\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\r\n\r\nconst themePresets = defaultThemePresets.reduce<Record<string, ThemePresetDefinition>>(\r\n  (acc, preset) => {\r\n    acc[preset.name] = {\r\n      label: preset.label,\r\n      lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },\r\n      darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },\r\n      typography: preset.typography,\r\n      borderRadius: preset.borderRadius,\r\n    }\r\n    return acc\r\n  },\r\n  {},\r\n)\r\n\r\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\r\n\r\ninterface ModePreviewProps {\r\n  icon: string\r\n  title: string\r\n  colors: ColorModeColors\r\n  typography: ResolvedTypographyPreview\r\n  radius: {\r\n    card: string\r\n    chip: string\r\n    pill: string\r\n  }\r\n}\r\n\r\nfunction ModePreview({ icon, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\r\n  const background = colors.background ?? '#ffffff'\r\n  const foreground = colors.foreground ?? '#0a0a0a'\r\n  const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)'\r\n  const cardBackground = colors.card ?? background\r\n  const cardForeground = colors.cardForeground ?? foreground\r\n  const primary = colors.primary ?? foreground\r\n  const primaryForeground = colors.primaryForeground ?? background\r\n  const secondary = colors.secondary ?? '#f4f4f5'\r\n  const secondaryForeground = colors.secondaryForeground ?? foreground\r\n  const muted = colors.muted ?? secondary\r\n  const mutedForeground = colors.mutedForeground ?? secondaryForeground\r\n  const accent = colors.accent ?? secondary\r\n  const accentForeground = colors.accentForeground ?? secondaryForeground\r\n  const headingFont = typography.headingFont\r\n  const bodyFont = typography.bodyFont\r\n  const baseFontSize = typography.baseFontSize\r\n  const lineHeight = typography.lineHeight\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        display: 'grid',\r\n        gap: '16px',\r\n        padding: '18px',\r\n        borderRadius: '12px',\r\n        backgroundColor: background,\r\n        color: foreground,\r\n        border: `1px solid ${borderColor}`,\r\n        boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',\r\n        fontFamily: bodyFont,\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          fontSize: '12px',\r\n          fontWeight: 600,\r\n          letterSpacing: '0.08em',\r\n          textTransform: 'uppercase',\r\n          opacity: 0.7,\r\n        }}\r\n      >\r\n        <span>\r\n          {icon} {title}\r\n        </span>\r\n        <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>\r\n          {background.toUpperCase()}\r\n        </span>\r\n      </div>\r\n\r\n      <div\r\n        style={{\r\n          backgroundColor: cardBackground,\r\n          color: cardForeground,\r\n          borderRadius: radius.card,\r\n          border: `1px solid ${borderColor}`,\r\n          padding: '16px',\r\n          display: 'flex',\r\n          gap: '12px',\r\n          flexWrap: 'wrap',\r\n        }}\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          style={{\r\n            padding: '10px 18px',\r\n            borderRadius: radius.pill,\r\n            border: 'none',\r\n            cursor: 'pointer',\r\n            fontSize: '12px',\r\n            fontWeight: 600,\r\n            letterSpacing: '0.02em',\r\n            backgroundColor: primary,\r\n            color: primaryForeground,\r\n            boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',\r\n          }}\r\n        >\r\n          Primary Action\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          style={{\r\n            padding: '10px 18px',\r\n            borderRadius: radius.chip,\r\n            border: '1px solid transparent',\r\n            cursor: 'pointer',\r\n            fontSize: '12px',\r\n            fontWeight: 600,\r\n            letterSpacing: '0.02em',\r\n            backgroundColor: secondary,\r\n            color: secondaryForeground,\r\n            boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',\r\n          }}\r\n        >\r\n          Secondary\r\n        </button>\r\n      </div>\r\n\r\n      <div\r\n        style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\r\n          gap: '10px',\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            borderRadius: radius.chip,\r\n            padding: '10px 12px',\r\n            fontSize: '12px',\r\n            fontWeight: 500,\r\n            backgroundColor: muted,\r\n            color: mutedForeground,\r\n          }}\r\n        >\r\n          Muted Card\r\n        </div>\r\n        <div\r\n          style={{\r\n            borderRadius: radius.chip,\r\n            padding: '10px 12px',\r\n            fontSize: '12px',\r\n            fontWeight: 500,\r\n            backgroundColor: accent,\r\n            color: accentForeground,\r\n          }}\r\n        >\r\n          Accent Tag\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        style={{\r\n          display: 'grid',\r\n          gap: '8px',\r\n          borderRadius: '10px',\r\n          border: `1px dashed ${borderColor}`,\r\n          padding: '14px',\r\n          backgroundColor: 'rgba(148, 163, 184, 0.08)',\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            fontFamily: headingFont,\r\n            fontSize: 'clamp(24px, 3vw, 32px)',\r\n            fontWeight: 600,\r\n            lineHeight: 1.2,\r\n          }}\r\n        >\r\n          Nadpis / Heading preview\r\n        </div>\r\n        <p\r\n          style={{\r\n            margin: 0,\r\n            fontFamily: bodyFont,\r\n            fontSize: baseFontSize,\r\n            lineHeight,\r\n            color: foreground,\r\n            opacity: 0.85,\r\n          }}\r\n        >\r\n          Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy.\r\n        </p>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexWrap: 'wrap',\r\n            gap: '10px',\r\n            fontSize: '11px',\r\n            color: 'rgba(15, 23, 42, 0.7)',\r\n          }}\r\n        >\r\n          <span>Body: {typography.bodyLabel}</span>\r\n          <span>Heading: {typography.headingLabel}</span>\r\n          <span>Base size: {baseFontSize}</span>\r\n          <span>Line height: {lineHeight}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\r\n  const { field, path } = props\r\n  const { value: selectedTheme, setValue } = useField<string>({ path })\r\n  const { dispatchFields } = useForm()\r\n  const formFields = useFormFields(([formState]) => formState)\r\n  const hasAppliedInitialPresetRef = useRef(false)\r\n\r\n  const applyPreset = useCallback(\r\n    (presetName: string) => {\r\n      const preset = themePresets[presetName]\r\n      if (!preset) {\r\n        return\r\n      }\r\n\r\n      colorKeys.forEach((key) => {\r\n        const lightValue = preset.lightMode[key]\r\n        const darkValue = preset.darkMode[key]\r\n\r\n        if (lightValue) {\r\n          dispatchFields({\r\n            type: 'UPDATE',\r\n            path: `themeConfiguration.lightMode.${key}`,\r\n            value: lightValue,\r\n          })\r\n        }\r\n\r\n        if (darkValue) {\r\n          dispatchFields({\r\n            type: 'UPDATE',\r\n            path: `themeConfiguration.darkMode.${key}`,\r\n            value: darkValue,\r\n          })\r\n        }\r\n      })\r\n    },\r\n    [dispatchFields],\r\n  )\r\n\r\n  const handleThemeChange = useCallback(\r\n    (event: ChangeEvent<HTMLSelectElement>) => {\r\n      const value = event.target.value\r\n      setValue(value)\r\n\r\n      if (!value) {\r\n        return\r\n      }\r\n\r\n      hasAppliedInitialPresetRef.current = true\r\n      applyPreset(value)\r\n    },\r\n    [applyPreset, setValue],\r\n  )\r\n\r\n  useEffect(() => {\r\n    if (!selectedTheme) {\r\n      return\r\n    }\r\n\r\n    if (themePresets[selectedTheme]) {\r\n      return\r\n    }\r\n\r\n    hasAppliedInitialPresetRef.current = false\r\n    setValue(FALLBACK_THEME)\r\n  }, [selectedTheme, setValue])\r\n\r\n  useEffect(() => {\r\n    if (hasAppliedInitialPresetRef.current) {\r\n      return\r\n    }\r\n\r\n    if (!selectedTheme) {\r\n      return\r\n    }\r\n\r\n    if (!formFields) {\r\n      return\r\n    }\r\n\r\n    const preset = themePresets[selectedTheme]\r\n    if (!preset) {\r\n      hasAppliedInitialPresetRef.current = true\r\n      return\r\n    }\r\n\r\n    const hasExistingValues = colorKeys.some((key) => {\r\n      const lightField = formFields[`themeConfiguration.lightMode.${key}`]\r\n      const darkField = formFields[`themeConfiguration.darkMode.${key}`]\r\n\r\n      const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0\r\n      const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0\r\n\r\n      return lightValue || darkValue\r\n    })\r\n\r\n    if (hasExistingValues) {\r\n      hasAppliedInitialPresetRef.current = true\r\n      return\r\n    }\r\n\r\n    applyPreset(selectedTheme)\r\n    hasAppliedInitialPresetRef.current = true\r\n  }, [selectedTheme, formFields, applyPreset])\r\n\r\n  const lightModeColors = useMemo(() => {\r\n    const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined\r\n\r\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\r\n      const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`]\r\n      const rawValue =\r\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\r\n          ? fieldState.value\r\n          : undefined\r\n\r\n      acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key]\r\n      return acc\r\n    }, {} as ColorModeColors)\r\n  }, [formFields, selectedTheme])\r\n\r\n  const darkModeColors = useMemo(() => {\r\n    const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined\r\n\r\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\r\n      const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`]\r\n      const rawValue =\r\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\r\n          ? fieldState.value\r\n          : undefined\r\n\r\n      acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key]\r\n      return acc\r\n    }, {} as ColorModeColors)\r\n  }, [formFields, selectedTheme])\r\n\r\n  const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined\r\n  const formTypographySelection = useMemo<TypographySelection | null>(() => {\r\n    if (!formFields) {\r\n      return null\r\n    }\r\n\r\n    const getValue = (key: string) => formFields[`themeConfiguration.typography.${key}`]?.value\r\n\r\n    return {\r\n      bodyFont: (getValue('bodyFont') as string | undefined) ?? undefined,\r\n      headingFont: (getValue('headingFont') as string | undefined) ?? undefined,\r\n      bodyFontCustom: (getValue('bodyFontCustom') as string | undefined) ?? undefined,\r\n      headingFontCustom: (getValue('headingFontCustom') as string | undefined) ?? undefined,\r\n      baseFontSize: (getValue('baseFontSize') as string | undefined) ?? undefined,\r\n      lineHeight: (getValue('lineHeight') as string | undefined) ?? undefined,\r\n    }\r\n  }, [formFields])\r\n\r\n  const previewTypography = useMemo<ResolvedTypographyPreview>(() => {\r\n    return resolveTypographyPreview(formTypographySelection, selectedTheme)\r\n  }, [formTypographySelection, selectedTheme])\r\n\r\n  const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value\r\n  const presetRadius = activePreset?.borderRadius ?? 'medium'\r\n  const resolvedBorderRadius = (\r\n    typeof borderRadiusValue === 'string' && borderRadiusValue.length\r\n      ? borderRadiusValue\r\n      : presetRadius\r\n  ) as keyof typeof borderRadiusPresets\r\n  const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium\r\n  const borderRadiusCSS =\r\n    typeof borderRadiusPreset.css === 'string'\r\n      ? { '--radius-default': borderRadiusPreset.css }\r\n      : (borderRadiusPreset.css as Record<string, string>)\r\n  const previewRadius = {\r\n    card: borderRadiusCSS['--radius-large'] ?? '1rem',\r\n    chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',\r\n    pill:\r\n      borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\r\n  }\r\n\r\n  const fieldLabel =\r\n    typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme'\r\n\r\n  return (\r\n    <div style={{ marginBottom: '24px' }}>\r\n      <label\r\n        style={{\r\n          display: 'block',\r\n          marginBottom: '10px',\r\n          fontSize: '13px',\r\n          fontWeight: 600,\r\n          color: 'var(--theme-elevation-800)',\r\n        }}\r\n      >\r\n        {fieldLabel}\r\n      </label>\r\n\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          flexWrap: 'wrap',\r\n          gap: '24px',\r\n          alignItems: 'flex-start',\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            flex: '0 0 320px',\r\n            minWidth: '260px',\r\n            maxWidth: '420px',\r\n            display: 'grid',\r\n            gap: '12px',\r\n          }}\r\n        >\r\n          <select\r\n            value={selectedTheme || ''}\r\n            onChange={handleThemeChange}\r\n            style={{\r\n              width: '100%',\r\n              padding: '12px 14px',\r\n              fontSize: '14px',\r\n              borderRadius: '8px',\r\n              border: '1px solid var(--theme-elevation-250)',\r\n              backgroundColor: 'var(--theme-input-bg)',\r\n              color: 'var(--theme-elevation-800)',\r\n              cursor: 'pointer',\r\n            }}\r\n          >\r\n            <option value=\"\">Select a theme…</option>\r\n            {Object.entries(themePresets).map(([key, preset]) => (\r\n              <option key={key} value={key}>\r\n                {preset.label}\r\n              </option>\r\n            ))}\r\n          </select>\r\n\r\n          {activePreset && (\r\n            <div\r\n              style={{\r\n                padding: '12px',\r\n                borderRadius: '10px',\r\n                border: '1px solid var(--theme-elevation-200)',\r\n                backgroundColor: 'var(--theme-elevation-50)',\r\n                display: 'grid',\r\n                gap: '6px',\r\n                fontSize: '12px',\r\n                color: 'var(--theme-elevation-600)',\r\n              }}\r\n            >\r\n              <div style={{ fontWeight: 600, color: 'var(--theme-elevation-800)' }}>\r\n                {activePreset.label}\r\n              </div>\r\n              <div>Primary color: {activePreset.lightMode.primary}</div>\r\n              <div>Accent color: {activePreset.lightMode.accent}</div>\r\n            </div>\r\n          )}\r\n\r\n          {field.admin?.description && (\r\n            <div\r\n              style={{\r\n                fontSize: '12px',\r\n                color: 'var(--theme-elevation-600)',\r\n                lineHeight: 1.5,\r\n              }}\r\n            >\r\n              {typeof field.admin.description === 'string'\r\n                ? field.admin.description\r\n                : field.admin.description?.en || field.admin.description?.cs || ''}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        <div\r\n          style={{\r\n            flex: '1 1 420px',\r\n            minWidth: '320px',\r\n            position: 'sticky',\r\n            top: '96px',\r\n            alignSelf: 'flex-start',\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              width: '100%',\r\n              borderRadius: '16px',\r\n              border: '1px solid var(--theme-elevation-200)',\r\n              backgroundColor: 'var(--theme-elevation-25)',\r\n              padding: '20px',\r\n              display: 'grid',\r\n              gap: '18px',\r\n              maxHeight: 'calc(100vh - 140px)',\r\n              overflowY: 'auto',\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>🎨 Live Preview</span>\r\n              <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\r\n                {activePreset ? activePreset.label : 'Custom palette'}\r\n              </span>\r\n            </div>\r\n\r\n            <div\r\n              style={{\r\n                display: 'grid',\r\n                gap: '16px',\r\n              }}\r\n            >\r\n              <ModePreview\r\n                icon=\"☀️\"\r\n                title=\"Light Mode\"\r\n                colors={lightModeColors}\r\n                typography={previewTypography}\r\n                radius={previewRadius}\r\n              />\r\n              <ModePreview\r\n                icon=\"🌙\"\r\n                title=\"Dark Mode\"\r\n                colors={darkModeColors}\r\n                typography={previewTypography}\r\n                radius={previewRadius}\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","useForm","useFormFields","useCallback","useEffect","useMemo","useRef","borderRadiusPresets","resolveTypographyPreview","defaultThemePresets","darkModeDefaults","lightModeDefaults","FALLBACK_THEME","name","themePresets","reduce","acc","preset","label","lightMode","darkMode","typography","borderRadius","colorKeys","Object","keys","ModePreview","icon","title","colors","radius","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","style","display","gap","padding","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","toUpperCase","flexWrap","button","type","pill","cursor","chip","gridTemplateColumns","p","margin","bodyLabel","headingLabel","ThemePreviewField","props","field","path","value","selectedTheme","setValue","dispatchFields","formFields","formState","hasAppliedInitialPresetRef","applyPreset","presetName","forEach","key","lightValue","darkValue","handleThemeChange","event","target","current","hasExistingValues","some","lightField","darkField","trim","length","lightModeColors","presetLightMode","undefined","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","fieldLabel","en","cs","marginBottom","flex","minWidth","maxWidth","select","onChange","width","option","entries","map","admin","description","position","top","alignSelf","maxHeight","overflowY"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useRef, type ChangeEvent } from 'react'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\nimport type {\n  ResolvedTypographyPreview,\n  TypographySelection,\n} from '../components/typographyPreviewUtils.js'\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\nimport { defaultThemePresets } from '../index.js'\nimport type { ThemeTypographyPreset } from '../presets.js'\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.js'\n\ninterface ColorModeColors {\n  background?: string\n  foreground?: string\n  card?: string\n  cardForeground?: string\n  popover?: string\n  popoverForeground?: string\n  primary?: string\n  primaryForeground?: string\n  secondary?: string\n  secondaryForeground?: string\n  muted?: string\n  mutedForeground?: string\n  accent?: string\n  accentForeground?: string\n  destructive?: string\n  destructiveForeground?: string\n  border?: string\n  input?: string\n  ring?: string\n}\n\ninterface ThemePresetDefinition {\n  label: string\n  lightMode: ColorModeColors\n  darkMode: ColorModeColors\n  typography?: ThemeTypographyPreset\n  borderRadius: 'none' | 'small' | 'medium' | 'large' | 'xl'\n}\n\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\n\nconst themePresets = defaultThemePresets.reduce<Record<string, ThemePresetDefinition>>(\n  (acc, preset) => {\n    acc[preset.name] = {\n      label: preset.label,\n      lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },\n      darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },\n      typography: preset.typography,\n      borderRadius: preset.borderRadius,\n    }\n    return acc\n  },\n  {},\n)\n\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\n\ninterface ModePreviewProps {\n  icon: string\n  title: string\n  colors: ColorModeColors\n  typography: ResolvedTypographyPreview\n  radius: {\n    card: string\n    chip: string\n    pill: string\n  }\n}\n\nfunction ModePreview({ icon, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\n  const background = colors.background ?? '#ffffff'\n  const foreground = colors.foreground ?? '#0a0a0a'\n  const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)'\n  const cardBackground = colors.card ?? background\n  const cardForeground = colors.cardForeground ?? foreground\n  const primary = colors.primary ?? foreground\n  const primaryForeground = colors.primaryForeground ?? background\n  const secondary = colors.secondary ?? '#f4f4f5'\n  const secondaryForeground = colors.secondaryForeground ?? foreground\n  const muted = colors.muted ?? secondary\n  const mutedForeground = colors.mutedForeground ?? secondaryForeground\n  const accent = colors.accent ?? secondary\n  const accentForeground = colors.accentForeground ?? secondaryForeground\n  const headingFont = typography.headingFont\n  const bodyFont = typography.bodyFont\n  const baseFontSize = typography.baseFontSize\n  const lineHeight = typography.lineHeight\n\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gap: '16px',\n        padding: '18px',\n        borderRadius: '12px',\n        backgroundColor: background,\n        color: foreground,\n        border: `1px solid ${borderColor}`,\n        boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',\n        fontFamily: bodyFont,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.08em',\n          textTransform: 'uppercase',\n          opacity: 0.7,\n        }}\n      >\n        <span>\n          {icon} {title}\n        </span>\n        <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>\n          {background.toUpperCase()}\n        </span>\n      </div>\n\n      <div\n        style={{\n          backgroundColor: cardBackground,\n          color: cardForeground,\n          borderRadius: radius.card,\n          border: `1px solid ${borderColor}`,\n          padding: '16px',\n          display: 'flex',\n          gap: '12px',\n          flexWrap: 'wrap',\n        }}\n      >\n        <button\n          type=\"button\"\n          style={{\n            padding: '10px 18px',\n            borderRadius: radius.pill,\n            border: 'none',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: 600,\n            letterSpacing: '0.02em',\n            backgroundColor: primary,\n            color: primaryForeground,\n            boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',\n          }}\n        >\n          Primary Action\n        </button>\n        <button\n          type=\"button\"\n          style={{\n            padding: '10px 18px',\n            borderRadius: radius.chip,\n            border: '1px solid transparent',\n            cursor: 'pointer',\n            fontSize: '12px',\n            fontWeight: 600,\n            letterSpacing: '0.02em',\n            backgroundColor: secondary,\n            color: secondaryForeground,\n            boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',\n          }}\n        >\n          Secondary\n        </button>\n      </div>\n\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\n          gap: '10px',\n        }}\n      >\n        <div\n          style={{\n            borderRadius: radius.chip,\n            padding: '10px 12px',\n            fontSize: '12px',\n            fontWeight: 500,\n            backgroundColor: muted,\n            color: mutedForeground,\n          }}\n        >\n          Muted Card\n        </div>\n        <div\n          style={{\n            borderRadius: radius.chip,\n            padding: '10px 12px',\n            fontSize: '12px',\n            fontWeight: 500,\n            backgroundColor: accent,\n            color: accentForeground,\n          }}\n        >\n          Accent Tag\n        </div>\n      </div>\n\n      <div\n        style={{\n          display: 'grid',\n          gap: '8px',\n          borderRadius: '10px',\n          border: `1px dashed ${borderColor}`,\n          padding: '14px',\n          backgroundColor: 'rgba(148, 163, 184, 0.08)',\n        }}\n      >\n        <div\n          style={{\n            fontFamily: headingFont,\n            fontSize: 'clamp(24px, 3vw, 32px)',\n            fontWeight: 600,\n            lineHeight: 1.2,\n          }}\n        >\n          Nadpis / Heading preview\n        </div>\n        <p\n          style={{\n            margin: 0,\n            fontFamily: bodyFont,\n            fontSize: baseFontSize,\n            lineHeight,\n            color: foreground,\n            opacity: 0.85,\n          }}\n        >\n          Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy.\n        </p>\n        <div\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: '10px',\n            fontSize: '11px',\n            color: 'rgba(15, 23, 42, 0.7)',\n          }}\n        >\n          <span>Body: {typography.bodyLabel}</span>\n          <span>Heading: {typography.headingLabel}</span>\n          <span>Base size: {baseFontSize}</span>\n          <span>Line height: {lineHeight}</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\n  const { field, path } = props\n  const { value: selectedTheme, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const formFields = useFormFields(([formState]) => formState)\n  const hasAppliedInitialPresetRef = useRef(false)\n\n  const applyPreset = useCallback(\n    (presetName: string) => {\n      const preset = themePresets[presetName]\n      if (!preset) {\n        return\n      }\n\n      colorKeys.forEach((key) => {\n        const lightValue = preset.lightMode[key]\n        const darkValue = preset.darkMode[key]\n\n        if (lightValue) {\n          dispatchFields({\n            type: 'UPDATE',\n            path: `themeConfiguration.lightMode.${key}`,\n            value: lightValue,\n          })\n        }\n\n        if (darkValue) {\n          dispatchFields({\n            type: 'UPDATE',\n            path: `themeConfiguration.darkMode.${key}`,\n            value: darkValue,\n          })\n        }\n      })\n    },\n    [dispatchFields],\n  )\n\n  const handleThemeChange = useCallback(\n    (event: ChangeEvent<HTMLSelectElement>) => {\n      const value = event.target.value\n      setValue(value)\n\n      if (!value) {\n        return\n      }\n\n      hasAppliedInitialPresetRef.current = true\n      applyPreset(value)\n    },\n    [applyPreset, setValue],\n  )\n\n  useEffect(() => {\n    if (!selectedTheme) {\n      return\n    }\n\n    if (themePresets[selectedTheme]) {\n      return\n    }\n\n    hasAppliedInitialPresetRef.current = false\n    setValue(FALLBACK_THEME)\n  }, [selectedTheme, setValue])\n\n  useEffect(() => {\n    if (hasAppliedInitialPresetRef.current) {\n      return\n    }\n\n    if (!selectedTheme) {\n      return\n    }\n\n    if (!formFields) {\n      return\n    }\n\n    const preset = themePresets[selectedTheme]\n    if (!preset) {\n      hasAppliedInitialPresetRef.current = true\n      return\n    }\n\n    const hasExistingValues = colorKeys.some((key) => {\n      const lightField = formFields[`themeConfiguration.lightMode.${key}`]\n      const darkField = formFields[`themeConfiguration.darkMode.${key}`]\n\n      const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0\n      const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0\n\n      return lightValue || darkValue\n    })\n\n    if (hasExistingValues) {\n      hasAppliedInitialPresetRef.current = true\n      return\n    }\n\n    applyPreset(selectedTheme)\n    hasAppliedInitialPresetRef.current = true\n  }, [selectedTheme, formFields, applyPreset])\n\n  const lightModeColors = useMemo(() => {\n    const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined\n\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\n      const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`]\n      const rawValue =\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n          ? fieldState.value\n          : undefined\n\n      acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key]\n      return acc\n    }, {} as ColorModeColors)\n  }, [formFields, selectedTheme])\n\n  const darkModeColors = useMemo(() => {\n    const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined\n\n    return colorKeys.reduce<ColorModeColors>((acc, key) => {\n      const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`]\n      const rawValue =\n        typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n          ? fieldState.value\n          : undefined\n\n      acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key]\n      return acc\n    }, {} as ColorModeColors)\n  }, [formFields, selectedTheme])\n\n  const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined\n  const formTypographySelection = useMemo<TypographySelection | null>(() => {\n    if (!formFields) {\n      return null\n    }\n\n    const getValue = (key: string) => formFields[`themeConfiguration.typography.${key}`]?.value\n\n    return {\n      bodyFont: (getValue('bodyFont') as string | undefined) ?? undefined,\n      headingFont: (getValue('headingFont') as string | undefined) ?? undefined,\n      bodyFontCustom: (getValue('bodyFontCustom') as string | undefined) ?? undefined,\n      headingFontCustom: (getValue('headingFontCustom') as string | undefined) ?? undefined,\n      baseFontSize: (getValue('baseFontSize') as string | undefined) ?? undefined,\n      lineHeight: (getValue('lineHeight') as string | undefined) ?? undefined,\n    }\n  }, [formFields])\n\n  const previewTypography = useMemo<ResolvedTypographyPreview>(() => {\n    return resolveTypographyPreview(formTypographySelection, selectedTheme)\n  }, [formTypographySelection, selectedTheme])\n\n  const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value\n  const presetRadius = activePreset?.borderRadius ?? 'medium'\n  const resolvedBorderRadius = (\n    typeof borderRadiusValue === 'string' && borderRadiusValue.length\n      ? borderRadiusValue\n      : presetRadius\n  ) as keyof typeof borderRadiusPresets\n  const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium\n  const borderRadiusCSS =\n    typeof borderRadiusPreset.css === 'string'\n      ? { '--radius-default': borderRadiusPreset.css }\n      : (borderRadiusPreset.css as Record<string, string>)\n  const previewRadius = {\n    card: borderRadiusCSS['--radius-large'] ?? '1rem',\n    chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',\n    pill:\n      borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\n  }\n\n  const fieldLabel =\n    typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme'\n\n  return (\n    <div style={{ marginBottom: '24px' }}>\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '10px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {fieldLabel}\n      </label>\n\n      <div\n        style={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '24px',\n          alignItems: 'flex-start',\n        }}\n      >\n        <div\n          style={{\n            flex: '0 0 320px',\n            minWidth: '260px',\n            maxWidth: '420px',\n            display: 'grid',\n            gap: '12px',\n          }}\n        >\n          <select\n            value={selectedTheme || ''}\n            onChange={handleThemeChange}\n            style={{\n              width: '100%',\n              padding: '12px 14px',\n              fontSize: '14px',\n              borderRadius: '8px',\n              border: '1px solid var(--theme-elevation-250)',\n              backgroundColor: 'var(--theme-input-bg)',\n              color: 'var(--theme-elevation-800)',\n              cursor: 'pointer',\n            }}\n          >\n            <option value=\"\">Select a theme…</option>\n            {Object.entries(themePresets).map(([key, preset]) => (\n              <option key={key} value={key}>\n                {preset.label}\n              </option>\n            ))}\n          </select>\n\n          {activePreset && (\n            <div\n              style={{\n                padding: '12px',\n                borderRadius: '10px',\n                border: '1px solid var(--theme-elevation-200)',\n                backgroundColor: 'var(--theme-elevation-50)',\n                display: 'grid',\n                gap: '6px',\n                fontSize: '12px',\n                color: 'var(--theme-elevation-600)',\n              }}\n            >\n              <div style={{ fontWeight: 600, color: 'var(--theme-elevation-800)' }}>\n                {activePreset.label}\n              </div>\n              <div>Primary color: {activePreset.lightMode.primary}</div>\n              <div>Accent color: {activePreset.lightMode.accent}</div>\n            </div>\n          )}\n\n          {field.admin?.description && (\n            <div\n              style={{\n                fontSize: '12px',\n                color: 'var(--theme-elevation-600)',\n                lineHeight: 1.5,\n              }}\n            >\n              {typeof field.admin.description === 'string'\n                ? field.admin.description\n                : field.admin.description?.en || field.admin.description?.cs || ''}\n            </div>\n          )}\n        </div>\n\n        <div\n          style={{\n            flex: '1 1 420px',\n            minWidth: '320px',\n            position: 'sticky',\n            top: '96px',\n            alignSelf: 'flex-start',\n          }}\n        >\n          <div\n            style={{\n              width: '100%',\n              borderRadius: '16px',\n              border: '1px solid var(--theme-elevation-200)',\n              backgroundColor: 'var(--theme-elevation-25)',\n              padding: '20px',\n              display: 'grid',\n              gap: '18px',\n              maxHeight: 'calc(100vh - 140px)',\n              overflowY: 'auto',\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>🎨 Live Preview</span>\n              <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\n                {activePreset ? activePreset.label : 'Custom palette'}\n              </span>\n            </div>\n\n            <div\n              style={{\n                display: 'grid',\n                gap: '16px',\n              }}\n            >\n              <ModePreview\n                icon=\"☀️\"\n                title=\"Light Mode\"\n                colors={lightModeColors}\n                typography={previewTypography}\n                radius={previewRadius}\n              />\n              <ModePreview\n                icon=\"🌙\"\n                title=\"Dark Mode\"\n                colors={darkModeColors}\n                typography={previewTypography}\n                radius={previewRadius}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["useField","useForm","useFormFields","useCallback","useEffect","useMemo","useRef","borderRadiusPresets","resolveTypographyPreview","defaultThemePresets","darkModeDefaults","lightModeDefaults","FALLBACK_THEME","name","themePresets","reduce","acc","preset","label","lightMode","darkMode","typography","borderRadius","colorKeys","Object","keys","ModePreview","icon","title","colors","radius","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","style","display","gap","padding","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","toUpperCase","flexWrap","button","type","pill","cursor","chip","gridTemplateColumns","p","margin","bodyLabel","headingLabel","ThemePreviewField","props","field","path","value","selectedTheme","setValue","dispatchFields","formFields","formState","hasAppliedInitialPresetRef","applyPreset","presetName","forEach","key","lightValue","darkValue","handleThemeChange","event","target","current","hasExistingValues","some","lightField","darkField","trim","length","lightModeColors","presetLightMode","undefined","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","fieldLabel","en","cs","marginBottom","flex","minWidth","maxWidth","select","onChange","width","option","entries","map","admin","description","position","top","alignSelf","maxHeight","overflowY"],"mappings":"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"}