@kilivi/payloadcms-theme-management 0.5.7 → 0.5.9

package/dist/components/InitTheme.d.ts

@@ -7,6 +7,9 @@ import React from 'react';
  * - User preference from localStorage
  * - Admin-controlled color mode toggle
  * - Auto mode with system preference fallback
+ *
+ * Note: Uses Next.js Script component with beforeInteractive strategy
+ * to ensure theme is applied before React hydration, preventing flash of unstyled content.
  */
 export declare const InitTheme: React.FC;
 //# sourceMappingURL=InitTheme.d.ts.map

package/dist/components/InitTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InitTheme.d.ts","sourceRoot":"","sources":["../../src/components/InitTheme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EA2D7B,CAAA"}
+{"version":3,"file":"InitTheme.d.ts","sourceRoot":"","sources":["../../src/components/InitTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAyD7B,CAAA"}

package/dist/components/InitTheme.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Script from 'next/script';
 import React from 'react';
+import Script from 'next/script';
 import { modeLocalStorageKey } from '../providers/Theme/shared.js';
 /**
  * Client-side theme initialization script
@@ -10,10 +10,11 @@ import { modeLocalStorageKey } from '../providers/Theme/shared.js';
  * - User preference from localStorage
  * - Admin-controlled color mode toggle
  * - Auto mode with system preference fallback
+ *
+ * Note: Uses Next.js Script component with beforeInteractive strategy
+ * to ensure theme is applied before React hydration, preventing flash of unstyled content.
  */ export const InitTheme = ()=>{
-    return /*#__PURE__*/ _jsx(Script, {
-        dangerouslySetInnerHTML: {
-            __html: `
+    const scriptContent = `
   (function () {
     function getImplicitModePreference() {
       var mediaQuery = '(prefers-color-scheme: dark)'
@@ -62,10 +63,11 @@ import { modeLocalStorageKey } from '../providers/Theme/shared.js';
       })
     }
   })();
-  `
-        },
+  `;
+    return /*#__PURE__*/ _jsx(Script, {
         id: "theme-script",
-        strategy: "beforeInteractive"
+        strategy: "beforeInteractive",
+        children: scriptContent
     });
 };
 

package/dist/components/InitTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/InitTheme.tsx"],"sourcesContent":["import Script from 'next/script'\nimport React from 'react'\nimport { modeLocalStorageKey } from '../providers/Theme/shared.js'\n\n/**\n * Client-side theme initialization script\n * Prevents FOUC by applying theme mode before React hydration\n * Handles:\n * - System preference detection\n * - User preference from localStorage\n * - Admin-controlled color mode toggle\n * - Auto mode with system preference fallback\n */\nexport const InitTheme: React.FC = () => {\n  return (\n    <Script\n      dangerouslySetInnerHTML={{\n        __html: `\n  (function () {\n    function getImplicitModePreference() {\n      var mediaQuery = '(prefers-color-scheme: dark)'\n      var mql = window.matchMedia(mediaQuery)\n      return mql.matches ? 'dark' : 'light'\n    }\n\n    function modeIsValid(mode) {\n      return mode === 'light' || mode === 'dark'\n    }\n\n    // Get current mode from server-set attribute\n    var currentMode = document.documentElement.getAttribute('data-theme-mode')\n    var allowToggle = document.documentElement.getAttribute('data-allow-color-mode-toggle') === 'true'\n    \n    // Only override mode if admin allows toggle and user has preference\n    if (allowToggle) {\n      var modePreference = window.localStorage.getItem('${modeLocalStorageKey}')\n      \n      if (modeIsValid(modePreference)) {\n        currentMode = modePreference\n      } else if (currentMode === 'auto') {\n        currentMode = getImplicitModePreference()\n      }\n    } else if (currentMode === 'auto') {\n      // Admin set auto mode - use system preference\n      currentMode = getImplicitModePreference()\n    }\n\n    // Apply the determined mode\n    if (currentMode && modeIsValid(currentMode)) {\n      document.documentElement.setAttribute('data-theme-mode', currentMode)\n    }\n\n    // Listen for system theme changes only when needed\n    if (allowToggle || currentMode === 'auto') {\n      var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n      mediaQuery.addEventListener('change', function(e) {\n        var shouldUpdate = allowToggle \n          ? !window.localStorage.getItem('${modeLocalStorageKey}')\n          : document.documentElement.getAttribute('data-theme-mode') === 'auto'\n        \n        if (shouldUpdate) {\n          document.documentElement.setAttribute('data-theme-mode', e.matches ? 'dark' : 'light')\n        }\n      })\n    }\n  })();\n  `,\n      }}\n      id=\"theme-script\"\n      strategy=\"beforeInteractive\"\n    />\n  )\n}\n"],"names":["Script","React","modeLocalStorageKey","InitTheme","dangerouslySetInnerHTML","__html","id","strategy"],"mappings":";AAAA,OAAOA,YAAY,cAAa;AAChC,OAAOC,WAAW,QAAO;AACzB,SAASC,mBAAmB,QAAQ,+BAA8B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAsB;IACjC,qBACE,KAACH;QACCI,yBAAyB;YACvBC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;wDAkBuC,EAAEH,oBAAoB;;;;;;;;;;;;;;;;;;;;;;0CAsBpC,EAAEA,oBAAoB;;;;;;;;;EAS9D,CAAC;QACG;QACAI,IAAG;QACHC,UAAS;;AAGf,EAAC"}
+{"version":3,"sources":["../../src/components/InitTheme.tsx"],"sourcesContent":["import React from 'react'\nimport Script from 'next/script'\nimport { modeLocalStorageKey } from '../providers/Theme/shared.js'\n\n/**\n * Client-side theme initialization script\n * Prevents FOUC by applying theme mode before React hydration\n * Handles:\n * - System preference detection\n * - User preference from localStorage\n * - Admin-controlled color mode toggle\n * - Auto mode with system preference fallback\n *\n * Note: Uses Next.js Script component with beforeInteractive strategy\n * to ensure theme is applied before React hydration, preventing flash of unstyled content.\n */\nexport const InitTheme: React.FC = () => {\n  const scriptContent = `\n  (function () {\n    function getImplicitModePreference() {\n      var mediaQuery = '(prefers-color-scheme: dark)'\n      var mql = window.matchMedia(mediaQuery)\n      return mql.matches ? 'dark' : 'light'\n    }\n\n    function modeIsValid(mode) {\n      return mode === 'light' || mode === 'dark'\n    }\n\n    // Get current mode from server-set attribute\n    var currentMode = document.documentElement.getAttribute('data-theme-mode')\n    var allowToggle = document.documentElement.getAttribute('data-allow-color-mode-toggle') === 'true'\n    \n    // Only override mode if admin allows toggle and user has preference\n    if (allowToggle) {\n      var modePreference = window.localStorage.getItem('${modeLocalStorageKey}')\n      \n      if (modeIsValid(modePreference)) {\n        currentMode = modePreference\n      } else if (currentMode === 'auto') {\n        currentMode = getImplicitModePreference()\n      }\n    } else if (currentMode === 'auto') {\n      // Admin set auto mode - use system preference\n      currentMode = getImplicitModePreference()\n    }\n\n    // Apply the determined mode\n    if (currentMode && modeIsValid(currentMode)) {\n      document.documentElement.setAttribute('data-theme-mode', currentMode)\n    }\n\n    // Listen for system theme changes only when needed\n    if (allowToggle || currentMode === 'auto') {\n      var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n      mediaQuery.addEventListener('change', function(e) {\n        var shouldUpdate = allowToggle \n          ? !window.localStorage.getItem('${modeLocalStorageKey}')\n          : document.documentElement.getAttribute('data-theme-mode') === 'auto'\n        \n        if (shouldUpdate) {\n          document.documentElement.setAttribute('data-theme-mode', e.matches ? 'dark' : 'light')\n        }\n      })\n    }\n  })();\n  `\n\n  return (\n    <Script id=\"theme-script\" strategy=\"beforeInteractive\">\n      {scriptContent}\n    </Script>\n  )\n}\n"],"names":["React","Script","modeLocalStorageKey","InitTheme","scriptContent","id","strategy"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AACzB,OAAOC,YAAY,cAAa;AAChC,SAASC,mBAAmB,QAAQ,+BAA8B;AAElE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAsB;IACjC,MAAMC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;wDAkB+B,EAAEF,oBAAoB;;;;;;;;;;;;;;;;;;;;;;0CAsBpC,EAAEA,oBAAoB;;;;;;;;;EAS9D,CAAC;IAED,qBACE,KAACD;QAAOI,IAAG;QAAeC,UAAS;kBAChCF;;AAGP,EAAC"}

package/dist/fields/FontSelectField.js

@@ -124,7 +124,7 @@ const FontSelectField = ({ field, path })=>{
                         type: "button",
                         onClick: ()=>handleSelect(option.value),
                         style: {
-                            width: '100%',
+                            width: '250px',
                             padding: '12px 14px',
                             border: 'none',
                             backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',

package/dist/fields/FontSelectField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\n\ninterface FontOption {\n  label: string\n  value: string\n  fontFamily?: string\n  category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [isOpen, setIsOpen] = useState(false)\n\n  const options = (field.options as FontOption[]) || []\n  const selectedOption = options.find((opt) => opt.value === value)\n\n  const handleSelect = (optionValue: string) => {\n    setValue(optionValue)\n    setIsOpen(false)\n  }\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement\n      if (!target.closest('.font-select-container')) {\n        setIsOpen(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen])\n\n  const label =\n    typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font'\n\n  return (\n    <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {label}\n      </label>\n\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        style={{\n          width: '100%',\n          padding: '10px 14px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          textAlign: 'left',\n          cursor: 'pointer',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          fontSize: '14px',\n          fontFamily: selectedOption?.fontFamily || 'inherit',\n          transition: 'border-color 0.2s ease',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n        }}\n      >\n        <span style={{ flex: 1 }}>{selectedOption?.label || 'Select font...'}</span>\n        <svg\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          style={{\n            transition: 'transform 0.2s ease',\n            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n          }}\n        >\n          <path\n            d=\"M3 4.5L6 7.5L9 4.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            marginTop: '4px',\n            maxHeight: '280px',\n            overflowY: 'auto',\n            backgroundColor: 'var(--theme-elevation-0)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '8px',\n            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n            zIndex: 1000,\n          }}\n        >\n          {options.map((option) => {\n            const isSelected = option.value === value\n\n            let fontFamily = option.fontFamily\n            if (!fontFamily) {\n              if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n              else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n              else if (option.category === 'monospace') fontFamily = 'monospace'\n              else fontFamily = 'inherit'\n            }\n\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => handleSelect(option.value)}\n                style={{\n                  width: '100%',\n                  padding: '12px 14px',\n                  border: 'none',\n                  backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n                  color: 'var(--theme-elevation-800)',\n                  textAlign: 'left',\n                  cursor: 'pointer',\n                  fontSize: '14px',\n                  fontFamily,\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: '4px',\n                  transition: 'background-color 0.15s ease',\n                }}\n                onMouseEnter={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n                  }\n                }}\n                onMouseLeave={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'transparent'\n                  }\n                }}\n              >\n                <div\n                  style={{\n                    fontWeight: isSelected ? 600 : 500,\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: '8px',\n                  }}\n                >\n                  {isSelected && (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <path\n                        d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n                        stroke=\"var(--theme-elevation-500)\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  )}\n                  {option.label}\n                </div>\n                <div\n                  style={{\n                    fontSize: '16px',\n                    color: 'var(--theme-elevation-600)',\n                    fontStyle:\n                      option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n                  }}\n                >\n                  {(() => {\n                    if (option.value === 'preset') return 'Use theme preset font'\n                    if (option.value === 'custom') return 'Specify custom font below'\n                    return 'The quick brown fox jumps over the lazy dog'\n                  })()}\n                </div>\n              </button>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\n\ninterface FontOption {\n  label: string\n  value: string\n  fontFamily?: string\n  category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [isOpen, setIsOpen] = useState(false)\n\n  const options = (field.options as FontOption[]) || []\n  const selectedOption = options.find((opt) => opt.value === value)\n\n  const handleSelect = (optionValue: string) => {\n    setValue(optionValue)\n    setIsOpen(false)\n  }\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement\n      if (!target.closest('.font-select-container')) {\n        setIsOpen(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen])\n\n  const label =\n    typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font'\n\n  return (\n    <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {label}\n      </label>\n\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        style={{\n          width: '100%',\n          padding: '10px 14px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          textAlign: 'left',\n          cursor: 'pointer',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          fontSize: '14px',\n          fontFamily: selectedOption?.fontFamily || 'inherit',\n          transition: 'border-color 0.2s ease',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n        }}\n      >\n        <span style={{ flex: 1 }}>{selectedOption?.label || 'Select font...'}</span>\n        <svg\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          style={{\n            transition: 'transform 0.2s ease',\n            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n          }}\n        >\n          <path\n            d=\"M3 4.5L6 7.5L9 4.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            marginTop: '4px',\n            maxHeight: '280px',\n            overflowY: 'auto',\n            backgroundColor: 'var(--theme-elevation-0)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '8px',\n            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n            zIndex: 1000,\n          }}\n        >\n          {options.map((option) => {\n            const isSelected = option.value === value\n\n            let fontFamily = option.fontFamily\n            if (!fontFamily) {\n              if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n              else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n              else if (option.category === 'monospace') fontFamily = 'monospace'\n              else fontFamily = 'inherit'\n            }\n\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => handleSelect(option.value)}\n                style={{\n                  width: '250px',\n                  padding: '12px 14px',\n                  border: 'none',\n                  backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n                  color: 'var(--theme-elevation-800)',\n                  textAlign: 'left',\n                  cursor: 'pointer',\n                  fontSize: '14px',\n                  fontFamily,\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: '4px',\n                  transition: 'background-color 0.15s ease',\n                }}\n                onMouseEnter={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n                  }\n                }}\n                onMouseLeave={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'transparent'\n                  }\n                }}\n              >\n                <div\n                  style={{\n                    fontWeight: isSelected ? 600 : 500,\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: '8px',\n                  }}\n                >\n                  {isSelected && (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <path\n                        d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n                        stroke=\"var(--theme-elevation-500)\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  )}\n                  {option.label}\n                </div>\n                <div\n                  style={{\n                    fontSize: '16px',\n                    color: 'var(--theme-elevation-600)',\n                    fontStyle:\n                      option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n                  }}\n                >\n                  {(() => {\n                    if (option.value === 'preset') return 'Use theme preset font'\n                    if (option.value === 'custom') return 'Specify custom font below'\n                    return 'The quick brown fox jumps over the lazy dog'\n                  })()}\n                </div>\n              </button>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle"],"mappings":"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"}

package/dist/fields/ThemePresetImportField.d.ts

@@ -0,0 +1,4 @@
+import type { JSONFieldClientProps } from 'payload';
+declare const ThemePresetImportField: ({ field, path }: JSONFieldClientProps) => import("react").JSX.Element;
+export default ThemePresetImportField;
+//# sourceMappingURL=ThemePresetImportField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePresetImportField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePresetImportField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AASnD,QAAA,MAAM,sBAAsB,GAAI,iBAAiB,oBAAoB,gCAyJpE,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/fields/ThemePresetImportField.js

@@ -0,0 +1,219 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Drawer, useField, useModal } from '@payloadcms/ui';
+import { toast } from 'sonner';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { parseThemePresetInput } from '../utils/customThemePresets.js';
+const baseClass = 'theme-preset-import-field';
+const drawerSlug = 'import-theme-presets';
+const ThemePresetImportField = ({ field, path })=>{
+    const { value, setValue } = useField({
+        path
+    });
+    const [textValue, setTextValue] = useState('');
+    const { closeModal, openModal } = useModal();
+    const fileInputRef = useRef(null);
+    const presetSummary = useMemo(()=>{
+        if (!value || value.length === 0) {
+            return 'No custom presets imported';
+        }
+        const names = value.map((preset)=>preset.name).join(', ');
+        return `${value.length} preset${value.length === 1 ? '' : 's'}: ${names}`;
+    }, [
+        value
+    ]);
+    const applyFromText = useCallback((raw)=>{
+        if (!raw.trim()) {
+            setValue(null);
+            closeModal(drawerSlug);
+            toast.success('Cleared custom presets');
+            return;
+        }
+        const presets = parseThemePresetInput(raw);
+        if (presets.length === 0) {
+            toast.error('No valid presets found. Ensure each entry has a name and label.');
+            return;
+        }
+        setValue(presets);
+        closeModal(drawerSlug);
+        toast.success(`Imported ${presets.length} preset${presets.length === 1 ? '' : 's'}`);
+        setTextValue('');
+    }, [
+        setValue,
+        closeModal
+    ]);
+    const handleApplyClick = useCallback(()=>{
+        applyFromText(textValue);
+    }, [
+        applyFromText,
+        textValue
+    ]);
+    const handleFileChange = useCallback(async (event)=>{
+        const file = event.target?.files?.[0];
+        if (!file) return;
+        try {
+            const content = await file.text();
+            setTextValue(content);
+            applyFromText(content);
+        } catch (error) {
+            toast.error(error.message);
+        } finally{
+            if (event.target) {
+                event.target.value = '';
+            }
+        }
+    }, [
+        applyFromText
+    ]);
+    const handleImportClick = useCallback(()=>{
+        fileInputRef.current?.click();
+    }, []);
+    const handleClear = useCallback(()=>{
+        setValue(null);
+        toast.success('Cleared custom presets');
+    }, [
+        setValue
+    ]);
+    const label = typeof field.label === 'string' ? field.label : field.label?.en ?? 'Custom Presets';
+    const description = typeof field.admin?.description === 'string' ? field.admin.description : field.admin?.description?.en;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: baseClass,
+                style: {
+                    display: 'grid',
+                    gap: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.25rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: {
+                                    fontWeight: 600
+                                },
+                                children: label
+                            }),
+                            description && /*#__PURE__*/ _jsx("p", {
+                                style: {
+                                    margin: 0,
+                                    color: 'var(--theme-elevation-500)',
+                                    fontSize: '0.9rem'
+                                },
+                                children: description
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                            flexWrap: 'wrap'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "secondary",
+                                onClick: ()=>openModal(drawerSlug),
+                                size: "small",
+                                children: "Import Presets"
+                            }),
+                            value && value.length > 0 && /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "secondary",
+                                onClick: handleClear,
+                                size: "small",
+                                children: "Clear"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    fontSize: '0.875rem',
+                                    color: 'var(--theme-elevation-600)'
+                                },
+                                children: presetSummary
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                slug: drawerSlug,
+                title: "Import Theme Presets",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        padding: '1.5rem',
+                        display: 'grid',
+                        gap: '1rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: 0,
+                                color: 'var(--theme-elevation-600)'
+                            },
+                            children: "Paste JSON or upload a .json file containing theme preset definitions."
+                        }),
+                        /*#__PURE__*/ _jsx("textarea", {
+                            value: textValue,
+                            onChange: (event)=>setTextValue(event.target.value),
+                            rows: 15,
+                            spellCheck: false,
+                            style: {
+                                width: '100%',
+                                fontFamily: 'monospace',
+                                borderRadius: '8px',
+                                border: '1px solid var(--theme-elevation-200)',
+                                padding: '12px',
+                                fontSize: '0.875rem'
+                            },
+                            placeholder: `[
+  {
+    "name": "brand-dark",
+    "label": "Brand Dark",
+    "borderRadius": "medium",
+    "lightMode": { "background": "#ffffff", "foreground": "#111" },
+    "darkMode": { "background": "#0a0a0a", "foreground": "#fff" }
+  }
+]`
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                gap: '0.5rem',
+                                justifyContent: 'flex-end'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    buttonStyle: "secondary",
+                                    onClick: handleImportClick,
+                                    children: "Upload JSON File"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    buttonStyle: "primary",
+                                    onClick: handleApplyClick,
+                                    disabled: !textValue.trim(),
+                                    children: "Apply"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("input", {
+                            type: "file",
+                            accept: "application/json",
+                            ref: fileInputRef,
+                            onChange: handleFileChange,
+                            style: {
+                                display: 'none'
+                            }
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export default ThemePresetImportField;
+
+//# sourceMappingURL=ThemePresetImportField.js.map

package/dist/fields/ThemePresetImportField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemePresetImportField.tsx"],"sourcesContent":["'use client'\n\nimport { Button, Drawer, useField, useModal } from '@payloadcms/ui'\nimport type { JSONFieldClientProps } from 'payload'\nimport { toast } from 'sonner'\nimport { useCallback, useMemo, useRef, useState, type ChangeEvent } from 'react'\nimport type { ThemePreset } from '../presets.js'\nimport { parseThemePresetInput } from '../utils/customThemePresets.js'\n\nconst baseClass = 'theme-preset-import-field'\nconst drawerSlug = 'import-theme-presets'\n\nconst ThemePresetImportField = ({ field, path }: JSONFieldClientProps) => {\n  const { value, setValue } = useField<ThemePreset[] | null>({ path })\n  const [textValue, setTextValue] = useState('')\n  const { closeModal, openModal } = useModal()\n  const fileInputRef = useRef<HTMLInputElement | null>(null)\n\n  const presetSummary = useMemo(() => {\n    if (!value || value.length === 0) {\n      return 'No custom presets imported'\n    }\n    const names = value.map((preset) => preset.name).join(', ')\n    return `${value.length} preset${value.length === 1 ? '' : 's'}: ${names}`\n  }, [value])\n\n  const applyFromText = useCallback(\n    (raw: string) => {\n      if (!raw.trim()) {\n        setValue(null)\n        closeModal(drawerSlug)\n        toast.success('Cleared custom presets')\n        return\n      }\n\n      const presets = parseThemePresetInput(raw)\n      if (presets.length === 0) {\n        toast.error('No valid presets found. Ensure each entry has a name and label.')\n        return\n      }\n\n      setValue(presets)\n      closeModal(drawerSlug)\n      toast.success(`Imported ${presets.length} preset${presets.length === 1 ? '' : 's'}`)\n      setTextValue('')\n    },\n    [setValue, closeModal],\n  )\n\n  const handleApplyClick = useCallback(() => {\n    applyFromText(textValue)\n  }, [applyFromText, textValue])\n\n  const handleFileChange = useCallback(\n    async (event: ChangeEvent<HTMLInputElement>) => {\n      const file = event.target?.files?.[0]\n      if (!file) return\n      try {\n        const content = await file.text()\n        setTextValue(content)\n        applyFromText(content)\n      } catch (error) {\n        toast.error((error as Error).message)\n      } finally {\n        if (event.target) {\n          event.target.value = ''\n        }\n      }\n    },\n    [applyFromText],\n  )\n\n  const handleImportClick = useCallback(() => {\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleClear = useCallback(() => {\n    setValue(null)\n    toast.success('Cleared custom presets')\n  }, [setValue])\n\n  const label =\n    typeof field.label === 'string' ? field.label : (field.label?.en ?? 'Custom Presets')\n  const description =\n    typeof field.admin?.description === 'string'\n      ? field.admin.description\n      : (field.admin?.description as Record<string, string>)?.en\n\n  return (\n    <>\n      <div className={baseClass} style={{ display: 'grid', gap: '0.75rem' }}>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>\n          <label style={{ fontWeight: 600 }}>{label}</label>\n          {description && (\n            <p style={{ margin: 0, color: 'var(--theme-elevation-500)', fontSize: '0.9rem' }}>\n              {description}\n            </p>\n          )}\n        </div>\n\n        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>\n          <Button buttonStyle=\"secondary\" onClick={() => openModal(drawerSlug)} size=\"small\">\n            Import Presets\n          </Button>\n          {value && value.length > 0 && (\n            <Button buttonStyle=\"secondary\" onClick={handleClear} size=\"small\">\n              Clear\n            </Button>\n          )}\n          <span style={{ fontSize: '0.875rem', color: 'var(--theme-elevation-600)' }}>\n            {presetSummary}\n          </span>\n        </div>\n      </div>\n\n      <Drawer slug={drawerSlug} title=\"Import Theme Presets\">\n        <div style={{ padding: '1.5rem', display: 'grid', gap: '1rem' }}>\n          <p style={{ margin: 0, color: 'var(--theme-elevation-600)' }}>\n            Paste JSON or upload a .json file containing theme preset definitions.\n          </p>\n\n          <textarea\n            value={textValue}\n            onChange={(event) => setTextValue(event.target.value)}\n            rows={15}\n            spellCheck={false}\n            style={{\n              width: '100%',\n              fontFamily: 'monospace',\n              borderRadius: '8px',\n              border: '1px solid var(--theme-elevation-200)',\n              padding: '12px',\n              fontSize: '0.875rem',\n            }}\n            placeholder={`[\n  {\n    \"name\": \"brand-dark\",\n    \"label\": \"Brand Dark\",\n    \"borderRadius\": \"medium\",\n    \"lightMode\": { \"background\": \"#ffffff\", \"foreground\": \"#111\" },\n    \"darkMode\": { \"background\": \"#0a0a0a\", \"foreground\": \"#fff\" }\n  }\n]`}\n          />\n\n          <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>\n            <Button buttonStyle=\"secondary\" onClick={handleImportClick}>\n              Upload JSON File\n            </Button>\n            <Button buttonStyle=\"primary\" onClick={handleApplyClick} disabled={!textValue.trim()}>\n              Apply\n            </Button>\n          </div>\n\n          <input\n            type=\"file\"\n            accept=\"application/json\"\n            ref={fileInputRef}\n            onChange={handleFileChange}\n            style={{ display: 'none' }}\n          />\n        </div>\n      </Drawer>\n    </>\n  )\n}\n\nexport default ThemePresetImportField\n"],"names":["Button","Drawer","useField","useModal","toast","useCallback","useMemo","useRef","useState","parseThemePresetInput","baseClass","drawerSlug","ThemePresetImportField","field","path","value","setValue","textValue","setTextValue","closeModal","openModal","fileInputRef","presetSummary","length","names","map","preset","name","join","applyFromText","raw","trim","success","presets","error","handleApplyClick","handleFileChange","event","file","target","files","content","text","message","handleImportClick","current","click","handleClear","label","en","description","admin","div","className","style","display","gap","flexDirection","fontWeight","p","margin","color","fontSize","alignItems","flexWrap","buttonStyle","onClick","size","span","slug","title","padding","textarea","onChange","rows","spellCheck","width","fontFamily","borderRadius","border","placeholder","justifyContent","disabled","input","type","accept","ref"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePreviewField.tsx"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAyQrD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BA8XtE"}
+{"version":3,"file":"ThemePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePreviewField.tsx"],"names":[],"mappings":"AAEA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AA2PrD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAmZtE"}

package/dist/fields/ThemePreviewField.js

@@ -7,23 +7,7 @@ import { resolveTypographyPreview } from '../components/typographyPreviewUtils.j
 import { allThemePresets } from '../index.js';
 import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
 import { darkModeDefaults, lightModeDefaults } from './colorModeFields.js';
-const FALLBACK_THEME = allThemePresets[0]?.name ?? 'cool';
-const themePresets = allThemePresets.reduce((acc, preset)=>{
-    acc[preset.name] = {
-        label: preset.label,
-        lightMode: {
-            ...lightModeDefaults,
-            ...preset.lightMode ?? {}
-        },
-        darkMode: {
-            ...darkModeDefaults,
-            ...preset.darkMode ?? {}
-        },
-        typography: preset.typography,
-        borderRadius: preset.borderRadius
-    };
-    return acc;
-}, {});
+// FALLBACK_THEME and runtime theme presets are computed inside the component
 const colorKeys = Object.keys(lightModeDefaults);
 const highlightSwatches = [
     {
@@ -255,6 +239,29 @@ function ModePreview({ icon, title, colors, typography, radius }) {
 }
 export default function ThemePreviewField(props) {
     const { field, path } = props;
+    // If the plugin provided theme presets via admin config, prefer those; otherwise fallback to allThemePresets
+    const baseThemePresets = field?.admin?.themePresets ?? allThemePresets;
+    const runtimeThemePresets = useMemo(()=>{
+        return baseThemePresets.reduce((acc, preset)=>{
+            acc[preset.name] = {
+                label: preset.label,
+                lightMode: {
+                    ...lightModeDefaults,
+                    ...preset.lightMode ?? {}
+                },
+                darkMode: {
+                    ...darkModeDefaults,
+                    ...preset.darkMode ?? {}
+                },
+                typography: preset.typography,
+                borderRadius: preset.borderRadius
+            };
+            return acc;
+        }, {});
+    }, [
+        baseThemePresets
+    ]);
+    const fallbackTheme = baseThemePresets[0]?.name ?? 'cool';
     const { value: selectedTheme, setValue } = useField({
         path
     });
@@ -262,7 +269,7 @@ export default function ThemePreviewField(props) {
     const formFields = useFormFields(([formState])=>formState);
     const hasAppliedInitialPresetRef = useRef(false);
     const applyPreset = useCallback((presetName)=>{
-        const preset = themePresets[presetName];
+        const preset = runtimeThemePresets[presetName];
         if (!preset) {
             return;
         }
@@ -302,11 +309,11 @@ export default function ThemePreviewField(props) {
         if (!selectedTheme) {
             return;
         }
-        if (themePresets[selectedTheme]) {
+        if (runtimeThemePresets[selectedTheme]) {
             return;
         }
         hasAppliedInitialPresetRef.current = false;
-        setValue(FALLBACK_THEME);
+        setValue(fallbackTheme);
     }, [
         selectedTheme,
         setValue
@@ -321,7 +328,7 @@ export default function ThemePreviewField(props) {
         if (!formFields) {
             return;
         }
-        const preset = themePresets[selectedTheme];
+        const preset = runtimeThemePresets[selectedTheme];
         if (!preset) {
             hasAppliedInitialPresetRef.current = true;
             return;
@@ -345,7 +352,7 @@ export default function ThemePreviewField(props) {
         applyPreset
     ]);
     const lightModeColors = useMemo(()=>{
-        const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined;
+        const presetLightMode = selectedTheme ? runtimeThemePresets[selectedTheme]?.lightMode : undefined;
         return colorKeys.reduce((acc, key)=>{
             const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`];
             const rawValue = typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0 ? fieldState.value : undefined;
@@ -357,7 +364,7 @@ export default function ThemePreviewField(props) {
         selectedTheme
     ]);
     const darkModeColors = useMemo(()=>{
-        const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined;
+        const presetDarkMode = selectedTheme ? runtimeThemePresets[selectedTheme]?.darkMode : undefined;
         return colorKeys.reduce((acc, key)=>{
             const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`];
             const rawValue = typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0 ? fieldState.value : undefined;
@@ -368,7 +375,7 @@ export default function ThemePreviewField(props) {
         formFields,
         selectedTheme
     ]);
-    const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined;
+    const activePreset = selectedTheme ? runtimeThemePresets[selectedTheme] : undefined;
     const formTypographySelection = useMemo(()=>{
         if (!formFields) {
             return null;
@@ -438,7 +445,7 @@ export default function ThemePreviewField(props) {
                         children: [
                             /*#__PURE__*/ _jsx("div", {
                                 className: "theme-preset-list",
-                                children: Object.entries(themePresets).map(([key, preset])=>{
+                                children: Object.entries(runtimeThemePresets).map(([key, preset])=>{
                                     const isSelected = key === selectedTheme;
                                     const swatches = highlightSwatches.map(({ key: colorKey })=>preset.lightMode[colorKey]).filter((color)=>Boolean(color));
                                     return /*#__PURE__*/ _jsxs("button", {