@goldlabelapps/theme 3.0.8 → 3.2.8

package/README.md

@@ -49,7 +49,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ## Reference Implementation
 
-The [`apps/template`](../../apps/template) application serves as the complete reference implementation demonstrating how to build a fully config-driven Next.js app using `@goldlabelapps/theme`.
+The [`apps/nx`](../../apps/nx) application serves as the complete reference implementation demonstrating how to build a fully config-driven Next.js app using `@goldlabelapps/theme`.
 
 ## License
 

package/dist/components/RenderMarkdown.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type I_RenderMarkdown = {
+    children: React.ReactNode;
+    config?: Record<string, unknown>;
+    slug?: string;
+};
+export default function RenderMarkdown({ children, config, }: I_RenderMarkdown): React.JSX.Element;

package/dist/components/RenderMarkdown.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { CleverTextShortcode, FlashMovieShortcode } from '@goldlabelapps/flash';
+export default function RenderMarkdown({ children = '', config, }) {
+    // --- Normalize children to array to prevent map errors ---
+    const normalizeChildren = (children) => Array.isArray(children) ? children : [children];
+    const isBlockLikeNode = (node) => {
+        if (!React.isValidElement(node))
+            return false;
+        if (node.type === React.Fragment)
+            return false;
+        if (typeof node.type !== 'string')
+            return true;
+        const inlineTags = new Set([
+            'a',
+            'abbr',
+            'b',
+            'bdi',
+            'bdo',
+            'br',
+            'cite',
+            'code',
+            'data',
+            'dfn',
+            'em',
+            'i',
+            'img',
+            'kbd',
+            'label',
+            'mark',
+            'q',
+            'ruby',
+            's',
+            'samp',
+            'small',
+            'span',
+            'strong',
+            'sub',
+            'sup',
+            'time',
+            'u',
+            'var',
+            'wbr',
+        ]);
+        return !inlineTags.has(node.type);
+    };
+    const renderChildrenWithShortcodes = (children) => normalizeChildren(children).map((child, index) => {
+        const renderedChild = typeof child === 'string' ? renderShortcode(child) : child;
+        if (React.isValidElement(renderedChild)) {
+            return React.cloneElement(renderedChild, {
+                key: renderedChild.key ?? `md-${index}`,
+            });
+        }
+        return renderedChild;
+    });
+    // --- Shortcode parser ---
+    const renderShortcode = (text) => {
+        const parseShortcode = (regex, Component, extraProps = {}) => {
+            const match = text.match(regex);
+            if (!match)
+                return null;
+            const attrs = match[1];
+            const props = {};
+            const attrRegex = /(\w+)="(.*?)"/g;
+            let attrMatch;
+            while ((attrMatch = attrRegex.exec(attrs)) !== null) {
+                let val = attrMatch[2];
+                if (!isNaN(Number(val))) {
+                    val = Number(val);
+                }
+                else if (val === 'true' || val === 'false') {
+                    val = val === 'true';
+                }
+                props[attrMatch[1]] = val;
+            }
+            return _jsx(Component, { ...props, ...extraProps, config: config });
+        };
+        // CleverText
+        const cleverText = parseShortcode(/\[CleverText\s+(.*?)\]/, CleverTextShortcode);
+        if (cleverText)
+            return cleverText;
+        // FlashMovie
+        const flashMovie = parseShortcode(/\[FlashMovie\s+(.*?)\]/, FlashMovieShortcode);
+        if (flashMovie)
+            return flashMovie;
+        // fallback: simply return text
+        return text;
+    };
+    return (_jsx("div", { children: _jsx(ReactMarkdown, { components: {
+                h1: ({ children }) => _jsx("h1", { children: children }),
+                h2: ({ children }) => _jsx("h2", { children: children }),
+                h3: ({ children }) => _jsx("h3", { children: children }),
+                p: ({ children }) => {
+                    const renderedChildren = renderChildrenWithShortcodes(children);
+                    const hasBlockChild = renderedChildren.some(isBlockLikeNode);
+                    if (hasBlockChild) {
+                        return _jsx("div", { children: renderedChildren });
+                    }
+                    return _jsx("p", { children: renderedChildren });
+                },
+                li: ({ children }) => {
+                    const renderedChildren = renderChildrenWithShortcodes(children);
+                    const hasBlockChild = renderedChildren.some(isBlockLikeNode);
+                    if (hasBlockChild) {
+                        return _jsx("li", { children: renderedChildren });
+                    }
+                    return _jsx("li", { children: _jsx("span", { children: renderedChildren }) });
+                },
+                strong: ({ children }) => _jsx("span", { children: children }),
+                em: ({ children }) => _jsx("em", { children: children }),
+                a: ({ href = '', children }) => {
+                    const isExternal = /^https?:\/\//.test(href);
+                    return (_jsx("a", { href: href, target: isExternal ? '_blank' : '_self', rel: isExternal ? 'noopener noreferrer' : undefined, children: children }));
+                },
+            }, children: children }) }));
+}

