@kilivi/payloadcms-theme-management 2.0.0 → 2.1.0

package/dist/fields/FontSelectField.js

@@ -1,74 +1,172 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from '@payloadcms/ui';
-import { useEffect, useState } from 'react';
-import { getTranslations } from '../translations.js';
-import { getAdminLanguage } from '../utils/getAdminLanguage.js';
-const FontSelectField = ({ field, path })=>{
+import { Check, ChevronDown } 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 NON_GOOGLE_VALUES = [
+    'preset',
+    'custom',
+    'system-ui'
+];
+function previewFamily(option) {
+    if (option.fontFamily) return option.fontFamily;
+    if (option.category === 'sans-serif') return 'system-ui, sans-serif';
+    if (option.category === 'serif') return 'Georgia, serif';
+    if (option.category === 'monospace') return 'monospace';
+    return 'inherit';
+}
+/**
+ * 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.
+ */ const FontSelectField = ({ field, path })=>{
     const { value, setValue } = useField({
         path
     });
     const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const lang = useThemeLanguage();
+    const t = useThemeTranslations();
+    const baseId = useId();
+    const labelId = `${baseId}-label`;
+    const listboxId = `${baseId}-listbox`;
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listboxRef = useRef(null);
+    const loadedFonts = useRef(new Set());
     const options = field.options || [];
-    const selectedOption = options.find((opt)=>opt.value === value);
-    const [loadedFonts, setLoadedFonts] = useState(new Set());
-    const getOptionLabel = (opt)=>{
-        if (typeof opt.label === 'string') return opt.label;
-        const lang = getAdminLanguage();
-        return opt.label[lang] || opt.label.en || opt.label.cs || 'Font';
-    };
-    const ensureFontLoaded = (fontValue)=>{
-        if (!fontValue || [
-            'preset',
-            'custom',
-            'system-ui'
-        ].includes(fontValue)) return;
-        // Avoid duplicate loads
-        if (loadedFonts.has(fontValue)) return;
-        if (typeof document === 'undefined') return;
+    const selectedIndex = options.findIndex((opt)=>opt.value === value);
+    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+    const getOptionLabel = (opt)=>resolveLocalizedText(opt.label, lang, 'Font');
+    const label = resolveLocalizedText(field.label, lang, 'Font');
+    const optionId = (index)=>`${baseId}-option-${index}`;
+    const ensureFontLoaded = useCallback((fontValue)=>{
+        if (!fontValue || NON_GOOGLE_VALUES.includes(fontValue)) return;
+        if (loadedFonts.current.has(fontValue) || typeof document === 'undefined') return;
+        loadedFonts.current.add(fontValue);
         const linkId = `font-${fontValue.replace(/\s+/g, '-')}`;
-        if (document.getElementById(linkId)) {
-            setLoadedFonts((prev)=>new Set(prev).add(fontValue));
-            return;
-        }
-        const weights = '400;700' // reasonable default weights
-        ;
-        const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontValue)}:wght@${weights}&display=swap`;
+        if (document.getElementById(linkId)) return;
         const link = document.createElement('link');
         link.id = linkId;
         link.rel = 'stylesheet';
-        link.href = fontUrl;
-        link.onload = ()=>setLoadedFonts((prev)=>new Set(prev).add(fontValue));
+        link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontValue)}:wght@400;700&display=swap`;
         document.head.appendChild(link);
-    };
-    const handleSelect = (optionValue)=>{
-        setValue(optionValue);
+    }, []);
+    const open = useCallback((index = selectedIndex >= 0 ? selectedIndex : 0)=>{
+        setActiveIndex(index);
+        setIsOpen(true);
+    }, [
+        selectedIndex
+    ]);
+    const close = useCallback((restoreFocus)=>{
         setIsOpen(false);
+        if (restoreFocus) triggerRef.current?.focus();
+    }, []);
+    const handleSelect = (index)=>{
+        const option = options[index];
+        if (!option) return;
+        setValue(option.value);
+        close(true);
     };
+    // Load the preview font for the active option and keep it scrolled into view.
     useEffect(()=>{
-        const handleClickOutside = (e)=>{
-            const target = e.target;
-            if (!target.closest('.font-select-container')) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return ()=>document.removeEventListener('mousedown', handleClickOutside);
-        }
+        if (!isOpen || activeIndex < 0) return;
+        ensureFontLoaded(options[activeIndex]?.value);
+        listboxRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`)?.scrollIntoView({
+            block: 'nearest'
+        });
+    }, [
+        isOpen,
+        activeIndex
+    ]);
+    // Focus the listbox when it opens so keyboard navigation works immediately.
+    useEffect(()=>{
+        if (isOpen) listboxRef.current?.focus();
     }, [
         isOpen
     ]);
-    const t = getTranslations(getAdminLanguage());
-    const label = typeof field.label === 'string' ? field.label : typeof field.label === 'object' ? field.label?.en || field.label?.cs : field.label || 'Font';
+    useEffect(()=>{
+        if (!isOpen) return;
+        const handlePointerOutside = (e)=>{
+            if (!containerRef.current?.contains(e.target)) close(false);
+        };
+        document.addEventListener('pointerdown', handlePointerOutside);
+        return ()=>document.removeEventListener('pointerdown', handlePointerOutside);
+    }, [
+        isOpen,
+        close
+    ]);
+    const handleTriggerKeyDown = (event)=>{
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Enter',
+            ' '
+        ].includes(event.key)) {
+            event.preventDefault();
+            open(event.key === 'ArrowUp' && selectedIndex < 0 ? options.length - 1 : undefined);
+        }
+    };
+    const handleListboxKeyDown = (event)=>{
+        const last = options.length - 1;
+        switch(event.key){
+            case 'ArrowDown':
+                event.preventDefault();
+                setActiveIndex((i)=>Math.min(last, i + 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((i)=>Math.max(0, i - 1));
+                break;
+            case 'Home':
+                event.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setActiveIndex(last);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                handleSelect(activeIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                close(true);
+                break;
+            case 'Tab':
+                close(false);
+                break;
+            default:
+                // Type-ahead: jump to the first option starting with the typed letter.
+                if (event.key.length === 1 && /\S/.test(event.key)) {
+                    const letter = event.key.toLowerCase();
+                    const start = activeIndex + 1;
+                    const ordered = [
+                        ...options.slice(start),
+                        ...options.slice(0, start)
+                    ];
+                    const match = ordered.find((opt)=>getOptionLabel(opt).toLowerCase().startsWith(letter));
+                    if (match) setActiveIndex(options.indexOf(match));
+                }
+        }
+    };
     return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
         className: "font-select-container",
         style: {
             position: 'relative',
-            marginBottom: '12px'
+            marginBottom: '12px',
+            maxWidth: '360px'
         },
         children: [
-            /*#__PURE__*/ _jsx("label", {
+            /*#__PURE__*/ _jsx("div", {
+                id: labelId,
                 style: {
                     display: 'block',
                     marginBottom: '6px',
@@ -79,10 +177,18 @@ const FontSelectField = ({ field, path })=>{
                 children: label
             }),
             /*#__PURE__*/ _jsxs("button", {
+                ref: triggerRef,
                 type: "button",
-                onClick: ()=>setIsOpen(!isOpen),
+                className: "font-select-trigger",
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
+                "aria-controls": isOpen ? listboxId : undefined,
+                "aria-labelledby": `${labelId} ${baseId}-value`,
+                onClick: ()=>isOpen ? close(false) : open(),
+                onKeyDown: handleTriggerKeyDown,
                 style: {
-                    width: '300px',
+                    width: '100%',
                     padding: '10px 14px',
                     borderRadius: '6px',
                     border: '1px solid var(--theme-elevation-200)',
@@ -93,44 +199,38 @@ const FontSelectField = ({ field, path })=>{
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
+                    gap: '8px',
                     fontSize: '14px',
-                    fontFamily: selectedOption?.fontFamily || 'inherit',
-                    transition: 'border-color 0.2s ease'
-                },
-                onMouseEnter: (e)=>{
-                    e.currentTarget.style.borderColor = 'var(--theme-elevation-400)';
-                },
-                onMouseLeave: (e)=>{
-                    e.currentTarget.style.borderColor = 'var(--theme-elevation-200)';
+                    fontFamily: selectedOption?.fontFamily || 'inherit'
                 },
                 children: [
                     /*#__PURE__*/ _jsx("span", {
+                        id: `${baseId}-value`,
                         style: {
-                            flex: 1
+                            flex: 1,
+                            minWidth: 0
                         },
                         children: selectedOption ? getOptionLabel(selectedOption) : t.ui.selectFontPlaceholder
                     }),
-                    ' ',
-                    /*#__PURE__*/ _jsx("svg", {
-                        width: "12",
-                        height: "12",
-                        viewBox: "0 0 12 12",
-                        fill: "none",
+                    /*#__PURE__*/ _jsx(ChevronDown, {
+                        size: 14,
+                        "aria-hidden": true,
                         style: {
-                            transition: 'transform 0.2s ease',
-                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
-                        },
-                        children: /*#__PURE__*/ _jsx("path", {
-                            d: "M3 4.5L6 7.5L9 4.5",
-                            stroke: "currentColor",
-                            strokeWidth: "1.5",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round"
-                        })
+                            flexShrink: 0,
+                            transform: isOpen ? 'rotate(180deg)' : undefined
+                        }
                     })
                 ]
             }),
             isOpen && /*#__PURE__*/ _jsx("div", {
+                ref: listboxRef,
+                id: listboxId,
+                role: "listbox",
+                tabIndex: -1,
+                "aria-labelledby": labelId,
+                "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined,
+                onKeyDown: handleListboxKeyDown,
+                className: "font-select-listbox",
                 style: {
                     position: 'absolute',
                     top: '100%',
@@ -145,47 +245,31 @@ const FontSelectField = ({ field, path })=>{
                     boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
                     zIndex: 1000
                 },
-                children: options.map((option)=>{
+                children: options.map((option, index)=>{
                     const isSelected = option.value === value;
-                    let fontFamily = option.fontFamily;
-                    if (!fontFamily) {
-                        if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif';
-                        else if (option.category === 'serif') fontFamily = 'Georgia, serif';
-                        else if (option.category === 'monospace') fontFamily = 'monospace';
-                        else fontFamily = 'inherit';
-                    }
-                    return /*#__PURE__*/ _jsxs("button", {
-                        type: "button",
-                        onClick: ()=>handleSelect(option.value),
+                    const isActive = index === activeIndex;
+                    return /*#__PURE__*/ _jsxs("div", {
+                        id: optionId(index),
+                        role: "option",
+                        "aria-selected": isSelected,
+                        onClick: ()=>handleSelect(index),
+                        onPointerMove: ()=>setActiveIndex(index),
                         style: {
-                            width: '250px',
                             padding: '12px 14px',
-                            border: 'none',
-                            backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
+                            backgroundColor: isActive ? 'var(--theme-elevation-100)' : isSelected ? 'var(--theme-elevation-50)' : 'transparent',
+                            // The active option gets an outline so keyboard focus never relies on a subtle fill alone.
+                            outline: isActive ? '2px solid var(--theme-elevation-800)' : undefined,
+                            outlineOffset: '-2px',
                             color: 'var(--theme-elevation-800)',
-                            textAlign: 'left',
                             cursor: 'pointer',
                             fontSize: '14px',
-                            fontFamily,
+                            fontFamily: previewFamily(option),
                             display: 'flex',
                             flexDirection: 'column',
-                            gap: '4px',
-                            transition: 'background-color 0.15s ease'
-                        },
-                        onMouseEnter: (e)=>{
-                            if (!isSelected) {
-                                e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
-                            }
-                            // Lazy-load a preview font when hovering
-                            ensureFontLoaded(option.value);
-                        },
-                        onMouseLeave: (e)=>{
-                            if (!isSelected) {
-                                e.currentTarget.style.backgroundColor = 'transparent';
-                            }
+                            gap: '4px'
                         },
                         children: [
-                            /*#__PURE__*/ _jsxs("div", {
+                            /*#__PURE__*/ _jsxs("span", {
                                 style: {
                                     fontWeight: isSelected ? 600 : 500,
                                     display: 'flex',
@@ -193,34 +277,23 @@ const FontSelectField = ({ field, path })=>{
                                     gap: '8px'
                                 },
                                 children: [
-                                    isSelected && /*#__PURE__*/ _jsx("svg", {
-                                        width: "14",
-                                        height: "14",
-                                        viewBox: "0 0 14 14",
-                                        fill: "none",
-                                        children: /*#__PURE__*/ _jsx("path", {
-                                            d: "M11.6667 3.5L5.25 9.91667L2.33334 7",
-                                            stroke: "var(--theme-elevation-500)",
-                                            strokeWidth: "2",
-                                            strokeLinecap: "round",
-                                            strokeLinejoin: "round"
-                                        })
+                                    isSelected && /*#__PURE__*/ _jsx(Check, {
+                                        size: 14,
+                                        color: "var(--theme-elevation-600)",
+                                        "aria-hidden": true
                                     }),
                                     getOptionLabel(option)
                                 ]
                             }),
-                            /*#__PURE__*/ _jsx("div", {
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": true,
                                 style: {
                                     fontSize: '16px',
                                     color: 'var(--theme-elevation-600)',
                                     fontStyle: option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',
                                     fontFamily: option.fontFamily || undefined
                                 },
-                                children: (()=>{
-                                    if (option.value === 'preset') return t.ui.usePreset;
-                                    if (option.value === 'custom') return t.ui.specifyCustom;
-                                    return t.ui.sampleSentence;
-                                })()
+                                children: option.value === 'preset' ? t.ui.usePreset : option.value === 'custom' ? t.ui.specifyCustom : t.ui.sampleSentence
                             })
                         ]
                     }, option.value);

package/dist/fields/FontSelectField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\nimport { getTranslations } from '../translations.js'\nimport { getAdminLanguage } from '../utils/getAdminLanguage.js'\n\ntype LocalizedLabel = Record<string, string>\n\ninterface FontOption {\n  label: string | LocalizedLabel\n  value: string\n  fontFamily?: string\n  category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [isOpen, setIsOpen] = useState(false)\n\n  const options = (field.options as FontOption[]) || []\n  const selectedOption = options.find((opt) => opt.value === value)\n  const [loadedFonts, setLoadedFonts] = useState<Set<string>>(new Set())\n\n  const getOptionLabel = (opt: FontOption) => {\n    if (typeof opt.label === 'string') return opt.label\n    const lang = getAdminLanguage()\n    return opt.label[lang] || opt.label.en || opt.label.cs || 'Font'\n  }\n\n  const ensureFontLoaded = (fontValue: string | undefined) => {\n    if (!fontValue || ['preset', 'custom', 'system-ui'].includes(fontValue)) return\n    // Avoid duplicate loads\n    if (loadedFonts.has(fontValue)) return\n\n    if (typeof document === 'undefined') return\n\n    const linkId = `font-${fontValue.replace(/\\s+/g, '-')}`\n    if (document.getElementById(linkId)) {\n      setLoadedFonts((prev) => new Set(prev).add(fontValue))\n      return\n    }\n\n    const weights = '400;700' // reasonable default weights\n    const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(\n      fontValue,\n    )}:wght@${weights}&display=swap`\n    const link = document.createElement('link')\n    link.id = linkId\n    link.rel = 'stylesheet'\n    link.href = fontUrl\n    link.onload = () => setLoadedFonts((prev) => new Set(prev).add(fontValue))\n    document.head.appendChild(link)\n  }\n\n  const handleSelect = (optionValue: string) => {\n    setValue(optionValue)\n    setIsOpen(false)\n  }\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement\n      if (!target.closest('.font-select-container')) {\n        setIsOpen(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen])\n\n  const t = getTranslations(getAdminLanguage())\n  const label =\n    typeof field.label === 'string'\n      ? field.label\n      : typeof field.label === 'object'\n        ? field.label?.en || field.label?.cs\n        : field.label || 'Font'\n\n  return (\n    <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {label}\n      </label>\n\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        style={{\n          width: '300px',\n          padding: '10px 14px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          textAlign: 'left',\n          cursor: 'pointer',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          fontSize: '14px',\n          fontFamily: selectedOption?.fontFamily || 'inherit',\n          transition: 'border-color 0.2s ease',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n        }}\n      >\n        <span style={{ flex: 1 }}>\n          {selectedOption ? getOptionLabel(selectedOption) : t.ui.selectFontPlaceholder}\n        </span>{' '}\n        <svg\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          style={{\n            transition: 'transform 0.2s ease',\n            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n          }}\n        >\n          <path\n            d=\"M3 4.5L6 7.5L9 4.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            marginTop: '4px',\n            maxHeight: '280px',\n            overflowY: 'auto',\n            backgroundColor: 'var(--theme-elevation-0)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '8px',\n            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n            zIndex: 1000,\n          }}\n        >\n          {options.map((option) => {\n            const isSelected = option.value === value\n\n            let fontFamily = option.fontFamily\n            if (!fontFamily) {\n              if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n              else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n              else if (option.category === 'monospace') fontFamily = 'monospace'\n              else fontFamily = 'inherit'\n            }\n\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => handleSelect(option.value)}\n                style={{\n                  width: '250px',\n                  padding: '12px 14px',\n                  border: 'none',\n                  backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n                  color: 'var(--theme-elevation-800)',\n                  textAlign: 'left',\n                  cursor: 'pointer',\n                  fontSize: '14px',\n                  fontFamily,\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: '4px',\n                  transition: 'background-color 0.15s ease',\n                }}\n                onMouseEnter={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n                  }\n                  // Lazy-load a preview font when hovering\n                  ensureFontLoaded(option.value)\n                }}\n                onMouseLeave={(e) => {\n                  if (!isSelected) {\n                    e.currentTarget.style.backgroundColor = 'transparent'\n                  }\n                }}\n              >\n                <div\n                  style={{\n                    fontWeight: isSelected ? 600 : 500,\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: '8px',\n                  }}\n                >\n                  {isSelected && (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <path\n                        d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n                        stroke=\"var(--theme-elevation-500)\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  )}\n                  {getOptionLabel(option)}\n                </div>\n                <div\n                  style={{\n                    fontSize: '16px',\n                    color: 'var(--theme-elevation-600)',\n                    fontStyle:\n                      option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n                    fontFamily: option.fontFamily || undefined,\n                  }}\n                >\n                  {(() => {\n                    if (option.value === 'preset') return t.ui.usePreset\n                    if (option.value === 'custom') return t.ui.specifyCustom\n                    return t.ui.sampleSentence\n                  })()}\n                </div>\n              </button>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","getTranslations","getAdminLanguage","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","loadedFonts","setLoadedFonts","Set","getOptionLabel","label","lang","en","cs","ensureFontLoaded","fontValue","includes","has","document","linkId","replace","getElementById","prev","add","weights","fontUrl","encodeURIComponent","link","createElement","id","rel","href","onload","head","appendChild","handleSelect","optionValue","handleClickOutside","e","target","closest","addEventListener","removeEventListener","t","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","ui","selectFontPlaceholder","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle","undefined","usePreset","specifyCustom","sampleSentence"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport { Check, ChevronDown } from 'lucide-react'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useCallback, useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'\nimport { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport { resolveLocalizedText } from '../utils/localizedText.js'\n\ntype LocalizedLabel = Record<string, string>\n\ninterface FontOption {\n  label: string | LocalizedLabel\n  value: string\n  fontFamily?: string\n  category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst NON_GOOGLE_VALUES = ['preset', 'custom', 'system-ui']\n\nfunction previewFamily(option: FontOption): string {\n  if (option.fontFamily) return option.fontFamily\n  if (option.category === 'sans-serif') return 'system-ui, sans-serif'\n  if (option.category === 'serif') return 'Georgia, serif'\n  if (option.category === 'monospace') return 'monospace'\n  return 'inherit'\n}\n\n/**\n * Font select with live font previews. Implements the WAI-ARIA \"select-only\n * combobox\" pattern: a button trigger plus a listbox navigated with the arrow\n * keys, Home/End, Enter/Space and Escape. Preview fonts load for whichever option\n * is active, so keyboard users get the same previews as mouse users.\n */\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const lang = useThemeLanguage()\n  const t = useThemeTranslations()\n  const baseId = useId()\n  const labelId = `${baseId}-label`\n  const listboxId = `${baseId}-listbox`\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const listboxRef = useRef<HTMLDivElement>(null)\n  const loadedFonts = useRef<Set<string>>(new Set())\n\n  const options = (field.options as FontOption[]) || []\n  const selectedIndex = options.findIndex((opt) => opt.value === value)\n  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined\n\n  const getOptionLabel = (opt: FontOption) => resolveLocalizedText(opt.label, lang, 'Font')\n  const label = resolveLocalizedText(field.label, lang, 'Font')\n  const optionId = (index: number) => `${baseId}-option-${index}`\n\n  const ensureFontLoaded = useCallback((fontValue: string | undefined) => {\n    if (!fontValue || NON_GOOGLE_VALUES.includes(fontValue)) return\n    if (loadedFonts.current.has(fontValue) || typeof document === 'undefined') return\n    loadedFonts.current.add(fontValue)\n\n    const linkId = `font-${fontValue.replace(/\\s+/g, '-')}`\n    if (document.getElementById(linkId)) return\n\n    const link = document.createElement('link')\n    link.id = linkId\n    link.rel = 'stylesheet'\n    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontValue)}:wght@400;700&display=swap`\n    document.head.appendChild(link)\n  }, [])\n\n  const open = useCallback(\n    (index = selectedIndex >= 0 ? selectedIndex : 0) => {\n      setActiveIndex(index)\n      setIsOpen(true)\n    },\n    [selectedIndex],\n  )\n\n  const close = useCallback((restoreFocus: boolean) => {\n    setIsOpen(false)\n    if (restoreFocus) triggerRef.current?.focus()\n  }, [])\n\n  const handleSelect = (index: number) => {\n    const option = options[index]\n    if (!option) return\n    setValue(option.value)\n    close(true)\n  }\n\n  // Load the preview font for the active option and keep it scrolled into view.\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    ensureFontLoaded(options[activeIndex]?.value)\n    listboxRef.current\n      ?.querySelector<HTMLElement>(`#${CSS.escape(optionId(activeIndex))}`)\n      ?.scrollIntoView({ block: 'nearest' })\n  }, [isOpen, activeIndex])\n\n  // Focus the listbox when it opens so keyboard navigation works immediately.\n  useEffect(() => {\n    if (isOpen) listboxRef.current?.focus()\n  }, [isOpen])\n\n  useEffect(() => {\n    if (!isOpen) return\n    const handlePointerOutside = (e: PointerEvent) => {\n      if (!containerRef.current?.contains(e.target as Node)) close(false)\n    }\n    document.addEventListener('pointerdown', handlePointerOutside)\n    return () => document.removeEventListener('pointerdown', handlePointerOutside)\n  }, [isOpen, close])\n\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {\n      event.preventDefault()\n      open(event.key === 'ArrowUp' && selectedIndex < 0 ? options.length - 1 : undefined)\n    }\n  }\n\n  const handleListboxKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const last = options.length - 1\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        setActiveIndex((i) => Math.min(last, i + 1))\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        setActiveIndex((i) => Math.max(0, i - 1))\n        break\n      case 'Home':\n        event.preventDefault()\n        setActiveIndex(0)\n        break\n      case 'End':\n        event.preventDefault()\n        setActiveIndex(last)\n        break\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        handleSelect(activeIndex)\n        break\n      case 'Escape':\n        event.preventDefault()\n        event.stopPropagation()\n        close(true)\n        break\n      case 'Tab':\n        close(false)\n        break\n      default:\n        // Type-ahead: jump to the first option starting with the typed letter.\n        if (event.key.length === 1 && /\\S/.test(event.key)) {\n          const letter = event.key.toLowerCase()\n          const start = activeIndex + 1\n          const ordered = [...options.slice(start), ...options.slice(0, start)]\n          const match = ordered.find((opt) => getOptionLabel(opt).toLowerCase().startsWith(letter))\n          if (match) setActiveIndex(options.indexOf(match))\n        }\n    }\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"font-select-container\"\n      style={{ position: 'relative', marginBottom: '12px', maxWidth: '360px' }}\n    >\n      <div\n        id={labelId}\n        style={{\n          display: 'block',\n          marginBottom: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {label}\n      </div>\n\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className=\"font-select-trigger\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? listboxId : undefined}\n        aria-labelledby={`${labelId} ${baseId}-value`}\n        onClick={() => (isOpen ? close(false) : open())}\n        onKeyDown={handleTriggerKeyDown}\n        style={{\n          width: '100%',\n          padding: '10px 14px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          textAlign: 'left',\n          cursor: 'pointer',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          gap: '8px',\n          fontSize: '14px',\n          fontFamily: selectedOption?.fontFamily || 'inherit',\n        }}\n      >\n        <span id={`${baseId}-value`} style={{ flex: 1, minWidth: 0 }}>\n          {selectedOption ? getOptionLabel(selectedOption) : t.ui.selectFontPlaceholder}\n        </span>\n        <ChevronDown\n          size={14}\n          aria-hidden\n          style={{ flexShrink: 0, transform: isOpen ? 'rotate(180deg)' : undefined }}\n        />\n      </button>\n\n      {isOpen && (\n        <div\n          ref={listboxRef}\n          id={listboxId}\n          role=\"listbox\"\n          tabIndex={-1}\n          aria-labelledby={labelId}\n          aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}\n          onKeyDown={handleListboxKeyDown}\n          className=\"font-select-listbox\"\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            marginTop: '4px',\n            maxHeight: '280px',\n            overflowY: 'auto',\n            backgroundColor: 'var(--theme-elevation-0)',\n            border: '1px solid var(--theme-elevation-200)',\n            borderRadius: '8px',\n            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n            zIndex: 1000,\n          }}\n        >\n          {options.map((option, index) => {\n            const isSelected = option.value === value\n            const isActive = index === activeIndex\n\n            return (\n              <div\n                key={option.value}\n                id={optionId(index)}\n                role=\"option\"\n                aria-selected={isSelected}\n                onClick={() => handleSelect(index)}\n                onPointerMove={() => setActiveIndex(index)}\n                style={{\n                  padding: '12px 14px',\n                  backgroundColor: isActive\n                    ? 'var(--theme-elevation-100)'\n                    : isSelected\n                      ? 'var(--theme-elevation-50)'\n                      : 'transparent',\n                  // The active option gets an outline so keyboard focus never relies on a subtle fill alone.\n                  outline: isActive ? '2px solid var(--theme-elevation-800)' : undefined,\n                  outlineOffset: '-2px',\n                  color: 'var(--theme-elevation-800)',\n                  cursor: 'pointer',\n                  fontSize: '14px',\n                  fontFamily: previewFamily(option),\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: '4px',\n                }}\n              >\n                <span\n                  style={{\n                    fontWeight: isSelected ? 600 : 500,\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: '8px',\n                  }}\n                >\n                  {isSelected && <Check size={14} color=\"var(--theme-elevation-600)\" aria-hidden />}\n                  {getOptionLabel(option)}\n                </span>\n                <span\n                  aria-hidden\n                  style={{\n                    fontSize: '16px',\n                    color: 'var(--theme-elevation-600)',\n                    fontStyle:\n                      option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n                    fontFamily: option.fontFamily || undefined,\n                  }}\n                >\n                  {option.value === 'preset'\n                    ? t.ui.usePreset\n                    : option.value === 'custom'\n                      ? t.ui.specifyCustom\n                      : t.ui.sampleSentence}\n                </span>\n              </div>\n            )\n          })}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default FontSelectField\n"],"names":["useField","Check","ChevronDown","useCallback","useEffect","useId","useRef","useState","useThemeLanguage","useThemeTranslations","resolveLocalizedText","NON_GOOGLE_VALUES","previewFamily","option","fontFamily","category","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","activeIndex","setActiveIndex","lang","t","baseId","labelId","listboxId","containerRef","triggerRef","listboxRef","loadedFonts","Set","options","selectedIndex","findIndex","opt","selectedOption","undefined","getOptionLabel","label","optionId","index","ensureFontLoaded","fontValue","includes","current","has","document","add","linkId","replace","getElementById","link","createElement","id","rel","href","encodeURIComponent","head","appendChild","open","close","restoreFocus","focus","handleSelect","querySelector","CSS","escape","scrollIntoView","block","handlePointerOutside","e","contains","target","addEventListener","removeEventListener","handleTriggerKeyDown","event","key","preventDefault","length","handleListboxKeyDown","last","i","Math","min","max","stopPropagation","test","letter","toLowerCase","start","ordered","slice","match","find","startsWith","indexOf","div","ref","className","style","position","marginBottom","maxWidth","display","fontSize","fontWeight","color","button","type","role","aria-haspopup","aria-expanded","aria-controls","aria-labelledby","onClick","onKeyDown","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","gap","span","flex","minWidth","ui","selectFontPlaceholder","size","aria-hidden","flexShrink","transform","tabIndex","aria-activedescendant","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","isSelected","isActive","aria-selected","onPointerMove","outline","outlineOffset","flexDirection","fontStyle","usePreset","specifyCustom","sampleSentence"],"mappings":"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"}

package/dist/fields/PaletteGeneratorField.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Admin tool that generates a full light + dark palette from a single brand
+ * colour (or a colour extracted from an uploaded logo/image) and writes it
+ * straight into the colour-mode fields.
+ */
+export default function PaletteGeneratorField(): import("react").JSX.Element;
+//# sourceMappingURL=PaletteGeneratorField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteGeneratorField.d.ts","sourceRoot":"","sources":["../../src/fields/PaletteGeneratorField.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,gCA2P5C"}