@koine/next 1.0.3 → 1.0.8

package/Theme/Theme.d.ts

@@ -1,46 +1,46 @@
-/**
- * @file
- *
- * Adapted from [next-themes](https://github.com/pacocoursey/next-themes)
- */
-import React from "react";
-declare type ValueObject = {
-    [themeName: string]: string;
-};
-export declare type UseThemeProps = {
-    /** List of all available theme names */
-    themes: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
-    /** Update the theme */
-    setTheme: (theme: string) => void;
-    /** Active theme name */
-    theme?: string;
-    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
-    resolvedTheme?: string;
-    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
-    systemTheme?: "dark" | "light";
-};
-export declare type ThemeProviderProps = {
-    /** List of all available theme names */
-    themes?: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
-    /** Whether to switch between dark and light themes based on prefers-color-scheme */
-    enableSystem?: boolean;
-    /** Disable all CSS transitions when switching themes */
-    disableTransitionOnChange?: boolean;
-    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
-    enableColorScheme?: boolean;
-    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
-    defaultTheme?: string;
-    /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
-    attribute?: string | "class";
-    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
-    value?: ValueObject;
-    /** Nonce string to pass to the inline script for CSP headers */
-    nonce?: string;
-};
-export declare const useTheme: () => UseThemeProps;
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export {};
+/**
+ * @file
+ *
+ * Adapted from [next-themes](https://github.com/pacocoursey/next-themes)
+ */
+import React from "react";
+declare type ValueObject = {
+    [themeName: string]: string;
+};
+export declare type UseThemeProps = {
+    /** List of all available theme names */
+    themes: string[];
+    /** Forced theme name for the current page */
+    forcedTheme?: string;
+    /** Update the theme */
+    setTheme: (theme: string) => void;
+    /** Active theme name */
+    theme?: string;
+    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+    resolvedTheme?: string;
+    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+    systemTheme?: "dark" | "light";
+};
+export declare type ThemeProviderProps = {
+    /** List of all available theme names */
+    themes?: string[];
+    /** Forced theme name for the current page */
+    forcedTheme?: string;
+    /** Whether to switch between dark and light themes based on prefers-color-scheme */
+    enableSystem?: boolean;
+    /** Disable all CSS transitions when switching themes */
+    disableTransitionOnChange?: boolean;
+    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+    enableColorScheme?: boolean;
+    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+    defaultTheme?: string;
+    /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
+    attribute?: string | "class";
+    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+    value?: ValueObject;
+    /** Nonce string to pass to the inline script for CSP headers */
+    nonce?: string;
+};
+export declare const useTheme: () => UseThemeProps;
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export {};

