@kilivi/payloadcms-theme-management 0.2.2 → 0.2.4

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAEvD,OAAO,6BAA6B,CAAA;AAkBpC,QAAA,MAAM,qBAAqB,EAAE,wBA8H5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGvD,OAAO,6BAA6B,CAAA;AAyFpC,QAAA,MAAM,qBAAqB,EAAE,wBA8K5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/fields/ThemeColorPickerField.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField, useFormFields } from '@payloadcms/ui';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
 import './ThemeColorPickerField.css';
 function resolveLocalizedValue(value, fallback) {
     if (typeof value === 'string') {
@@ -16,19 +17,96 @@ function resolveLocalizedValue(value, fallback) {
     }
     return fallback;
 }
+/**
+ * Convert various color formats to HEX for the color picker
+ */ function toHex(color) {
+    if (!color) return '#000000';
+    // Already hex
+    if (color.startsWith('#')) return color;
+    // OKLCH format - extract hue and convert to approximate hex
+    if (color.startsWith('oklch')) {
+        // For now, return a default - proper conversion requires color-conversion library
+        return '#3b82f6' // blue-500 as default
+        ;
+    }
+    // HSL format
+    if (color.startsWith('hsl')) {
+        const regex = /hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/;
+        const match = regex.exec(color);
+        if (match) {
+            const [, h, s, l] = match.map(Number);
+            return hslToHex(h, s, l);
+        }
+    }
+    return '#000000';
+}
+/**
+ * Convert HSL to HEX
+ */ function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    const m = l - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h >= 0 && h < 60) {
+        r = c;
+        g = x;
+    } else if (h >= 60 && h < 120) {
+        r = x;
+        g = c;
+    } else if (h >= 120 && h < 180) {
+        g = c;
+        b = x;
+    } else if (h >= 180 && h < 240) {
+        g = x;
+        b = c;
+    } else if (h >= 240 && h < 300) {
+        r = x;
+        b = c;
+    } else if (h >= 300 && h < 360) {
+        r = c;
+        b = x;
+    }
+    const toHex = (n)=>{
+        const hex = Math.round((n + m) * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
 const ThemeColorPickerField = ({ field, path })=>{
     const { value, setValue } = useField({
         path
     });
     const [localValue, setLocalValue] = useState(value || '');
+    const [showPicker, setShowPicker] = useState(false);
+    const [hexValue, setHexValue] = useState(toHex(value || ''));
+    const pickerRef = useRef(null);
     const allFields = useFormFields(([fields])=>fields);
     const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode';
     const modePrefix = `themeConfiguration.${mode}`;
     useEffect(()=>{
         setLocalValue(value || '');
+        setHexValue(toHex(value || ''));
     }, [
         value
     ]);
+    // Close picker when clicking outside
+    useEffect(()=>{
+        function handleClickOutside(event) {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+                setShowPicker(false);
+            }
+        }
+        if (showPicker) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return ()=>document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [
+        showPicker
+    ]);
     const colorValues = useMemo(()=>{
         if (!allFields) {
             return {};
@@ -64,10 +142,20 @@ const ThemeColorPickerField = ({ field, path })=>{
         allFields,
         modePrefix
     ]);
-    function handleChange(nextValue) {
+    const handleHexChange = useCallback((hex)=>{
+        setHexValue(hex);
+        setLocalValue(hex);
+        setValue(hex);
+    }, [
+        setValue
+    ]);
+    const handleTextChange = useCallback((nextValue)=>{
         setLocalValue(nextValue);
         setValue(nextValue);
-    }
+        setHexValue(toHex(nextValue));
+    }, [
+        setValue
+    ]);
     const fieldName = path.split('.').pop() || '';
     const label = resolveLocalizedValue(field.label, fieldName);
     const description = resolveLocalizedValue(field.admin?.description, '');
@@ -93,26 +181,56 @@ const ThemeColorPickerField = ({ field, path })=>{
                     /*#__PURE__*/ _jsxs("div", {
                         className: "color-input-wrapper",
                         children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                type: "color",
-                                value: localValue || '#000000',
-                                onChange: (event)=>handleChange(event.target.value),
-                                className: "color-input"
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: "color-swatch",
+                                style: {
+                                    backgroundColor: hexValue
+                                },
+                                onClick: ()=>setShowPicker(!showPicker),
+                                "aria-label": "Open color picker"
                             }),
                             /*#__PURE__*/ _jsx("input", {
                                 type: "text",
                                 value: localValue || '',
-                                onChange: (event)=>handleChange(event.target.value),
-                                placeholder: "#000000",
-                                className: "text-input",
-                                pattern: "^#[0-9A-Fa-f]{6}$"
+                                onChange: (event)=>handleTextChange(event.target.value),
+                                placeholder: "oklch(...) or #hex",
+                                className: "text-input"
+                            })
+                        ]
+                    }),
+                    showPicker && /*#__PURE__*/ _jsxs("div", {
+                        className: "color-picker-popover",
+                        ref: pickerRef,
+                        children: [
+                            /*#__PURE__*/ _jsx(HexColorPicker, {
+                                color: hexValue,
+                                onChange: handleHexChange
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "picker-footer",
+                                children: [
+                                    /*#__PURE__*/ _jsx(HexColorInput, {
+                                        color: hexValue,
+                                        onChange: handleHexChange,
+                                        prefixed: true,
+                                        placeholder: "#000000",
+                                        className: "hex-input"
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>setShowPicker(false),
+                                        className: "close-button",
+                                        children: "Done"
+                                    })
+                                ]
                             })
                         ]
                     }),
                     /*#__PURE__*/ _jsx("div", {
                         className: "color-preview",
                         style: {
-                            backgroundColor: localValue || '#000000'
+                            backgroundColor: hexValue
                         },
                         children: /*#__PURE__*/ _jsx("span", {
                             className: "preview-label",

package/dist/fields/ThemeColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { useEffect, useMemo, useState } from 'react'\nimport './ThemeColorPickerField.css'\n\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const localized = value as Record<string, unknown>\n    const resolved = localized.en ?? localized.cs ?? localized['']\n    if (typeof resolved === 'string') {\n      return resolved\n    }\n  }\n\n  return fallback\n}\n\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\n  const allFields = useFormFields(([fields]) => fields)\n\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\n  const modePrefix = `themeConfiguration.${mode}`\n\n  useEffect(() => {\n    setLocalValue(value || '')\n  }, [value])\n\n  const colorValues = useMemo(() => {\n    if (!allFields) {\n      return {}\n    }\n\n    const names = [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'popover',\n      'popoverForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n      'border',\n      'input',\n      'ring',\n    ]\n\n    return names.reduce<Record<string, string>>((accumulator, name) => {\n      const fieldState = allFields[`${modePrefix}.${name}`]\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\n      accumulator[name] = parsedValue ?? ''\n      return accumulator\n    }, {})\n  }, [allFields, modePrefix])\n\n  function handleChange(nextValue: string) {\n    setLocalValue(nextValue)\n    setValue(nextValue)\n  }\n\n  const fieldName = path.split('.').pop() || ''\n  const label = resolveLocalizedValue(field.label, fieldName)\n  const description = resolveLocalizedValue(field.admin?.description, '')\n\n  return (\n    <div className=\"theme-color-picker-field\">\n      <div className=\"field-header\">\n        <label className=\"field-label\">{label}</label>\n        {description && <div className=\"field-description\">{description}</div>}\n      </div>\n\n      <div className=\"color-picker-container\">\n        <div className=\"color-input-wrapper\">\n          <input\n            type=\"color\"\n            value={localValue || '#000000'}\n            onChange={(event) => handleChange(event.target.value)}\n            className=\"color-input\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleChange(event.target.value)}\n            placeholder=\"#000000\"\n            className=\"text-input\"\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\n          />\n        </div>\n\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\n        </div>\n      </div>\n\n      {(fieldName === 'primary' || fieldName === 'background') && (\n        <div\n          className=\"mini-preview\"\n          style={{\n            backgroundColor: colorValues.background || '#ffffff',\n            color: colorValues.foreground || '#000000',\n            borderColor: colorValues.border || '#e2e8f0',\n          }}\n        >\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: colorValues.card || '#ffffff',\n              color: colorValues.cardForeground || '#000000',\n              borderColor: colorValues.border || '#e2e8f0',\n            }}\n          >\n            <button\n              className=\"preview-button\"\n              style={{\n                backgroundColor: colorValues.primary || '#0070f3',\n                color: colorValues.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              className=\"preview-button secondary\"\n              style={{\n                backgroundColor: colorValues.secondary || '#f1f5f9',\n                color: colorValues.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemeColorPickerField\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { useEffect, useMemo, useState, useCallback, useRef } from 'react'\nimport { HexColorPicker, HexColorInput } from 'react-colorful'\nimport './ThemeColorPickerField.css'\n\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const localized = value as Record<string, unknown>\n    const resolved = localized.en ?? localized.cs ?? localized['']\n    if (typeof resolved === 'string') {\n      return resolved\n    }\n  }\n\n  return fallback\n}\n\n/**\n * Convert various color formats to HEX for the color picker\n */\nfunction toHex(color: string): string {\n  if (!color) return '#000000'\n  \n  // Already hex\n  if (color.startsWith('#')) return color\n  \n  // OKLCH format - extract hue and convert to approximate hex\n  if (color.startsWith('oklch')) {\n    // For now, return a default - proper conversion requires color-conversion library\n    return '#3b82f6' // blue-500 as default\n  }\n  \n  // HSL format\n  if (color.startsWith('hsl')) {\n    const regex = /hsl\\((\\d+),\\s*(\\d+)%,\\s*(\\d+)%\\)/\n    const match = regex.exec(color)\n    if (match) {\n      const [, h, s, l] = match.map(Number)\n      return hslToHex(h, s, l)\n    }\n  }\n  \n  return '#000000'\n}\n\n/**\n * Convert HSL to HEX\n */\nfunction hslToHex(h: number, s: number, l: number): string {\n  s /= 100\n  l /= 100\n  \n  const c = (1 - Math.abs(2 * l - 1)) * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = l - c / 2\n  \n  let r = 0\n  let g = 0\n  let b = 0\n  \n  if (h >= 0 && h < 60) {\n    r = c\n    g = x\n  } else if (h >= 60 && h < 120) {\n    r = x\n    g = c\n  } else if (h >= 120 && h < 180) {\n    g = c\n    b = x\n  } else if (h >= 180 && h < 240) {\n    g = x\n    b = c\n  } else if (h >= 240 && h < 300) {\n    r = x\n    b = c\n  } else if (h >= 300 && h < 360) {\n    r = c\n    b = x\n  }\n  \n  const toHex = (n: number) => {\n    const hex = Math.round((n + m) * 255).toString(16)\n    return hex.length === 1 ? '0' + hex : hex\n  }\n  \n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\n  const [showPicker, setShowPicker] = useState(false)\n  const [hexValue, setHexValue] = useState(toHex(value || ''))\n  const pickerRef = useRef<HTMLDivElement>(null)\n  const allFields = useFormFields(([fields]) => fields)\n\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\n  const modePrefix = `themeConfiguration.${mode}`\n\n  useEffect(() => {\n    setLocalValue(value || '')\n    setHexValue(toHex(value || ''))\n  }, [value])\n\n  // Close picker when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {\n        setShowPicker(false)\n      }\n    }\n    \n    if (showPicker) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [showPicker])\n\n  const colorValues = useMemo(() => {\n    if (!allFields) {\n      return {}\n    }\n\n    const names = [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'popover',\n      'popoverForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n      'border',\n      'input',\n      'ring',\n    ]\n\n    return names.reduce<Record<string, string>>((accumulator, name) => {\n      const fieldState = allFields[`${modePrefix}.${name}`]\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\n      accumulator[name] = parsedValue ?? ''\n      return accumulator\n    }, {})\n  }, [allFields, modePrefix])\n\n  const handleHexChange = useCallback((hex: string) => {\n    setHexValue(hex)\n    setLocalValue(hex)\n    setValue(hex)\n  }, [setValue])\n\n  const handleTextChange = useCallback((nextValue: string) => {\n    setLocalValue(nextValue)\n    setValue(nextValue)\n    setHexValue(toHex(nextValue))\n  }, [setValue])\n\n  const fieldName = path.split('.').pop() || ''\n  const label = resolveLocalizedValue(field.label, fieldName)\n  const description = resolveLocalizedValue(field.admin?.description, '')\n\n  return (\n    <div className=\"theme-color-picker-field\">\n      <div className=\"field-header\">\n        <label className=\"field-label\">{label}</label>\n        {description && <div className=\"field-description\">{description}</div>}\n      </div>\n\n      <div className=\"color-picker-container\">\n        <div className=\"color-input-wrapper\">\n          <button\n            type=\"button\"\n            className=\"color-swatch\"\n            style={{ backgroundColor: hexValue }}\n            onClick={() => setShowPicker(!showPicker)}\n            aria-label=\"Open color picker\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleTextChange(event.target.value)}\n            placeholder=\"oklch(...) or #hex\"\n            className=\"text-input\"\n          />\n        </div>\n\n        {/* Professional Color Picker Popover */}\n        {showPicker && (\n          <div className=\"color-picker-popover\" ref={pickerRef}>\n            <HexColorPicker color={hexValue} onChange={handleHexChange} />\n            <div className=\"picker-footer\">\n              <HexColorInput\n                color={hexValue}\n                onChange={handleHexChange}\n                prefixed\n                placeholder=\"#000000\"\n                className=\"hex-input\"\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowPicker(false)}\n                className=\"close-button\"\n              >\n                Done\n              </button>\n            </div>\n          </div>\n        )}\n\n        <div className=\"color-preview\" style={{ backgroundColor: hexValue }}>\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\n        </div>\n      </div>\n\n      {(fieldName === 'primary' || fieldName === 'background') && (\n        <div\n          className=\"mini-preview\"\n          style={{\n            backgroundColor: colorValues.background || '#ffffff',\n            color: colorValues.foreground || '#000000',\n            borderColor: colorValues.border || '#e2e8f0',\n          }}\n        >\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: colorValues.card || '#ffffff',\n              color: colorValues.cardForeground || '#000000',\n              borderColor: colorValues.border || '#e2e8f0',\n            }}\n          >\n            <button\n              className=\"preview-button\"\n              style={{\n                backgroundColor: colorValues.primary || '#0070f3',\n                color: colorValues.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              className=\"preview-button secondary\"\n              style={{\n                backgroundColor: colorValues.secondary || '#f1f5f9',\n                color: colorValues.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemeColorPickerField\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","useCallback","useRef","HexColorPicker","HexColorInput","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","toHex","color","startsWith","regex","match","exec","h","s","l","map","Number","hslToHex","c","Math","abs","x","m","r","g","b","n","hex","round","toString","length","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","showPicker","setShowPicker","hexValue","setHexValue","pickerRef","allFields","fields","mode","includes","modePrefix","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleHexChange","handleTextChange","nextValue","fieldName","split","pop","label","description","admin","div","className","button","type","style","backgroundColor","onClick","aria-label","input","onChange","placeholder","ref","prefixed","span","background","foreground","borderColor","border","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}

package/dist/fields/ThemeLivePreview.css

@@ -0,0 +1,190 @@
+/* Theme Live Preview Styles */
+.theme-live-preview-container {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  background: var(--theme-elevation-50);
+  border-left: 1px solid var(--theme-elevation-200);
+}
+
+.theme-live-preview-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 2rem;
+  color: var(--theme-elevation-400);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.preview-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--theme-elevation-0);
+  border-bottom: 1px solid var(--theme-elevation-200);
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  background: var(--theme-elevation-100);
+  padding: 0.25rem;
+  border-radius: 8px;
+}
+
+.mode-toggle button {
+  padding: 0.5rem 1rem;
+  border: none;
+  background: transparent;
+  color: var(--theme-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.mode-toggle button.active {
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.preview-content {
+  padding: 2rem;
+  min-height: calc(100vh - 80px);
+  transition: all 0.3s;
+}
+
+.preview-section {
+  margin-bottom: 2rem;
+}
+
+.preview-section h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+}
+
+.preview-section p {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.preview-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.preview-card {
+  padding: 1.5rem;
+  border-radius: 12px;
+  border: 2px solid;
+  transition: all 0.2s;
+}
+
+.preview-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.preview-card h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.preview-card p {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+}
+
+.preview-btn-primary,
+.preview-btn-secondary,
+.preview-btn-destructive {
+  padding: 0.625rem 1.25rem;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.preview-btn-primary:hover,
+.preview-btn-secondary:hover,
+.preview-btn-destructive:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.preview-ui-elements {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+
+.preview-input {
+  padding: 0.625rem 1rem;
+  border: 2px solid;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  min-width: 200px;
+  transition: all 0.2s;
+}
+
+.preview-input:focus {
+  outline: none;
+  border-color: var(--preview-ring, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.preview-badge {
+  padding: 0.375rem 0.875rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.preview-muted {
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.preview-muted p {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+/* Dark mode adjustments */
+.theme-live-preview-container[data-mode="dark"] .preview-content {
+  background: #1a1a1a;
+}
+
+.theme-live-preview-container[data-mode="dark"] .preview-card {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.theme-live-preview-container[data-mode="dark"] .preview-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}

package/dist/fields/ThemeLivePreview.d.ts

@@ -0,0 +1,4 @@
+import './ThemeLivePreview.css';
+export declare const ThemeLivePreview: () => import("react").JSX.Element;
+export default ThemeLivePreview;
+//# sourceMappingURL=ThemeLivePreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeLivePreview.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeLivePreview.tsx"],"names":[],"mappings":"AAUA,OAAO,wBAAwB,CAAA;AAE/B,eAAO,MAAM,gBAAgB,mCA2K5B,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/fields/ThemeLivePreview.js

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Theme Live Preview Component
+ * Real-time preview of theme configuration
+ * Inspired by Payload CMS 3 Live Preview
+ */ import { useFormFields } from '@payloadcms/ui';
+import { useEffect, useState } from 'react';
+import './ThemeLivePreview.css';
+export const ThemeLivePreview = ()=>{
+    const allFields = useFormFields(([fields])=>fields);
+    const [previewMode, setPreviewMode] = useState('light');
+    const themeConfig = allFields?.themeConfiguration?.value;
+    // Extract colors from theme configuration
+    // Support both basic (lightMode/darkMode) and extended (extendedLightMode/extendedDarkMode)
+    const lightMode = themeConfig?.extendedLightMode || themeConfig?.lightMode;
+    const darkMode = themeConfig?.extendedDarkMode || themeConfig?.darkMode;
+    const activeMode = previewMode === 'light' ? lightMode : darkMode;
+    // Apply theme colors to preview
+    useEffect(()=>{
+        if (!activeMode) return;
+        const root = document.documentElement;
+        Object.entries(activeMode).forEach(([key, value])=>{
+            if (typeof value === 'string') {
+                root.style.setProperty(`--preview-${key}`, value);
+            }
+        });
+    }, [
+        activeMode
+    ]);
+    if (!themeConfig) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "theme-live-preview-empty",
+            children: /*#__PURE__*/ _jsx("p", {
+                children: "Configure your theme to see live preview"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "theme-live-preview-container",
+        "data-mode": previewMode,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "preview-header",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        children: "Live Theme Preview"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "mode-toggle",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: previewMode === 'light' ? 'active' : '',
+                                onClick: ()=>setPreviewMode('light'),
+                                children: "☀️ Light"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                className: previewMode === 'dark' ? 'active' : '',
+                                onClick: ()=>setPreviewMode('dark'),
+                                children: "🌙 Dark"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "preview-content",
+                style: {
+                    backgroundColor: activeMode?.background || '#ffffff',
+                    color: activeMode?.foreground || '#000000'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "preview-section",
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                style: {
+                                    color: activeMode?.foreground
+                                },
+                                children: "Welcome to Your Site"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: {
+                                    color: activeMode?.mutedForeground
+                                },
+                                children: "This is a live preview of your theme configuration"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "preview-cards",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "preview-card",
+                                style: {
+                                    backgroundColor: activeMode?.card || '#ffffff',
+                                    color: activeMode?.cardForeground || '#000000',
+                                    borderColor: activeMode?.border || '#e2e8f0'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("h3", {
+                                        children: "Featured Content"
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        style: {
+                                            color: activeMode?.mutedForeground
+                                        },
+                                        children: "Card component with theme colors"
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        className: "preview-btn-primary",
+                                        style: {
+                                            backgroundColor: activeMode?.primary || '#0070f3',
+                                            color: activeMode?.primaryForeground || '#ffffff'
+                                        },
+                                        children: "Primary Action"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "preview-card",
+                                style: {
+                                    backgroundColor: activeMode?.card || '#ffffff',
+                                    color: activeMode?.cardForeground || '#000000',
+                                    borderColor: activeMode?.border || '#e2e8f0'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("h3", {
+                                        children: "Secondary Card"
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        style: {
+                                            color: activeMode?.mutedForeground
+                                        },
+                                        children: "Another card to showcase your theme"
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        className: "preview-btn-secondary",
+                                        style: {
+                                            backgroundColor: activeMode?.secondary || '#f1f5f9',
+                                            color: activeMode?.secondaryForeground || '#0f172a'
+                                        },
+                                        children: "Secondary"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "preview-ui-elements",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                placeholder: "Input field",
+                                className: "preview-input",
+                                style: {
+                                    backgroundColor: activeMode?.background,
+                                    color: activeMode?.foreground,
+                                    borderColor: activeMode?.input || activeMode?.border
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "preview-badge",
+                                style: {
+                                    backgroundColor: activeMode?.accent || '#f1f5f9',
+                                    color: activeMode?.accentForeground || '#0f172a'
+                                },
+                                children: "Accent Badge"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                className: "preview-btn-destructive",
+                                style: {
+                                    backgroundColor: activeMode?.destructive || '#ef4444',
+                                    color: activeMode?.destructiveForeground || '#ffffff'
+                                },
+                                children: "Destructive"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "preview-muted",
+                        style: {
+                            backgroundColor: activeMode?.muted || '#f1f5f9',
+                            color: activeMode?.mutedForeground || '#64748b'
+                        },
+                        children: /*#__PURE__*/ _jsx("p", {
+                            children: "Muted background section for less prominent content"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default ThemeLivePreview;
+
+//# sourceMappingURL=ThemeLivePreview.js.map