@kilivi/payloadcms-theme-management 0.5.9 → 1.0.0

package/dist/globals/ThemeSettings/FontPicker/PreviewContent.js

@@ -0,0 +1,400 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { FontPreview } from './FontPreview';
+/**
+ * PreviewContent component
+ *
+ * Displays different preview modes for the selected font:
+ * - Typography: Headers and body text with different weights
+ * - Blog Post: Simulated blog post layout
+ * - Landing Page: Hero section with CTA
+ * - UI Elements: Buttons, inputs, and links
+ */ export const PreviewContent = ({ font, activeTab, translations })=>{
+    if (!font) {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                padding: '40px',
+                textAlign: 'center',
+                color: 'var(--theme-elevation-400)'
+            },
+            children: translations.selectFont
+        });
+    }
+    const renderTypography = ()=>/*#__PURE__*/ _jsxs("div", {
+            style: {
+                padding: '24px'
+            },
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '8px'
+                            },
+                            children: [
+                                translations.typography.h1.split(' ')[0],
+                                " (H1)"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "h1",
+                            text: translations.typography.h1
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '8px'
+                            },
+                            children: [
+                                translations.typography.h2.split(' ')[0],
+                                " (H2)"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "h2",
+                            text: translations.typography.h2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '8px'
+                            },
+                            children: [
+                                translations.typography.h3.split(' ')[0],
+                                " (H3)"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "h3",
+                            text: translations.typography.h3
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '8px'
+                            },
+                            children: "Body"
+                        }),
+                        /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "body",
+                            text: translations.typography.body
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '8px'
+                            },
+                            children: "Small"
+                        }),
+                        /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "small",
+                            text: translations.typography.small
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '8px'
+                            },
+                            children: "Characters"
+                        }),
+                        /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "chars"
+                        })
+                    ]
+                })
+            ]
+        });
+    const renderBlog = ()=>/*#__PURE__*/ _jsxs("div", {
+            style: {
+                padding: '24px',
+                maxWidth: '700px',
+                margin: '0 auto'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginBottom: '24px'
+                    },
+                    children: /*#__PURE__*/ _jsx(FontPreview, {
+                        font: font,
+                        variant: "h1",
+                        text: translations.blog.title
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginBottom: '24px',
+                        opacity: 0.7
+                    },
+                    children: /*#__PURE__*/ _jsx(FontPreview, {
+                        font: font,
+                        variant: "h3",
+                        text: translations.blog.subtitle
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginBottom: '16px'
+                    },
+                    children: /*#__PURE__*/ _jsx(FontPreview, {
+                        font: font,
+                        variant: "body",
+                        text: translations.blog.body
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginBottom: '16px'
+                    },
+                    children: /*#__PURE__*/ _jsx(FontPreview, {
+                        font: font,
+                        variant: "body",
+                        text: translations.blog.body.split('.')[1] + '.'
+                    })
+                })
+            ]
+        });
+    const renderLanding = ()=>/*#__PURE__*/ _jsxs("div", {
+            style: {
+                padding: '48px 24px',
+                textAlign: 'center',
+                background: 'linear-gradient(135deg, var(--theme-elevation-50) 0%, var(--theme-elevation-100) 100%)',
+                minHeight: '400px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '24px'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        maxWidth: '800px'
+                    },
+                    children: /*#__PURE__*/ _jsx(FontPreview, {
+                        font: font,
+                        variant: "h1",
+                        text: translations.landing.hero
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        maxWidth: '600px',
+                        opacity: 0.8
+                    },
+                    children: /*#__PURE__*/ _jsx(FontPreview, {
+                        font: font,
+                        variant: "h3",
+                        text: translations.landing.subheading
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '16px'
+                    },
+                    children: /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'inline-block',
+                            padding: '12px 32px',
+                            background: 'var(--theme-elevation-900)',
+                            color: 'var(--theme-elevation-0)',
+                            borderRadius: '8px',
+                            fontSize: '18px',
+                            fontWeight: 600,
+                            cursor: 'pointer'
+                        },
+                        children: /*#__PURE__*/ _jsx(FontPreview, {
+                            font: font,
+                            variant: "body",
+                            text: translations.landing.cta
+                        })
+                    })
+                })
+            ]
+        });
+    const renderUI = ()=>/*#__PURE__*/ _jsxs("div", {
+            style: {
+                padding: '24px'
+            },
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '12px'
+                            },
+                            children: "Button"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                display: 'inline-block',
+                                padding: '10px 24px',
+                                background: 'var(--theme-elevation-900)',
+                                color: 'var(--theme-elevation-0)',
+                                borderRadius: '6px',
+                                fontSize: '16px',
+                                fontWeight: 500,
+                                cursor: 'pointer'
+                            },
+                            children: /*#__PURE__*/ _jsx(FontPreview, {
+                                font: font,
+                                variant: "body",
+                                text: translations.ui.button
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '32px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '12px'
+                            },
+                            children: "Input"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                width: '100%',
+                                maxWidth: '400px',
+                                padding: '10px 16px',
+                                background: 'var(--theme-elevation-0)',
+                                border: '1px solid var(--theme-elevation-300)',
+                                borderRadius: '6px',
+                                fontSize: '16px'
+                            },
+                            children: /*#__PURE__*/ _jsx(FontPreview, {
+                                font: font,
+                                variant: "body",
+                                text: translations.ui.input
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                fontSize: '12px',
+                                fontWeight: 600,
+                                textTransform: 'uppercase',
+                                letterSpacing: '0.05em',
+                                color: 'var(--theme-elevation-500)',
+                                marginBottom: '12px'
+                            },
+                            children: "Link"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                color: 'var(--theme-elevation-700)',
+                                fontSize: '16px',
+                                textDecoration: 'underline',
+                                cursor: 'pointer'
+                            },
+                            children: /*#__PURE__*/ _jsx(FontPreview, {
+                                font: font,
+                                variant: "body",
+                                text: translations.ui.link
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    switch(activeTab){
+        case 'typography':
+            return renderTypography();
+        case 'blog':
+            return renderBlog();
+        case 'landing':
+            return renderLanding();
+        case 'ui':
+            return renderUI();
+        default:
+            return null;
+    }
+};
+
+//# sourceMappingURL=PreviewContent.js.map

package/dist/globals/ThemeSettings/FontPicker/PreviewContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/globals/ThemeSettings/FontPicker/PreviewContent.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport type { GoogleFont } from '../../../app/api/google-fonts/route'\nimport { FontPreview } from './FontPreview'\nimport type { Translations } from './translations'\n\nexport type PreviewTab = 'typography' | 'blog' | 'landing' | 'ui'\n\nexport interface PreviewContentProps {\n  font: GoogleFont | null\n  activeTab: PreviewTab\n  translations: Translations\n}\n\n/**\n * PreviewContent component\n *\n * Displays different preview modes for the selected font:\n * - Typography: Headers and body text with different weights\n * - Blog Post: Simulated blog post layout\n * - Landing Page: Hero section with CTA\n * - UI Elements: Buttons, inputs, and links\n */\nexport const PreviewContent: React.FC<PreviewContentProps> = ({\n  font,\n  activeTab,\n  translations,\n}) => {\n  if (!font) {\n    return (\n      <div\n        style={{\n          padding: '40px',\n          textAlign: 'center',\n          color: 'var(--theme-elevation-400)',\n        }}\n      >\n        {translations.selectFont}\n      </div>\n    )\n  }\n\n  const renderTypography = () => (\n    <div style={{ padding: '24px' }}>\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          {translations.typography.h1.split(' ')[0]} (H1)\n        </div>\n        <FontPreview font={font} variant=\"h1\" text={translations.typography.h1} />\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          {translations.typography.h2.split(' ')[0]} (H2)\n        </div>\n        <FontPreview font={font} variant=\"h2\" text={translations.typography.h2} />\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          {translations.typography.h3.split(' ')[0]} (H3)\n        </div>\n        <FontPreview font={font} variant=\"h3\" text={translations.typography.h3} />\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          Body\n        </div>\n        <FontPreview font={font} variant=\"body\" text={translations.typography.body} />\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          Small\n        </div>\n        <FontPreview font={font} variant=\"small\" text={translations.typography.small} />\n      </div>\n\n      <div>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          Characters\n        </div>\n        <FontPreview font={font} variant=\"chars\" />\n      </div>\n    </div>\n  )\n\n  const renderBlog = () => (\n    <div style={{ padding: '24px', maxWidth: '700px', margin: '0 auto' }}>\n      <div style={{ marginBottom: '24px' }}>\n        <FontPreview font={font} variant=\"h1\" text={translations.blog.title} />\n      </div>\n\n      <div style={{ marginBottom: '24px', opacity: 0.7 }}>\n        <FontPreview font={font} variant=\"h3\" text={translations.blog.subtitle} />\n      </div>\n\n      <div style={{ marginBottom: '16px' }}>\n        <FontPreview font={font} variant=\"body\" text={translations.blog.body} />\n      </div>\n\n      <div style={{ marginBottom: '16px' }}>\n        <FontPreview font={font} variant=\"body\" text={translations.blog.body.split('.')[1] + '.'} />\n      </div>\n    </div>\n  )\n\n  const renderLanding = () => (\n    <div\n      style={{\n        padding: '48px 24px',\n        textAlign: 'center',\n        background:\n          'linear-gradient(135deg, var(--theme-elevation-50) 0%, var(--theme-elevation-100) 100%)',\n        minHeight: '400px',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        gap: '24px',\n      }}\n    >\n      <div style={{ maxWidth: '800px' }}>\n        <FontPreview font={font} variant=\"h1\" text={translations.landing.hero} />\n      </div>\n\n      <div style={{ maxWidth: '600px', opacity: 0.8 }}>\n        <FontPreview font={font} variant=\"h3\" text={translations.landing.subheading} />\n      </div>\n\n      <div style={{ marginTop: '16px' }}>\n        <div\n          style={{\n            display: 'inline-block',\n            padding: '12px 32px',\n            background: 'var(--theme-elevation-900)',\n            color: 'var(--theme-elevation-0)',\n            borderRadius: '8px',\n            fontSize: '18px',\n            fontWeight: 600,\n            cursor: 'pointer',\n          }}\n        >\n          <FontPreview font={font} variant=\"body\" text={translations.landing.cta} />\n        </div>\n      </div>\n    </div>\n  )\n\n  const renderUI = () => (\n    <div style={{ padding: '24px' }}>\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '12px',\n          }}\n        >\n          Button\n        </div>\n        <div\n          style={{\n            display: 'inline-block',\n            padding: '10px 24px',\n            background: 'var(--theme-elevation-900)',\n            color: 'var(--theme-elevation-0)',\n            borderRadius: '6px',\n            fontSize: '16px',\n            fontWeight: 500,\n            cursor: 'pointer',\n          }}\n        >\n          <FontPreview font={font} variant=\"body\" text={translations.ui.button} />\n        </div>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '12px',\n          }}\n        >\n          Input\n        </div>\n        <div\n          style={{\n            width: '100%',\n            maxWidth: '400px',\n            padding: '10px 16px',\n            background: 'var(--theme-elevation-0)',\n            border: '1px solid var(--theme-elevation-300)',\n            borderRadius: '6px',\n            fontSize: '16px',\n          }}\n        >\n          <FontPreview font={font} variant=\"body\" text={translations.ui.input} />\n        </div>\n      </div>\n\n      <div>\n        <div\n          style={{\n            fontSize: '12px',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '12px',\n          }}\n        >\n          Link\n        </div>\n        <div\n          style={{\n            color: 'var(--theme-elevation-700)',\n            fontSize: '16px',\n            textDecoration: 'underline',\n            cursor: 'pointer',\n          }}\n        >\n          <FontPreview font={font} variant=\"body\" text={translations.ui.link} />\n        </div>\n      </div>\n    </div>\n  )\n\n  switch (activeTab) {\n    case 'typography':\n      return renderTypography()\n    case 'blog':\n      return renderBlog()\n    case 'landing':\n      return renderLanding()\n    case 'ui':\n      return renderUI()\n    default:\n      return null\n  }\n}\n"],"names":["React","FontPreview","PreviewContent","font","activeTab","translations","div","style","padding","textAlign","color","selectFont","renderTypography","marginBottom","fontSize","fontWeight","textTransform","letterSpacing","typography","h1","split","variant","text","h2","h3","body","small","renderBlog","maxWidth","margin","blog","title","opacity","subtitle","renderLanding","background","minHeight","display","flexDirection","justifyContent","alignItems","gap","landing","hero","subheading","marginTop","borderRadius","cursor","cta","renderUI","ui","button","width","border","input","textDecoration","link"],"mappings":"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"}

package/dist/globals/ThemeSettings/FontPicker/index.d.ts

@@ -0,0 +1,25 @@
+import type { TextFieldClientProps } from 'payload';
+import React from 'react';
+import { type Language } from './translations.js';
+export interface FontPickerProps {
+    value?: string;
+    onChange: (fontFamily: string) => void;
+    language?: Language;
+}
+/**
+ * FontPicker component
+ *
+ * A comprehensive Google Fonts picker with:
+ * - Two-column layout (preview panel + selection panel)
+ * - Search and filters (category, language subset)
+ * - Multiple preview modes (typography, blog, landing, ui)
+ * - Lazy font loading (only on hover/scroll)
+ * - Infinite scroll with pagination
+ * - Favorites system with localStorage
+ * - View mode toggle (row/grid)
+ */
+declare const FontPickerField: React.FC<TextFieldClientProps>;
+declare const FontPickerComponent: React.FC<FontPickerProps>;
+export { FontPickerComponent };
+export default FontPickerField;
+//# sourceMappingURL=index.d.ts.map

package/dist/globals/ThemeSettings/FontPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/FontPicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AACnD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAQvE,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAQlE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAanD,CAAA;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2TlD,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,eAAe,eAAe,CAAA"}