@kilivi/payloadcms-theme-management 0.1.5 → 0.1.7

package/dist/components/ThemePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ThemePreview.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport React, { useMemo } from 'react'\r\nimport { themeIsValid } from '../providers/Theme/types.js'\r\nimport { defaultThemePresets } from '../presets.js'\r\n\r\nconst DEFAULT_THEME_KEY = 'cool'\r\nconst basePresetMap = defaultThemePresets.reduce<\r\n  Record<string, (typeof defaultThemePresets)[number]>\r\n>((accumulator, preset) => {\r\n  accumulator[preset.name] = preset\r\n  return accumulator\r\n}, {})\r\n\r\nconst fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? defaultThemePresets[0]\r\nconst fallbackLightMode = fallbackPreset?.lightMode ?? {\r\n  primary: '#3b82f6',\r\n  accent: '#06b6d4',\r\n  background: '#ffffff',\r\n  foreground: '#1f2937',\r\n}\r\n\r\nexport default function ThemePreview() {\r\n  // Get individual field values using useField hooks\r\n  const { value: selectedTheme } = useField<string>({ path: 'themeConfiguration.theme' })\r\n  const { value: primaryColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.primaryColor',\r\n  })\r\n  const { value: accentColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.accentColor',\r\n  })\r\n  const { value: backgroundColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.backgroundColor',\r\n  })\r\n  const { value: textColor } = useField<string>({\r\n    path: 'themeConfiguration.customization.textColor',\r\n  })\r\n\r\n  // Determine current theme and if overrides are active\r\n  const currentTheme = themeIsValid(selectedTheme)\r\n    ? selectedTheme\r\n    : (fallbackPreset?.name ?? 'cool')\r\n  const hasOverrides = Boolean(primaryColor || accentColor || backgroundColor || textColor)\r\n\r\n  const themeColors = useMemo(() => {\r\n    const preset = basePresetMap[currentTheme] ?? fallbackPreset\r\n    const lightMode = preset?.lightMode ?? fallbackLightMode\r\n\r\n    return {\r\n      primary: lightMode?.primary ?? fallbackLightMode.primary,\r\n      accent:\r\n        lightMode?.accent ??\r\n        lightMode?.secondary ??\r\n        fallbackLightMode.accent ??\r\n        fallbackLightMode.primary,\r\n      background: lightMode?.background ?? fallbackLightMode.background,\r\n      text: lightMode?.foreground ?? fallbackLightMode.foreground,\r\n    }\r\n  }, [currentTheme])\r\n\r\n  const currentColors = useMemo(\r\n    () => ({\r\n      primary: primaryColor || themeColors.primary,\r\n      accent: accentColor || themeColors.accent,\r\n      background: backgroundColor || themeColors.background,\r\n      text: textColor || themeColors.text,\r\n    }),\r\n    [primaryColor, accentColor, backgroundColor, textColor, themeColors],\r\n  )\r\n\r\n  return (\r\n    <div className=\"theme-preview\" style={{ marginTop: '20px' }}>\r\n      <div\r\n        style={{\r\n          fontSize: '16px',\r\n          fontWeight: '600',\r\n          marginBottom: '16px',\r\n          color: '#374151',\r\n        }}\r\n      >\r\n        🎨 Live Theme Preview\r\n      </div>\r\n\r\n      <div\r\n        className=\"preview-container\"\r\n        style={{\r\n          border: '2px solid #e5e7eb',\r\n          borderRadius: '12px',\r\n          overflow: 'hidden',\r\n          backgroundColor: currentColors.background,\r\n          color: currentColors.text,\r\n          minHeight: '300px',\r\n        }}\r\n      >\r\n        {/* Header */}\r\n        <div\r\n          style={{\r\n            backgroundColor: currentColors.primary,\r\n            color: currentColors.background,\r\n            padding: '16px 24px',\r\n            display: 'flex',\r\n            justifyContent: 'space-between',\r\n            alignItems: 'center',\r\n          }}\r\n        >\r\n          <div style={{ fontSize: '20px', fontWeight: '700' }}>Your Website</div>\r\n          <nav style={{ display: 'flex', gap: '24px', fontSize: '14px' }}>\r\n            <span>Home</span>\r\n            <span>About</span>\r\n            <span>Services</span>\r\n            <span>Contact</span>\r\n          </nav>\r\n        </div>\r\n\r\n        {/* Content */}\r\n        <div style={{ padding: '32px 24px' }}>\r\n          <h1\r\n            style={{\r\n              fontSize: '32px',\r\n              fontWeight: '800',\r\n              marginBottom: '16px',\r\n              color: currentColors.text,\r\n            }}\r\n          >\r\n            Welcome to Your Site\r\n          </h1>\r\n\r\n          <p\r\n            style={{\r\n              fontSize: '16px',\r\n              lineHeight: '1.6',\r\n              marginBottom: '24px',\r\n              color: currentColors.text,\r\n              opacity: 0.8,\r\n            }}\r\n          >\r\n            This is how your content will look with the selected theme. The colors and styling will\r\n            be applied across your entire website.\r\n          </p>\r\n\r\n          {/* Buttons */}\r\n          <div style={{ display: 'flex', gap: '12px', marginBottom: '32px' }}>\r\n            <button\r\n              style={{\r\n                backgroundColor: currentColors.primary,\r\n                color: currentColors.background,\r\n                border: 'none',\r\n                padding: '12px 24px',\r\n                borderRadius: '6px',\r\n                fontSize: '14px',\r\n                fontWeight: '600',\r\n                cursor: 'pointer',\r\n              }}\r\n            >\r\n              Primary Button\r\n            </button>\r\n            <button\r\n              style={{\r\n                backgroundColor: 'transparent',\r\n                color: currentColors.primary,\r\n                border: `2px solid ${currentColors.primary}`,\r\n                padding: '10px 24px',\r\n                borderRadius: '6px',\r\n                fontSize: '14px',\r\n                fontWeight: '600',\r\n                cursor: 'pointer',\r\n              }}\r\n            >\r\n              Secondary Button\r\n            </button>\r\n          </div>\r\n\r\n          {/* Card */}\r\n          <div\r\n            style={{\r\n              backgroundColor: currentColors.text,\r\n              color: currentColors.background,\r\n              padding: '24px',\r\n              borderRadius: '8px',\r\n              opacity: 0.05,\r\n              marginBottom: '16px',\r\n            }}\r\n          />\r\n          <div\r\n            style={{\r\n              border: `1px solid ${currentColors.text}`,\r\n              padding: '20px',\r\n              borderRadius: '8px',\r\n              opacity: 0.1,\r\n            }}\r\n          >\r\n            <h3\r\n              style={{\r\n                fontSize: '18px',\r\n                fontWeight: '600',\r\n                marginBottom: '12px',\r\n                color: currentColors.text,\r\n              }}\r\n            >\r\n              Sample Card\r\n            </h3>\r\n            <p\r\n              style={{\r\n                fontSize: '14px',\r\n                color: currentColors.text,\r\n                opacity: 0.7,\r\n              }}\r\n            >\r\n              This shows how cards and content blocks will appear.\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Footer */}\r\n        <div\r\n          style={{\r\n            backgroundColor: currentColors.accent,\r\n            color: currentColors.background,\r\n            padding: '16px 24px',\r\n            textAlign: 'center',\r\n            fontSize: '14px',\r\n            marginTop: 'auto',\r\n          }}\r\n        >\r\n          © 2025 Your Website. Powered by PayloadCMS.\r\n        </div>\r\n      </div>\r\n\r\n      {/* Theme info */}\r\n      <div\r\n        style={{\r\n          marginTop: '12px',\r\n          fontSize: '12px',\r\n          color: '#6b7280',\r\n          display: 'grid',\r\n          gridTemplateColumns: 'repeat(2, 1fr)',\r\n          gap: '8px',\r\n        }}\r\n      >\r\n        <div>\r\n          <strong>Active Theme:</strong> {currentTheme}\r\n        </div>\r\n        <div>\r\n          <strong>Primary:</strong> {currentColors.primary}\r\n        </div>\r\n        <div>\r\n          <strong>Accent:</strong> {currentColors.accent}\r\n        </div>\r\n        <div>\r\n          <strong>Background:</strong> {currentColors.background}\r\n        </div>\r\n      </div>\r\n\r\n      {/* Customization indicator */}\r\n      {hasOverrides && (\r\n        <div\r\n          style={{\r\n            marginTop: '8px',\r\n            padding: '8px 12px',\r\n            backgroundColor: '#fef3c7',\r\n            borderRadius: '6px',\r\n            fontSize: '11px',\r\n            color: '#92400e',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            gap: '6px',\r\n          }}\r\n        >\r\n          <span>⚡</span>\r\n          <span>\r\n            <strong>Custom colors applied</strong> - overriding theme defaults\r\n          </span>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","React","useMemo","themeIsValid","defaultThemePresets","DEFAULT_THEME_KEY","basePresetMap","reduce","accumulator","preset","name","fallbackPreset","fallbackLightMode","lightMode","primary","accent","background","foreground","ThemePreview","value","selectedTheme","path","primaryColor","accentColor","backgroundColor","textColor","currentTheme","hasOverrides","Boolean","themeColors","secondary","text","currentColors","div","className","style","marginTop","fontSize","fontWeight","marginBottom","color","border","borderRadius","overflow","minHeight","padding","display","justifyContent","alignItems","nav","gap","span","h1","p","lineHeight","opacity","button","cursor","h3","textAlign","gridTemplateColumns","strong"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AACzC,OAAOC,SAASC,OAAO,QAAQ,QAAO;AACtC,SAASC,YAAY,QAAQ,8BAA6B;AAC1D,SAASC,mBAAmB,QAAQ,gBAAe;AAEnD,MAAMC,oBAAoB;AAC1B,MAAMC,gBAAgBF,oBAAoBG,MAAM,CAE9C,CAACC,aAAaC;IACdD,WAAW,CAACC,OAAOC,IAAI,CAAC,GAAGD;IAC3B,OAAOD;AACT,GAAG,CAAC;AAEJ,MAAMG,iBAAiBL,aAAa,CAACD,kBAAkB,IAAID,mBAAmB,CAAC,EAAE;AACjF,MAAMQ,oBAAoBD,gBAAgBE,aAAa;IACrDC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;AACd;AAEA,eAAe,SAASC;IACtB,mDAAmD;IACnD,MAAM,EAAEC,OAAOC,aAAa,EAAE,GAAGpB,SAAiB;QAAEqB,MAAM;IAA2B;IACrF,MAAM,EAAEF,OAAOG,YAAY,EAAE,GAAGtB,SAAiB;QAC/CqB,MAAM;IACR;IACA,MAAM,EAAEF,OAAOI,WAAW,EAAE,GAAGvB,SAAiB;QAC9CqB,MAAM;IACR;IACA,MAAM,EAAEF,OAAOK,eAAe,EAAE,GAAGxB,SAAiB;QAClDqB,MAAM;IACR;IACA,MAAM,EAAEF,OAAOM,SAAS,EAAE,GAAGzB,SAAiB;QAC5CqB,MAAM;IACR;IAEA,sDAAsD;IACtD,MAAMK,eAAevB,aAAaiB,iBAC9BA,gBACCT,gBAAgBD,QAAQ;IAC7B,MAAMiB,eAAeC,QAAQN,gBAAgBC,eAAeC,mBAAmBC;IAE/E,MAAMI,cAAc3B,QAAQ;QAC1B,MAAMO,SAASH,aAAa,CAACoB,aAAa,IAAIf;QAC9C,MAAME,YAAYJ,QAAQI,aAAaD;QAEvC,OAAO;YACLE,SAASD,WAAWC,WAAWF,kBAAkBE,OAAO;YACxDC,QACEF,WAAWE,UACXF,WAAWiB,aACXlB,kBAAkBG,MAAM,IACxBH,kBAAkBE,OAAO;YAC3BE,YAAYH,WAAWG,cAAcJ,kBAAkBI,UAAU;YACjEe,MAAMlB,WAAWI,cAAcL,kBAAkBK,UAAU;QAC7D;IACF,GAAG;QAACS;KAAa;IAEjB,MAAMM,gBAAgB9B,QACpB,IAAO,CAAA;YACLY,SAASQ,gBAAgBO,YAAYf,OAAO;YAC5CC,QAAQQ,eAAeM,YAAYd,MAAM;YACzCC,YAAYQ,mBAAmBK,YAAYb,UAAU;YACrDe,MAAMN,aAAaI,YAAYE,IAAI;QACrC,CAAA,GACA;QAACT;QAAcC;QAAaC;QAAiBC;QAAWI;KAAY;IAGtE,qBACE,MAACI;QAAIC,WAAU;QAAgBC,OAAO;YAAEC,WAAW;QAAO;;0BACxD,KAACH;gBACCE,OAAO;oBACLE,UAAU;oBACVC,YAAY;oBACZC,cAAc;oBACdC,OAAO;gBACT;0BACD;;0BAID,MAACP;gBACCC,WAAU;gBACVC,OAAO;oBACLM,QAAQ;oBACRC,cAAc;oBACdC,UAAU;oBACVnB,iBAAiBQ,cAAchB,UAAU;oBACzCwB,OAAOR,cAAcD,IAAI;oBACzBa,WAAW;gBACb;;kCAGA,MAACX;wBACCE,OAAO;4BACLX,iBAAiBQ,cAAclB,OAAO;4BACtC0B,OAAOR,cAAchB,UAAU;4BAC/B6B,SAAS;4BACTC,SAAS;4BACTC,gBAAgB;4BAChBC,YAAY;wBACd;;0CAEA,KAACf;gCAAIE,OAAO;oCAAEE,UAAU;oCAAQC,YAAY;gCAAM;0CAAG;;0CACrD,MAACW;gCAAId,OAAO;oCAAEW,SAAS;oCAAQI,KAAK;oCAAQb,UAAU;gCAAO;;kDAC3D,KAACc;kDAAK;;kDACN,KAACA;kDAAK;;kDACN,KAACA;kDAAK;;kDACN,KAACA;kDAAK;;;;;;kCAKV,MAAClB;wBAAIE,OAAO;4BAAEU,SAAS;wBAAY;;0CACjC,KAACO;gCACCjB,OAAO;oCACLE,UAAU;oCACVC,YAAY;oCACZC,cAAc;oCACdC,OAAOR,cAAcD,IAAI;gCAC3B;0CACD;;0CAID,KAACsB;gCACClB,OAAO;oCACLE,UAAU;oCACViB,YAAY;oCACZf,cAAc;oCACdC,OAAOR,cAAcD,IAAI;oCACzBwB,SAAS;gCACX;0CACD;;0CAMD,MAACtB;gCAAIE,OAAO;oCAAEW,SAAS;oCAAQI,KAAK;oCAAQX,cAAc;gCAAO;;kDAC/D,KAACiB;wCACCrB,OAAO;4CACLX,iBAAiBQ,cAAclB,OAAO;4CACtC0B,OAAOR,cAAchB,UAAU;4CAC/ByB,QAAQ;4CACRI,SAAS;4CACTH,cAAc;4CACdL,UAAU;4CACVC,YAAY;4CACZmB,QAAQ;wCACV;kDACD;;kDAGD,KAACD;wCACCrB,OAAO;4CACLX,iBAAiB;4CACjBgB,OAAOR,cAAclB,OAAO;4CAC5B2B,QAAQ,CAAC,UAAU,EAAET,cAAclB,OAAO,EAAE;4CAC5C+B,SAAS;4CACTH,cAAc;4CACdL,UAAU;4CACVC,YAAY;4CACZmB,QAAQ;wCACV;kDACD;;;;0CAMH,KAACxB;gCACCE,OAAO;oCACLX,iBAAiBQ,cAAcD,IAAI;oCACnCS,OAAOR,cAAchB,UAAU;oCAC/B6B,SAAS;oCACTH,cAAc;oCACda,SAAS;oCACThB,cAAc;gCAChB;;0CAEF,MAACN;gCACCE,OAAO;oCACLM,QAAQ,CAAC,UAAU,EAAET,cAAcD,IAAI,EAAE;oCACzCc,SAAS;oCACTH,cAAc;oCACda,SAAS;gCACX;;kDAEA,KAACG;wCACCvB,OAAO;4CACLE,UAAU;4CACVC,YAAY;4CACZC,cAAc;4CACdC,OAAOR,cAAcD,IAAI;wCAC3B;kDACD;;kDAGD,KAACsB;wCACClB,OAAO;4CACLE,UAAU;4CACVG,OAAOR,cAAcD,IAAI;4CACzBwB,SAAS;wCACX;kDACD;;;;;;kCAOL,KAACtB;wBACCE,OAAO;4BACLX,iBAAiBQ,cAAcjB,MAAM;4BACrCyB,OAAOR,cAAchB,UAAU;4BAC/B6B,SAAS;4BACTc,WAAW;4BACXtB,UAAU;4BACVD,WAAW;wBACb;kCACD;;;;0BAMH,MAACH;gBACCE,OAAO;oBACLC,WAAW;oBACXC,UAAU;oBACVG,OAAO;oBACPM,SAAS;oBACTc,qBAAqB;oBACrBV,KAAK;gBACP;;kCAEA,MAACjB;;0CACC,KAAC4B;0CAAO;;4BAAsB;4BAAEnC;;;kCAElC,MAACO;;0CACC,KAAC4B;0CAAO;;4BAAiB;4BAAE7B,cAAclB,OAAO;;;kCAElD,MAACmB;;0CACC,KAAC4B;0CAAO;;4BAAgB;4BAAE7B,cAAcjB,MAAM;;;kCAEhD,MAACkB;;0CACC,KAAC4B;0CAAO;;4BAAoB;4BAAE7B,cAAchB,UAAU;;;;;YAKzDW,8BACC,MAACM;gBACCE,OAAO;oBACLC,WAAW;oBACXS,SAAS;oBACTrB,iBAAiB;oBACjBkB,cAAc;oBACdL,UAAU;oBACVG,OAAO;oBACPM,SAAS;oBACTE,YAAY;oBACZE,KAAK;gBACP;;kCAEA,KAACC;kCAAK;;kCACN,MAACA;;0CACC,KAACU;0CAAO;;4BAA8B;;;;;;;AAMlD"}

package/dist/components/typographyPreviewUtils.js

@@ -1,7 +1,7 @@
-import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '@/constants/themeFonts';
-import { defaultThemePresets } from '../presets';
+import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '../constants/themeFonts.js';
+import { defaultThemePresets } from '../presets.js';
 const FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool';
-const fallbackPreset = defaultThemePresets.find((preset) => preset.name === FALLBACK_THEME) ?? defaultThemePresets[0];
+const fallbackPreset = defaultThemePresets.find((preset)=>preset.name === FALLBACK_THEME) ?? defaultThemePresets[0];
 const FONT_VAR_FALLBACK = {
     'var(--font-geist-sans)': '"Geist Sans", system-ui, sans-serif',
     'var(--font-geist-mono)': '"Geist Mono", SFMono-Regular, ui-monospace, monospace',
@@ -10,11 +10,10 @@ const FONT_VAR_FALLBACK = {
     'var(--font-playfair)': '"Playfair Display", "Times New Roman", serif',
     'var(--font-lora)': '"Lora", "Times New Roman", serif',
     'var(--font-manrope)': '"Manrope", system-ui, sans-serif',
-    'var(--font-urbanist)': '"Urbanist", system-ui, sans-serif',
+    'var(--font-urbanist)': '"Urbanist", system-ui, sans-serif'
 };
 function withFallback(fontFamily, fallback) {
-    if (!fontFamily)
-        return fallback;
+    if (!fontFamily) return fallback;
     if (fontFamily.startsWith('var(')) {
         const mappedFallback = FONT_VAR_FALLBACK[fontFamily] ?? fallback;
         return `${fontFamily}, ${mappedFallback}`;
@@ -22,7 +21,7 @@ function withFallback(fontFamily, fallback) {
     return fontFamily;
 }
 function getPresetTypography(themeName) {
-    const preset = defaultThemePresets.find((item) => item.name === themeName) ?? fallbackPreset;
+    const preset = defaultThemePresets.find((item)=>item.name === themeName) ?? fallbackPreset;
     return preset?.typography;
 }
 function resolveFontFamily(value, customValue, fallback) {
@@ -42,9 +41,8 @@ function resolveFontFamily(value, customValue, fallback) {
     return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif');
 }
 function resolveOptionLabel(options, value, locale = 'en') {
-    const option = options.find((item) => item.value === value);
-    if (!option)
-        return value ?? '';
+    const option = options.find((item)=>item.value === value);
+    if (!option) return value ?? '';
     if (typeof option.label === 'string') {
         return option.label;
     }
@@ -62,19 +60,16 @@ export function resolveTypographyPreview(selection, themeName) {
     const headingFontCustom = selection?.headingFontCustom ?? undefined;
     const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody);
     const resolvedHeadingFont = resolveFontFamily(headingFontValue, headingFontCustom, fallbackHeading);
-    const baseFontSize = selection?.baseFontSize && selection.baseFontSize !== 'preset'
-        ? selection.baseFontSize
-        : fallbackSize;
-    const lineHeight = selection?.lineHeight && selection.lineHeight !== 'preset'
-        ? selection.lineHeight
-        : fallbackLineHeight;
+    const baseFontSize = selection?.baseFontSize && selection.baseFontSize !== 'preset' ? selection.baseFontSize : fallbackSize;
+    const lineHeight = selection?.lineHeight && selection.lineHeight !== 'preset' ? selection.lineHeight : fallbackLineHeight;
     return {
         bodyFont: resolvedBodyFont,
         headingFont: resolvedHeadingFont,
         baseFontSize,
         lineHeight,
         bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),
-        headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue),
+        headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue)
     };
 }
+
 //# sourceMappingURL=typographyPreviewUtils.js.map

package/dist/components/typographyPreviewUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"typographyPreviewUtils.js","sourceRoot":"","sources":["../../src/components/typographyPreviewUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../src/components/typographyPreviewUtils.ts"],"sourcesContent":["import { BODY_FONT_OPTIONS, FONT_VALUE_TO_CSS, HEADING_FONT_OPTIONS } from '../constants/themeFonts.js'\r\nimport { defaultThemePresets } from '../presets.js'\r\n\r\nexport interface TypographySelection {\r\n  bodyFont?: string | null\r\n  headingFont?: string | null\r\n  bodyFontCustom?: string | null\r\n  headingFontCustom?: string | null\r\n  baseFontSize?: string | null\r\n  lineHeight?: string | null\r\n}\r\n\r\nexport interface ResolvedTypographyPreview {\r\n  bodyFont: string\r\n  headingFont: string\r\n  baseFontSize: string\r\n  lineHeight: string\r\n  bodyLabel: string\r\n  headingLabel: string\r\n}\r\n\r\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\r\nconst fallbackPreset =\r\n  defaultThemePresets.find((preset) => preset.name === FALLBACK_THEME) ?? defaultThemePresets[0]\r\n\r\nconst FONT_VAR_FALLBACK: Record<string, string> = {\r\n  'var(--font-geist-sans)': '\"Geist Sans\", system-ui, sans-serif',\r\n  'var(--font-geist-mono)': '\"Geist Mono\", SFMono-Regular, ui-monospace, monospace',\r\n  'var(--font-inter)': '\"Inter\", system-ui, sans-serif',\r\n  'var(--font-outfit)': '\"Outfit\", system-ui, sans-serif',\r\n  'var(--font-playfair)': '\"Playfair Display\", \"Times New Roman\", serif',\r\n  'var(--font-lora)': '\"Lora\", \"Times New Roman\", serif',\r\n  'var(--font-manrope)': '\"Manrope\", system-ui, sans-serif',\r\n  'var(--font-urbanist)': '\"Urbanist\", system-ui, sans-serif',\r\n}\r\n\r\nfunction withFallback(fontFamily: string, fallback: string): string {\r\n  if (!fontFamily) return fallback\r\n\r\n  if (fontFamily.startsWith('var(')) {\r\n    const mappedFallback = FONT_VAR_FALLBACK[fontFamily] ?? fallback\r\n    return `${fontFamily}, ${mappedFallback}`\r\n  }\r\n\r\n  return fontFamily\r\n}\r\n\r\nfunction getPresetTypography(themeName?: string) {\r\n  const preset = defaultThemePresets.find((item) => item.name === themeName) ?? fallbackPreset\r\n  return preset?.typography\r\n}\r\n\r\nfunction resolveFontFamily(\r\n  value: string | null | undefined,\r\n  customValue: string | null | undefined,\r\n  fallback: string,\r\n): string {\r\n  if (!value || value === 'preset') {\r\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\r\n  }\r\n\r\n  if (value === 'custom') {\r\n    if (customValue && customValue.trim().length > 0) {\r\n      return customValue.trim()\r\n    }\r\n    return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\r\n  }\r\n\r\n  const preconfigured = FONT_VALUE_TO_CSS[value]\r\n  if (preconfigured) {\r\n    return withFallback(\r\n      preconfigured,\r\n      fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif',\r\n    )\r\n  }\r\n\r\n  return withFallback(fallback, fallbackPreset?.typography?.fontFamily ?? 'system-ui, sans-serif')\r\n}\r\n\r\nfunction resolveOptionLabel(\r\n  options: ReadonlyArray<{ label: string | Record<string, string>; value: string }>,\r\n  value?: string | null,\r\n  locale: 'en' | 'cs' = 'en',\r\n): string {\r\n  const option = options.find((item) => item.value === value)\r\n  if (!option) return value ?? ''\r\n  if (typeof option.label === 'string') {\r\n    return option.label\r\n  }\r\n  return option.label?.[locale] ?? Object.values(option.label)[0] ?? option.value\r\n}\r\n\r\nexport function resolveTypographyPreview(\r\n  selection: TypographySelection | null | undefined,\r\n  themeName?: string,\r\n): ResolvedTypographyPreview {\r\n  const presetTypography = getPresetTypography(themeName)\r\n  const fallbackBody = presetTypography?.fontFamily ?? 'system-ui, sans-serif'\r\n  const fallbackHeading = presetTypography?.headingFamily ?? fallbackBody\r\n  const fallbackSize = presetTypography?.baseFontSize ?? '16px'\r\n  const fallbackLineHeight = presetTypography?.lineHeight ?? '1.6'\r\n\r\n  const bodyFontValue = selection?.bodyFont ?? 'preset'\r\n  const headingFontValue = selection?.headingFont ?? 'preset'\r\n  const bodyFontCustom = selection?.bodyFontCustom ?? undefined\r\n  const headingFontCustom = selection?.headingFontCustom ?? undefined\r\n  const resolvedBodyFont = resolveFontFamily(bodyFontValue, bodyFontCustom, fallbackBody)\r\n  const resolvedHeadingFont = resolveFontFamily(\r\n    headingFontValue,\r\n    headingFontCustom,\r\n    fallbackHeading,\r\n  )\r\n\r\n  const baseFontSize =\r\n    selection?.baseFontSize && selection.baseFontSize !== 'preset'\r\n      ? selection.baseFontSize\r\n      : fallbackSize\r\n  const lineHeight =\r\n    selection?.lineHeight && selection.lineHeight !== 'preset'\r\n      ? selection.lineHeight\r\n      : fallbackLineHeight\r\n\r\n  return {\r\n    bodyFont: resolvedBodyFont,\r\n    headingFont: resolvedHeadingFont,\r\n    baseFontSize,\r\n    lineHeight,\r\n    bodyLabel: resolveOptionLabel(BODY_FONT_OPTIONS, bodyFontValue),\r\n    headingLabel: resolveOptionLabel(HEADING_FONT_OPTIONS, headingFontValue),\r\n  }\r\n}\r\n"],"names":["BODY_FONT_OPTIONS","FONT_VALUE_TO_CSS","HEADING_FONT_OPTIONS","defaultThemePresets","FALLBACK_THEME","name","fallbackPreset","find","preset","FONT_VAR_FALLBACK","withFallback","fontFamily","fallback","startsWith","mappedFallback","getPresetTypography","themeName","item","typography","resolveFontFamily","value","customValue","trim","length","preconfigured","resolveOptionLabel","options","locale","option","label","Object","values","resolveTypographyPreview","selection","presetTypography","fallbackBody","fallbackHeading","headingFamily","fallbackSize","baseFontSize","fallbackLineHeight","lineHeight","bodyFontValue","bodyFont","headingFontValue","headingFont","bodyFontCustom","undefined","headingFontCustom","resolvedBodyFont","resolvedHeadingFont","bodyLabel","headingLabel"],"mappings":"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"}

package/dist/constants/themeFonts.js

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

package/dist/constants/themeFonts.js.map

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

package/dist/fields/ColorPickerField.js

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