package/dist/components/download/DownloadBanner.js

@@ -33,5 +33,5 @@ export function DownloadBanner({ config }) {
             // ignore
         }
     };
-    return (_jsxs("section", { id: "download", className: "py-24 sm:py-36 relative bg-white overflow-hidden transition-colors duration-200", children: [_jsx("a", { id: "signup", "aria-hidden": "true", className: "sr-only", children: "Sign up" }), _jsx("div", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] sm:w-[1000px] h-[500px] bg-gradient-to-tr from-[#012867]/15 via-slate-500/10 to-slate-400/10 rounded-full blur-3xl opacity-75" }), _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10", children: _jsxs("div", { className: "rounded-3xl sm:rounded-[40px] bg-gradient-to-b from-slate-50 via-white to-slate-50 border border-slate-200 p-8 sm:p-14 lg:p-20 shadow-2xl relative overflow-hidden text-center", children: [_jsx("div", { className: "inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-[#012867]/[0.06] border border-[#012867]/15 text-xs font-bold text-[#012867] mb-6 backdrop-blur-md", children: _jsx("span", { children: authCta.badge }) }), _jsx("h2", { className: "text-3xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight max-w-3xl mx-auto leading-tight mb-4", children: authCta.title }), _jsx("p", { className: "text-base sm:text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed mb-10", children: authCta.subtitle }), !submitted ? (_jsxs("form", { onSubmit: handleEmailSubmit, className: "max-w-md mx-auto mb-8 flex flex-col sm:flex-row gap-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Mail, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), _jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Enter your business email", className: "w-full pl-11 pr-4 py-3 rounded-full bg-white border border-slate-300 text-slate-900 text-sm focus:outline-none focus:ring-2 focus:ring-[#012867] shadow-inner" })] }), _jsx(Button, { type: "submit", variant: "primary", size: "md", children: "Get Started" })] })) : (_jsxs("div", { className: "max-w-md mx-auto mb-8 p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm font-semibold flex items-center justify-center gap-2", children: [_jsx(CheckCircle2, { className: "h-5 w-5 text-emerald-600" }), _jsxs("span", { children: ["Setup guide & download dispatched to ", email] })] })), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 mb-8", children: [_jsx(Button, { href: authCta.primaryCta.href, variant: "primary", size: "lg", children: authCta.primaryCta.label }), _jsx(Button, { href: authCta.secondaryCta.href, variant: "secondary", size: "lg", children: authCta.secondaryCta.label })] }), authCta.cliQuickInstall && (_jsxs("div", { className: "inline-flex items-center gap-3 px-4 py-2 rounded-2xl bg-slate-900 text-slate-200 text-xs font-mono border border-slate-800 shadow-md", children: [_jsx(Terminal, { className: "h-4 w-4 text-emerald-400" }), _jsx("span", { children: authCta.cliQuickInstall.command }), _jsx("button", { type: "button", onClick: handleCopyCommand, className: "p-1 text-slate-400 hover:text-white transition-colors cursor-pointer", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] }))] }) })] }));
+    return (_jsxs("section", { id: "download", className: "py-24 sm:py-36 relative bg-white overflow-hidden transition-colors duration-200", children: [_jsx("a", { id: "signup", "aria-hidden": "true", className: "sr-only", children: "Sign up" }), _jsx("div", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] sm:w-[1000px] h-[500px] bg-gradient-to-tr from-[#012867]/15 via-slate-500/10 to-slate-400/10 rounded-full blur-3xl opacity-75" }), _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10", children: _jsxs("div", { className: "rounded-3xl sm:rounded-[40px] bg-gradient-to-b from-slate-50 via-white to-slate-50 border border-slate-200 p-8 sm:p-14 lg:p-20 shadow-2xl relative overflow-hidden text-center", children: [_jsx("div", { className: "inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-[#012867]/[0.06] border border-[#012867]/15 text-xs font-bold text-[#012867] mb-6 backdrop-blur-md", children: _jsx("span", { children: authCta.badge }) }), _jsx("h2", { className: "text-3xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight max-w-3xl mx-auto leading-tight mb-4", children: authCta.title }), _jsx("p", { className: "text-base sm:text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed mb-10", children: authCta.subtitle }), !submitted ? (_jsxs("form", { onSubmit: handleEmailSubmit, className: "max-w-md mx-auto mb-8 flex flex-col sm:flex-row gap-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Mail, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), _jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Enter your business email", className: "w-full pl-11 pr-4 py-3 rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 text-sm focus:outline-none focus:ring-2 focus:ring-[#012867] dark:focus:ring-blue-400 shadow-inner" })] }), _jsx(Button, { type: "submit", variant: "primary", size: "md", children: "Get Started" })] })) : (_jsxs("div", { className: "max-w-md mx-auto mb-8 p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm font-semibold flex items-center justify-center gap-2", children: [_jsx(CheckCircle2, { className: "h-5 w-5 text-emerald-600" }), _jsxs("span", { children: ["Setup guide & download dispatched to ", email] })] })), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 mb-8", children: [_jsx(Button, { href: authCta.primaryCta.href, variant: "primary", size: "lg", children: authCta.primaryCta.label }), _jsx(Button, { href: authCta.secondaryCta.href, variant: "secondary", size: "lg", children: authCta.secondaryCta.label })] }), authCta.cliQuickInstall && (_jsxs("div", { className: "inline-flex items-center gap-3 px-4 py-2 rounded-2xl bg-slate-900 text-slate-200 text-xs font-mono border border-slate-800 shadow-md", children: [_jsx(Terminal, { className: "h-4 w-4 text-emerald-400" }), _jsx("span", { children: authCta.cliQuickInstall.command }), _jsx("button", { type: "button", onClick: handleCopyCommand, className: "p-1 text-slate-400 hover:text-white transition-colors cursor-pointer", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] }))] }) })] }));
 }

package/dist/components/footer/Footer.js

@@ -6,5 +6,5 @@ import { BrandLogo } from "../navigation/LogoContextMenu";
 import { ExternalLink } from "lucide-react";
 export function Footer() {
     const siteConfig = useSiteConfig();
-    return (_jsx("footer", { className: "bg-slate-50 border-t border-slate-200 text-slate-500 text-xs sm:text-sm transition-colors duration-200", children: _jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20", children: [_jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center justify-between gap-6 pb-12 border-b border-slate-200", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(BrandLogo, {}), _jsx("span", { className: "text-slate-300 font-mono text-xs", children: "\u2022" }), _jsx("span", { className: "text-slate-700 font-medium", children: siteConfig.footer.tagline })] }), _jsx("div", { className: "text-xs text-slate-500", children: siteConfig.footer.address || "Goldlabel Apps" })] }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 py-12", children: siteConfig.footer.columns.map((col, idx) => (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-xs font-bold text-slate-900 uppercase tracking-wider", children: col.title }), _jsx("ul", { className: "space-y-2.5", children: col.links.map((link, lIdx) => (_jsx("li", { children: link.external ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-slate-600 hover:text-[#012867] transition-colors", children: [_jsx("span", { children: link.label }), _jsx(ExternalLink, { className: "h-3 w-3 text-slate-400" })] })) : (_jsx(Link, { href: link.href, className: "text-slate-600 hover:text-[#012867] transition-colors", children: link.label })) }, lIdx))) })] }, idx))) }), _jsxs("div", { className: "pt-8 border-t border-slate-200 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500", children: [_jsx("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2", children: siteConfig.footer.bottomLinks.map((item, idx) => (_jsx("a", { href: item.href, className: "hover:text-[#012867] transition-colors", children: item.label }, idx))) }), _jsx("div", { children: siteConfig.footer.copyright })] })] }) }));
+    return (_jsx("footer", { className: "bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-xs sm:text-sm transition-colors duration-200", children: _jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20", children: [_jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center justify-between gap-6 pb-12 border-b border-slate-200 dark:border-slate-800", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(BrandLogo, {}), _jsx("span", { className: "text-slate-300 dark:text-slate-600 font-mono text-xs", children: "\u2022" }), _jsx("span", { className: "text-slate-700 dark:text-slate-200 font-medium", children: siteConfig.footer.tagline })] }), _jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: siteConfig.footer.address || "Goldlabel Apps" })] }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 py-12", children: siteConfig.footer.columns.map((col, idx) => (_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-xs font-bold text-slate-900 dark:text-slate-100 uppercase tracking-wider", children: col.title }), _jsx("ul", { className: "space-y-2.5", children: col.links.map((link, lIdx) => (_jsx("li", { children: !link.href || link.href === "#" ? (_jsx("span", { className: "text-slate-600 dark:text-slate-300", children: link.label })) : link.external ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-slate-600 dark:text-slate-300 hover:text-[#012867] dark:hover:text-white transition-colors", children: [_jsx("span", { children: link.label }), _jsx(ExternalLink, { className: "h-3 w-3 text-slate-400 dark:text-slate-500" })] })) : (_jsx(Link, { href: link.href, className: "text-slate-600 dark:text-slate-300 hover:text-[#012867] dark:hover:text-white transition-colors", children: link.label })) }, lIdx))) })] }, idx))) }), _jsxs("div", { className: "pt-8 border-t border-slate-200 dark:border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-slate-400", children: [_jsx("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2", children: siteConfig.footer.bottomLinks.map((item, idx) => (_jsx(Link, { href: item.href, className: "hover:text-[#012867] dark:hover:text-white transition-colors", children: item.label }, idx))) }), _jsx("div", { children: siteConfig.footer.copyright })] })] }) }));
 }

package/dist/components/guide/MarkdownContent.js

@@ -2,5 +2,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function MarkdownContent({ content }) {
     // Simple markdown renderer for headers, tables, code blocks, and lists
-    return (_jsx("div", { className: "prose prose-slate max-w-none text-slate-800 leading-relaxed font-sans", children: _jsx("div", { dangerouslySetInnerHTML: { __html: content } }) }));
+    return (_jsx("div", { className: "prose prose-slate dark:prose-invert max-w-none text-slate-800 dark:text-slate-100 dark:prose-a:text-sky-400 dark:prose-a:hover:text-sky-300 leading-relaxed font-sans", children: _jsx("div", { dangerouslySetInnerHTML: { __html: content } }) }));
 }

package/dist/components/hero/VideoModal.js

@@ -27,7 +27,6 @@ export function VideoModal({ isOpen, onClose, videoUrl, title = "Video Preview",
         aspectRatio === "9/16" ||
         aspectRatio === "portrait" ||
         videoUrl.toLowerCase().includes("portrait") ||
-        videoUrl.toLowerCase().includes("echopay.mp4") ||
         videoUrl.toLowerCase().includes("two.mp4") ||
         videoUrl.toLowerCase().includes("builders-merchant");
     const isLocalMp4 = videoUrl.endsWith(".mp4") ||

package/dist/components/navigation/LogoContextMenu.d.ts

@@ -2,6 +2,5 @@ import React from "react";
 export declare function BrandLogo({ className }: {
     className?: string;
 }): React.JSX.Element;
-export declare const EchoPayLogo: typeof BrandLogo;
 export declare const NxLogo: typeof BrandLogo;
 export declare function LogoContextMenu(): React.JSX.Element;

package/dist/components/navigation/LogoContextMenu.js

@@ -9,7 +9,6 @@ export function BrandLogo({ className = "h-8 w-auto" }) {
     const siteConfig = useSiteConfig();
     return (_jsxs("div", { className: `inline-flex items-center gap-2.5 font-bold tracking-tight select-none ${className}`, children: [_jsx(Image, { src: siteConfig.brand.logoSrc || "/svg/favicon_light.svg", alt: siteConfig.brand.name, width: 34, height: 34, className: "h-8 w-8 shrink-0 object-contain", priority: true }), _jsx("span", { className: "font-extrabold text-lg sm:text-xl tracking-tight text-[#012867] inline-flex items-center", children: _jsx("span", { children: siteConfig.brand.name }) })] }));
 }
-export const EchoPayLogo = BrandLogo;
 export const NxLogo = BrandLogo;
 export function LogoContextMenu() {
     const siteConfig = useSiteConfig();

package/dist/components/navigation/MobileMenu.js

@@ -31,13 +31,22 @@ export function MobileMenu({ isOpen: controlledIsOpen, onToggle, onClose, } = {}
         }
     };
     useEffect(() => {
-        if (isOpen) {
-            const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = "hidden";
-            return () => {
-                document.body.style.overflow = originalOverflow;
-            };
+        if (!isOpen) {
+            setExpandedSections({});
+            return;
         }
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.body.style.overflow = originalOverflow;
+            window.removeEventListener("keydown", handleKeyDown);
+        };
     }, [isOpen]);
     const toggleSection = (label) => {
         setExpandedSections((prev) => ({

package/dist/components/navigation/ShareMenu.d.ts

@@ -4,4 +4,4 @@ export interface ShareMenuProps {
     title?: string;
     description?: string;
 }
-export declare function ShareMenu({ url, title, description }: ShareMenuProps): React.JSX.Element;
+export declare function ShareMenu({ url, title, description: _description }: ShareMenuProps): React.JSX.Element;

package/dist/components/navigation/ShareMenu.js

@@ -11,7 +11,7 @@ const emptySubscribe = (callback) => {
     window.addEventListener("popstate", callback);
     return () => window.removeEventListener("popstate", callback);
 };
-export function ShareMenu({ url, title, description }) {
+export function ShareMenu({ url, title, description: _description }) {
     const siteConfig = useSiteConfig();
     const [isOpen, setIsOpen] = useState(false);
     const [copied, setCopied] = useState(false);
@@ -68,7 +68,6 @@ export function ShareMenu({ url, title, description }) {
         }
     };
     const shareTitle = title || siteConfig.metadata.title;
-    const shareDescription = description || siteConfig.metadata.description;
     return (_jsxs("div", { className: "relative inline-flex items-center", ref: menuRef, children: [_jsxs("button", { type: "button", onClick: () => setIsOpen((prev) => !prev), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": `Share ${siteConfig.brand.name}`, className: cn("inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold transition-all duration-200 cursor-pointer border", isOpen
                     ? "bg-[#012867] text-white border-[#012867] shadow-sm"
                     : "text-slate-700 bg-slate-100/80 hover:bg-[#012867]/[0.08] hover:text-[#012867] border-slate-200/80"), children: [_jsx(Share2, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Share" })] }), isOpen && (_jsxs("div", { role: "dialog", "aria-label": "Share options", className: "absolute right-0 top-full mt-2 z-50 w-64 rounded-2xl bg-white border border-slate-200 p-2 shadow-2xl backdrop-blur-2xl animate-in fade-in zoom-in-95 duration-150", children: [_jsx("div", { className: "px-2.5 py-1.5 border-b border-slate-100 mb-1", children: _jsx("p", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-wider", children: "Share this page" }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(FacebookShareButton, { url: currentUrl, title: shareTitle, className: "w-full text-left !flex", onClick: () => setIsOpen(false), children: _jsx("div", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100/80 transition-colors w-full cursor-pointer group", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-slate-900", children: "Facebook" }) }) }), _jsx(TwitterShareButton, { url: currentUrl, title: shareTitle, className: "w-full text-left !flex", onClick: () => setIsOpen(false), children: _jsx("div", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100/80 transition-colors w-full cursor-pointer group", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-slate-900", children: "Twitter / X" }) }) }), _jsx(WhatsappShareButton, { url: currentUrl, title: shareTitle, className: "w-full text-left !flex", onClick: () => setIsOpen(false), children: _jsx("div", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100/80 transition-colors w-full cursor-pointer group", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-slate-900", children: "WhatsApp" }) }) }), _jsx("div", { className: "pt-1 border-t border-slate-100", children: _jsxs("button", { type: "button", onClick: handleCopy, className: "flex items-center justify-between w-full p-2 rounded-xl hover:bg-[#012867]/[0.06] hover:text-[#012867] transition-colors cursor-pointer text-left group", children: [_jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-[#012867]", children: copied ? "Link Copied!" : "Copy Link" }) }), copied ? (_jsx(Check, { className: "h-4 w-4 text-emerald-600" })) : (_jsx(Copy, { className: "h-4 w-4 text-slate-400 group-hover:text-[#012867]" }))] }) })] })] }))] }));

package/dist/components/showcase/FeatureExplorer.js

@@ -32,5 +32,5 @@ export function FeatureExplorer({ items: propItems, sectionTitle: propTitle, sub
                                         : "text-slate-600 hover:text-slate-900 hover:bg-slate-200/60"), children: [_jsx("span", { children: tab.tabLabel || tab.title }), tab.badge && (_jsx("span", { className: cn("text-[10px] font-extrabold px-2 py-0.5 rounded-full uppercase tracking-wider", isActive
                                                 ? "bg-[#012867]/[0.08] text-[#012867]"
                                                 : "bg-slate-200 text-slate-600"), children: tab.badge }))] }, tab.id));
-                            }) }) }), activeItem && (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-8 items-center rounded-3xl bg-slate-50 border border-slate-200 p-6 sm:p-10 shadow-xl transition-all duration-300", children: [_jsxs("div", { className: "lg:col-span-5 space-y-6", children: [_jsx("div", { className: "inline-flex items-center gap-2 px-3 py-1 rounded-lg bg-[#012867]/[0.06] text-[#012867] font-semibold text-xs border border-[#012867]/15", children: _jsx("span", { children: activeItem.tag }) }), _jsx("h3", { className: "text-2xl sm:text-3xl font-extrabold text-slate-900 leading-tight", children: activeItem.title }), _jsx("p", { className: "text-sm sm:text-base text-slate-600 leading-relaxed", children: activeItem.description }), activeItem.cta && (_jsx("div", { className: "pt-2", children: _jsxs("a", { href: activeItem.cta.href, className: "inline-flex items-center gap-2 text-sm font-bold text-[#012867] hover:underline", children: [_jsx("span", { children: activeItem.cta.label }), _jsx("span", { children: "\u2192" })] }) }))] }), _jsxs("div", { className: "lg:col-span-7", children: [activeItem.previewType === "terminal" && activeItem.terminalSnippet && (_jsxs("div", { className: "rounded-2xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden font-mono text-xs sm:text-sm text-slate-200", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-slate-950 border-b border-slate-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-3 h-3 rounded-full bg-rose-500/80" }), _jsx("span", { className: "w-3 h-3 rounded-full bg-amber-500/80" }), _jsx("span", { className: "w-3 h-3 rounded-full bg-emerald-500/80" })] }), _jsx("span", { className: "text-[11px] font-bold text-slate-400", children: activeItem.terminalSnippet.prompt || "terminal" }), _jsx(Terminal, { className: "h-4 w-4 text-slate-500" })] }), _jsx("div", { className: "p-4 sm:p-6 space-y-4", children: activeItem.terminalSnippet.commands.map((cmd, cIdx) => (_jsxs("div", { className: "space-y-1.5", children: [cmd.cmd && (_jsxs("div", { className: "flex items-center justify-between group", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-400", children: [_jsx("span", { children: "$" }), _jsx("span", { className: "text-slate-100", children: cmd.cmd })] }), _jsx("button", { onClick: () => handleCopyCode(cmd.cmd), title: "Copy command", className: "opacity-0 group-hover:opacity-100 transition-opacity p-1 text-slate-400 hover:text-white", children: copiedCode ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) })] })), cmd.output && (_jsx("p", { className: "text-slate-400 text-xs sm:text-xs leading-relaxed whitespace-pre-wrap pl-4 border-l border-slate-700", children: cmd.output }))] }, cIdx))) })] })), activeItem.previewType === "code" && activeItem.codeSnippet && (_jsxs("div", { className: "rounded-2xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden font-mono text-xs sm:text-sm text-slate-200", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-slate-950 border-b border-slate-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Code2, { className: "h-4 w-4 text-[#38BDF8]" }), _jsx("span", { className: "text-xs font-semibold text-slate-300", children: activeItem.codeSnippet.filename || "snippet" })] }), _jsx("button", { onClick: () => handleCopyCode(activeItem.codeSnippet.code), className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs transition-colors cursor-pointer", children: copiedCode ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" }), _jsx("span", { children: "Copied" })] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Copy Code" })] })) })] }), _jsx("pre", { className: "p-4 sm:p-6 overflow-x-auto text-xs sm:text-sm text-slate-100 bg-transparent border-0", children: _jsx("code", { children: activeItem.codeSnippet.code }) })] })), activeItem.previewType === "interactive-ui" && (_jsxs("div", { className: "rounded-2xl bg-white border border-slate-200 p-8 shadow-inner flex flex-col items-center justify-center min-h-[260px] text-center space-y-4", children: [_jsx("div", { className: "h-12 w-12 rounded-2xl bg-[#012867]/[0.08] text-[#012867] flex items-center justify-center", children: _jsx(Zap, { className: "h-6 w-6" }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-slate-900 text-base", children: activeItem.title }), _jsx("p", { className: "text-xs text-slate-500 mt-1 max-w-sm", children: activeItem.description })] }), activeItem.cta && (_jsx("a", { href: activeItem.cta.href, className: "px-4 py-2 rounded-full bg-[#012867] text-white text-xs font-bold shadow hover:bg-[#011f52] transition-colors", children: activeItem.cta.label }))] }))] })] }))] })] }));
+                            }) }) }), activeItem && (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-8 items-center rounded-3xl bg-slate-50 border border-slate-200 p-6 sm:p-10 shadow-xl transition-all duration-300", children: [_jsxs("div", { className: "lg:col-span-5 space-y-6", children: [_jsx("div", { className: "inline-flex items-center gap-2 px-3 py-1 rounded-lg bg-[#012867]/[0.06] text-[#012867] font-semibold text-xs border border-[#012867]/15", children: _jsx("span", { children: activeItem.tag }) }), _jsx("h3", { className: "text-2xl sm:text-3xl font-extrabold text-slate-900 leading-tight", children: activeItem.title }), _jsx("p", { className: "text-sm sm:text-base text-slate-600 leading-relaxed", children: activeItem.description }), activeItem.cta && (_jsx("div", { className: "pt-2", children: _jsxs("a", { href: activeItem.cta.href, className: "inline-flex items-center gap-2 text-sm font-bold text-[#012867] hover:underline", children: [_jsx("span", { children: activeItem.cta.label }), _jsx("span", { children: "\u2192" })] }) }))] }), _jsxs("div", { className: "lg:col-span-7", children: [activeItem.previewType === "terminal" && activeItem.terminalSnippet && (_jsxs("div", { className: "rounded-2xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden font-mono text-xs sm:text-sm text-slate-200", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-slate-950 border-b border-slate-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-3 h-3 rounded-full bg-rose-500/80" }), _jsx("span", { className: "w-3 h-3 rounded-full bg-amber-500/80" }), _jsx("span", { className: "w-3 h-3 rounded-full bg-emerald-500/80" })] }), _jsx("span", { className: "text-[11px] font-bold text-slate-400", children: activeItem.terminalSnippet.prompt || "terminal" }), _jsx(Terminal, { className: "h-4 w-4 text-slate-500" })] }), _jsx("div", { className: "p-4 sm:p-6 space-y-4", children: activeItem.terminalSnippet.commands.map((cmd, cIdx) => (_jsxs("div", { className: "space-y-1.5", children: [cmd.cmd && (_jsxs("div", { className: "flex items-center justify-between group", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-400", children: [_jsx("span", { children: "$" }), _jsx("span", { className: "text-slate-100", children: cmd.cmd })] }), _jsx("button", { onClick: () => handleCopyCode(cmd.cmd), title: "Copy command", className: "opacity-0 group-hover:opacity-100 transition-opacity p-1 text-slate-400 hover:text-white", children: copiedCode ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) })] })), cmd.output && (_jsx("p", { className: "text-slate-400 text-xs sm:text-xs leading-relaxed whitespace-pre-wrap pl-4 border-l border-slate-700", children: cmd.output }))] }, cIdx))) })] })), activeItem.previewType === "code" && activeItem.codeSnippet && (_jsxs("div", { className: "rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl overflow-hidden font-mono text-xs sm:text-sm text-slate-800 dark:text-slate-200", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-slate-50 dark:bg-slate-950 border-b border-slate-200 dark:border-slate-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Code2, { className: "h-4 w-4 text-[#012867] dark:text-[#38BDF8]" }), _jsx("span", { className: "text-xs font-semibold text-slate-700 dark:text-slate-300", children: activeItem.codeSnippet.filename || "snippet" })] }), _jsx("button", { onClick: () => handleCopyCode(activeItem.codeSnippet.code), className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-200/80 hover:bg-slate-200 text-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-300 text-xs transition-colors cursor-pointer", children: copiedCode ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" }), _jsx("span", { children: "Copied" })] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Copy Code" })] })) })] }), _jsx("pre", { className: "p-4 sm:p-6 overflow-x-auto text-xs sm:text-sm text-slate-900 dark:text-slate-100 bg-transparent border-0", children: _jsx("code", { children: activeItem.codeSnippet.code }) })] })), activeItem.previewType === "interactive-ui" && (_jsxs("div", { className: "rounded-2xl bg-white border border-slate-200 p-8 shadow-inner flex flex-col items-center justify-center min-h-[260px] text-center space-y-4", children: [_jsx("div", { className: "h-12 w-12 rounded-2xl bg-[#012867]/[0.08] text-[#012867] flex items-center justify-center", children: _jsx(Zap, { className: "h-6 w-6" }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-slate-900 text-base", children: activeItem.title }), _jsx("p", { className: "text-xs text-slate-500 mt-1 max-w-sm", children: activeItem.description })] }), activeItem.cta && (_jsx("a", { href: activeItem.cta.href, className: "px-4 py-2 rounded-full bg-[#012867] text-white text-xs font-bold shadow hover:bg-[#011f52] transition-colors", children: activeItem.cta.label }))] }))] })] }))] })] }));
 }

package/dist/components/ui/Card.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "default" | "glass" | "bordered" | "glow";
     hoverEffect?: boolean;
+    theme?: "light" | "dark";
 }
-export declare function Card({ className, variant, hoverEffect, children, ...props }: CardProps): React.JSX.Element;
+export declare function Card({ className, variant, hoverEffect, theme, children, ...props }: CardProps): React.JSX.Element;

package/dist/components/ui/Card.js

@@ -1,15 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-export function Card({ className, variant = "default", hoverEffect = true, children, ...props }) {
+export function Card({ className, variant = "default", hoverEffect = true, theme, children, ...props }) {
     const baseStyles = "rounded-2xl transition-all duration-300 relative overflow-hidden";
+    const isLight = theme === "light";
+    const isDark = theme === "dark";
     const variantStyles = {
-        default: "bg-white border border-black/[0.08] text-[#2c2c2a] shadow-sm dark:bg-[#2d3943] dark:border-white/[0.1] dark:text-white",
-        glass: "bg-white/85 backdrop-blur-xl border border-black/[0.08] text-[#2c2c2a] shadow-xl dark:bg-[#2d3943]/90 dark:border-white/[0.12] dark:text-white",
-        bordered: "bg-neutral-50 border border-neutral-200 text-[#2c2c2a] dark:bg-[#2c3741] dark:border-neutral-700 dark:text-white",
-        glow: "bg-white border border-[#FFD849]/30 shadow-xl shadow-[#FFD849]/5 text-[#2c2c2a] dark:bg-[#2d3943] dark:border-[#FFD849]/30 dark:shadow-[#FFD849]/5 dark:text-white",
+        default: isLight
+            ? "bg-white border border-black/[0.08] text-[#2c2c2a] shadow-sm"
+            : isDark
+                ? "bg-[#2d3943] border border-white/[0.1] text-white shadow-sm"
+                : "bg-white border border-black/[0.08] text-[#2c2c2a] shadow-sm dark:bg-[#2d3943] dark:border-white/[0.1] dark:text-white",
+        glass: isLight
+            ? "bg-white/85 backdrop-blur-xl border border-black/[0.08] text-[#2c2c2a] shadow-xl"
+            : isDark
+                ? "bg-[#2d3943]/90 backdrop-blur-xl border border-white/[0.12] text-white shadow-xl"
+                : "bg-white/85 backdrop-blur-xl border border-black/[0.08] text-[#2c2c2a] shadow-xl dark:bg-[#2d3943]/90 dark:border-white/[0.12] dark:text-white",
+        bordered: isLight
+            ? "bg-neutral-50 border border-neutral-200 text-[#2c2c2a]"
+            : isDark
+                ? "bg-[#2c3741] border border-neutral-700 text-white"
+                : "bg-neutral-50 border border-neutral-200 text-[#2c2c2a] dark:bg-[#2c3741] dark:border-neutral-700 dark:text-white",
+        glow: isLight
+            ? "bg-white border border-[#FFD849]/30 shadow-xl shadow-[#FFD849]/5 text-[#2c2c2a]"
+            : isDark
+                ? "bg-[#2d3943] border border-[#FFD849]/30 shadow-xl shadow-[#FFD849]/5 text-white"
+                : "bg-white border border-[#FFD849]/30 shadow-xl shadow-[#FFD849]/5 text-[#2c2c2a] dark:bg-[#2d3943] dark:border-[#FFD849]/30 dark:shadow-[#FFD849]/5 dark:text-white",
     };
     const hoverStyles = hoverEffect
-        ? "hover:border-[#FFD849]/50 hover:translate-y-[-2px] hover:shadow-lg dark:hover:border-[#FFD849]/60 dark:hover:shadow-black/40"
+        ? isLight
+            ? "hover:border-[#FFD849]/50 hover:translate-y-[-2px] hover:shadow-lg"
+            : isDark
+                ? "hover:border-[#FFD849]/60 hover:translate-y-[-2px] hover:shadow-lg hover:shadow-black/40"
+                : "hover:border-[#FFD849]/50 hover:translate-y-[-2px] hover:shadow-lg dark:hover:border-[#FFD849]/60 dark:hover:shadow-black/40"
         : "";
-    return (_jsx("div", { className: cn(baseStyles, variantStyles[variant], hoverStyles, className), ...props, children: children }));
+    return (_jsx("div", { className: cn(baseStyles, variantStyles[variant], hoverStyles, isLight && "light [color-scheme:light]", isDark && "dark [color-scheme:dark]", className), ...props, children: children }));
 }

package/dist/context/ConfigContext.js

@@ -33,7 +33,7 @@ export const defaultConfig = {
         display: "standalone",
         orientation: "portrait",
         themeColor: "#012867",
-        backgroundColor: "#FFFFFF",
+        backgroundColor: "#0F172A",
         appleTouchIcon: "/png/favicon_light.png",
         favicon: "/svg/favicon.svg",
         icons: [],

package/dist/context/ThemeContext.js

@@ -4,7 +4,7 @@ import { createContext, useContext, useEffect, useState } from "react";
 const ThemeContext = createContext(undefined);
 export function ThemeProvider({ children }) {
     const [theme, setThemeState] = useState("light");
-    const [mounted, setMounted] = useState(false);
+    const [_mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
         const root = document.documentElement;
@@ -18,7 +18,7 @@ export function ThemeProvider({ children }) {
             // Ignore storage restrictions
         }
     }, []);
-    const setTheme = (newTheme) => {
+    const setTheme = (_newTheme) => {
         setThemeState("light");
         const root = document.documentElement;
         root.classList.remove("dark");