@kilivi/payloadcms-theme-management 0.1.13 → 0.1.15

package/dist/fields/ThemeColorPickerField.css

@@ -1,138 +1,138 @@
-.theme-color-picker-field {
-  margin-bottom: 1rem;
-}
-
-.theme-color-picker-field .field-header {
-  margin-bottom: 0.5rem;
-}
-
-.theme-color-picker-field .field-label {
-  display: block;
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--theme-text);
-  margin-bottom: 0.25rem;
-}
-
-.theme-color-picker-field .field-description {
-  font-size: 0.75rem;
-  color: var(--theme-elevation-400);
-  margin-top: 0.25rem;
-}
-
-.theme-color-picker-field .color-picker-container {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.theme-color-picker-field .color-input-wrapper {
-  display: flex;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.theme-color-picker-field .color-input {
-  width: 60px;
-  height: 38px;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 2px;
-}
-
-.theme-color-picker-field .color-input:hover {
-  border-color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .color-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-}
-
-.theme-color-picker-field .text-input {
-  flex: 1;
-  height: 38px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 0.875rem;
-  background: var(--theme-elevation-0);
-  color: var(--theme-text);
-}
-
-.theme-color-picker-field .text-input:hover {
-  border-color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .text-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-  border-color: var(--theme-elevation-500);
-}
-
-.theme-color-picker-field .text-input::placeholder {
-  color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .text-input:invalid {
-  border-color: #ef4444;
-}
-
-.theme-color-picker-field .color-preview {
-  width: 120px;
-  height: 38px;
-  border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.theme-color-picker-field .color-preview .preview-label {
-  font-size: 0.75rem;
-  font-family: monospace;
-  padding: 0.25rem 0.5rem;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 2px;
-  backdrop-filter: blur(4px);
-  color: #000;
-  font-weight: 500;
-}
-
-.theme-color-picker-field .mini-preview {
-  margin-top: 1rem;
-  padding: 1rem;
-  border-radius: 6px;
-  border: 1px solid;
-}
-
-.theme-color-picker-field .mini-preview .preview-card {
-  padding: 1rem;
-  border-radius: 4px;
-  border: 1px solid;
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.theme-color-picker-field .mini-preview .preview-button {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  border: none;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.theme-color-picker-field .mini-preview .preview-button:hover {
-  opacity: 0.9;
-}
-
-.theme-color-picker-field .mini-preview .preview-button.secondary {
-  border: 1px solid currentColor;
-}
+.theme-color-picker-field {
+  margin-bottom: 1rem;
+}
+
+.theme-color-picker-field .field-header {
+  margin-bottom: 0.5rem;
+}
+
+.theme-color-picker-field .field-label {
+  display: block;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--theme-text);
+  margin-bottom: 0.25rem;
+}
+
+.theme-color-picker-field .field-description {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-400);
+  margin-top: 0.25rem;
+}
+
+.theme-color-picker-field .color-picker-container {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.theme-color-picker-field .color-input-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.theme-color-picker-field .color-input {
+  width: 60px;
+  height: 38px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.theme-color-picker-field .color-input:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .color-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+}
+
+.theme-color-picker-field .text-input {
+  flex: 1;
+  height: 38px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.875rem;
+  background: var(--theme-elevation-0);
+  color: var(--theme-text);
+}
+
+.theme-color-picker-field .text-input:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .text-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+  border-color: var(--theme-elevation-500);
+}
+
+.theme-color-picker-field .text-input::placeholder {
+  color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .text-input:invalid {
+  border-color: #ef4444;
+}
+
+.theme-color-picker-field .color-preview {
+  width: 120px;
+  height: 38px;
+  border-radius: 4px;
+  border: 1px solid var(--theme-elevation-200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-color-picker-field .color-preview .preview-label {
+  font-size: 0.75rem;
+  font-family: monospace;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 2px;
+  backdrop-filter: blur(4px);
+  color: #000;
+  font-weight: 500;
+}
+
+.theme-color-picker-field .mini-preview {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 6px;
+  border: 1px solid;
+}
+
+.theme-color-picker-field .mini-preview .preview-card {
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.theme-color-picker-field .mini-preview .preview-button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.theme-color-picker-field .mini-preview .preview-button:hover {
+  opacity: 0.9;
+}
+
+.theme-color-picker-field .mini-preview .preview-button.secondary {
+  border: 1px solid currentColor;
+}

package/dist/fields/ThemeColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField, useFormFields } from '@payloadcms/ui'\r\nimport type { TextFieldClientComponent } from 'payload'\r\nimport { useEffect, useMemo, useState } from 'react'\r\nimport './ThemeColorPickerField.css'\r\n\r\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\r\n  if (typeof value === 'string') {\r\n    return value\r\n  }\r\n\r\n  if (typeof value === 'object' && value !== null) {\r\n    const localized = value as Record<string, unknown>\r\n    const resolved = localized.en ?? localized.cs ?? localized['']\r\n    if (typeof resolved === 'string') {\r\n      return resolved\r\n    }\r\n  }\r\n\r\n  return fallback\r\n}\r\n\r\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\r\n  const { value, setValue } = useField<string>({ path })\r\n  const [localValue, setLocalValue] = useState(value || '')\r\n  const allFields = useFormFields(([fields]) => fields)\r\n\r\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\r\n  const modePrefix = `themeConfiguration.${mode}`\r\n\r\n  useEffect(() => {\r\n    setLocalValue(value || '')\r\n  }, [value])\r\n\r\n  const colorValues = useMemo(() => {\r\n    if (!allFields) {\r\n      return {}\r\n    }\r\n\r\n    const names = [\r\n      'background',\r\n      'foreground',\r\n      'card',\r\n      'cardForeground',\r\n      'popover',\r\n      'popoverForeground',\r\n      'primary',\r\n      'primaryForeground',\r\n      'secondary',\r\n      'secondaryForeground',\r\n      'muted',\r\n      'mutedForeground',\r\n      'accent',\r\n      'accentForeground',\r\n      'destructive',\r\n      'destructiveForeground',\r\n      'border',\r\n      'input',\r\n      'ring',\r\n    ]\r\n\r\n    return names.reduce<Record<string, string>>((accumulator, name) => {\r\n      const fieldState = allFields[`${modePrefix}.${name}`]\r\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\r\n      accumulator[name] = parsedValue ?? ''\r\n      return accumulator\r\n    }, {})\r\n  }, [allFields, modePrefix])\r\n\r\n  function handleChange(nextValue: string) {\r\n    setLocalValue(nextValue)\r\n    setValue(nextValue)\r\n  }\r\n\r\n  const fieldName = path.split('.').pop() || ''\r\n  const label = resolveLocalizedValue(field.label, fieldName)\r\n  const description = resolveLocalizedValue(field.admin?.description, '')\r\n\r\n  return (\r\n    <div className=\"theme-color-picker-field\">\r\n      <div className=\"field-header\">\r\n        <label className=\"field-label\">{label}</label>\r\n        {description && <div className=\"field-description\">{description}</div>}\r\n      </div>\r\n\r\n      <div className=\"color-picker-container\">\r\n        <div className=\"color-input-wrapper\">\r\n          <input\r\n            type=\"color\"\r\n            value={localValue || '#000000'}\r\n            onChange={(event) => handleChange(event.target.value)}\r\n            className=\"color-input\"\r\n          />\r\n          <input\r\n            type=\"text\"\r\n            value={localValue || ''}\r\n            onChange={(event) => handleChange(event.target.value)}\r\n            placeholder=\"#000000\"\r\n            className=\"text-input\"\r\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\r\n          />\r\n        </div>\r\n\r\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\r\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\r\n        </div>\r\n      </div>\r\n\r\n      {(fieldName === 'primary' || fieldName === 'background') && (\r\n        <div\r\n          className=\"mini-preview\"\r\n          style={{\r\n            backgroundColor: colorValues.background || '#ffffff',\r\n            color: colorValues.foreground || '#000000',\r\n            borderColor: colorValues.border || '#e2e8f0',\r\n          }}\r\n        >\r\n          <div\r\n            className=\"preview-card\"\r\n            style={{\r\n              backgroundColor: colorValues.card || '#ffffff',\r\n              color: colorValues.cardForeground || '#000000',\r\n              borderColor: colorValues.border || '#e2e8f0',\r\n            }}\r\n          >\r\n            <button\r\n              className=\"preview-button\"\r\n              style={{\r\n                backgroundColor: colorValues.primary || '#0070f3',\r\n                color: colorValues.primaryForeground || '#ffffff',\r\n              }}\r\n            >\r\n              Primary Button\r\n            </button>\r\n            <button\r\n              className=\"preview-button secondary\"\r\n              style={{\r\n                backgroundColor: colorValues.secondary || '#f1f5f9',\r\n                color: colorValues.secondaryForeground || '#0f172a',\r\n              }}\r\n            >\r\n              Secondary\r\n            </button>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default ThemeColorPickerField\r\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { useEffect, useMemo, useState } from 'react'\nimport './ThemeColorPickerField.css'\n\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const localized = value as Record<string, unknown>\n    const resolved = localized.en ?? localized.cs ?? localized['']\n    if (typeof resolved === 'string') {\n      return resolved\n    }\n  }\n\n  return fallback\n}\n\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\n  const allFields = useFormFields(([fields]) => fields)\n\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\n  const modePrefix = `themeConfiguration.${mode}`\n\n  useEffect(() => {\n    setLocalValue(value || '')\n  }, [value])\n\n  const colorValues = useMemo(() => {\n    if (!allFields) {\n      return {}\n    }\n\n    const names = [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'popover',\n      'popoverForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n      'border',\n      'input',\n      'ring',\n    ]\n\n    return names.reduce<Record<string, string>>((accumulator, name) => {\n      const fieldState = allFields[`${modePrefix}.${name}`]\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\n      accumulator[name] = parsedValue ?? ''\n      return accumulator\n    }, {})\n  }, [allFields, modePrefix])\n\n  function handleChange(nextValue: string) {\n    setLocalValue(nextValue)\n    setValue(nextValue)\n  }\n\n  const fieldName = path.split('.').pop() || ''\n  const label = resolveLocalizedValue(field.label, fieldName)\n  const description = resolveLocalizedValue(field.admin?.description, '')\n\n  return (\n    <div className=\"theme-color-picker-field\">\n      <div className=\"field-header\">\n        <label className=\"field-label\">{label}</label>\n        {description && <div className=\"field-description\">{description}</div>}\n      </div>\n\n      <div className=\"color-picker-container\">\n        <div className=\"color-input-wrapper\">\n          <input\n            type=\"color\"\n            value={localValue || '#000000'}\n            onChange={(event) => handleChange(event.target.value)}\n            className=\"color-input\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleChange(event.target.value)}\n            placeholder=\"#000000\"\n            className=\"text-input\"\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\n          />\n        </div>\n\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\n        </div>\n      </div>\n\n      {(fieldName === 'primary' || fieldName === 'background') && (\n        <div\n          className=\"mini-preview\"\n          style={{\n            backgroundColor: colorValues.background || '#ffffff',\n            color: colorValues.foreground || '#000000',\n            borderColor: colorValues.border || '#e2e8f0',\n          }}\n        >\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: colorValues.card || '#ffffff',\n              color: colorValues.cardForeground || '#000000',\n              borderColor: colorValues.border || '#e2e8f0',\n            }}\n          >\n            <button\n              className=\"preview-button\"\n              style={{\n                backgroundColor: colorValues.primary || '#0070f3',\n                color: colorValues.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              className=\"preview-button secondary\"\n              style={{\n                backgroundColor: colorValues.secondary || '#f1f5f9',\n                color: colorValues.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemeColorPickerField\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}

package/dist/fields/ThemePreviewField.js.map

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

package/dist/fields/ThemeTokenSelectField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport type { SelectFieldClientProps } from 'payload'\r\nimport { useCallback, useEffect, useState } from 'react'\r\nimport { defaultThemePresets } from '../presets.js'\r\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\r\n\r\ninterface ThemeColorOption {\r\n  value: string\r\n  label: string\r\n  color: string\r\n  description?: string\r\n}\r\n\r\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\r\n  { value: 'background', label: 'Theme background', color: 'var(--background)' },\r\n  { value: 'card', label: 'Card background', color: 'var(--card)' },\r\n  { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\r\n  { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\r\n  { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\r\n  { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\r\n]\r\n\r\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\r\n  try {\r\n    const response = await fetch('/api/site-settings')\r\n    if (!response.ok) {\r\n      return null\r\n    }\r\n    const data = await response.json()\r\n    return data?.docs?.[0]?.themeConfiguration ?? null\r\n  } catch (error) {\r\n    console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\r\n    return null\r\n  }\r\n}\r\n\r\nfunction buildOptionsFromConfiguration(configuration: Record<string, unknown> | null): ThemeColorOption[] {\r\n  if (!configuration) {\r\n    return FALLBACK_TOKENS\r\n  }\r\n\r\n  const resolved = resolveThemeConfiguration(configuration)\r\n  const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\r\n  const orderedKeys: string[] = [\r\n    'background',\r\n    'card',\r\n    'muted',\r\n    'accent',\r\n    'secondary',\r\n    'primary',\r\n    'popover',\r\n  ]\r\n\r\n  const typedLightMode = lightMode as Record<string, string | null | undefined>\r\n\r\n  const tokens = orderedKeys\r\n    .map((key) => {\r\n      const value = typedLightMode?.[key]\r\n      if (typeof value !== 'string' || value.trim().length === 0) {\r\n        return null\r\n      }\r\n\r\n      const labelMap: Record<string, string> = {\r\n        background: 'Theme background',\r\n        card: 'Card background',\r\n        muted: 'Muted surface',\r\n        accent: 'Accent surface',\r\n        secondary: 'Secondary surface',\r\n        primary: 'Primary surface',\r\n        popover: 'Popover surface',\r\n      }\r\n\r\n      return {\r\n        value: key,\r\n        label: labelMap[key] ?? key,\r\n        color: value,\r\n      }\r\n    })\r\n    .filter((token): token is ThemeColorOption => Boolean(token))\r\n\r\n  return tokens.length > 0 ? tokens : FALLBACK_TOKENS\r\n}\r\n\r\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\r\n  const { path, field } = props\r\n  const { value, setValue } = useField<string>({ path })\r\n  const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\r\n  const selectedValue = value || 'background'\r\n\r\n  useEffect(() => {\r\n    let isMounted = true\r\n\r\n    fetchThemeConfiguration().then((configuration) => {\r\n      if (!isMounted) return\r\n      setOptions(buildOptionsFromConfiguration(configuration))\r\n    })\r\n\r\n    return () => {\r\n      isMounted = false\r\n    }\r\n  }, [])\r\n\r\n  const handleSelect = useCallback(\r\n    (nextValue: string) => {\r\n      setValue(nextValue)\r\n    },\r\n    [setValue],\r\n  )\r\n\r\n  const label = typeof field.label === 'string' ? field.label : ''\r\n  let description = ''\r\n  if (typeof field.admin?.description === 'string') {\r\n    description = field.admin.description\r\n  } else if (\r\n    field.admin?.description &&\r\n    typeof field.admin.description === 'object' &&\r\n    typeof field.admin.description.en === 'string'\r\n  ) {\r\n    description = field.admin.description.en\r\n  }\r\n\r\n  return (\r\n    <div className=\"field-type theme-token-select\">\r\n      {label && (\r\n        <label\r\n          className=\"field-label\"\r\n          htmlFor={path}\r\n          style={{ display: 'block', marginBottom: '8px' }}\r\n        >\r\n          {label}\r\n          {field.required && <span className=\"required\">*</span>}\r\n        </label>\r\n      )}\r\n\r\n      {description && (\r\n        <div\r\n          className=\"field-description\"\r\n          style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\r\n        >\r\n          {description}\r\n        </div>\r\n      )}\r\n\r\n      <div\r\n        className=\"token-grid\"\r\n        style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\r\n          gap: '10px',\r\n        }}\r\n      >\r\n        {options.map((option) => {\r\n          const isActive = option.value === selectedValue\r\n          return (\r\n            <button\r\n              type=\"button\"\r\n              key={option.value}\r\n              onClick={() => handleSelect(option.value)}\r\n              style={{\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                gap: '10px',\r\n                padding: '10px 12px',\r\n                borderRadius: '10px',\r\n                border: isActive\r\n                  ? '2px solid var(--theme-primary-500)'\r\n                  : '1px solid var(--theme-elevation-150)',\r\n                backgroundColor: 'var(--theme-elevation-0)',\r\n                boxShadow: isActive\r\n                  ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\r\n                  : '0 1px 2px rgba(15, 23, 42, 0.08)',\r\n                cursor: 'pointer',\r\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\r\n              }}\r\n            >\r\n              <span\r\n                aria-hidden\r\n                style={{\r\n                  width: '32px',\r\n                  height: '32px',\r\n                  borderRadius: '8px',\r\n                  border: '1px solid rgba(15, 23, 42, 0.08)',\r\n                  background: option.color,\r\n                }}\r\n              />\r\n              <span\r\n                style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\r\n              >\r\n                {option.label}\r\n              </span>\r\n            </button>\r\n          )\r\n        })}\r\n      </div>\r\n\r\n      <select\r\n        id={path}\r\n        value={selectedValue}\r\n        onChange={(event) => handleSelect(event.target.value)}\r\n        style={{ display: 'none' }}\r\n      >\r\n        {options.map((option) => (\r\n          <option key={option.value} value={option.value}>\r\n            {option.label}\r\n          </option>\r\n        ))}\r\n      </select>\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","useCallback","useEffect","useState","defaultThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","isMounted","then","handleSelect","nextValue","description","admin","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useState } from 'react'\nimport { defaultThemePresets } from '../presets.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n  value: string\n  label: string\n  color: string\n  description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n  { value: 'background', label: 'Theme background', color: 'var(--background)' },\n  { value: 'card', label: 'Card background', color: 'var(--card)' },\n  { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\n  { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\n  { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\n  { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\n]\n\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\n  try {\n    const response = await fetch('/api/site-settings')\n    if (!response.ok) {\n      return null\n    }\n    const data = await response.json()\n    return data?.docs?.[0]?.themeConfiguration ?? null\n  } catch (error) {\n    console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\n    return null\n  }\n}\n\nfunction buildOptionsFromConfiguration(configuration: Record<string, unknown> | null): ThemeColorOption[] {\n  if (!configuration) {\n    return FALLBACK_TOKENS\n  }\n\n  const resolved = resolveThemeConfiguration(configuration)\n  const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\n  const orderedKeys: string[] = [\n    'background',\n    'card',\n    'muted',\n    'accent',\n    'secondary',\n    'primary',\n    'popover',\n  ]\n\n  const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n  const tokens = orderedKeys\n    .map((key) => {\n      const value = typedLightMode?.[key]\n      if (typeof value !== 'string' || value.trim().length === 0) {\n        return null\n      }\n\n      const labelMap: Record<string, string> = {\n        background: 'Theme background',\n        card: 'Card background',\n        muted: 'Muted surface',\n        accent: 'Accent surface',\n        secondary: 'Secondary surface',\n        primary: 'Primary surface',\n        popover: 'Popover surface',\n      }\n\n      return {\n        value: key,\n        label: labelMap[key] ?? key,\n        color: value,\n      }\n    })\n    .filter((token): token is ThemeColorOption => Boolean(token))\n\n  return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n  const { path, field } = props\n  const { value, setValue } = useField<string>({ path })\n  const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n  const selectedValue = value || 'background'\n\n  useEffect(() => {\n    let isMounted = true\n\n    fetchThemeConfiguration().then((configuration) => {\n      if (!isMounted) return\n      setOptions(buildOptionsFromConfiguration(configuration))\n    })\n\n    return () => {\n      isMounted = false\n    }\n  }, [])\n\n  const handleSelect = useCallback(\n    (nextValue: string) => {\n      setValue(nextValue)\n    },\n    [setValue],\n  )\n\n  const label = typeof field.label === 'string' ? field.label : ''\n  let description = ''\n  if (typeof field.admin?.description === 'string') {\n    description = field.admin.description\n  } else if (\n    field.admin?.description &&\n    typeof field.admin.description === 'object' &&\n    typeof field.admin.description.en === 'string'\n  ) {\n    description = field.admin.description.en\n  }\n\n  return (\n    <div className=\"field-type theme-token-select\">\n      {label && (\n        <label\n          className=\"field-label\"\n          htmlFor={path}\n          style={{ display: 'block', marginBottom: '8px' }}\n        >\n          {label}\n          {field.required && <span className=\"required\">*</span>}\n        </label>\n      )}\n\n      {description && (\n        <div\n          className=\"field-description\"\n          style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n        >\n          {description}\n        </div>\n      )}\n\n      <div\n        className=\"token-grid\"\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n          gap: '10px',\n        }}\n      >\n        {options.map((option) => {\n          const isActive = option.value === selectedValue\n          return (\n            <button\n              type=\"button\"\n              key={option.value}\n              onClick={() => handleSelect(option.value)}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: '10px',\n                padding: '10px 12px',\n                borderRadius: '10px',\n                border: isActive\n                  ? '2px solid var(--theme-primary-500)'\n                  : '1px solid var(--theme-elevation-150)',\n                backgroundColor: 'var(--theme-elevation-0)',\n                boxShadow: isActive\n                  ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n                  : '0 1px 2px rgba(15, 23, 42, 0.08)',\n                cursor: 'pointer',\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n              }}\n            >\n              <span\n                aria-hidden\n                style={{\n                  width: '32px',\n                  height: '32px',\n                  borderRadius: '8px',\n                  border: '1px solid rgba(15, 23, 42, 0.08)',\n                  background: option.color,\n                }}\n              />\n              <span\n                style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n              >\n                {option.label}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n\n      <select\n        id={path}\n        value={selectedValue}\n        onChange={(event) => handleSelect(event.target.value)}\n        style={{ display: 'none' }}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </div>\n  )\n}\n"],"names":["useField","useCallback","useEffect","useState","defaultThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","isMounted","then","handleSelect","nextValue","description","admin","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"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"}

package/dist/fields/colorModeFields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\r\n\r\nconst themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField'\r\n\r\ntype LocalizedText = Record<string, string>\r\n\r\nconst colorFieldKeys = [\r\n  'background',\r\n  'foreground',\r\n  'primary',\r\n  'primaryForeground',\r\n  'card',\r\n  'cardForeground',\r\n  'popover',\r\n  'popoverForeground',\r\n  'secondary',\r\n  'secondaryForeground',\r\n  'muted',\r\n  'mutedForeground',\r\n  'accent',\r\n  'accentForeground',\r\n  'destructive',\r\n  'destructiveForeground',\r\n  'border',\r\n  'input',\r\n  'ring',\r\n] as const\r\n\r\ntype ColorToken = (typeof colorFieldKeys)[number]\r\n\r\ninterface ColorFieldDefinition {\r\n  name: ColorToken\r\n  label: LocalizedText\r\n  description: LocalizedText\r\n}\r\n\r\ntype ColorPalette = Record<ColorToken, string>\r\n\r\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\r\n  {\r\n    name: 'background',\r\n    label: { en: 'Background', cs: 'Pozadí' },\r\n    description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\r\n  },\r\n  {\r\n    name: 'foreground',\r\n    label: { en: 'Foreground', cs: 'Popředí' },\r\n    description: { en: 'Main text color', cs: 'Hlavní barva textu' },\r\n  },\r\n  {\r\n    name: 'primary',\r\n    label: { en: 'Primary', cs: 'Primární' },\r\n    description: {\r\n      en: 'Primary brand color for buttons, links',\r\n      cs: 'Primární barva značky pro tlačítka, odkazy',\r\n    },\r\n  },\r\n  {\r\n    name: 'primaryForeground',\r\n    label: { en: 'Primary Foreground', cs: 'Primární popředí' },\r\n    description: {\r\n      en: 'Text color on primary background',\r\n      cs: 'Barva textu na primárním pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'card',\r\n    label: { en: 'Card', cs: 'Karta' },\r\n    description: { en: 'Card background color', cs: 'Barva pozadí karty' },\r\n  },\r\n  {\r\n    name: 'cardForeground',\r\n    label: { en: 'Card Foreground', cs: 'Karta popředí' },\r\n    description: {\r\n      en: 'Text color on card background',\r\n      cs: 'Barva textu na pozadí karty',\r\n    },\r\n  },\r\n  {\r\n    name: 'popover',\r\n    label: { en: 'Popover', cs: 'Popover' },\r\n    description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\r\n  },\r\n  {\r\n    name: 'popoverForeground',\r\n    label: { en: 'Popover Foreground', cs: 'Popover popředí' },\r\n    description: {\r\n      en: 'Text color on popover background',\r\n      cs: 'Barva textu na pozadí popoveru',\r\n    },\r\n  },\r\n  {\r\n    name: 'secondary',\r\n    label: { en: 'Secondary', cs: 'Sekundární' },\r\n    description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\r\n  },\r\n  {\r\n    name: 'secondaryForeground',\r\n    label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\r\n    description: {\r\n      en: 'Text color on secondary background',\r\n      cs: 'Barva textu na sekundárním pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'muted',\r\n    label: { en: 'Muted', cs: 'Ztlumený' },\r\n    description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\r\n  },\r\n  {\r\n    name: 'mutedForeground',\r\n    label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\r\n    description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\r\n  },\r\n  {\r\n    name: 'accent',\r\n    label: { en: 'Accent', cs: 'Akcent' },\r\n    description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\r\n  },\r\n  {\r\n    name: 'accentForeground',\r\n    label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\r\n    description: {\r\n      en: 'Text color on accent background',\r\n      cs: 'Barva textu na akcentovém pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'destructive',\r\n    label: { en: 'Destructive', cs: 'Destruktivní' },\r\n    description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\r\n  },\r\n  {\r\n    name: 'destructiveForeground',\r\n    label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\r\n    description: {\r\n      en: 'Text color on destructive background',\r\n      cs: 'Barva textu na destruktivním pozadí',\r\n    },\r\n  },\r\n  {\r\n    name: 'border',\r\n    label: { en: 'Border', cs: 'Okraj' },\r\n    description: { en: 'Border color', cs: 'Barva okraje' },\r\n  },\r\n  {\r\n    name: 'input',\r\n    label: { en: 'Input', cs: 'Vstup' },\r\n    description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\r\n  },\r\n  {\r\n    name: 'ring',\r\n    label: { en: 'Ring', cs: 'Prstenec' },\r\n    description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\r\n  },\r\n]\r\n\r\n// Light Mode Default Colors (Shadcn UI inspired defaults)\r\nexport const lightModeDefaults: ColorPalette = {\r\n  background: '#ffffff',\r\n  foreground: '#0a0a0a',\r\n  card: '#ffffff',\r\n  cardForeground: '#0a0a0a',\r\n  popover: '#ffffff',\r\n  popoverForeground: '#0a0a0a',\r\n  primary: '#9372f7',\r\n  primaryForeground: '#fafafa',\r\n  secondary: '#f4f4f5',\r\n  secondaryForeground: '#18181b',\r\n  muted: '#f4f4f5',\r\n  mutedForeground: '#71717a',\r\n  accent: '#f4f4f5',\r\n  accentForeground: '#18181b',\r\n  destructive: '#ef4444',\r\n  destructiveForeground: '#fafafa',\r\n  border: '#e4e4e7',\r\n  input: '#e4e4e7',\r\n  ring: '#18181b',\r\n}\r\n\r\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\r\nexport const darkModeDefaults: ColorPalette = {\r\n  background: '#0a0a0a',\r\n  foreground: '#fafafa',\r\n  card: '#09090b',\r\n  cardForeground: '#fafafa',\r\n  popover: '#09090b',\r\n  popoverForeground: '#fafafa',\r\n  primary: '#9372f7',\r\n  primaryForeground: '#09090b',\r\n  secondary: '#27272a',\r\n  secondaryForeground: '#fafafa',\r\n  muted: '#27272a',\r\n  mutedForeground: '#a1a1aa',\r\n  accent: '#27272a',\r\n  accentForeground: '#fafafa',\r\n  destructive: '#7f1d1d',\r\n  destructiveForeground: '#fafafa',\r\n  border: '#27272a',\r\n  input: '#27272a',\r\n  ring: '#d4d4d8',\r\n}\r\n\r\nfunction createColorFields(defaults: ColorPalette): Field[] {\r\n  return colorFieldDefinitions.map(({ name, label, description }) => ({\r\n    name,\r\n    type: 'text',\r\n    label,\r\n    defaultValue: defaults[name],\r\n    admin: {\r\n      components: {\r\n        Field: themeColorPickerComponentPath,\r\n      },\r\n      description,\r\n    },\r\n  }))\r\n}\r\n\r\nexport const lightModeField: Field = {\r\n  type: 'collapsible',\r\n  label: {\r\n    en: '☀️ Light Mode Colors',\r\n    cs: '☀️ Barvy světlého režimu',\r\n  },\r\n  admin: {\r\n    initCollapsed: true,\r\n    description: {\r\n      en: 'Configure colors for light mode',\r\n      cs: 'Nakonfigurujte barvy pro světlý režim',\r\n    },\r\n  },\r\n  fields: [\r\n    {\r\n      name: 'lightMode',\r\n      type: 'group',\r\n      fields: createColorFields(lightModeDefaults),\r\n    },\r\n  ],\r\n}\r\n\r\nexport const darkModeField: Field = {\r\n  type: 'collapsible',\r\n  label: {\r\n    en: '🌙 Dark Mode Colors',\r\n    cs: '🌙 Barvy tmavého režimu',\r\n  },\r\n  admin: {\r\n    initCollapsed: true,\r\n    description: {\r\n      en: 'Configure colors for dark mode',\r\n      cs: 'Nakonfigurujte barvy pro tmavý režim',\r\n    },\r\n  },\r\n  fields: [\r\n    {\r\n      name: 'darkMode',\r\n      type: 'group',\r\n      fields: createColorFields(darkModeDefaults),\r\n    },\r\n  ],\r\n}\r\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"AAEA,MAAMA,gCAAgC;AAItC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAYD,MAAMC,wBAAgD;IACpD;QACEC,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAcC,IAAI;QAAS;QACxCC,aAAa;YAAEF,IAAI;YAAyBC,IAAI;QAAsB;IACxE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAcC,IAAI;QAAU;QACzCC,aAAa;YAAEF,IAAI;YAAmBC,IAAI;QAAqB;IACjE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAWC,IAAI;QAAW;QACvCC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAsBC,IAAI;QAAmB;QAC1DC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAQC,IAAI;QAAQ;QACjCC,aAAa;YAAEF,IAAI;YAAyBC,IAAI;QAAqB;IACvE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAmBC,IAAI;QAAgB;QACpDC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAWC,IAAI;QAAU;QACtCC,aAAa;YAAEF,IAAI;YAA4BC,IAAI;QAAwB;IAC7E;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAsBC,IAAI;QAAkB;QACzDC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAaC,IAAI;QAAa;QAC3CC,aAAa;YAAEF,IAAI;YAAyBC,IAAI;QAAsB;IACxE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAwBC,IAAI;QAAqB;QAC9DC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAASC,IAAI;QAAW;QACrCC,aAAa;YAAEF,IAAI;YAAqBC,IAAI;QAAkB;IAChE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAoBC,IAAI;QAAmB;QACxDC,aAAa;YAAEF,IAAI;YAAoBC,IAAI;QAAuB;IACpE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAUC,IAAI;QAAS;QACpCC,aAAa;YAAEF,IAAI;YAA+BC,IAAI;QAAiC;IACzF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAqBC,IAAI;QAAiB;QACvDC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAeC,IAAI;QAAe;QAC/CC,aAAa;YAAEF,IAAI;YAAiCC,IAAI;QAA4B;IACtF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAA0BC,IAAI;QAAuB;QAClEC,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAUC,IAAI;QAAQ;QACnCC,aAAa;YAAEF,IAAI;YAAgBC,IAAI;QAAe;IACxD;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAASC,IAAI;QAAQ;QAClCC,aAAa;YAAEF,IAAI;YAAsBC,IAAI;QAAsB;IACrE;IACA;QACEH,MAAM;QACNC,OAAO;YAAEC,IAAI;YAAQC,IAAI;QAAW;QACpCC,aAAa;YAAEF,IAAI;YAAoBC,IAAI;QAAuB;IACpE;CACD;AAED,0DAA0D;AAC1D,OAAO,MAAME,oBAAkC;IAC7CC,YAAY;IACZC,YAAY;IACZC,MAAM;IACNC,gBAAgB;IAChBC,SAAS;IACTC,mBAAmB;IACnBC,SAAS;IACTC,mBAAmB;IACnBC,WAAW;IACXC,qBAAqB;IACrBC,OAAO;IACPC,iBAAiB;IACjBC,QAAQ;IACRC,kBAAkB;IAClBC,aAAa;IACbC,uBAAuB;IACvBC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAC;AAED,yDAAyD;AACzD,OAAO,MAAMC,mBAAiC;IAC5CnB,YAAY;IACZC,YAAY;IACZC,MAAM;IACNC,gBAAgB;IAChBC,SAAS;IACTC,mBAAmB;IACnBC,SAAS;IACTC,mBAAmB;IACnBC,WAAW;IACXC,qBAAqB;IACrBC,OAAO;IACPC,iBAAiB;IACjBC,QAAQ;IACRC,kBAAkB;IAClBC,aAAa;IACbC,uBAAuB;IACvBC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAC;AAED,SAASE,kBAAkBC,QAAsB;IAC/C,OAAO5B,sBAAsB6B,GAAG,CAAC,CAAC,EAAE5B,IAAI,EAAEC,KAAK,EAAEG,WAAW,EAAE,GAAM,CAAA;YAClEJ;YACA6B,MAAM;YACN5B;YACA6B,cAAcH,QAAQ,CAAC3B,KAAK;YAC5B+B,OAAO;gBACLC,YAAY;oBACVC,OAAOpC;gBACT;gBACAO;YACF;QACF,CAAA;AACF;AAEA,OAAO,MAAM8B,iBAAwB;IACnCL,MAAM;IACN5B,OAAO;QACLC,IAAI;QACJC,IAAI;IACN;IACA4B,OAAO;QACLI,eAAe;QACf/B,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACAiC,QAAQ;QACN;YACEpC,MAAM;YACN6B,MAAM;YACNO,QAAQV,kBAAkBrB;QAC5B;KACD;AACH,EAAC;AAED,OAAO,MAAMgC,gBAAuB;IAClCR,MAAM;IACN5B,OAAO;QACLC,IAAI;QACJC,IAAI;IACN;IACA4B,OAAO;QACLI,eAAe;QACf/B,aAAa;YACXF,IAAI;YACJC,IAAI;QACN;IACF;IACAiC,QAAQ;QACN;YACEpC,MAAM;YACN6B,MAAM;YACNO,QAAQV,kBAAkBD;QAC5B;KACD;AACH,EAAC"}
+{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\n\nconst themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField'\n\ntype LocalizedText = Record<string, string>\n\nconst colorFieldKeys = [\n  'background',\n  'foreground',\n  'primary',\n  'primaryForeground',\n  'card',\n  'cardForeground',\n  'popover',\n  'popoverForeground',\n  'secondary',\n  'secondaryForeground',\n  'muted',\n  'mutedForeground',\n  'accent',\n  'accentForeground',\n  'destructive',\n  'destructiveForeground',\n  'border',\n  'input',\n  'ring',\n] as const\n\ntype ColorToken = (typeof colorFieldKeys)[number]\n\ninterface ColorFieldDefinition {\n  name: ColorToken\n  label: LocalizedText\n  description: LocalizedText\n}\n\ntype ColorPalette = Record<ColorToken, string>\n\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\n  {\n    name: 'background',\n    label: { en: 'Background', cs: 'Pozadí' },\n    description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\n  },\n  {\n    name: 'foreground',\n    label: { en: 'Foreground', cs: 'Popředí' },\n    description: { en: 'Main text color', cs: 'Hlavní barva textu' },\n  },\n  {\n    name: 'primary',\n    label: { en: 'Primary', cs: 'Primární' },\n    description: {\n      en: 'Primary brand color for buttons, links',\n      cs: 'Primární barva značky pro tlačítka, odkazy',\n    },\n  },\n  {\n    name: 'primaryForeground',\n    label: { en: 'Primary Foreground', cs: 'Primární popředí' },\n    description: {\n      en: 'Text color on primary background',\n      cs: 'Barva textu na primárním pozadí',\n    },\n  },\n  {\n    name: 'card',\n    label: { en: 'Card', cs: 'Karta' },\n    description: { en: 'Card background color', cs: 'Barva pozadí karty' },\n  },\n  {\n    name: 'cardForeground',\n    label: { en: 'Card Foreground', cs: 'Karta popředí' },\n    description: {\n      en: 'Text color on card background',\n      cs: 'Barva textu na pozadí karty',\n    },\n  },\n  {\n    name: 'popover',\n    label: { en: 'Popover', cs: 'Popover' },\n    description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\n  },\n  {\n    name: 'popoverForeground',\n    label: { en: 'Popover Foreground', cs: 'Popover popředí' },\n    description: {\n      en: 'Text color on popover background',\n      cs: 'Barva textu na pozadí popoveru',\n    },\n  },\n  {\n    name: 'secondary',\n    label: { en: 'Secondary', cs: 'Sekundární' },\n    description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\n  },\n  {\n    name: 'secondaryForeground',\n    label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\n    description: {\n      en: 'Text color on secondary background',\n      cs: 'Barva textu na sekundárním pozadí',\n    },\n  },\n  {\n    name: 'muted',\n    label: { en: 'Muted', cs: 'Ztlumený' },\n    description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\n  },\n  {\n    name: 'mutedForeground',\n    label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\n    description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\n  },\n  {\n    name: 'accent',\n    label: { en: 'Accent', cs: 'Akcent' },\n    description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\n  },\n  {\n    name: 'accentForeground',\n    label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\n    description: {\n      en: 'Text color on accent background',\n      cs: 'Barva textu na akcentovém pozadí',\n    },\n  },\n  {\n    name: 'destructive',\n    label: { en: 'Destructive', cs: 'Destruktivní' },\n    description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\n  },\n  {\n    name: 'destructiveForeground',\n    label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\n    description: {\n      en: 'Text color on destructive background',\n      cs: 'Barva textu na destruktivním pozadí',\n    },\n  },\n  {\n    name: 'border',\n    label: { en: 'Border', cs: 'Okraj' },\n    description: { en: 'Border color', cs: 'Barva okraje' },\n  },\n  {\n    name: 'input',\n    label: { en: 'Input', cs: 'Vstup' },\n    description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\n  },\n  {\n    name: 'ring',\n    label: { en: 'Ring', cs: 'Prstenec' },\n    description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\n  },\n]\n\n// Light Mode Default Colors (Shadcn UI inspired defaults)\nexport const lightModeDefaults: ColorPalette = {\n  background: '#ffffff',\n  foreground: '#0a0a0a',\n  card: '#ffffff',\n  cardForeground: '#0a0a0a',\n  popover: '#ffffff',\n  popoverForeground: '#0a0a0a',\n  primary: '#9372f7',\n  primaryForeground: '#fafafa',\n  secondary: '#f4f4f5',\n  secondaryForeground: '#18181b',\n  muted: '#f4f4f5',\n  mutedForeground: '#71717a',\n  accent: '#f4f4f5',\n  accentForeground: '#18181b',\n  destructive: '#ef4444',\n  destructiveForeground: '#fafafa',\n  border: '#e4e4e7',\n  input: '#e4e4e7',\n  ring: '#18181b',\n}\n\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\nexport const darkModeDefaults: ColorPalette = {\n  background: '#0a0a0a',\n  foreground: '#fafafa',\n  card: '#09090b',\n  cardForeground: '#fafafa',\n  popover: '#09090b',\n  popoverForeground: '#fafafa',\n  primary: '#9372f7',\n  primaryForeground: '#09090b',\n  secondary: '#27272a',\n  secondaryForeground: '#fafafa',\n  muted: '#27272a',\n  mutedForeground: '#a1a1aa',\n  accent: '#27272a',\n  accentForeground: '#fafafa',\n  destructive: '#7f1d1d',\n  destructiveForeground: '#fafafa',\n  border: '#27272a',\n  input: '#27272a',\n  ring: '#d4d4d8',\n}\n\nfunction createColorFields(defaults: ColorPalette): Field[] {\n  return colorFieldDefinitions.map(({ name, label, description }) => ({\n    name,\n    type: 'text',\n    label,\n    defaultValue: defaults[name],\n    admin: {\n      components: {\n        Field: themeColorPickerComponentPath,\n      },\n      description,\n    },\n  }))\n}\n\nexport const lightModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '☀️ Light Mode Colors',\n    cs: '☀️ Barvy světlého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for light mode',\n      cs: 'Nakonfigurujte barvy pro světlý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'lightMode',\n      type: 'group',\n      fields: createColorFields(lightModeDefaults),\n    },\n  ],\n}\n\nexport const darkModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '🌙 Dark Mode Colors',\n    cs: '🌙 Barvy tmavého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for dark mode',\n      cs: 'Nakonfigurujte barvy pro tmavý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'darkMode',\n      type: 'group',\n      fields: createColorFields(darkModeDefaults),\n    },\n  ],\n}\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"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"}

package/dist/fields/themeConfigurationField.js

@@ -1,8 +1,8 @@
 import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS } from '../constants/themeFonts.js';
 import { darkModeField, lightModeField } from './colorModeFields.js';
-/**
- * Theme Configuration Field with Theme Selection as default value setter
- * Theme Selection populates lightMode/darkMode colors automatically
+/**
+ * Theme Configuration Field with Theme Selection as default value setter
+ * Theme Selection populates lightMode/darkMode colors automatically
  */ export function createThemeConfigurationField(options) {
     const { themePresets, defaultTheme, includeColorModeToggle, includeCustomCSS, enableAdvancedFeatures = true } = options;
     const themeOptions = themePresets.map((preset)=>{