@kilivi/payloadcms-theme-management 0.2.9 → 0.2.11

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 { HexColorInput, HexColorPicker } from 'react-colorful'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\n// Import CSS only in browser environment\n// This prevents Node.js from trying to import CSS directly\n// which causes ERR_UNKNOWN_FILE_EXTENSION error\nif (typeof window !== 'undefined') {\n  // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript\n  import('./ThemeColorPickerField.css').catch((err) => {\n    console.warn('Failed to load CSS file:', err)\n  })\n}\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(\n    (hex: string) => {\n      setHexValue(hex)\n      setLocalValue(hex)\n      setValue(hex)\n    },\n    [setValue],\n  )\n\n  const handleTextChange = useCallback(\n    (nextValue: string) => {\n      setLocalValue(nextValue)\n      setValue(nextValue)\n      setHexValue(toHex(nextValue))\n    },\n    [setValue],\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          <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 type=\"button\" onClick={() => setShowPicker(false)} className=\"close-button\">\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","HexColorInput","HexColorPicker","useCallback","useEffect","useMemo","useRef","useState","window","catch","err","console","warn","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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"}
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { HexColorInput, HexColorPicker } from 'react-colorful'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\n// Import CSS only in browser environment\n// This prevents Node.js from trying to import CSS directly\n// which causes ERR_UNKNOWN_FILE_EXTENSION error\nif (typeof window !== 'undefined') {\n  // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript\n  import('./ThemeColorPickerField.css').catch((err) => {\n    console.warn('Failed to load CSS file:', err)\n  })\n}\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(\n    (hex: string) => {\n      setHexValue(hex)\n      setLocalValue(hex)\n      setValue(hex)\n    },\n    [setValue],\n  )\n\n  const handleTextChange = useCallback(\n    (nextValue: string) => {\n      setLocalValue(nextValue)\n      setValue(nextValue)\n      setHexValue(toHex(nextValue))\n    },\n    [setValue],\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\" style={{ position: 'relative' }}>\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        {/* Compact Color Picker Popover */}\n        {showPicker && (\n          <div\n            ref={pickerRef}\n            style={{\n              position: 'absolute',\n              top: '100%',\n              left: 0,\n              marginTop: '8px',\n              padding: '16px',\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              width: '280px',\n            }}\n          >\n            <HexColorPicker\n              color={hexValue}\n              onChange={handleHexChange}\n              style={{ width: '100%', height: '160px' }}\n            />\n\n            <div style={{ marginTop: '12px', display: 'flex', gap: '8px', alignItems: 'center' }}>\n              <HexColorInput\n                color={hexValue}\n                onChange={handleHexChange}\n                prefixed\n                placeholder=\"#000000\"\n                style={{\n                  flex: 1,\n                  padding: '8px',\n                  borderRadius: '4px',\n                  border: '1px solid var(--theme-elevation-150)',\n                  fontSize: '13px',\n                  fontFamily: 'monospace',\n                }}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowPicker(false)}\n                style={{\n                  padding: '8px 14px',\n                  borderRadius: '4px',\n                  border: 'none',\n                  backgroundColor: 'var(--theme-elevation-500)',\n                  color: 'var(--theme-elevation-0)',\n                  cursor: 'pointer',\n                  fontSize: '12px',\n                  fontWeight: 600,\n                }}\n              >\n                OK\n              </button>\n            </div>\n\n            {/* Quick Color Swatches */}\n            <div style={{ marginTop: '12px' }}>\n              <div\n                style={{\n                  fontSize: '11px',\n                  fontWeight: 600,\n                  marginBottom: '6px',\n                  color: 'var(--theme-elevation-500)',\n                }}\n              >\n                Rychlé barvy\n              </div>\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '6px' }}>\n                {[\n                  '#ef4444',\n                  '#f97316',\n                  '#f59e0b',\n                  '#84cc16',\n                  '#10b981',\n                  '#06b6d4',\n                  '#3b82f6',\n                  '#8b5cf6',\n                  '#ec4899',\n                  '#64748b',\n                  '#000000',\n                  '#ffffff',\n                ].map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    onClick={() => handleHexChange(color)}\n                    style={{\n                      width: '100%',\n                      height: '28px',\n                      borderRadius: '4px',\n                      border:\n                        hexValue.toLowerCase() === color.toLowerCase()\n                          ? '2px solid var(--theme-elevation-800)'\n                          : '1px solid var(--theme-elevation-150)',\n                      backgroundColor: color,\n                      cursor: 'pointer',\n                    }}\n                    aria-label={`Select ${color}`}\n                  />\n                ))}\n              </div>\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","HexColorInput","HexColorPicker","useCallback","useEffect","useMemo","useRef","useState","window","catch","err","console","warn","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","style","position","button","type","backgroundColor","onClick","aria-label","input","onChange","placeholder","ref","top","left","marginTop","padding","border","borderRadius","boxShadow","zIndex","width","height","display","gap","alignItems","prefixed","flex","fontSize","fontFamily","cursor","fontWeight","marginBottom","gridTemplateColumns","toLowerCase","span","background","foreground","borderColor","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}

