@kilivi/payloadcms-theme-management 2.0.0 → 2.1.0

package/dist/fields/AppearancePreviewField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/AppearancePreviewField.tsx"],"sourcesContent":["'use client'\n\nimport { useFormFields } from '@payloadcms/ui'\nimport { Monitor, Moon, Smartphone, Sparkles, Sun, Tablet, type LucideIcon } from 'lucide-react'\nimport { useId, useMemo, useState } from 'react'\nimport {\n  DEFAULT_DEVICE_PREVIEW_ID,\n  DEVICE_PREVIEWS,\n  getDevicePreview,\n  type DevicePreviewId,\n} from '../constants/devicePreviews.js'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\n\nconst DEVICE_ICONS: Record<DevicePreviewId, LucideIcon> = {\n  mobile: Smartphone,\n  tablet: Tablet,\n  desktop: Monitor,\n}\n\n/**\n * Live, reactive preview of the Visual Effects + Component Styles + colour\n * choices. Mounted as a `ui` field inside the Appearance Settings tab so editors\n * see the combined result of every control update instantly — mirroring the CSS\n * that `generateThemeCSS` produces on the front-end.\n */\n\ntype Mode = 'light' | 'dark'\n\nconst SHADOW_MAP: Record<string, string> = {\n  none: 'none',\n  subtle: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',\n  medium: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',\n  strong: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',\n  dramatic: '0 25px 50px -12px rgba(0,0,0,0.25)',\n}\n\nconst BLUR_PX_MAP: Record<string, string> = {\n  none: '0px',\n  slight: '4px',\n  medium: '8px',\n  strong: '16px',\n  heavy: '24px',\n}\n\nconst BUTTON_SIZE_MAP: Record<string, { padding: string; fontSize: string }> = {\n  small: { padding: '6px 12px', fontSize: '12px' },\n  medium: { padding: '8px 16px', fontSize: '13px' },\n  large: { padding: '10px 24px', fontSize: '15px' },\n  xl: { padding: '14px 32px', fontSize: '17px' },\n}\n\nfunction radiusToPx(token: string | undefined): string {\n  const preset = borderRadiusPresets[(token ?? 'medium') as keyof typeof borderRadiusPresets]\n  const css = preset?.css as Record<string, string> | undefined\n  return css?.['--radius-large'] ?? css?.['--radius-default'] ?? '0.75rem'\n}\n\ninterface Palette {\n  background: string\n  foreground: string\n  card: string\n  cardForeground: 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  border: string\n  gradientFrom: string\n  gradientVia: string\n  gradientTo: string\n}\n\ninterface Choices {\n  effectStyle: string\n  shadowIntensity: string\n  backdropBlur: string\n  borderStyle: string\n  borderWidth: string\n  glassOpacity: number\n  buttonVariant: string\n  buttonSize: string\n  cardStyle: string\n  cardHoverEffect: string\n  imageStyle: string\n  navbarStyle: string\n  footerStyle: string\n  linkStyle: string\n  borderRadius: string\n}\n\nfunction cardSurface(c: Choices, p: Palette, radius: string): React.CSSProperties {\n  const base: React.CSSProperties = {\n    background: p.card,\n    color: p.cardForeground,\n    borderRadius: radius,\n    border: `${c.borderWidth} ${c.borderStyle === 'none' ? 'solid' : c.borderStyle} ${p.border}`,\n    padding: '16px',\n    transition: 'transform 200ms ease, box-shadow 200ms ease',\n  }\n\n  // Card style takes precedence for the structural look, effect style for depth.\n  if (c.cardStyle === 'bordered') {\n    return {\n      ...base,\n      border: `2px solid ${p.foreground}`,\n      borderRadius: 0,\n      boxShadow: `4px 4px 0 ${p.foreground}`,\n    }\n  }\n  if (c.cardStyle === 'gradient-border') {\n    return {\n      ...base,\n      border: '2px solid transparent',\n      borderImage: `linear-gradient(135deg, ${p.gradientFrom}, ${p.gradientVia}, ${p.gradientTo}) 1`,\n      boxShadow: SHADOW_MAP[c.shadowIntensity] ?? SHADOW_MAP.medium,\n    }\n  }\n\n  switch (c.effectStyle) {\n    case 'glass':\n      return {\n        ...base,\n        background: `color-mix(in srgb, ${p.card} ${c.glassOpacity}%, transparent)`,\n        backdropFilter: `blur(${BLUR_PX_MAP[c.backdropBlur] ?? '8px'}) saturate(150%)`,\n        border: `1px solid color-mix(in srgb, ${p.border} 50%, transparent)`,\n        boxShadow: '0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.15)',\n      }\n    case 'neumorphic':\n      return {\n        ...base,\n        background: p.background,\n        border: 'none',\n        boxShadow: '6px 6px 12px rgba(0,0,0,0.12), -6px -6px 12px rgba(255,255,255,0.7)',\n      }\n    case 'clay':\n      return {\n        ...base,\n        border: 'none',\n        boxShadow: '4px 4px 0 rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.08)',\n      }\n    case 'elevated':\n      return { ...base, border: 'none', boxShadow: SHADOW_MAP[c.shadowIntensity] ?? SHADOW_MAP.medium }\n    case 'flat':\n    default:\n      return { ...base, boxShadow: 'none' }\n  }\n}\n\nfunction buttonStyle(c: Choices, p: Palette, radius: string): React.CSSProperties {\n  const size = BUTTON_SIZE_MAP[c.buttonSize] ?? BUTTON_SIZE_MAP.medium!\n  const base: React.CSSProperties = {\n    ...size,\n    fontWeight: 600,\n    cursor: 'pointer',\n    borderRadius: radius,\n    border: 'none',\n    transition: 'transform 120ms ease, box-shadow 120ms ease',\n    whiteSpace: 'nowrap',\n  }\n  switch (c.buttonVariant) {\n    case 'outlined':\n      return { ...base, background: 'transparent', color: p.primary, border: `1.5px solid ${p.primary}` }\n    case 'ghost':\n      return { ...base, background: 'transparent', color: p.primary }\n    case 'gradient':\n      return {\n        ...base,\n        backgroundImage: `linear-gradient(135deg, ${p.gradientFrom}, ${p.gradientVia}, ${p.gradientTo})`,\n        color: p.primaryForeground,\n      }\n    case 'pill':\n      return { ...base, background: p.primary, color: p.primaryForeground, borderRadius: '9999px' }\n    case 'brutal':\n      return {\n        ...base,\n        background: p.card,\n        color: p.foreground,\n        border: `2px solid ${p.foreground}`,\n        borderRadius: 0,\n        boxShadow: `3px 3px 0 ${p.foreground}`,\n      }\n    case 'filled':\n    default:\n      return { ...base, background: p.primary, color: p.primaryForeground }\n  }\n}\n\nfunction navbarStyle(c: Choices, p: Palette): React.CSSProperties {\n  const base: React.CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '10px 14px',\n    background: p.background,\n    color: p.foreground,\n    borderBottom: `1px solid ${p.border}`,\n  }\n  switch (c.navbarStyle) {\n    case 'transparent':\n      return { ...base, background: 'transparent', borderBottom: '1px solid transparent' }\n    case 'blur':\n      return {\n        ...base,\n        background: `color-mix(in srgb, ${p.background} 70%, transparent)`,\n        backdropFilter: 'blur(12px)',\n      }\n    case 'floating':\n      return {\n        ...base,\n        margin: '8px',\n        borderRadius: radiusToPx(c.borderRadius),\n        border: `1px solid ${p.border}`,\n        boxShadow: '0 4px 24px rgba(0,0,0,0.10)',\n      }\n    case 'minimal':\n      return { ...base, borderBottom: `1px solid ${p.border}`, boxShadow: 'none' }\n    case 'solid':\n    default:\n      return base\n  }\n}\n\nfunction linkStyle(c: Choices, p: Palette): React.CSSProperties {\n  switch (c.linkStyle) {\n    case 'underline':\n      return { color: p.primary, textDecoration: 'underline', textUnderlineOffset: '0.15em' }\n    case 'none':\n      return { color: p.primary, textDecoration: 'none' }\n    case 'highlight':\n      return {\n        color: p.foreground,\n        textDecoration: 'none',\n        backgroundImage: `linear-gradient(transparent 60%, color-mix(in srgb, ${p.primary} 28%, transparent) 0)`,\n      }\n    case 'animated':\n      return {\n        color: p.primary,\n        textDecoration: 'none',\n        borderBottom: `2px solid ${p.primary}`,\n        paddingBottom: '1px',\n      }\n    case 'underline-hover':\n    default:\n      return { color: p.primary, textDecoration: 'none' }\n  }\n}\n\nexport default function AppearancePreviewField() {\n  const formFields = useFormFields(([state]) => state) as Record<\n    string,\n    { value?: unknown } | undefined\n  >\n  const lang = useThemeLanguage() as 'en' | 'cs'\n  const translations = useThemeTranslations()\n  const t = translations.appearancePreview\n  const site = translations.preview\n  const [mode, setMode] = useState<Mode>('light')\n  const [device, setDevice] = useState<DevicePreviewId>(DEFAULT_DEVICE_PREVIEW_ID)\n  const uid = useId().replace(/[:]/g, '')\n\n  const activeDevice = getDevicePreview(device)\n\n  // Fonts follow the Typography section (or the theme preset when set to \"Use theme preset\"),\n  // so this single preview shows colours, type and component styles together.\n  const typographyValue = (key: string) =>\n    formFields?.[`themeConfiguration.typography.${key}`]?.value as string | undefined\n  const typography = resolveTypographyPreview(\n    {\n      bodyFont: typographyValue('bodyFont'),\n      headingFont: typographyValue('headingFont'),\n      bodyFontCustom: typographyValue('bodyFontCustom'),\n      headingFontCustom: typographyValue('headingFontCustom'),\n      baseFontSize: typographyValue('baseFontSize'),\n      lineHeight: typographyValue('lineHeight'),\n    },\n    formFields?.['themeConfiguration.theme']?.value as string | undefined,\n  )\n\n  const str = (key: string, fallback: string): string => {\n    const v = formFields?.[`themeConfiguration.${key}`]?.value\n    return typeof v === 'string' && v.trim().length > 0 ? v : fallback\n  }\n  const num = (key: string, fallback: number): number => {\n    const v = formFields?.[`themeConfiguration.${key}`]?.value\n    return typeof v === 'number' ? v : fallback\n  }\n\n  const choices: Choices = {\n    effectStyle: str('visualEffects.effectStyle', 'flat'),\n    shadowIntensity: str('visualEffects.shadowIntensity', 'medium'),\n    backdropBlur: str('visualEffects.backdropBlur', 'none'),\n    borderStyle: str('visualEffects.borderStyle', 'solid'),\n    borderWidth: str('visualEffects.borderWidth', '1px'),\n    glassOpacity: num('visualEffects.glassOpacity', 60),\n    buttonVariant: str('componentStyles.buttonVariant', 'filled'),\n    buttonSize: str('componentStyles.buttonSize', 'medium'),\n    cardStyle: str('componentStyles.cardStyle', 'elevated'),\n    cardHoverEffect: str('componentStyles.cardHoverEffect', 'lift'),\n    imageStyle: str('componentStyles.imageStyle', 'default'),\n    navbarStyle: str('componentStyles.navbarStyle', 'solid'),\n    footerStyle: str('componentStyles.footerStyle', 'standard'),\n    linkStyle: str('componentStyles.linkStyle', 'underline-hover'),\n    borderRadius: str('borderRadius', 'medium'),\n  }\n\n  const modeKey = mode === 'light' ? 'lightMode' : 'darkMode'\n  const fallback: Palette =\n    mode === 'light'\n      ? {\n          background: '#ffffff',\n          foreground: '#0a0a0a',\n          card: '#ffffff',\n          cardForeground: '#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          border: '#e4e4e7',\n          gradientFrom: '#9372f7',\n          gradientVia: '#7c6ff0',\n          gradientTo: '#22d3ee',\n        }\n      : {\n          background: '#0a0a0a',\n          foreground: '#fafafa',\n          card: '#09090b',\n          cardForeground: '#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          border: '#27272a',\n          gradientFrom: '#9372f7',\n          gradientVia: '#7c6ff0',\n          gradientTo: '#22d3ee',\n        }\n\n  const palette: Palette = useMemo(() => {\n    const p = { ...fallback }\n    ;(Object.keys(fallback) as (keyof Palette)[]).forEach((key) => {\n      p[key] = str(`${modeKey}.${key}`, fallback[key])\n    })\n    return p\n  }, [formFields, mode])\n\n  const radius = radiusToPx(choices.borderRadius)\n  const card = cardSurface(choices, palette, radius)\n  const btn = buttonStyle(choices, palette, radius)\n  const nav = navbarStyle(choices, palette)\n\n  // Hover effects can't be expressed inline, so emit a scoped style block.\n  const hoverCSS = (() => {\n    const sel = `.${uid} .tm-prev-card`\n    switch (choices.cardHoverEffect) {\n      case 'lift':\n        return `${sel}:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.14)}`\n      case 'scale':\n        return `${sel}:hover{transform:scale(1.02)}`\n      case 'glow':\n        return `${sel}:hover{box-shadow:0 0 0 3px color-mix(in srgb, ${palette.primary} 25%, transparent),0 8px 32px rgba(0,0,0,0.12)}`\n      case 'shadow':\n        return `${sel}:hover{box-shadow:0 24px 50px -12px rgba(0,0,0,0.35)}`\n      case 'tilt':\n        return `${sel}:hover{transform:perspective(800px) rotateX(3deg) rotateY(-3deg)}`\n      default:\n        return ''\n    }\n  })()\n  const btnHoverCSS = `.${uid} .tm-prev-btn:hover{filter:brightness(1.05)}${\n    choices.buttonVariant === 'brutal'\n      ? `.${uid} .tm-prev-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 ${palette.foreground}}`\n      : ''\n  }`\n  // Movement-based hover effects only run for users who haven't asked for reduced motion.\n  const previewCSS = `@media (prefers-reduced-motion: no-preference){${hoverCSS}${btnHoverCSS}}`\n\n  const chipLabels = t.chips\n  const chips: Array<[string, string]> = [\n    [chipLabels.effect, choices.effectStyle],\n    [chipLabels.shadow, choices.shadowIntensity],\n    [chipLabels.card, choices.cardStyle],\n    [chipLabels.hover, choices.cardHoverEffect],\n    [chipLabels.button, `${choices.buttonVariant} / ${choices.buttonSize}`],\n    [chipLabels.navbar, choices.navbarStyle],\n    [chipLabels.footer, choices.footerStyle],\n    [chipLabels.link, choices.linkStyle],\n    [chipLabels.radius, choices.borderRadius],\n  ]\n\n  const footerStyleCss: React.CSSProperties =\n    choices.footerStyle === 'dark'\n      ? { background: palette.foreground, color: palette.background }\n      : choices.footerStyle === 'full-color'\n        ? { background: palette.primary, color: palette.primaryForeground }\n        : choices.footerStyle === 'gradient-top'\n          ? {\n              background: palette.background,\n              color: palette.mutedForeground,\n              borderTop: '3px solid transparent',\n              borderImage: `linear-gradient(135deg, ${palette.gradientFrom}, ${palette.gradientVia}, ${palette.gradientTo}) 1`,\n            }\n          : choices.footerStyle === 'minimal'\n            ? { background: 'transparent', color: palette.mutedForeground, borderTop: `1px solid ${palette.border}` }\n            : { background: palette.muted, color: palette.mutedForeground, borderTop: `1px solid ${palette.border}` }\n\n  return (\n    // The slot spans the whole right column of the Appearance tab on wide admins;\n    // its inner panel is sticky so the preview stays in view while editing.\n    <div className={`tm-live-preview-slot ${uid}`}>\n      <div className=\"tm-live-preview\">\n      <style dangerouslySetInnerHTML={{ __html: previewCSS }} />\n\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          marginBottom: '8px',\n          gap: '8px',\n          flexWrap: 'wrap',\n        }}\n      >\n        <div>\n          <div\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '6px',\n              fontSize: '13px',\n              fontWeight: 600,\n              color: 'var(--theme-elevation-800)',\n            }}\n          >\n            <Sparkles size={14} aria-hidden />\n            {t.title}\n          </div>\n          <div style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>{t.subtitle}</div>\n        </div>\n        <div style={{ display: 'inline-flex', gap: '8px', flexWrap: 'wrap' }}>\n          {/* Device / viewport switcher */}\n          <div\n            role=\"group\"\n            aria-label={t.viewport}\n            style={{ display: 'inline-flex', borderRadius: '8px', overflow: 'hidden', border: '1px solid var(--theme-elevation-200)' }}\n          >\n            {DEVICE_PREVIEWS.map((d) => {\n              const Icon = DEVICE_ICONS[d.id]\n              return (\n                <button\n                  key={d.id}\n                  type=\"button\"\n                  aria-pressed={device === d.id}\n                  onClick={() => setDevice(d.id)}\n                  title={`${lang === 'cs' ? d.labelCs : d.label} — ${d.width}×${d.height}`}\n                  style={{\n                    display: 'inline-flex',\n                    alignItems: 'center',\n                    gap: '5px',\n                    minHeight: '28px',\n                    padding: '5px 10px',\n                    fontSize: '12px',\n                    fontWeight: 600,\n                    cursor: 'pointer',\n                    border: 'none',\n                    background: device === d.id ? 'var(--theme-elevation-800)' : 'transparent',\n                    color: device === d.id ? 'var(--theme-elevation-0)' : 'var(--theme-elevation-600)',\n                  }}\n                >\n                  <Icon size={13} aria-hidden />\n                  {lang === 'cs' ? d.labelCs : d.label}\n                </button>\n              )\n            })}\n          </div>\n          {/* Light / dark switcher */}\n          <div\n            role=\"group\"\n            aria-label={`${t.light} / ${t.dark}`}\n            style={{ display: 'inline-flex', borderRadius: '8px', overflow: 'hidden', border: '1px solid var(--theme-elevation-200)' }}\n          >\n            {(['light', 'dark'] as Mode[]).map((m) => {\n              const Icon = m === 'light' ? Sun : Moon\n              return (\n                <button\n                  key={m}\n                  type=\"button\"\n                  aria-pressed={mode === m}\n                  onClick={() => setMode(m)}\n                  style={{\n                    display: 'inline-flex',\n                    alignItems: 'center',\n                    gap: '5px',\n                    minHeight: '28px',\n                    padding: '5px 12px',\n                    fontSize: '12px',\n                    fontWeight: 600,\n                    cursor: 'pointer',\n                    border: 'none',\n                    background: mode === m ? 'var(--theme-elevation-800)' : 'transparent',\n                    color: mode === m ? 'var(--theme-elevation-0)' : 'var(--theme-elevation-600)',\n                  }}\n                >\n                  <Icon size={13} aria-hidden />\n                  {m === 'light' ? t.light : t.dark}\n                </button>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n\n      {/* Viewport wrapper — constrains the frame to the active device width */}\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n          background: 'var(--theme-elevation-50)',\n          borderRadius: '14px',\n          padding: device === 'desktop' ? '0' : '16px',\n        }}\n      >\n      {/* Browser-like frame. It is a picture of the site, so it is inert: its\n          sample buttons and links must not become dead tab stops. */}\n      <div\n        ref={(el) => el?.setAttribute('inert', '')}\n        style={{\n          width: '100%',\n          maxWidth: device === 'desktop' ? '100%' : `${activeDevice.width}px`,\n          borderRadius: '14px',\n          overflow: 'hidden',\n          border: '1px solid var(--theme-elevation-200)',\n          boxShadow: '0 8px 24px rgba(0,0,0,0.10)',\n          background: palette.background,\n          color: palette.foreground,\n          fontFamily: typography.bodyFont,\n          lineHeight: typography.lineHeight,\n        }}\n      >\n        <nav style={nav}>\n          <span style={{ fontWeight: 700, fontSize: '13px' }}>{site.siteTitle}</span>\n          <span style={{ display: 'flex', gap: '14px', fontSize: '12px', opacity: 0.85 }}>\n            <span>{site.nav.home}</span>\n            <span>{site.nav.about}</span>\n            <span style={{ ...linkStyle(choices, palette) }}>{site.nav.services}</span>\n          </span>\n        </nav>\n\n        <div style={{ padding: '20px', display: 'grid', gap: '14px' }}>\n          <div>\n            <div\n              style={{ fontFamily: typography.headingFont, fontSize: '22px', fontWeight: 700, lineHeight: 1.2 }}\n            >\n              {t.heading}\n            </div>\n            <p\n              style={{\n                margin: '6px 0 0',\n                fontSize: `calc(${typography.baseFontSize} * 0.8125)`,\n                lineHeight: typography.lineHeight,\n                color: palette.mutedForeground,\n              }}\n            >\n              {t.body}\n              <a style={linkStyle(choices, palette)}>{t.link}</a>.\n            </p>\n          </div>\n\n          <div className=\"tm-prev-card\" style={card}>\n            <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>\n              <button type=\"button\" className=\"tm-prev-btn\" style={btn}>\n                {t.primary}\n              </button>\n              <button\n                type=\"button\"\n                style={{\n                  ...BUTTON_SIZE_MAP[choices.buttonSize] ?? BUTTON_SIZE_MAP.medium,\n                  fontWeight: 600,\n                  cursor: 'pointer',\n                  borderRadius: radius,\n                  background: palette.secondary,\n                  color: palette.secondaryForeground,\n                  border: 'none',\n                }}\n              >\n                {t.secondary}\n              </button>\n              <span\n                aria-hidden\n                style={{\n                  marginLeft: 'auto',\n                  width: '54px',\n                  height: '22px',\n                  borderRadius: '6px',\n                  backgroundImage: `linear-gradient(135deg, ${palette.gradientFrom}, ${palette.gradientVia}, ${palette.gradientTo})`,\n                  boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)',\n                }}\n              />\n            </div>\n          </div>\n        </div>\n\n        <div style={{ padding: '12px 16px', fontSize: '11px', ...footerStyleCss }}>\n          © {new Date().getFullYear()} {site.siteTitle} — {t.footer}\n        </div>\n      </div>\n      </div>\n\n      {/* Active spec chips */}\n      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px', marginTop: '10px' }}>\n        {chips.map(([k, v]) => (\n          <span\n            key={k}\n            style={{\n              fontSize: '11px',\n              padding: '2px 7px',\n              borderRadius: '999px',\n              background: 'var(--theme-elevation-50)',\n              border: '1px solid var(--theme-elevation-150)',\n              color: 'var(--theme-elevation-700)',\n            }}\n          >\n            <span style={{ color: 'var(--theme-elevation-600)' }}>{k}:</span> <strong style={{ fontWeight: 600 }}>{v}</strong>\n          </span>\n        ))}\n      </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["useFormFields","Monitor","Moon","Smartphone","Sparkles","Sun","Tablet","useId","useMemo","useState","DEFAULT_DEVICE_PREVIEW_ID","DEVICE_PREVIEWS","getDevicePreview","useThemeLanguage","useThemeTranslations","resolveTypographyPreview","borderRadiusPresets","DEVICE_ICONS","mobile","tablet","desktop","SHADOW_MAP","none","subtle","medium","strong","dramatic","BLUR_PX_MAP","slight","heavy","BUTTON_SIZE_MAP","small","padding","fontSize","large","xl","radiusToPx","token","preset","css","cardSurface","c","p","radius","base","background","card","color","cardForeground","borderRadius","border","borderWidth","borderStyle","transition","cardStyle","foreground","boxShadow","borderImage","gradientFrom","gradientVia","gradientTo","shadowIntensity","effectStyle","glassOpacity","backdropFilter","backdropBlur","buttonStyle","size","buttonSize","fontWeight","cursor","whiteSpace","buttonVariant","primary","backgroundImage","primaryForeground","navbarStyle","display","alignItems","justifyContent","borderBottom","margin","linkStyle","textDecoration","textUnderlineOffset","paddingBottom","AppearancePreviewField","formFields","state","lang","translations","t","appearancePreview","site","preview","mode","setMode","device","setDevice","uid","replace","activeDevice","typographyValue","key","value","typography","bodyFont","headingFont","bodyFontCustom","headingFontCustom","baseFontSize","lineHeight","str","fallback","v","trim","length","num","choices","cardHoverEffect","imageStyle","footerStyle","modeKey","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","palette","Object","keys","forEach","btn","nav","hoverCSS","sel","btnHoverCSS","previewCSS","chipLabels","chips","effect","shadow","hover","button","navbar","footer","link","footerStyleCss","borderTop","div","className","style","dangerouslySetInnerHTML","__html","marginBottom","gap","flexWrap","aria-hidden","title","subtitle","role","aria-label","viewport","overflow","map","d","Icon","id","type","aria-pressed","onClick","labelCs","label","width","height","minHeight","light","dark","m","ref","el","setAttribute","maxWidth","fontFamily","span","siteTitle","opacity","home","about","services","heading","body","a","marginLeft","Date","getFullYear","marginTop","k"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAuBnD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,+BAqRnE"}
+{"version":3,"file":"ColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ColorPickerField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAanD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,+BA8RnE"}