package/Theme/Theme.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Adapted from [next-themes](https://github.com/pacocoursey/next-themes)
+ */
+import { createContext, useCallback, useContext, useEffect, useState, memo, } from "react";
+import NextScript from "next/script";
+import { isServer } from "@koine/utils";
+const THEME_STORAGE_KEY = "theme";
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const ThemeContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setTheme: (_) => { },
+    themes: [],
+});
+export const useTheme = () => useContext(ThemeContext);
+export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, themes = ["light", "dark"], defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, }) => {
+    const [theme, setThemeState] = useState(() => getTheme(THEME_STORAGE_KEY, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(THEME_STORAGE_KEY));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = useCallback((theme) => {
+        let resolved = theme;
+        if (isServer)
+            return;
+        // If theme is system, resolve it before setting theme
+        if (theme === "system" && enableSystem) {
+            resolved = getSystemTheme();
+        }
+        const name = value ? value[resolved] : resolved;
+        const enable = disableTransitionOnChange ? disableAnimation() : null;
+        const d = document.documentElement;
+        if (attribute === "class") {
+            d.classList.remove(...attrs);
+            if (name)
+                d.classList.add(name);
+        }
+        else {
+            if (name) {
+                d.setAttribute(attribute, name);
+            }
+            else {
+                d.removeAttribute(attribute);
+            }
+        }
+        if (enableColorScheme) {
+            const fallback = colorSchemes.includes(defaultTheme)
+                ? defaultTheme
+                : null;
+            const colorScheme = colorSchemes.includes(resolved)
+                ? resolved
+                : fallback;
+            d.style.colorScheme = colorScheme;
+        }
+        enable === null || enable === void 0 ? void 0 : enable();
+    }, [
+        attribute,
+        attrs,
+        defaultTheme,
+        disableTransitionOnChange,
+        enableColorScheme,
+        enableSystem,
+        value,
+    ]);
+    const setTheme = useCallback((theme) => {
+        setThemeState(theme);
+        // Save to storage
+        try {
+            localStorage.setItem(THEME_STORAGE_KEY, theme);
+        }
+        catch (e) {
+            // Unsupported
+        }
+    }, []);
+    const handleMediaQuery = useCallback((e) => {
+        const resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, enableSystem, forcedTheme, applyTheme]);
+    // Always listen to System preference
+    useEffect(() => {
+        const media = window.matchMedia(MEDIA);
+        // Intentionally use deprecated listener methods to support iOS & old browsers
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return () => media.removeListener(handleMediaQuery);
+    }, [handleMediaQuery]);
+    // localStorage event handling
+    useEffect(() => {
+        const handleStorage = (e) => {
+            if (e.key !== THEME_STORAGE_KEY) {
+                return;
+            }
+            // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+            const theme = e.newValue || defaultTheme;
+            setTheme(theme);
+        };
+        window.addEventListener("storage", handleStorage);
+        return () => window.removeEventListener("storage", handleStorage);
+    }, [defaultTheme, setTheme]);
+    // Whenever theme or forcedTheme changes, apply it
+    useEffect(() => {
+        applyTheme(forcedTheme !== null && forcedTheme !== void 0 ? forcedTheme : theme);
+    }, [applyTheme, forcedTheme, theme]);
+    return (_jsxs(ThemeContext.Provider, Object.assign({ value: {
+            theme,
+            setTheme,
+            forcedTheme,
+            resolvedTheme: theme === "system" ? resolvedTheme : theme,
+            themes: enableSystem ? [...themes, "system"] : themes,
+            systemTheme: (enableSystem ? resolvedTheme : undefined),
+        } }, { children: [_jsx(ThemeScript, Object.assign({}, {
+                forcedTheme,
+                disableTransitionOnChange,
+                enableSystem,
+                enableColorScheme,
+                themes,
+                defaultTheme,
+                attribute,
+                value,
+                children,
+                attrs,
+                nonce,
+            })), children] })));
+};
+const ThemeScript = memo(({ forcedTheme, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, }) => {
+    const defaultSystem = defaultTheme === "system";
+    // Code-golfing the amount of characters in the script
+    const optimization = (() => {
+        const removeClasses = `d.remove(${attrs
+            .map((t) => `'${t}'`)
+            .join(",")})`;
+        return `var d=document.documentElement.classList;${removeClasses};`;
+    })();
+    const fallbackColorScheme = (() => {
+        if (!enableColorScheme) {
+            return "";
+        }
+        const fallback = colorSchemes.includes(defaultTheme)
+            ? defaultTheme
+            : null;
+        if (fallback) {
+            return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+        }
+        else {
+            return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+        }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+        const resolvedName = value ? value[name] : name;
+        const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+        let text = "";
+        // MUCH faster to set colorScheme alongside HTML attribute/class
+        // as it only incurs 1 style recalculation rather than 2
+        // This can save over 250ms of work for pages with big DOM
+        if (enableColorScheme &&
+            setColorScheme &&
+            !literal &&
+            colorSchemes.includes(name)) {
+            text += `d.style.colorScheme = '${name}';`;
+        }
+        if (attribute === "class") {
+            if (literal || resolvedName) {
+                text += `d.add(${val})`;
+            }
+            else {
+                text += `null`;
+            }
+        }
+        else {
+            if (resolvedName) {
+                text += `d[s](n, ${val})`;
+            }
+        }
+        return text;
+    };
+    const scriptSrc = (() => {
+        if (forcedTheme) {
+            return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+        }
+        if (enableSystem) {
+            return `!function(){try {${optimization}var e=localStorage.getItem('${THEME_STORAGE_KEY}');if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM("dark")}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem
+                ? `else{` + updateDOM(defaultTheme, false, false) + "}"
+                : ""}${fallbackColorScheme}}catch(e){}}()`;
+        }
+        return `!function(){try{${optimization}var e=localStorage.getItem("${THEME_STORAGE_KEY}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(defaultTheme, false, false)};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    // We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
+    // However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
+    // But our script cannot be external because it changes at runtime based on React props
+    // so we trick next/script by passing `src` as a base64 JS script
+    const encodedScript = `data:text/javascript;base64,${encodeBase64(scriptSrc)}`;
+    return (_jsx(NextScript, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
+}, 
+// Never re-render this component
+() => true);
+// Helpers
+const getTheme = (key, fallback) => {
+    if (isServer)
+        return undefined;
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
+    }
+    catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};
+const disableAnimation = () => {
+    const css = document.createElement("style");
+    css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+    document.head.appendChild(css);
+    return () => {
+        // Force restyle
+        (() => window.getComputedStyle(document.body))();
+        // Wait for next tick before removing
+        setTimeout(() => {
+            document.head.removeChild(css);
+        }, 1);
+    };
+};
+const getSystemTheme = (e) => {
+    if (!e)
+        e = window.matchMedia(MEDIA);
+    const isDark = e.matches;
+    const systemTheme = isDark ? "dark" : "light";
+    return systemTheme;
+};
+const encodeBase64 = (str) => {
+    return isServer ? Buffer.from(str).toString("base64") : btoa(str);
+};

package/Theme/index.d.ts

@@ -1 +1 @@
-export * from "./Theme";
+export * from "./Theme";

package/Theme/index.js

@@ -0,0 +1 @@
+export * from "./Theme";

package/app/App--emotion.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { AppProps as NextAppProps } from "next/app";
-import { AppThemeEmotionProps } from "./AppTheme--emotion";
-import { AppMainProps } from "./AppMain";
-export declare type AppEmotionProps = NextAppProps & AppThemeEmotionProps & AppMainProps;
-/**
- * App
- */
-export declare const AppEmotion: React.FC<AppEmotionProps>;
-export default AppEmotion;
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { AppThemeEmotionProps } from "./AppTheme--emotion";
+import { AppMainEmotionProps } from "./AppMain--emotion";
+export declare type AppEmotionProps = NextAppProps & AppThemeEmotionProps & AppMainEmotionProps;
+/**
+ * App
+ */
+export declare const AppEmotion: React.FC<AppEmotionProps>;
+export default AppEmotion;

package/app/App--emotion.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppHead } from "./AppHead";
+import { AppThemeEmotion } from "./AppTheme--emotion";
+import { AppMainEmotion } from "./AppMain--emotion";
+/**
+ * App
+ */
+export const AppEmotion = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(AppThemeEmotion, Object.assign({}, props, { children: _jsx(AppMainEmotion, Object.assign({}, props)) }))] }));
+};
+export default AppEmotion;

package/app/App--sc.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { AppProps as NextAppProps } from "next/app";
-import { AppThemeScProps } from "./AppTheme--sc";
-import { AppMainProps } from "./AppMain";
-export declare type AppBaseProps = NextAppProps & AppThemeScProps & AppMainProps;
-/**
- * App
- */
-export declare const AppBase: React.FC<AppBaseProps>;
-export default AppBase;
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { AppThemeScProps } from "./AppTheme--sc";
+import { AppMainScProps } from "./AppMain--sc";
+export declare type AppScProps = NextAppProps & AppThemeScProps & AppMainScProps;
+/**
+ * App
+ */
+export declare const AppSc: React.FC<AppScProps>;
+export default AppSc;

package/app/App--sc.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppHead } from "./AppHead";
+import { AppThemeSc } from "./AppTheme--sc";
+import { AppMainSc } from "./AppMain--sc";
+/**
+ * App
+ */
+export const AppSc = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(AppThemeSc, Object.assign({}, props, { children: _jsx(AppMainSc, Object.assign({}, props)) }))] }));
+};
+export default AppSc;

package/app/App--vanilla.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { AppProps as NextAppProps } from "next/app";
-import { AppThemeVanillaProps } from "./AppTheme--vanilla";
-import { AppMainVanillaProps } from "./AppMain--vanilla";
-export declare type AppVanillaProps = NextAppProps & AppThemeVanillaProps & AppMainVanillaProps;
-/**
- * App
- */
-export declare const AppVanilla: React.FC<AppVanillaProps>;
-export default AppVanilla;
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { AppThemeVanillaProps } from "./AppTheme--vanilla";
+import { AppMainVanillaProps } from "./AppMain--vanilla";
+export declare type AppVanillaProps = NextAppProps & AppThemeVanillaProps & AppMainVanillaProps;
+/**
+ * App
+ */
+export declare const AppVanilla: React.FC<AppVanillaProps>;
+export default AppVanilla;

package/app/App--vanilla.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppHead } from "./AppHead";
+import { AppThemeVanilla } from "./AppTheme--vanilla";
+import { AppMainVanilla } from "./AppMain--vanilla";
+/**
+ * App
+ */
+export const AppVanilla = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(AppThemeVanilla, Object.assign({}, props, { children: _jsx(AppMainVanilla, Object.assign({}, props)) }))] }));
+};
+export default AppVanilla;

package/app/AppAuth--emotion.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { AppProps as NextAppProps } from "next/app";
-import { AppThemeEmotionProps } from "./AppTheme--emotion";
-import { AppMainProps } from "./AppMain";
-export declare type AppAuthEmotionProps = NextAppProps & AppThemeEmotionProps & AppMainProps;
-/**
- * App with authentication provided by `next-auth`
- */
-export declare const AppAuthEmotion: React.FC<AppAuthEmotionProps>;
-export default AppAuthEmotion;
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { AppThemeEmotionProps } from "./AppTheme--emotion";
+import { AppMainEmotionProps } from "./AppMain--emotion";
+export declare type AppAuthEmotionProps = NextAppProps & AppThemeEmotionProps & AppMainEmotionProps;
+/**
+ * App with authentication provided by `next-auth`
+ */
+export declare const AppAuthEmotion: React.FC<AppAuthEmotionProps>;
+export default AppAuthEmotion;

package/app/AppAuth--emotion.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SessionProvider } from "next-auth/react";
+import { AppHead } from "./AppHead";
+import { AppThemeEmotion } from "./AppTheme--emotion";
+import { AppMainEmotion } from "./AppMain--emotion";
+/**
+ * App with authentication provided by `next-auth`
+ */
+export const AppAuthEmotion = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(SessionProvider, Object.assign({ session: props.pageProps.session }, { children: _jsx(AppThemeEmotion, Object.assign({}, props, { children: _jsx(AppMainEmotion, Object.assign({}, props)) })) }))] }));
+};
+export default AppAuthEmotion;

package/app/AppAuth--sc.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { AppProps as NextAppProps } from "next/app";
-import { AppThemeScProps } from "./AppTheme--sc";
-import { AppMainProps } from "./AppMain";
-export declare type AppAuthScProps = NextAppProps & AppThemeScProps & AppMainProps;
-/**
- * App with authentication provided by `next-auth`
- */
-export declare const AppAuthSc: React.FC<AppAuthScProps>;
-export default AppAuthSc;
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { AppThemeScProps } from "./AppTheme--sc";
+import { AppMainScProps } from "./AppMain--sc";
+export declare type AppAuthScProps = NextAppProps & AppThemeScProps & AppMainScProps;
+/**
+ * App with authentication provided by `next-auth`
+ */
+export declare const AppAuthSc: React.FC<AppAuthScProps>;
+export default AppAuthSc;

package/app/AppAuth--sc.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SessionProvider } from "next-auth/react";
+import { AppHead } from "./AppHead";
+import { AppThemeSc } from "./AppTheme--sc";
+import { AppMainSc } from "./AppMain--sc";
+/**
+ * App with authentication provided by `next-auth`
+ */
+export const AppAuthSc = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(SessionProvider, Object.assign({ session: props.pageProps.session }, { children: _jsx(AppThemeSc, Object.assign({}, props, { children: _jsx(AppMainSc, Object.assign({}, props)) })) }))] }));
+};
+export default AppAuthSc;

package/app/AppHead.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-export declare type AppHeadProps = unknown;
-export declare const AppHead: React.FC<AppHeadProps>;
+import React from "react";
+export declare type AppHeadProps = unknown;
+export declare const AppHead: React.FC<AppHeadProps>;

package/app/AppHead.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Head from "next/head";
+export const AppHead = (props) => {
+    return (_jsx(Head, Object.assign({}, props, { children: _jsx("meta", { name: "viewport", content: "width=device-width" }) })));
+};

package/app/{AppMain.d.ts → AppMain--emotion.d.ts}

@@ -1,34 +1,34 @@
-import React from "react";
-import { AppProps as NextAppProps } from "next/app";
-import { HTMLMotionProps } from "framer-motion";
-import { SeoDefaultsProps } from "../Seo";
-export declare type AppMainProps = NextAppProps & {
-    /**
-     * A wrapping layout component
-     */
-    Layout: React.FC<Record<string, unknown>>;
-    /**
-     * Seo site wide default configuration
-     */
-    seo?: SeoDefaultsProps;
-    /**
-     * It defaults to fade in/out
-     */
-    transition?: Omit<HTMLMotionProps<"div">, "key">;
-    /**
-     * JSX to render just after SEO
-     */
-    pre?: React.ReactNode;
-    /**
-     * JSX to render just at the end of the markup
-     */
-    post?: React.ReactNode;
-};
-/**
- * App main
- *
- * It implies a setup for `styled-components` and `framer-motion` libraries.
- *
- * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
- */
-export declare const AppMain: React.FC<AppMainProps>;
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { HTMLMotionProps } from "framer-motion";
+import { SeoDefaultsProps } from "../Seo";
+export declare type AppMainEmotionProps = NextAppProps & {
+    /**
+     * A wrapping layout component
+     */
+    Layout: React.FC<Record<string, unknown>>;
+    /**
+     * Seo site wide default configuration
+     */
+    seo?: SeoDefaultsProps;
+    /**
+     * It defaults to fade in/out
+     */
+    transition?: Omit<HTMLMotionProps<"div">, "key">;
+    /**
+     * JSX to render just after SEO
+     */
+    pre?: React.ReactNode;
+    /**
+     * JSX to render just at the end of the markup
+     */
+    post?: React.ReactNode;
+};
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+export declare const AppMainEmotion: React.FC<AppMainEmotionProps>;

package/app/AppMain--emotion.js

@@ -0,0 +1,27 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter } from "next/router";
+import { AnimatePresence, LazyMotion, m } from "framer-motion";
+import { SeoDefaults } from "../Seo";
+import { NextProgress } from "../NextProgress";
+/**
+ * @see https://www.framer.com/docs/guide-reduce-bundle-size/
+ */
+const loadMotionFeatures = () => import("./motion-features").then((m) => m.default);
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+export const AppMainEmotion = ({ Component, pageProps, Layout, 
+// theme,
+seo, transition = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+}, pre, post, }) => {
+    const { pathname } = useRouter();
+    return (_jsxs(_Fragment, { children: [_jsx(SeoDefaults, Object.assign({}, seo)), pre, _jsxs(LazyMotion, Object.assign({ features: loadMotionFeatures }, { children: [_jsx(NextProgress, {}), _jsx(Layout, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, initial: false }, { children: _jsx(m.div, Object.assign({}, transition, { children: _createElement(Component, Object.assign({}, pageProps, { key: pathname })) }), pathname) })) })] })), post] }));
+};

package/app/AppMain--sc.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { HTMLMotionProps } from "framer-motion";
+import { SeoDefaultsProps } from "../Seo";
+export declare type AppMainScProps = NextAppProps & {
+    /**
+     * A wrapping layout component
+     */
+    Layout: React.FC<Record<string, unknown>>;
+    /**
+     * Seo site wide default configuration
+     */
+    seo?: SeoDefaultsProps;
+    /**
+     * It defaults to fade in/out
+     */
+    transition?: Omit<HTMLMotionProps<"div">, "key">;
+    /**
+     * JSX to render just after SEO
+     */
+    pre?: React.ReactNode;
+    /**
+     * JSX to render just at the end of the markup
+     */
+    post?: React.ReactNode;
+};
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+export declare const AppMainSc: React.FC<AppMainScProps>;