package/dist/fields/ThemePresetSelectField.d.ts

@@ -0,0 +1,4 @@
+import type { SelectFieldClientComponent } from 'payload';
+declare const ThemePresetSelectField: SelectFieldClientComponent;
+export default ThemePresetSelectField;
+//# sourceMappingURL=ThemePresetSelectField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePresetSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemePresetSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAIzD,QAAA,MAAM,sBAAsB,EAAE,0BAsO7B,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/fields/ThemePresetSelectField.js

@@ -0,0 +1,228 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useEffect, useState } from 'react';
+import { allExtendedThemePresets } from '../extended-presets.js';
+const ThemePresetSelectField = ({ field, path })=>{
+    const { value, setValue } = useField({
+        path
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const options = field.options || [];
+    const selectedOption = options.find((opt)=>opt.value === value);
+    const handleSelect = (optionValue)=>{
+        setValue(optionValue);
+        setIsOpen(false);
+    };
+    useEffect(()=>{
+        const handleClickOutside = (e)=>{
+            const target = e.target;
+            if (!target.closest('.theme-preset-select-container')) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return ()=>document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [
+        isOpen
+    ]);
+    const label = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme Preset';
+    const description = typeof field.admin?.description === 'string' ? field.admin.description : field.admin?.description?.en || field.admin?.description?.cs;
+    // Get color swatches for a preset
+    const getPresetColors = (presetValue)=>{
+        const preset = allExtendedThemePresets[presetValue];
+        if (!preset) return [];
+        const colors = [
+            preset.styles.light.primary,
+            preset.styles.light.secondary,
+            preset.styles.light.accent,
+            preset.styles.light.background,
+            preset.styles.light.foreground
+        ].filter(Boolean);
+        return colors.slice(0, 5) // Max 5 swatches
+        ;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "theme-preset-select-container",
+        style: {
+            position: 'relative',
+            marginBottom: '16px'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                style: {
+                    display: 'block',
+                    marginBottom: '6px',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-800)'
+                },
+                children: label
+            }),
+            description && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    fontSize: '12px',
+                    color: 'var(--theme-elevation-500)',
+                    marginBottom: '8px'
+                },
+                children: description
+            }),
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: ()=>setIsOpen(!isOpen),
+                style: {
+                    width: '100%',
+                    padding: '12px 14px',
+                    borderRadius: '6px',
+                    border: '1px solid var(--theme-elevation-200)',
+                    backgroundColor: 'var(--theme-input-bg)',
+                    color: 'var(--theme-elevation-800)',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    fontSize: '14px',
+                    transition: 'border-color 0.2s ease'
+                },
+                onMouseEnter: (e)=>{
+                    e.currentTarget.style.borderColor = 'var(--theme-elevation-400)';
+                },
+                onMouseLeave: (e)=>{
+                    e.currentTarget.style.borderColor = 'var(--theme-elevation-200)';
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '12px',
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    flex: 1
+                                },
+                                children: selectedOption?.label || 'Vyberte téma...'
+                            }),
+                            selectedOption && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '4px'
+                                },
+                                children: getPresetColors(selectedOption.value).map((color, index)=>/*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            width: '20px',
+                                            height: '20px',
+                                            borderRadius: '50%',
+                                            backgroundColor: color,
+                                            border: '1px solid rgba(15, 23, 42, 0.12)',
+                                            boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)'
+                                        }
+                                    }, `${selectedOption.value}-swatch-${index}`))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("svg", {
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 12 12",
+                        fill: "none",
+                        style: {
+                            transition: 'transform 0.2s ease',
+                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                            marginLeft: '8px'
+                        },
+                        children: /*#__PURE__*/ _jsx("path", {
+                            d: "M3 4.5L6 7.5L9 4.5",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        })
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: '4px',
+                    maxHeight: '320px',
+                    overflowY: 'auto',
+                    backgroundColor: 'var(--theme-elevation-0)',
+                    border: '1px solid var(--theme-elevation-200)',
+                    borderRadius: '8px',
+                    boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
+                    zIndex: 1000
+                },
+                children: options.map((option)=>{
+                    const isSelected = option.value === value;
+                    const colors = getPresetColors(option.value);
+                    return /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>handleSelect(option.value),
+                        style: {
+                            width: '100%',
+                            padding: '12px 14px',
+                            border: 'none',
+                            backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
+                            color: 'var(--theme-elevation-800)',
+                            textAlign: 'left',
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            gap: '12px',
+                            transition: 'background-color 0.15s ease'
+                        },
+                        onMouseEnter: (e)=>{
+                            if (!isSelected) {
+                                e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
+                            }
+                        },
+                        onMouseLeave: (e)=>{
+                            if (!isSelected) {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontWeight: isSelected ? 600 : 500,
+                                    flex: 1
+                                },
+                                children: option.label
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '4px'
+                                },
+                                children: colors.map((color, index)=>/*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            width: '24px',
+                                            height: '24px',
+                                            borderRadius: '50%',
+                                            backgroundColor: color,
+                                            border: '1px solid rgba(15, 23, 42, 0.12)',
+                                            boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)'
+                                        }
+                                    }, `${option.value}-dropdown-swatch-${index}`))
+                            })
+                        ]
+                    }, option.value);
+                })
+            })
+        ]
+    });
+};
+export default ThemePresetSelectField;
+
+//# sourceMappingURL=ThemePresetSelectField.js.map

package/dist/fields/ThemePresetSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemePresetSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\nimport { allExtendedThemePresets } from '../extended-presets.js'\n\nconst ThemePresetSelectField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [isOpen, setIsOpen] = useState(false)\n\n  const options = (field.options as Array<{ label: string; value: string }>) || []\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('.theme-preset-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'\n      ? field.label\n      : field.label?.en || field.label?.cs || 'Theme Preset'\n  const description =\n    typeof field.admin?.description === 'string'\n      ? field.admin.description\n      : field.admin?.description?.en || field.admin?.description?.cs\n\n  // Get color swatches for a preset\n  const getPresetColors = (presetValue: string) => {\n    const preset = allExtendedThemePresets[presetValue as keyof typeof allExtendedThemePresets]\n    if (!preset) return []\n\n    const colors = [\n      preset.styles.light.primary,\n      preset.styles.light.secondary,\n      preset.styles.light.accent,\n      preset.styles.light.background,\n      preset.styles.light.foreground,\n    ].filter(Boolean)\n\n    return colors.slice(0, 5) // Max 5 swatches\n  }\n\n  return (\n    <div\n      className=\"theme-preset-select-container\"\n      style={{ position: 'relative', marginBottom: '16px' }}\n    >\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      {description && (\n        <div\n          style={{\n            fontSize: '12px',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          {description}\n        </div>\n      )}\n\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        style={{\n          width: '100%',\n          padding: '12px 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          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        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>\n          <span style={{ flex: 1 }}>{selectedOption?.label || 'Vyberte téma...'}</span>\n          {selectedOption && (\n            <div style={{ display: 'flex', gap: '4px' }}>\n              {getPresetColors(selectedOption.value).map((color, index) => (\n                <span\n                  key={`${selectedOption.value}-swatch-${index}`}\n                  style={{\n                    width: '20px',\n                    height: '20px',\n                    borderRadius: '50%',\n                    backgroundColor: color,\n                    border: '1px solid rgba(15, 23, 42, 0.12)',\n                    boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)',\n                  }}\n                />\n              ))}\n            </div>\n          )}\n        </div>\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            marginLeft: '8px',\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: '320px',\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            const colors = getPresetColors(option.value)\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                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  gap: '12px',\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                    flex: 1,\n                  }}\n                >\n                  {option.label}\n                </div>\n\n                {/* Color Swatches */}\n                <div style={{ display: 'flex', gap: '4px' }}>\n                  {colors.map((color, index) => (\n                    <span\n                      key={`${option.value}-dropdown-swatch-${index}`}\n                      style={{\n                        width: '24px',\n                        height: '24px',\n                        borderRadius: '50%',\n                        backgroundColor: color,\n                        border: '1px solid rgba(15, 23, 42, 0.12)',\n                        boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)',\n                      }}\n                    />\n                  ))}\n                </div>\n              </button>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemePresetSelectField\n"],"names":["useField","useEffect","useState","allExtendedThemePresets","ThemePresetSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","description","admin","getPresetColors","presetValue","preset","colors","styles","light","primary","secondary","accent","background","foreground","filter","Boolean","slice","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","gap","flex","span","map","index","height","boxShadow","svg","viewBox","fill","transform","marginLeft","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","zIndex","option","isSelected"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAC3C,SAASC,uBAAuB,QAAQ,yBAAwB;AAEhE,MAAMC,yBAAqD,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAE;IACzE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGR,SAAiB;QAAEM;IAAK;IACpD,MAAM,CAACG,QAAQC,UAAU,GAAGR,SAAS;IAErC,MAAMS,UAAU,AAACN,MAAMM,OAAO,IAAgD,EAAE;IAChF,MAAMC,iBAAiBD,QAAQE,IAAI,CAAC,CAACC,MAAQA,IAAIP,KAAK,KAAKA;IAE3D,MAAMQ,eAAe,CAACC;QACpBR,SAASQ;QACTN,UAAU;IACZ;IAEAT,UAAU;QACR,MAAMgB,qBAAqB,CAACC;YAC1B,MAAMC,SAASD,EAAEC,MAAM;YACvB,IAAI,CAACA,OAAOC,OAAO,CAAC,mCAAmC;gBACrDV,UAAU;YACZ;QACF;QAEA,IAAID,QAAQ;YACVY,SAASC,gBAAgB,CAAC,aAAaL;YACvC,OAAO,IAAMI,SAASE,mBAAmB,CAAC,aAAaN;QACzD;IACF,GAAG;QAACR;KAAO;IAEX,MAAMe,QACJ,OAAOnB,MAAMmB,KAAK,KAAK,WACnBnB,MAAMmB,KAAK,GACXnB,MAAMmB,KAAK,EAAEC,MAAMpB,MAAMmB,KAAK,EAAEE,MAAM;IAC5C,MAAMC,cACJ,OAAOtB,MAAMuB,KAAK,EAAED,gBAAgB,WAChCtB,MAAMuB,KAAK,CAACD,WAAW,GACvBtB,MAAMuB,KAAK,EAAED,aAAaF,MAAMpB,MAAMuB,KAAK,EAAED,aAAaD;IAEhE,kCAAkC;IAClC,MAAMG,kBAAkB,CAACC;QACvB,MAAMC,SAAS5B,uBAAuB,CAAC2B,YAAoD;QAC3F,IAAI,CAACC,QAAQ,OAAO,EAAE;QAEtB,MAAMC,SAAS;YACbD,OAAOE,MAAM,CAACC,KAAK,CAACC,OAAO;YAC3BJ,OAAOE,MAAM,CAACC,KAAK,CAACE,SAAS;YAC7BL,OAAOE,MAAM,CAACC,KAAK,CAACG,MAAM;YAC1BN,OAAOE,MAAM,CAACC,KAAK,CAACI,UAAU;YAC9BP,OAAOE,MAAM,CAACC,KAAK,CAACK,UAAU;SAC/B,CAACC,MAAM,CAACC;QAET,OAAOT,OAAOU,KAAK,CAAC,GAAG,GAAG,iBAAiB;;IAC7C;IAEA,qBACE,MAACC;QACCC,WAAU;QACVC,OAAO;YAAEC,UAAU;YAAYC,cAAc;QAAO;;0BAEpD,KAACvB;gBACCqB,OAAO;oBACLG,SAAS;oBACTD,cAAc;oBACdE,UAAU;oBACVC,YAAY;oBACZC,OAAO;gBACT;0BAEC3B;;YAGFG,6BACC,KAACgB;gBACCE,OAAO;oBACLI,UAAU;oBACVE,OAAO;oBACPJ,cAAc;gBAChB;0BAECpB;;0BAIL,MAACyB;gBACCC,MAAK;gBACLC,SAAS,IAAM5C,UAAU,CAACD;gBAC1BoC,OAAO;oBACLU,OAAO;oBACPC,SAAS;oBACTC,cAAc;oBACdC,QAAQ;oBACRC,iBAAiB;oBACjBR,OAAO;oBACPS,WAAW;oBACXC,QAAQ;oBACRb,SAAS;oBACTc,gBAAgB;oBAChBC,YAAY;oBACZd,UAAU;oBACVe,YAAY;gBACd;gBACAC,cAAc,CAAC/C;oBACbA,EAAEgD,aAAa,CAACrB,KAAK,CAACsB,WAAW,GAAG;gBACtC;gBACAC,cAAc,CAAClD;oBACbA,EAAEgD,aAAa,CAACrB,KAAK,CAACsB,WAAW,GAAG;gBACtC;;kCAEA,MAACxB;wBAAIE,OAAO;4BAAEG,SAAS;4BAAQe,YAAY;4BAAUM,KAAK;4BAAQC,MAAM;wBAAE;;0CACxE,KAACC;gCAAK1B,OAAO;oCAAEyB,MAAM;gCAAE;0CAAI1D,gBAAgBY,SAAS;;4BACnDZ,gCACC,KAAC+B;gCAAIE,OAAO;oCAAEG,SAAS;oCAAQqB,KAAK;gCAAM;0CACvCxC,gBAAgBjB,eAAeL,KAAK,EAAEiE,GAAG,CAAC,CAACrB,OAAOsB,sBACjD,KAACF;wCAEC1B,OAAO;4CACLU,OAAO;4CACPmB,QAAQ;4CACRjB,cAAc;4CACdE,iBAAiBR;4CACjBO,QAAQ;4CACRiB,WAAW;wCACb;uCARK,GAAG/D,eAAeL,KAAK,CAAC,QAAQ,EAAEkE,OAAO;;;;kCAcxD,KAACG;wBACCrB,OAAM;wBACNmB,QAAO;wBACPG,SAAQ;wBACRC,MAAK;wBACLjC,OAAO;4BACLmB,YAAY;4BACZe,WAAWtE,SAAS,mBAAmB;4BACvCuE,YAAY;wBACd;kCAEA,cAAA,KAAC1E;4BACC2E,GAAE;4BACFC,QAAO;4BACPC,aAAY;4BACZC,eAAc;4BACdC,gBAAe;;;;;YAKpB5E,wBACC,KAACkC;gBACCE,OAAO;oBACLC,UAAU;oBACVwC,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,WAAW;oBACXC,WAAW;oBACXC,WAAW;oBACXhC,iBAAiB;oBACjBD,QAAQ;oBACRD,cAAc;oBACdkB,WAAW;oBACXiB,QAAQ;gBACV;0BAECjF,QAAQ6D,GAAG,CAAC,CAACqB;oBACZ,MAAMC,aAAaD,OAAOtF,KAAK,KAAKA;oBACpC,MAAMyB,SAASH,gBAAgBgE,OAAOtF,KAAK;oBAE3C,qBACE,MAAC6C;wBAECC,MAAK;wBACLC,SAAS,IAAMvC,aAAa8E,OAAOtF,KAAK;wBACxCsC,OAAO;4BACLU,OAAO;4BACPC,SAAS;4BACTE,QAAQ;4BACRC,iBAAiBmC,aAAa,+BAA+B;4BAC7D3C,OAAO;4BACPS,WAAW;4BACXC,QAAQ;4BACRZ,UAAU;4BACVD,SAAS;4BACTc,gBAAgB;4BAChBC,YAAY;4BACZM,KAAK;4BACLL,YAAY;wBACd;wBACAC,cAAc,CAAC/C;4BACb,IAAI,CAAC4E,YAAY;gCACf5E,EAAEgD,aAAa,CAACrB,KAAK,CAACc,eAAe,GAAG;4BAC1C;wBACF;wBACAS,cAAc,CAAClD;4BACb,IAAI,CAAC4E,YAAY;gCACf5E,EAAEgD,aAAa,CAACrB,KAAK,CAACc,eAAe,GAAG;4BAC1C;wBACF;;0CAEA,KAAChB;gCACCE,OAAO;oCACLK,YAAY4C,aAAa,MAAM;oCAC/BxB,MAAM;gCACR;0CAECuB,OAAOrE,KAAK;;0CAIf,KAACmB;gCAAIE,OAAO;oCAAEG,SAAS;oCAAQqB,KAAK;gCAAM;0CACvCrC,OAAOwC,GAAG,CAAC,CAACrB,OAAOsB,sBAClB,KAACF;wCAEC1B,OAAO;4CACLU,OAAO;4CACPmB,QAAQ;4CACRjB,cAAc;4CACdE,iBAAiBR;4CACjBO,QAAQ;4CACRiB,WAAW;wCACb;uCARK,GAAGkB,OAAOtF,KAAK,CAAC,iBAAiB,EAAEkE,OAAO;;;uBA1ChDoB,OAAOtF,KAAK;gBAwDvB;;;;AAKV;AAEA,eAAeH,uBAAsB"}

package/dist/fields/VISUAL_EXAMPLES.d.ts

@@ -0,0 +1,153 @@
+/**
+ * Enhanced Font Selector - Visual Examples
+ *
+ * This file demonstrates how the font selector appears with actual fonts
+ */
+/**
+ * BEFORE (Standard Payload Select):
+ *
+ * ┌──────────────────────────────┐
+ * │ Body font             ▼      │
+ * ├──────────────────────────────┤
+ * │ System                       │
+ * │ Inter                        │
+ * │ Roboto                       │
+ * │ Open Sans                    │
+ * │ ...                          │
+ * └──────────────────────────────┘
+ *
+ * Issues:
+ * - No visual preview of fonts
+ * - Can't see how font looks
+ * - Generic dropdown appearance
+ * - No distinction between fonts
+ */
+/**
+ * AFTER (Custom Font Selector):
+ *
+ * ┌────────────────────────────────────┐
+ * │ Body font                          │
+ * │ ┌────────────────────────────┐     │
+ * │ │ Inter               ▼      │     │
+ * │ └────────────────────────────┘     │
+ * └────────────────────────────────────┘
+ *
+ * Opens dropdown:
+ *
+ * ┌────────────────────────────────────┐
+ * │ ✓ Inter                            │
+ * │   The quick brown fox jumps...     │
+ * │   (rendered in Inter font)         │
+ * ├────────────────────────────────────┤
+ * │   Roboto                           │
+ * │   The quick brown fox jumps...     │
+ * │   (rendered in Roboto font)        │
+ * ├────────────────────────────────────┤
+ * │   Playfair Display                 │
+ * │   The quick brown fox jumps...     │
+ * │   (rendered in Playfair font)      │
+ * └────────────────────────────────────┘
+ *
+ * Features:
+ * ✅ Live font preview
+ * ✅ Check mark on selected
+ * ✅ Hover effects
+ * ✅ Smooth transitions
+ * ✅ Font category badges
+ */
+/**
+ * Color Picker BEFORE (Inline Popover):
+ *
+ * ┌────────────────────────────────┐
+ * │ Primary color                  │
+ * │ ┌───┐ #3b82f6                  │
+ * │ │███│ ────────────             │
+ * │ └───┘                          │
+ * │   ┌──────────────────┐         │
+ * │   │  Color Picker    │         │
+ * │   │  [Hex Wheel]     │         │
+ * │   │  #3b82f6         │         │
+ * │   └──────────────────┘         │
+ * └────────────────────────────────┘
+ *
+ * Issues:
+ * - Takes up inline space
+ * - Hard to use on mobile
+ * - No quick color swatches
+ * - Click-outside handling complex
+ */
+/**
+ * Color Picker AFTER (Modal Drawer):
+ *
+ * Field:
+ * ┌────────────────────────────────┐
+ * │ Primary color                  │
+ * │ ┌───┐ #3b82f6                  │
+ * │ │███│ ────────────             │
+ * │ └───┘                          │
+ * └────────────────────────────────┘
+ *
+ * Click swatch → Opens Modal:
+ *
+ * ╔════════════════════════════════╗
+ * ║ Choose Primary color      [×]  ║
+ * ╠════════════════════════════════╣
+ * ║                                ║
+ * ║   ┌────────────────────┐       ║
+ * ║   │                    │       ║
+ * ║   │   [Color Wheel]    │       ║
+ * ║   │                    │       ║
+ * ║   └────────────────────┘       ║
+ * ║                                ║
+ * ║   #3b82f6          [Done]      ║
+ * ║                                ║
+ * ║   Quick Colors:                ║
+ * ║   ┌──┬──┬──┬──┬──┬──┬──┬──┐   ║
+ * ║   │██│██│██│██│██│██│██│██│   ║
+ * ║   └──┴──┴──┴──┴──┴──┴──┴──┘   ║
+ * ║                                ║
+ * ╚════════════════════════════════╝
+ *
+ * Features:
+ * ✅ Full-screen modal (Payload Drawer)
+ * ✅ Larger color picker (220px)
+ * ✅ Quick color swatches
+ * ✅ Better mobile UX
+ * ✅ Escape key to close
+ */
+/**
+ * Theme Preset Selector (Already Had Swatches!):
+ *
+ * ┌─────────────────────────────────────┐
+ * │ Cool & Professional     ●●●●●       │
+ * │ cool                                │
+ * ├─────────────────────────────────────┤
+ * │ Warm & Inviting        ●●●●●       │
+ * │ warm                                │
+ * ├─────────────────────────────────────┤
+ * │ Dark & Modern          ●●●●●       │
+ * │ dark                                │
+ * └─────────────────────────────────────┘
+ *
+ * Legend:
+ * ● = Color swatch for:
+ *     - Primary
+ *     - Secondary
+ *     - Accent
+ *     - Background
+ *     - Foreground
+ */
+export declare const examples: {
+    fontSelector: {
+        before: string;
+        after: string;
+    };
+    colorPicker: {
+        before: string;
+        after: string;
+    };
+    themePresets: {
+        status: string;
+    };
+};
+//# sourceMappingURL=VISUAL_EXAMPLES.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VISUAL_EXAMPLES.d.ts","sourceRoot":"","sources":["../../src/fields/VISUAL_EXAMPLES.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAYpB,CAAA"}