package/dist/fields/ColorPickerField.js

@@ -1,9 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from '@payloadcms/ui';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Palette } from 'lucide-react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
+import { resolveLocalizedText } from '../utils/localizedText.js';
 const colorPresets = {
-    'Theme Colors': [
+    themeColors: [
         '#3b82f6',
         '#1e40af',
         '#b45309',
@@ -11,7 +14,7 @@ const colorPresets = {
         '#8b5cf6',
         '#f97316'
     ],
-    'Common Colors': [
+    commonColors: [
         '#ef4444',
         '#10b981',
         '#f59e0b',
@@ -19,7 +22,7 @@ const colorPresets = {
         '#ec4899',
         '#6b7280'
     ],
-    'Neutral Tones': [
+    neutralTones: [
         '#000000',
         '#1f2937',
         '#6b7280',
@@ -28,17 +31,6 @@ const colorPresets = {
         '#ffffff'
     ]
 };
-function resolveLocalizedValue(value) {
-    if (typeof value === 'string') {
-        return value;
-    }
-    if (typeof value === 'object' && value !== null) {
-        const localized = value;
-        const fallback = localized.en ?? localized.cs ?? localized[''];
-        return typeof fallback === 'string' ? fallback : '';
-    }
-    return '';
-}
 export default function ColorPickerField(props) {
     const { field, path } = props;
     const { value = '#000000', setValue } = useField({
@@ -46,9 +38,15 @@ export default function ColorPickerField(props) {
     });
     const [isPickerOpen, setIsPickerOpen] = useState(false);
     const pickerRef = useRef(null);
-    const fieldLabel = resolveLocalizedValue(field.label);
-    const fieldDescription = resolveLocalizedValue(field.admin?.description);
-    const placeholder = resolveLocalizedValue(field.admin?.placeholder) || 'e.g., #3b82f6, hsl(...)';
+    const toggleRef = useRef(null);
+    const t = useThemeTranslations().colorPicker;
+    const language = useThemeLanguage();
+    const inputId = useId();
+    const descriptionId = useId();
+    const popoverId = useId();
+    const fieldLabel = resolveLocalizedText(field.label, language);
+    const fieldDescription = resolveLocalizedText(field.admin?.description, language);
+    const placeholder = resolveLocalizedText(field.admin?.placeholder, language) || t.placeholder;
     const handleColorChange = useCallback((color)=>{
         setValue(color);
     }, [
@@ -66,17 +64,24 @@ export default function ColorPickerField(props) {
         if (!isPickerOpen) {
             return;
         }
-        function handleClickOutside(event) {
-            if (!pickerRef.current) {
+        function handlePointerOutside(event) {
+            const target = event.target;
+            if (pickerRef.current?.contains(target) || toggleRef.current?.contains(target)) {
                 return;
             }
-            if (!pickerRef.current.contains(event.target)) {
+            setIsPickerOpen(false);
+        }
+        function handleKeyDown(event) {
+            if (event.key === 'Escape') {
                 setIsPickerOpen(false);
+                toggleRef.current?.focus();
             }
         }
-        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('pointerdown', handlePointerOutside);
+        document.addEventListener('keydown', handleKeyDown);
         return ()=>{
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('pointerdown', handlePointerOutside);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [
         isPickerOpen
@@ -88,7 +93,7 @@ export default function ColorPickerField(props) {
         },
         children: [
             fieldLabel && /*#__PURE__*/ _jsxs("label", {
-                htmlFor: path,
+                htmlFor: inputId,
                 className: "field-label",
                 style: {
                     display: 'block',
@@ -109,11 +114,12 @@ export default function ColorPickerField(props) {
                 ]
             }),
             fieldDescription && /*#__PURE__*/ _jsx("div", {
+                id: descriptionId,
                 className: "field-description",
                 style: {
                     marginBottom: '8px',
                     fontSize: '13px',
-                    color: 'var(--theme-elevation-500)',
+                    color: 'var(--theme-elevation-600)',
                     lineHeight: 1.5
                 },
                 children: fieldDescription
@@ -127,44 +133,49 @@ export default function ColorPickerField(props) {
                 },
                 children: [
                     /*#__PURE__*/ _jsx("button", {
+                        ref: toggleRef,
                         type: "button",
                         onClick: togglePicker,
                         className: "color-preview-button",
+                        "aria-expanded": isPickerOpen,
+                        "aria-controls": isPickerOpen ? popoverId : undefined,
+                        "aria-label": `${t.presetsTitle}${fieldLabel ? `: ${fieldLabel}` : ''}`,
                         style: {
                             width: '40px',
                             height: '40px',
                             borderRadius: '6px',
-                            border: '2px solid #e5e7eb',
-                            backgroundColor: value || '#ffffff',
+                            border: '2px solid var(--theme-elevation-200)',
+                            backgroundColor: value || 'var(--theme-elevation-0)',
                             cursor: 'pointer',
                             position: 'relative',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center'
                         },
-                        title: value ? `Current color: ${value}` : 'Select a color',
-                        children: !value && /*#__PURE__*/ _jsx("span", {
-                            style: {
-                                fontSize: '20px',
-                                color: '#9ca3af'
-                            },
-                            children: "?"
+                        title: value ? `${t.currentColor}: ${value}` : t.presetsTitle,
+                        children: !value && /*#__PURE__*/ _jsx(Palette, {
+                            size: 18,
+                            color: "var(--theme-elevation-500)",
+                            "aria-hidden": true
                         })
                     }),
                     /*#__PURE__*/ _jsx("input", {
-                        id: path,
+                        id: inputId,
                         type: "text",
                         value: value || '',
                         onChange: handleInputChange,
                         placeholder: placeholder,
+                        "aria-describedby": fieldDescription ? descriptionId : undefined,
+                        spellCheck: false,
                         style: {
                             flex: 1,
+                            minWidth: 0,
                             padding: '8px 12px',
                             border: '1px solid var(--theme-elevation-150)',
                             borderRadius: '6px',
                             fontSize: '14px',
                             fontFamily: 'monospace',
-                            backgroundColor: 'var(--theme-elevation-0)',
+                            backgroundColor: 'var(--theme-input-bg, var(--theme-elevation-0))',
                             color: 'var(--theme-elevation-1000)'
                         }
                     }),
@@ -172,7 +183,8 @@ export default function ColorPickerField(props) {
                         type: "color",
                         value: value?.startsWith('#') ? value : '#3b82f6',
                         onChange: handleInputChange,
-                        title: "Pick a color",
+                        title: t.customColor,
+                        "aria-label": t.customColor,
                         style: {
                             width: '40px',
                             height: '40px',
@@ -185,6 +197,9 @@ export default function ColorPickerField(props) {
             }),
             isPickerOpen && /*#__PURE__*/ _jsxs("div", {
                 ref: pickerRef,
+                id: popoverId,
+                role: "dialog",
+                "aria-label": t.presetsTitle,
                 className: "color-presets",
                 style: {
                     position: 'absolute',
@@ -202,16 +217,27 @@ export default function ColorPickerField(props) {
                     overflowY: 'auto'
                 },
                 children: [
-                    /*#__PURE__*/ _jsx("div", {
+                    /*#__PURE__*/ _jsxs("div", {
                         style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
                             marginBottom: '16px',
                             fontSize: '14px',
                             fontWeight: 600,
                             color: 'var(--theme-elevation-800)'
                         },
-                        children: "🎨 Professional Color Picker"
+                        children: [
+                            /*#__PURE__*/ _jsx(Palette, {
+                                size: 14,
+                                "aria-hidden": true
+                            }),
+                            t.presetsTitle
+                        ]
                     }),
-                    Object.entries(colorPresets).map(([groupName, colors])=>/*#__PURE__*/ _jsxs("div", {
+                    Object.keys(colorPresets).map((group)=>/*#__PURE__*/ _jsxs("div", {
+                            role: "group",
+                            "aria-label": t[group],
                             style: {
                                 marginBottom: '16px'
                             },
@@ -220,12 +246,10 @@ export default function ColorPickerField(props) {
                                     style: {
                                         marginBottom: '8px',
                                         fontSize: '12px',
-                                        fontWeight: 500,
-                                        color: 'var(--theme-elevation-600)',
-                                        textTransform: 'uppercase',
-                                        letterSpacing: '0.05em'
+                                        fontWeight: 600,
+                                        color: 'var(--theme-elevation-600)'
                                     },
-                                    children: groupName
+                                    children: t[group]
                                 }),
                                 /*#__PURE__*/ _jsx("div", {
                                     style: {
@@ -233,40 +257,28 @@ export default function ColorPickerField(props) {
                                         gridTemplateColumns: 'repeat(6, 1fr)',
                                         gap: '6px'
                                     },
-                                    children: colors.map((color)=>/*#__PURE__*/ _jsx("button", {
+                                    children: colorPresets[group].map((color)=>{
+                                        const selected = value === color;
+                                        return /*#__PURE__*/ _jsx("button", {
                                             type: "button",
                                             onClick: ()=>handleColorChange(color),
+                                            "aria-pressed": selected,
+                                            "aria-label": `${t.selectColor} ${color}`,
+                                            title: color,
                                             style: {
                                                 width: '36px',
                                                 height: '36px',
                                                 borderRadius: '6px',
-                                                border: value === color ? '3px solid var(--theme-success-500)' : '1px solid var(--theme-elevation-150)',
+                                                border: selected ? '3px solid var(--theme-elevation-900)' : '1px solid var(--theme-elevation-200)',
                                                 backgroundColor: color,
                                                 cursor: 'pointer',
-                                                transition: 'all 0.2s ease',
-                                                position: 'relative',
-                                                overflow: 'hidden',
-                                                boxShadow: value === color ? '0 0 0 2px var(--theme-primary-200)' : '0 1px 3px rgba(0, 0, 0, 0.1)'
-                                            },
-                                            title: `${color} - Click to select`,
-                                            onMouseEnter: (event)=>{
-                                                event.currentTarget.style.transform = 'scale(1.1)';
-                                            },
-                                            onMouseLeave: (event)=>{
-                                                event.currentTarget.style.transform = 'scale(1)';
-                                            },
-                                            children: color === '#ffffff' && /*#__PURE__*/ _jsx("div", {
-                                                style: {
-                                                    position: 'absolute',
-                                                    inset: 0,
-                                                    border: '1px solid var(--theme-elevation-150)',
-                                                    borderRadius: 'inherit'
-                                                }
-                                            })
-                                        }, color))
+                                                boxShadow: selected ? '0 0 0 2px var(--theme-elevation-0)' : '0 1px 3px rgba(0, 0, 0, 0.1)'
+                                            }
+                                        }, color);
+                                    })
                                 })
                             ]
-                        }, groupName)),
+                        }, group)),
                     /*#__PURE__*/ _jsxs("div", {
                         style: {
                             marginTop: '16px',
@@ -278,10 +290,10 @@ export default function ColorPickerField(props) {
                                 style: {
                                     marginBottom: '8px',
                                     fontSize: '12px',
-                                    fontWeight: 500,
+                                    fontWeight: 600,
                                     color: 'var(--theme-elevation-600)'
                                 },
-                                children: "CUSTOM COLOR"
+                                children: t.customColor
                             }),
                             /*#__PURE__*/ _jsxs("div", {
                                 style: {
@@ -294,6 +306,7 @@ export default function ColorPickerField(props) {
                                         type: "color",
                                         value: value?.startsWith('#') ? value : '#3b82f6',
                                         onChange: handleInputChange,
+                                        "aria-label": t.customColor,
                                         style: {
                                             width: '36px',
                                             height: '36px',
@@ -302,22 +315,13 @@ export default function ColorPickerField(props) {
                                             cursor: 'pointer'
                                         }
                                     }),
-                                    /*#__PURE__*/ _jsxs("div", {
+                                    /*#__PURE__*/ _jsx("div", {
                                         style: {
-                                            fontSize: '11px',
-                                            color: '#9ca3af',
-                                            lineHeight: 1.3
+                                            fontSize: '12px',
+                                            color: 'var(--theme-elevation-600)',
+                                            lineHeight: 1.4
                                         },
-                                        children: [
-                                            /*#__PURE__*/ _jsx("div", {
-                                                children: /*#__PURE__*/ _jsx("strong", {
-                                                    children: "Formats:"
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx("div", {
-                                                children: "Hex, RGB, HSL, CSS vars"
-                                            })
-                                        ]
+                                        children: t.formats
                                     })
                                 ]
                             })

package/dist/fields/ColorPickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/ColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nconst colorPresets: Record<string, string[]> = {\n  'Theme Colors': ['#3b82f6', '#1e40af', '#b45309', '#78716c', '#8b5cf6', '#f97316'],\n  'Common Colors': ['#ef4444', '#10b981', '#f59e0b', '#06b6d4', '#ec4899', '#6b7280'],\n  'Neutral Tones': ['#000000', '#1f2937', '#6b7280', '#d1d5db', '#f3f4f6', '#ffffff'],\n}\n\nfunction resolveLocalizedValue(value: unknown): 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 fallback = localized.en ?? localized.cs ?? localized['']\n    return typeof fallback === 'string' ? fallback : ''\n  }\n\n  return ''\n}\n\nexport default function ColorPickerField(props: TextFieldClientProps) {\n  const { field, path } = props\n  const { value = '#000000', setValue } = useField<string>({ path })\n  const [isPickerOpen, setIsPickerOpen] = useState(false)\n  const pickerRef = useRef<HTMLDivElement>(null)\n\n  const fieldLabel = resolveLocalizedValue(field.label)\n  const fieldDescription = resolveLocalizedValue(field.admin?.description)\n  const placeholder = resolveLocalizedValue(field.admin?.placeholder) || 'e.g., #3b82f6, hsl(...)'\n\n  const handleColorChange = useCallback(\n    (color: string) => {\n      setValue(color)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      handleColorChange(event.target.value)\n    },\n    [handleColorChange],\n  )\n\n  const togglePicker = useCallback(() => {\n    setIsPickerOpen((previous) => !previous)\n  }, [])\n\n  useEffect(() => {\n    if (!isPickerOpen) {\n      return\n    }\n\n    function handleClickOutside(event: MouseEvent) {\n      if (!pickerRef.current) {\n        return\n      }\n\n      if (!pickerRef.current.contains(event.target as Node)) {\n        setIsPickerOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isPickerOpen])\n\n  return (\n    <div className=\"field-type color-picker-field\" style={{ position: 'relative' }}>\n      {fieldLabel && (\n        <label\n          htmlFor={path}\n          className=\"field-label\"\n          style={{ display: 'block', marginBottom: '8px', fontSize: '13px', fontWeight: 600 }}\n        >\n          {fieldLabel}\n          {field.required && (\n            <span\n              className=\"required\"\n              style={{ color: 'var(--theme-error-500)', marginLeft: '4px' }}\n            >\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      {fieldDescription && (\n        <div\n          className=\"field-description\"\n          style={{\n            marginBottom: '8px',\n            fontSize: '13px',\n            color: 'var(--theme-elevation-500)',\n            lineHeight: 1.5,\n          }}\n        >\n          {fieldDescription}\n        </div>\n      )}\n\n      <div\n        className=\"color-picker-input-group\"\n        style={{ display: 'flex', alignItems: 'center', gap: '8px' }}\n      >\n        <button\n          type=\"button\"\n          onClick={togglePicker}\n          className=\"color-preview-button\"\n          style={{\n            width: '40px',\n            height: '40px',\n            borderRadius: '6px',\n            border: '2px solid #e5e7eb',\n            backgroundColor: value || '#ffffff',\n            cursor: 'pointer',\n            position: 'relative',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n          title={value ? `Current color: ${value}` : 'Select a color'}\n        >\n          {!value && <span style={{ fontSize: '20px', color: '#9ca3af' }}>?</span>}\n        </button>\n\n        <input\n          id={path}\n          type=\"text\"\n          value={value || ''}\n          onChange={handleInputChange}\n          placeholder={placeholder}\n          style={{\n            flex: 1,\n            padding: '8px 12px',\n            border: '1px solid var(--theme-elevation-150)',\n            borderRadius: '6px',\n            fontSize: '14px',\n            fontFamily: 'monospace',\n            backgroundColor: 'var(--theme-elevation-0)',\n            color: 'var(--theme-elevation-1000)',\n          }}\n        />\n\n        <input\n          type=\"color\"\n          value={value?.startsWith('#') ? value : '#3b82f6'}\n          onChange={handleInputChange}\n          title=\"Pick a color\"\n          style={{\n            width: '40px',\n            height: '40px',\n            border: 'none',\n            borderRadius: '6px',\n            cursor: 'pointer',\n          }}\n        />\n      </div>\n\n      {isPickerOpen && (\n        <div\n          ref={pickerRef}\n          className=\"color-presets\"\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            zIndex: 1000,\n            marginTop: '4px',\n            padding: '16px',\n            border: '1px solid var(--theme-elevation-150)',\n            borderRadius: '8px',\n            backgroundColor: 'var(--theme-elevation-0)',\n            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n            maxHeight: '300px',\n            overflowY: 'auto',\n          }}\n        >\n          <div\n            style={{\n              marginBottom: '16px',\n              fontSize: '14px',\n              fontWeight: 600,\n              color: 'var(--theme-elevation-800)',\n            }}\n          >\n            🎨 Professional Color Picker\n          </div>\n\n          {Object.entries(colorPresets).map(([groupName, colors]) => (\n            <div key={groupName} style={{ marginBottom: '16px' }}>\n              <div\n                style={{\n                  marginBottom: '8px',\n                  fontSize: '12px',\n                  fontWeight: 500,\n                  color: 'var(--theme-elevation-600)',\n                  textTransform: 'uppercase',\n                  letterSpacing: '0.05em',\n                }}\n              >\n                {groupName}\n              </div>\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '6px' }}>\n                {colors.map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    onClick={() => handleColorChange(color)}\n                    style={{\n                      width: '36px',\n                      height: '36px',\n                      borderRadius: '6px',\n                      border:\n                        value === color\n                          ? '3px solid var(--theme-success-500)'\n                          : '1px solid var(--theme-elevation-150)',\n                      backgroundColor: color,\n                      cursor: 'pointer',\n                      transition: 'all 0.2s ease',\n                      position: 'relative',\n                      overflow: 'hidden',\n                      boxShadow:\n                        value === color\n                          ? '0 0 0 2px var(--theme-primary-200)'\n                          : '0 1px 3px rgba(0, 0, 0, 0.1)',\n                    }}\n                    title={`${color} - Click to select`}\n                    onMouseEnter={(event) => {\n                      event.currentTarget.style.transform = 'scale(1.1)'\n                    }}\n                    onMouseLeave={(event) => {\n                      event.currentTarget.style.transform = 'scale(1)'\n                    }}\n                  >\n                    {color === '#ffffff' && (\n                      <div\n                        style={{\n                          position: 'absolute',\n                          inset: 0,\n                          border: '1px solid var(--theme-elevation-150)',\n                          borderRadius: 'inherit',\n                        }}\n                      />\n                    )}\n                  </button>\n                ))}\n              </div>\n            </div>\n          ))}\n\n          <div\n            style={{\n              marginTop: '16px',\n              paddingTop: '16px',\n              borderTop: '1px solid var(--theme-elevation-100)',\n            }}\n          >\n            <div\n              style={{\n                marginBottom: '8px',\n                fontSize: '12px',\n                fontWeight: 500,\n                color: 'var(--theme-elevation-600)',\n              }}\n            >\n              CUSTOM COLOR\n            </div>\n            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n              <input\n                type=\"color\"\n                value={value?.startsWith('#') ? value : '#3b82f6'}\n                onChange={handleInputChange}\n                style={{\n                  width: '36px',\n                  height: '36px',\n                  border: 'none',\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                }}\n              />\n              <div style={{ fontSize: '11px', color: '#9ca3af', lineHeight: 1.3 }}>\n                <div>\n                  <strong>Formats:</strong>\n                </div>\n                <div>Hex, RGB, HSL, CSS vars</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useField","useCallback","useEffect","useRef","useState","colorPresets","resolveLocalizedValue","value","localized","fallback","en","cs","ColorPickerField","props","field","path","setValue","isPickerOpen","setIsPickerOpen","pickerRef","fieldLabel","label","fieldDescription","admin","description","placeholder","handleColorChange","color","handleInputChange","event","target","togglePicker","previous","handleClickOutside","current","contains","document","addEventListener","removeEventListener","div","className","style","position","htmlFor","display","marginBottom","fontSize","fontWeight","required","span","marginLeft","lineHeight","alignItems","gap","button","type","onClick","width","height","borderRadius","border","backgroundColor","cursor","justifyContent","title","input","id","onChange","flex","padding","fontFamily","startsWith","ref","top","left","right","zIndex","marginTop","boxShadow","maxHeight","overflowY","Object","entries","map","groupName","colors","textTransform","letterSpacing","gridTemplateColumns","transition","overflow","onMouseEnter","currentTarget","transform","onMouseLeave","inset","paddingTop","borderTop","strong"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/ColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport { Palette } from 'lucide-react'\nimport type { TextFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useId, useRef, useState } from 'react'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport { resolveLocalizedText } from '../utils/localizedText.js'\n\ntype PresetGroup = 'themeColors' | 'commonColors' | 'neutralTones'\n\nconst colorPresets: Record<PresetGroup, string[]> = {\n  themeColors: ['#3b82f6', '#1e40af', '#b45309', '#78716c', '#8b5cf6', '#f97316'],\n  commonColors: ['#ef4444', '#10b981', '#f59e0b', '#06b6d4', '#ec4899', '#6b7280'],\n  neutralTones: ['#000000', '#1f2937', '#6b7280', '#d1d5db', '#f3f4f6', '#ffffff'],\n}\n\nexport default function ColorPickerField(props: TextFieldClientProps) {\n  const { field, path } = props\n  const { value = '#000000', setValue } = useField<string>({ path })\n  const [isPickerOpen, setIsPickerOpen] = useState(false)\n  const pickerRef = useRef<HTMLDivElement>(null)\n  const toggleRef = useRef<HTMLButtonElement>(null)\n  const t = useThemeTranslations().colorPicker\n  const language = useThemeLanguage()\n  const inputId = useId()\n  const descriptionId = useId()\n  const popoverId = useId()\n\n  const fieldLabel = resolveLocalizedText(field.label, language)\n  const fieldDescription = resolveLocalizedText(field.admin?.description, language)\n  const placeholder =\n    resolveLocalizedText(field.admin?.placeholder, language) || t.placeholder\n\n  const handleColorChange = useCallback(\n    (color: string) => {\n      setValue(color)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      handleColorChange(event.target.value)\n    },\n    [handleColorChange],\n  )\n\n  const togglePicker = useCallback(() => {\n    setIsPickerOpen((previous) => !previous)\n  }, [])\n\n  useEffect(() => {\n    if (!isPickerOpen) {\n      return\n    }\n\n    function handlePointerOutside(event: PointerEvent) {\n      const target = event.target as Node\n      if (pickerRef.current?.contains(target) || toggleRef.current?.contains(target)) {\n        return\n      }\n      setIsPickerOpen(false)\n    }\n\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        setIsPickerOpen(false)\n        toggleRef.current?.focus()\n      }\n    }\n\n    document.addEventListener('pointerdown', handlePointerOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [isPickerOpen])\n\n  return (\n    <div className=\"field-type color-picker-field\" style={{ position: 'relative' }}>\n      {fieldLabel && (\n        <label\n          htmlFor={inputId}\n          className=\"field-label\"\n          style={{ display: 'block', marginBottom: '8px', fontSize: '13px', fontWeight: 600 }}\n        >\n          {fieldLabel}\n          {field.required && (\n            <span\n              className=\"required\"\n              style={{ color: 'var(--theme-error-500)', marginLeft: '4px' }}\n            >\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      {fieldDescription && (\n        <div\n          id={descriptionId}\n          className=\"field-description\"\n          style={{\n            marginBottom: '8px',\n            fontSize: '13px',\n            color: 'var(--theme-elevation-600)',\n            lineHeight: 1.5,\n          }}\n        >\n          {fieldDescription}\n        </div>\n      )}\n\n      <div\n        className=\"color-picker-input-group\"\n        style={{ display: 'flex', alignItems: 'center', gap: '8px' }}\n      >\n        <button\n          ref={toggleRef}\n          type=\"button\"\n          onClick={togglePicker}\n          className=\"color-preview-button\"\n          aria-expanded={isPickerOpen}\n          aria-controls={isPickerOpen ? popoverId : undefined}\n          aria-label={`${t.presetsTitle}${fieldLabel ? `: ${fieldLabel}` : ''}`}\n          style={{\n            width: '40px',\n            height: '40px',\n            borderRadius: '6px',\n            border: '2px solid var(--theme-elevation-200)',\n            backgroundColor: value || 'var(--theme-elevation-0)',\n            cursor: 'pointer',\n            position: 'relative',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n          title={value ? `${t.currentColor}: ${value}` : t.presetsTitle}\n        >\n          {!value && <Palette size={18} color=\"var(--theme-elevation-500)\" aria-hidden />}\n        </button>\n\n        <input\n          id={inputId}\n          type=\"text\"\n          value={value || ''}\n          onChange={handleInputChange}\n          placeholder={placeholder}\n          aria-describedby={fieldDescription ? descriptionId : undefined}\n          spellCheck={false}\n          style={{\n            flex: 1,\n            minWidth: 0,\n            padding: '8px 12px',\n            border: '1px solid var(--theme-elevation-150)',\n            borderRadius: '6px',\n            fontSize: '14px',\n            fontFamily: 'monospace',\n            backgroundColor: 'var(--theme-input-bg, var(--theme-elevation-0))',\n            color: 'var(--theme-elevation-1000)',\n          }}\n        />\n\n        <input\n          type=\"color\"\n          value={value?.startsWith('#') ? value : '#3b82f6'}\n          onChange={handleInputChange}\n          title={t.customColor}\n          aria-label={t.customColor}\n          style={{\n            width: '40px',\n            height: '40px',\n            border: 'none',\n            borderRadius: '6px',\n            cursor: 'pointer',\n          }}\n        />\n      </div>\n\n      {isPickerOpen && (\n        <div\n          ref={pickerRef}\n          id={popoverId}\n          role=\"dialog\"\n          aria-label={t.presetsTitle}\n          className=\"color-presets\"\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            zIndex: 1000,\n            marginTop: '4px',\n            padding: '16px',\n            border: '1px solid var(--theme-elevation-150)',\n            borderRadius: '8px',\n            backgroundColor: 'var(--theme-elevation-0)',\n            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n            maxHeight: '300px',\n            overflowY: 'auto',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '6px',\n              marginBottom: '16px',\n              fontSize: '14px',\n              fontWeight: 600,\n              color: 'var(--theme-elevation-800)',\n            }}\n          >\n            <Palette size={14} aria-hidden />\n            {t.presetsTitle}\n          </div>\n\n          {(Object.keys(colorPresets) as PresetGroup[]).map((group) => (\n            <div key={group} role=\"group\" aria-label={t[group]} style={{ marginBottom: '16px' }}>\n              <div\n                style={{\n                  marginBottom: '8px',\n                  fontSize: '12px',\n                  fontWeight: 600,\n                  color: 'var(--theme-elevation-600)',\n                }}\n              >\n                {t[group]}\n              </div>\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '6px' }}>\n                {colorPresets[group].map((color) => {\n                  const selected = value === color\n                  return (\n                    <button\n                      key={color}\n                      type=\"button\"\n                      onClick={() => handleColorChange(color)}\n                      aria-pressed={selected}\n                      aria-label={`${t.selectColor} ${color}`}\n                      title={color}\n                      style={{\n                        width: '36px',\n                        height: '36px',\n                        borderRadius: '6px',\n                        border: selected\n                          ? '3px solid var(--theme-elevation-900)'\n                          : '1px solid var(--theme-elevation-200)',\n                        backgroundColor: color,\n                        cursor: 'pointer',\n                        boxShadow: selected\n                          ? '0 0 0 2px var(--theme-elevation-0)'\n                          : '0 1px 3px rgba(0, 0, 0, 0.1)',\n                      }}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n          ))}\n\n          <div\n            style={{\n              marginTop: '16px',\n              paddingTop: '16px',\n              borderTop: '1px solid var(--theme-elevation-100)',\n            }}\n          >\n            <div\n              style={{\n                marginBottom: '8px',\n                fontSize: '12px',\n                fontWeight: 600,\n                color: 'var(--theme-elevation-600)',\n              }}\n            >\n              {t.customColor}\n            </div>\n            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n              <input\n                type=\"color\"\n                value={value?.startsWith('#') ? value : '#3b82f6'}\n                onChange={handleInputChange}\n                aria-label={t.customColor}\n                style={{\n                  width: '36px',\n                  height: '36px',\n                  border: 'none',\n                  borderRadius: '6px',\n                  cursor: 'pointer',\n                }}\n              />\n              <div style={{ fontSize: '12px', color: 'var(--theme-elevation-600)', lineHeight: 1.4 }}>\n                {t.formats}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useField","Palette","useCallback","useEffect","useId","useRef","useState","useThemeLanguage","useThemeTranslations","resolveLocalizedText","colorPresets","themeColors","commonColors","neutralTones","ColorPickerField","props","field","path","value","setValue","isPickerOpen","setIsPickerOpen","pickerRef","toggleRef","t","colorPicker","language","inputId","descriptionId","popoverId","fieldLabel","label","fieldDescription","admin","description","placeholder","handleColorChange","color","handleInputChange","event","target","togglePicker","previous","handlePointerOutside","current","contains","handleKeyDown","key","focus","document","addEventListener","removeEventListener","div","className","style","position","htmlFor","display","marginBottom","fontSize","fontWeight","required","span","marginLeft","id","lineHeight","alignItems","gap","button","ref","type","onClick","aria-expanded","aria-controls","undefined","aria-label","presetsTitle","width","height","borderRadius","border","backgroundColor","cursor","justifyContent","title","currentColor","size","aria-hidden","input","onChange","aria-describedby","spellCheck","flex","minWidth","padding","fontFamily","startsWith","customColor","role","top","left","right","zIndex","marginTop","boxShadow","maxHeight","overflowY","Object","keys","map","group","gridTemplateColumns","selected","aria-pressed","selectColor","paddingTop","borderTop","formats"],"mappings":"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"}

package/dist/fields/FontSelectField.d.ts

@@ -1,4 +1,10 @@
 import type { SelectFieldClientComponent } from 'payload';
+/**
+ * Font select with live font previews. Implements the WAI-ARIA "select-only
+ * combobox" pattern: a button trigger plus a listbox navigated with the arrow
+ * keys, Home/End, Enter/Space and Escape. Preview fonts load for whichever option
+ * is active, so keyboard users get the same previews as mouse users.
+ */
 declare const FontSelectField: SelectFieldClientComponent;
 export default FontSelectField;
 //# sourceMappingURL=FontSelectField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FontSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/FontSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAczD,QAAA,MAAM,eAAe,EAAE,0BAyOtB,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"FontSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/FontSelectField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAwBzD;;;;;GAKG;AACH,QAAA,MAAM,eAAe,EAAE,0BAsRtB,CAAA;AAED,eAAe,eAAe,CAAA"}