@kilivi/payloadcms-theme-management 0.5.9 → 1.0.1

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

@@ -0,0 +1,229 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+/**
+ * FontPreview component with Shadow DOM isolation
+ *
+ * This component renders font previews in an isolated Shadow DOM
+ * to prevent Payload CMS admin styles from affecting the preview.
+ */ export const FontPreview = ({ font, variant, text, onLoad })=>{
+    const shadowHostRef = useRef(null);
+    const shadowRootRef = useRef(null);
+    const fontLoadedRef = useRef(false);
+    useEffect(()=>{
+        if (!shadowHostRef.current) return;
+        // Create Shadow DOM if not already created
+        if (!shadowRootRef.current) {
+            shadowRootRef.current = shadowHostRef.current.attachShadow({
+                mode: 'open'
+            });
+        }
+        const shadowRoot = shadowRootRef.current;
+        // Get font weights
+        const weights = font.variants.filter((v)=>!v.includes('italic')).join(';');
+        const fontFamily = font.family;
+        // Load font CSS
+        const loadFont = async ()=>{
+            if (fontLoadedRef.current) return;
+            try {
+                // Create font face CSS
+                const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@${weights}&display=swap`;
+                // Check if font is already loaded
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = fontUrl;
+                // Wait for font to load
+                link.onload = ()=>{
+                    fontLoadedRef.current = true;
+                    onLoad?.();
+                };
+                // Add link to shadow root
+                shadowRoot.appendChild(link);
+            } catch (error) {
+                console.error('Error loading font:', error);
+            }
+        };
+        loadFont();
+        // Render preview based on variant
+        const renderPreview = ()=>{
+            const container = document.createElement('div');
+            container.style.cssText = `
+        font-family: '${fontFamily}', sans-serif;
+        color: inherit;
+        margin: 0;
+        padding: 0;
+      `;
+            let content;
+            switch(variant){
+                case 'h1':
+                    content = document.createElement('h1');
+                    content.style.cssText = `
+            font-size: 48px;
+            font-weight: 700;
+            line-height: 1.2;
+            margin: 0;
+          `;
+                    content.textContent = text || font.family;
+                    break;
+                case 'h2':
+                    content = document.createElement('h2');
+                    content.style.cssText = `
+            font-size: 36px;
+            font-weight: 600;
+            line-height: 1.3;
+            margin: 0;
+          `;
+                    content.textContent = text || font.family;
+                    break;
+                case 'h3':
+                    content = document.createElement('h3');
+                    content.style.cssText = `
+            font-size: 24px;
+            font-weight: 500;
+            line-height: 1.4;
+            margin: 0;
+          `;
+                    content.textContent = text || font.family;
+                    break;
+                case 'body':
+                    content = document.createElement('p');
+                    content.style.cssText = `
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 1.6;
+            margin: 0;
+          `;
+                    content.textContent = text || font.family;
+                    break;
+                case 'small':
+                    content = document.createElement('p');
+                    content.style.cssText = `
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 1.5;
+            margin: 0;
+          `;
+                    content.textContent = text || font.family;
+                    break;
+                case 'chars':
+                    content = document.createElement('div');
+                    content.style.cssText = `
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 1.5;
+            margin: 0;
+          `;
+                    content.textContent = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789';
+                    break;
+                case 'weights':
+                    content = document.createElement('div');
+                    content.style.cssText = `margin: 0;`;
+                    const availableWeights = font.variants.filter((v)=>!v.includes('italic')).map((v)=>parseInt(v)).filter((w)=>!isNaN(w)).sort((a, b)=>a - b);
+                    availableWeights.forEach((weight)=>{
+                        const line = document.createElement('div');
+                        line.style.cssText = `
+              font-size: 16px;
+              font-weight: ${weight};
+              line-height: 1.8;
+              margin: 4px 0;
+            `;
+                        line.textContent = `${weight} - The quick brown fox jumps over the lazy dog`;
+                        content.appendChild(line);
+                    });
+                    break;
+                case 'card':
+                    content = document.createElement('div');
+                    content.style.cssText = `
+            padding: 16px;
+            background: var(--theme-bg, #ffffff);
+            border: 1px solid var(--theme-border, #e5e7eb);
+            border-radius: 8px;
+            margin: 0;
+          `;
+                    const title = document.createElement('h3');
+                    title.style.cssText = `
+            font-size: 20px;
+            font-weight: 600;
+            margin: 0 0 8px 0;
+          `;
+                    title.textContent = font.family;
+                    const description = document.createElement('p');
+                    description.style.cssText = `
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 1.5;
+            margin: 0;
+            color: var(--theme-text-secondary, #6b7280);
+          `;
+                    description.textContent = text || 'The quick brown fox jumps over the lazy dog';
+                    content.appendChild(title);
+                    content.appendChild(description);
+                    break;
+                case 'row':
+                    content = document.createElement('div');
+                    content.style.cssText = `
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 12px 16px;
+            margin: 0;
+          `;
+                    const nameSpan = document.createElement('span');
+                    nameSpan.style.cssText = `
+            font-size: 16px;
+            font-weight: 500;
+            min-width: 150px;
+          `;
+                    nameSpan.textContent = font.family;
+                    const sampleSpan = document.createElement('span');
+                    sampleSpan.style.cssText = `
+            font-size: 16px;
+            font-weight: 400;
+            flex: 1;
+            opacity: 0.7;
+          `;
+                    sampleSpan.textContent = text || 'The quick brown fox jumps over the lazy dog';
+                    content.appendChild(nameSpan);
+                    content.appendChild(sampleSpan);
+                    break;
+                case 'name':
+                default:
+                    content = document.createElement('span');
+                    content.style.cssText = `
+            font-size: 16px;
+            font-weight: 500;
+            margin: 0;
+          `;
+                    content.textContent = font.family;
+                    break;
+            }
+            container.appendChild(content);
+            return container;
+        };
+        // Clear previous content
+        shadowRoot.innerHTML = '';
+        // Render preview
+        const preview = renderPreview();
+        shadowRoot.appendChild(preview);
+        // Cleanup
+        return ()=>{
+            if (shadowRoot) {
+                shadowRoot.innerHTML = '';
+            }
+        };
+    }, [
+        font,
+        variant,
+        text,
+        onLoad
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: shadowHostRef,
+        style: {
+            width: '100%',
+            minHeight: '20px'
+        }
+    });
+};
+
+//# sourceMappingURL=FontPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/globals/ThemeSettings/FontPicker/FontPreview.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef } from 'react'\nimport type { GoogleFont } from '../../../app/api/google-fonts/route'\n\nexport type PreviewVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'body'\n  | 'small'\n  | 'chars'\n  | 'weights'\n  | 'card'\n  | 'row'\n  | 'name'\n\nexport interface FontPreviewProps {\n  font: GoogleFont\n  variant: PreviewVariant\n  text?: string\n  onLoad?: () => void\n}\n\n/**\n * FontPreview component with Shadow DOM isolation\n *\n * This component renders font previews in an isolated Shadow DOM\n * to prevent Payload CMS admin styles from affecting the preview.\n */\nexport const FontPreview: React.FC<FontPreviewProps> = ({ font, variant, text, onLoad }) => {\n  const shadowHostRef = useRef<HTMLDivElement>(null)\n  const shadowRootRef = useRef<ShadowRoot | null>(null)\n  const fontLoadedRef = useRef(false)\n\n  useEffect(() => {\n    if (!shadowHostRef.current) return\n\n    // Create Shadow DOM if not already created\n    if (!shadowRootRef.current) {\n      shadowRootRef.current = shadowHostRef.current.attachShadow({ mode: 'open' })\n    }\n\n    const shadowRoot = shadowRootRef.current\n\n    // Get font weights\n    const weights = font.variants.filter((v) => !v.includes('italic')).join(';')\n    const fontFamily = font.family\n\n    // Load font CSS\n    const loadFont = async () => {\n      if (fontLoadedRef.current) return\n\n      try {\n        // Create font face CSS\n        const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(\n          fontFamily,\n        )}:wght@${weights}&display=swap`\n\n        // Check if font is already loaded\n        const link = document.createElement('link')\n        link.rel = 'stylesheet'\n        link.href = fontUrl\n\n        // Wait for font to load\n        link.onload = () => {\n          fontLoadedRef.current = true\n          onLoad?.()\n        }\n\n        // Add link to shadow root\n        shadowRoot.appendChild(link)\n      } catch (error) {\n        console.error('Error loading font:', error)\n      }\n    }\n\n    loadFont()\n\n    // Render preview based on variant\n    const renderPreview = () => {\n      const container = document.createElement('div')\n      container.style.cssText = `\n        font-family: '${fontFamily}', sans-serif;\n        color: inherit;\n        margin: 0;\n        padding: 0;\n      `\n\n      let content: HTMLElement\n\n      switch (variant) {\n        case 'h1':\n          content = document.createElement('h1')\n          content.style.cssText = `\n            font-size: 48px;\n            font-weight: 700;\n            line-height: 1.2;\n            margin: 0;\n          `\n          content.textContent = text || font.family\n          break\n\n        case 'h2':\n          content = document.createElement('h2')\n          content.style.cssText = `\n            font-size: 36px;\n            font-weight: 600;\n            line-height: 1.3;\n            margin: 0;\n          `\n          content.textContent = text || font.family\n          break\n\n        case 'h3':\n          content = document.createElement('h3')\n          content.style.cssText = `\n            font-size: 24px;\n            font-weight: 500;\n            line-height: 1.4;\n            margin: 0;\n          `\n          content.textContent = text || font.family\n          break\n\n        case 'body':\n          content = document.createElement('p')\n          content.style.cssText = `\n            font-size: 16px;\n            font-weight: 400;\n            line-height: 1.6;\n            margin: 0;\n          `\n          content.textContent = text || font.family\n          break\n\n        case 'small':\n          content = document.createElement('p')\n          content.style.cssText = `\n            font-size: 14px;\n            font-weight: 400;\n            line-height: 1.5;\n            margin: 0;\n          `\n          content.textContent = text || font.family\n          break\n\n        case 'chars':\n          content = document.createElement('div')\n          content.style.cssText = `\n            font-size: 18px;\n            font-weight: 400;\n            line-height: 1.5;\n            margin: 0;\n          `\n          content.textContent = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789'\n          break\n\n        case 'weights':\n          content = document.createElement('div')\n          content.style.cssText = `margin: 0;`\n          const availableWeights = font.variants\n            .filter((v) => !v.includes('italic'))\n            .map((v) => parseInt(v))\n            .filter((w) => !isNaN(w))\n            .sort((a, b) => a - b)\n\n          availableWeights.forEach((weight) => {\n            const line = document.createElement('div')\n            line.style.cssText = `\n              font-size: 16px;\n              font-weight: ${weight};\n              line-height: 1.8;\n              margin: 4px 0;\n            `\n            line.textContent = `${weight} - The quick brown fox jumps over the lazy dog`\n            content.appendChild(line)\n          })\n          break\n\n        case 'card':\n          content = document.createElement('div')\n          content.style.cssText = `\n            padding: 16px;\n            background: var(--theme-bg, #ffffff);\n            border: 1px solid var(--theme-border, #e5e7eb);\n            border-radius: 8px;\n            margin: 0;\n          `\n          const title = document.createElement('h3')\n          title.style.cssText = `\n            font-size: 20px;\n            font-weight: 600;\n            margin: 0 0 8px 0;\n          `\n          title.textContent = font.family\n          const description = document.createElement('p')\n          description.style.cssText = `\n            font-size: 14px;\n            font-weight: 400;\n            line-height: 1.5;\n            margin: 0;\n            color: var(--theme-text-secondary, #6b7280);\n          `\n          description.textContent = text || 'The quick brown fox jumps over the lazy dog'\n          content.appendChild(title)\n          content.appendChild(description)\n          break\n\n        case 'row':\n          content = document.createElement('div')\n          content.style.cssText = `\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            padding: 12px 16px;\n            margin: 0;\n          `\n          const nameSpan = document.createElement('span')\n          nameSpan.style.cssText = `\n            font-size: 16px;\n            font-weight: 500;\n            min-width: 150px;\n          `\n          nameSpan.textContent = font.family\n          const sampleSpan = document.createElement('span')\n          sampleSpan.style.cssText = `\n            font-size: 16px;\n            font-weight: 400;\n            flex: 1;\n            opacity: 0.7;\n          `\n          sampleSpan.textContent = text || 'The quick brown fox jumps over the lazy dog'\n          content.appendChild(nameSpan)\n          content.appendChild(sampleSpan)\n          break\n\n        case 'name':\n        default:\n          content = document.createElement('span')\n          content.style.cssText = `\n            font-size: 16px;\n            font-weight: 500;\n            margin: 0;\n          `\n          content.textContent = font.family\n          break\n      }\n\n      container.appendChild(content)\n      return container\n    }\n\n    // Clear previous content\n    shadowRoot.innerHTML = ''\n\n    // Render preview\n    const preview = renderPreview()\n    shadowRoot.appendChild(preview)\n\n    // Cleanup\n    return () => {\n      if (shadowRoot) {\n        shadowRoot.innerHTML = ''\n      }\n    }\n  }, [font, variant, text, onLoad])\n\n  return <div ref={shadowHostRef} style={{ width: '100%', minHeight: '20px' }} />\n}\n"],"names":["React","useEffect","useRef","FontPreview","font","variant","text","onLoad","shadowHostRef","shadowRootRef","fontLoadedRef","current","attachShadow","mode","shadowRoot","weights","variants","filter","v","includes","join","fontFamily","family","loadFont","fontUrl","encodeURIComponent","link","document","createElement","rel","href","onload","appendChild","error","console","renderPreview","container","style","cssText","content","textContent","availableWeights","map","parseInt","w","isNaN","sort","a","b","forEach","weight","line","title","description","nameSpan","sampleSpan","innerHTML","preview","div","ref","width","minHeight"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAsBhD;;;;;CAKC,GACD,OAAO,MAAMC,cAA0C,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,IAAI,EAAEC,MAAM,EAAE;IACrF,MAAMC,gBAAgBN,OAAuB;IAC7C,MAAMO,gBAAgBP,OAA0B;IAChD,MAAMQ,gBAAgBR,OAAO;IAE7BD,UAAU;QACR,IAAI,CAACO,cAAcG,OAAO,EAAE;QAE5B,2CAA2C;QAC3C,IAAI,CAACF,cAAcE,OAAO,EAAE;YAC1BF,cAAcE,OAAO,GAAGH,cAAcG,OAAO,CAACC,YAAY,CAAC;gBAAEC,MAAM;YAAO;QAC5E;QAEA,MAAMC,aAAaL,cAAcE,OAAO;QAExC,mBAAmB;QACnB,MAAMI,UAAUX,KAAKY,QAAQ,CAACC,MAAM,CAAC,CAACC,IAAM,CAACA,EAAEC,QAAQ,CAAC,WAAWC,IAAI,CAAC;QACxE,MAAMC,aAAajB,KAAKkB,MAAM;QAE9B,gBAAgB;QAChB,MAAMC,WAAW;YACf,IAAIb,cAAcC,OAAO,EAAE;YAE3B,IAAI;gBACF,uBAAuB;gBACvB,MAAMa,UAAU,CAAC,yCAAyC,EAAEC,mBAC1DJ,YACA,MAAM,EAAEN,QAAQ,aAAa,CAAC;gBAEhC,kCAAkC;gBAClC,MAAMW,OAAOC,SAASC,aAAa,CAAC;gBACpCF,KAAKG,GAAG,GAAG;gBACXH,KAAKI,IAAI,GAAGN;gBAEZ,wBAAwB;gBACxBE,KAAKK,MAAM,GAAG;oBACZrB,cAAcC,OAAO,GAAG;oBACxBJ;gBACF;gBAEA,0BAA0B;gBAC1BO,WAAWkB,WAAW,CAACN;YACzB,EAAE,OAAOO,OAAO;gBACdC,QAAQD,KAAK,CAAC,uBAAuBA;YACvC;QACF;QAEAV;QAEA,kCAAkC;QAClC,MAAMY,gBAAgB;YACpB,MAAMC,YAAYT,SAASC,aAAa,CAAC;YACzCQ,UAAUC,KAAK,CAACC,OAAO,GAAG,CAAC;sBACX,EAAEjB,WAAW;;;;MAI7B,CAAC;YAED,IAAIkB;YAEJ,OAAQlC;gBACN,KAAK;oBACHkC,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAKzB,CAAC;oBACDC,QAAQC,WAAW,GAAGlC,QAAQF,KAAKkB,MAAM;oBACzC;gBAEF,KAAK;oBACHiB,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAKzB,CAAC;oBACDC,QAAQC,WAAW,GAAGlC,QAAQF,KAAKkB,MAAM;oBACzC;gBAEF,KAAK;oBACHiB,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAKzB,CAAC;oBACDC,QAAQC,WAAW,GAAGlC,QAAQF,KAAKkB,MAAM;oBACzC;gBAEF,KAAK;oBACHiB,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAKzB,CAAC;oBACDC,QAAQC,WAAW,GAAGlC,QAAQF,KAAKkB,MAAM;oBACzC;gBAEF,KAAK;oBACHiB,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAKzB,CAAC;oBACDC,QAAQC,WAAW,GAAGlC,QAAQF,KAAKkB,MAAM;oBACzC;gBAEF,KAAK;oBACHiB,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAKzB,CAAC;oBACDC,QAAQC,WAAW,GAAG;oBACtB;gBAEF,KAAK;oBACHD,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC,UAAU,CAAC;oBACpC,MAAMG,mBAAmBrC,KAAKY,QAAQ,CACnCC,MAAM,CAAC,CAACC,IAAM,CAACA,EAAEC,QAAQ,CAAC,WAC1BuB,GAAG,CAAC,CAACxB,IAAMyB,SAASzB,IACpBD,MAAM,CAAC,CAAC2B,IAAM,CAACC,MAAMD,IACrBE,IAAI,CAAC,CAACC,GAAGC,IAAMD,IAAIC;oBAEtBP,iBAAiBQ,OAAO,CAAC,CAACC;wBACxB,MAAMC,OAAOxB,SAASC,aAAa,CAAC;wBACpCuB,KAAKd,KAAK,CAACC,OAAO,GAAG,CAAC;;2BAEP,EAAEY,OAAO;;;YAGxB,CAAC;wBACDC,KAAKX,WAAW,GAAG,GAAGU,OAAO,8CAA8C,CAAC;wBAC5EX,QAAQP,WAAW,CAACmB;oBACtB;oBACA;gBAEF,KAAK;oBACHZ,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;;UAMzB,CAAC;oBACD,MAAMc,QAAQzB,SAASC,aAAa,CAAC;oBACrCwB,MAAMf,KAAK,CAACC,OAAO,GAAG,CAAC;;;;UAIvB,CAAC;oBACDc,MAAMZ,WAAW,GAAGpC,KAAKkB,MAAM;oBAC/B,MAAM+B,cAAc1B,SAASC,aAAa,CAAC;oBAC3CyB,YAAYhB,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;;UAM7B,CAAC;oBACDe,YAAYb,WAAW,GAAGlC,QAAQ;oBAClCiC,QAAQP,WAAW,CAACoB;oBACpBb,QAAQP,WAAW,CAACqB;oBACpB;gBAEF,KAAK;oBACHd,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;;UAMzB,CAAC;oBACD,MAAMgB,WAAW3B,SAASC,aAAa,CAAC;oBACxC0B,SAASjB,KAAK,CAACC,OAAO,GAAG,CAAC;;;;UAI1B,CAAC;oBACDgB,SAASd,WAAW,GAAGpC,KAAKkB,MAAM;oBAClC,MAAMiC,aAAa5B,SAASC,aAAa,CAAC;oBAC1C2B,WAAWlB,KAAK,CAACC,OAAO,GAAG,CAAC;;;;;UAK5B,CAAC;oBACDiB,WAAWf,WAAW,GAAGlC,QAAQ;oBACjCiC,QAAQP,WAAW,CAACsB;oBACpBf,QAAQP,WAAW,CAACuB;oBACpB;gBAEF,KAAK;gBACL;oBACEhB,UAAUZ,SAASC,aAAa,CAAC;oBACjCW,QAAQF,KAAK,CAACC,OAAO,GAAG,CAAC;;;;UAIzB,CAAC;oBACDC,QAAQC,WAAW,GAAGpC,KAAKkB,MAAM;oBACjC;YACJ;YAEAc,UAAUJ,WAAW,CAACO;YACtB,OAAOH;QACT;QAEA,yBAAyB;QACzBtB,WAAW0C,SAAS,GAAG;QAEvB,iBAAiB;QACjB,MAAMC,UAAUtB;QAChBrB,WAAWkB,WAAW,CAACyB;QAEvB,UAAU;QACV,OAAO;YACL,IAAI3C,YAAY;gBACdA,WAAW0C,SAAS,GAAG;YACzB;QACF;IACF,GAAG;QAACpD;QAAMC;QAASC;QAAMC;KAAO;IAEhC,qBAAO,KAACmD;QAAIC,KAAKnD;QAAe6B,OAAO;YAAEuB,OAAO;YAAQC,WAAW;QAAO;;AAC5E,EAAC"}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { GoogleFont } from '../../../app/api/google-fonts/route';
+import type { Translations } from './translations';
+export type PreviewTab = 'typography' | 'blog' | 'landing' | 'ui';
+export interface PreviewContentProps {
+    font: GoogleFont | null;
+    activeTab: PreviewTab;
+    translations: Translations;
+}
+/**
+ * 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 declare const PreviewContent: React.FC<PreviewContentProps>;
+//# sourceMappingURL=PreviewContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewContent.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/FontPicker/PreviewContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IACvB,SAAS,EAAE,UAAU,CAAA;IACrB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuRxD,CAAA"}

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