@koine/next 1.0.4 → 1.0.9

package/Seo/helpers.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isArray } from "@koine/utils";
+const defaults = {
+    tplTitle: "",
+};
+/**
+ * We do a couple of things in addition while many other are removed.
+ *
+ * - Add `seo` meta object coming from a CMS probably
+ * - Add `ogimage` and `openGraph.image` as single image source
+ * - Add `og` alias to define `openGraph`
+ * - Add check for `title` equale to `templateTitle` to avoid meta titles like
+ *   "My site | My site" often happening in homepages
+ * - Remove the open graph videos and images
+ *
+ * - Shorter code
+ *
+ * @returns
+ */
+export const buildTags = ({ seo, hidden, keywords, title = "", titleTemplate, defaultTitle, noindex, nofollow, description, languageAlternates = [], twitter, facebook, openGraph, og: ogAlias, canonical, metaTags, linkTags, } = {}) => {
+    const render = [];
+    const $names = {};
+    const $properties = {};
+    if (titleTemplate) {
+        defaults.tplTitle = titleTemplate;
+    }
+    title = title || seo?.title || "";
+    if (title) {
+        if (defaults.tplTitle && defaults.tplTitle !== title) {
+            title = defaults.tplTitle.replace(/%s/g, title);
+        }
+    }
+    else if (defaultTitle) {
+        title = defaultTitle;
+    }
+    if (title) {
+        render.push(_jsx("title", { children: title }, "title"));
+        $properties["og:title"] = title; // overridden later...
+    }
+    $names["robots"] = `${noindex || hidden ? "noindex" : "index"},${nofollow || hidden ? "nofollow" : "follow"}`;
+    description = description || seo?.description;
+    if (description) {
+        $names["description"] = description;
+        $properties["og:description"] = description; // overridden later...
+    }
+    keywords = keywords || seo?.keywords;
+    if (keywords) {
+        $names["keywords"] = isArray(keywords) ? keywords.join(", ") : keywords;
+    }
+    if (languageAlternates?.length > 0) {
+        languageAlternates.forEach((languageAlternate) => {
+            render.push(_jsx("link", { rel: "alternate", hrefLang: languageAlternate.hrefLang, href: languageAlternate.href }, `languageAlternate-${languageAlternate.hrefLang}`));
+        });
+    }
+    if (canonical) {
+        render.push(_jsx("link", { rel: "canonical", href: canonical }, "canonical"));
+        $properties["og:url"] = canonical;
+    }
+    if (facebook?.appId)
+        $properties["fb:app_id"] = facebook.appId;
+    if (twitter) {
+        if (twitter.cardType)
+            $names["twitter:card"] = twitter.cardType;
+        if (twitter.site)
+            $names["twitter:site"] = twitter.site;
+        if (twitter.handle)
+            $names["twitter:creator"] = twitter.handle;
+    }
+    const og = ogAlias || openGraph;
+    if (og?.title)
+        $properties["og:title"] = og?.title;
+    if (og?.description)
+        $properties["og:description"] = og?.description;
+    if (og?.url)
+        $properties["og:url"] = og.url;
+    if (og?.type)
+        $properties["og:type"] = og.type.toLowerCase();
+    if (og?.locale)
+        $properties["og:locale"] = og.locale;
+    if (og?.site_name)
+        $properties["og:site_name"] = og.site_name;
+    const ogimage = og?.image || seo?.ogimage;
+    if (ogimage)
+        $properties["og:image"] = ogimage;
+    Object.keys($names).forEach((key) => {
+        render.push(_jsx("meta", { name: key, content: $names[key] }, key));
+    });
+    Object.keys($properties).forEach((key) => {
+        render.push(_jsx("meta", { property: key, content: $properties[key] }, key));
+    });
+    if (metaTags && metaTags.length > 0) {
+        metaTags.forEach((tag) => {
+            render.push(_jsx("meta", { ...tag }, `meta:${tag.keyOverride ?? tag.name ?? tag.property ?? tag.httpEquiv}`));
+        });
+    }
+    if (linkTags?.length) {
+        linkTags.forEach((tag) => {
+            render.push(_jsx("link", { ...tag }, `link${tag.keyOverride ?? tag.href}${tag.rel}`));
+        });
+    }
+    // TODO: alternates and canonical
+    // canonical = 'https://www.domain.com/';
+    // languageAlternates={[{
+    //   hrefLang: 'en',
+    //   href: 'https://www.domain.com/en',
+    // }]}
+    // <link rel="alternate" hreflang="x-default" href="https://www.domain.com/nl/">
+    // <link rel="alternate" hreflang="nl" href="https://www.domain.com/nl/">
+    // <link rel="alternate" hreflang="en" href="https://www.domain.com/en/">
+    return render;
+};

package/Seo/index.d.ts

@@ -1,12 +1,12 @@
-/**
- * @file
- *
- * Adapted from https://github.com/garmeeh/next-seo
- *
- * See also:
- * - https://github.com/catnose99/next-head-seo
- * - https://nextjs.org/docs/api-reference/next/head
- */
-export * from "./helpers";
-export * from "./Seo";
-export * from "./SeoDefaults";
+/**
+ * @file
+ *
+ * Adapted from https://github.com/garmeeh/next-seo
+ *
+ * See also:
+ * - https://github.com/catnose99/next-head-seo
+ * - https://nextjs.org/docs/api-reference/next/head
+ */
+export * from "./helpers";
+export * from "./Seo";
+export * from "./SeoDefaults";

package/Seo/index.js

@@ -0,0 +1,12 @@
+/**
+ * @file
+ *
+ * Adapted from https://github.com/garmeeh/next-seo
+ *
+ * See also:
+ * - https://github.com/catnose99/next-head-seo
+ * - https://nextjs.org/docs/api-reference/next/head
+ */
+export * from "./helpers";
+export * from "./Seo";
+export * from "./SeoDefaults";

package/Seo/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Seo/index.js",
+  "types": "./index.d.ts"
+}

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 = React.PropsWithChildren<{
+    /** 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: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, themes, defaultTheme, attribute, value, children, nonce, }: ThemeProviderProps) => JSX.Element;
+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 || !resolved)
+            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
+                : "";
+            const colorScheme = colorSchemes.includes(resolved)
+                ? resolved
+                : fallback;
+            d.style.colorScheme = colorScheme;
+        }
+        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 ?? theme);
+    }, [applyTheme, forcedTheme, theme]);
+    return (_jsxs(ThemeContext.Provider, { value: {
+            theme,
+            setTheme,
+            forcedTheme,
+            resolvedTheme: theme === "system" ? resolvedTheme : theme,
+            themes: enableSystem ? [...themes, "system"] : themes,
+            systemTheme: (enableSystem ? resolvedTheme : undefined),
+        }, children: [_jsx(ThemeScript, { ...{
+                    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/Theme/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Theme/index.js",
+  "types": "./index.d.ts"
+}

package/app/AppHead.d.ts

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

package/app/AppHead.js

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

package/app/AppMain.d.ts

@@ -1,34 +1,35 @@
-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 type { AppProps as NextAppProps } from "next/app";
+import type { HTMLMotionProps } from "framer-motion";
+import type { SeoDefaultsProps } from "../Seo";
+import type { NextProgressProps } from "../NextProgress";
+import type { MotionProviderFeatures } from "@koine/react/m";
+export declare type AppMainBaseProps = NextAppProps & {
+    /**
+     * A wrapping layout component
+     */
+    Layout: React.FC<Record<string, unknown>>;
+    /**
+     * A Progress' Overlay component
+     */
+    ProgressOverlay?: NextProgressProps["Overlay"];
+    /**
+     * Seo site wide default configuration
+     */
+    seo?: SeoDefaultsProps;
+    /**
+     * JSX to render just after SEO
+     */
+    pre?: React.ReactNode;
+    /**
+     * JSX to render just at the end of the markup
+     */
+    post?: React.ReactNode;
+};
+export declare type AppMainFramerProps = {
+    motion: MotionProviderFeatures;
+    /**
+     * Default layout transition, by default it is a simple fade in/out
+     */
+    transition?: Omit<HTMLMotionProps<"div">, "key">;
+};

package/app/AppMain.js

@@ -0,0 +1 @@
+export {};

package/app/css/AppMain.d.ts

@@ -0,0 +1,8 @@
+import type { AppMainBaseProps } from "../AppMain";
+export declare type AppMainProps = Omit<AppMainBaseProps, "ProgressOverlay">;
+/**
+ * App main
+ *
+ * It does not imply any specific styling or animation solution
+ */
+export declare const AppMain: ({ Component, pageProps, Layout, seo, pre, post, }: AppMainProps) => JSX.Element;

package/app/css/AppMain.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SeoDefaults } from "../../Seo";
+/**
+ * App main
+ *
+ * It does not imply any specific styling or animation solution
+ */
+export const AppMain = ({ Component, pageProps, Layout, seo, pre, post, }) => {
+    return (_jsxs(React.Fragment, { children: [_jsx(SeoDefaults, { ...seo }), pre, _jsx(Layout, { children: _jsx(Component, { ...pageProps }) }), post] }));
+};

package/app/css/AppTheme.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AppProps as NextAppProps } from "next/app";
+import { ThemeProviderProps } from "../../Theme";
+export declare type AppThemeProps = React.PropsWithChildren<NextAppProps & {
+    theme: ThemeProviderProps["defaultTheme"];
+}>;
+/**
+ * App theme with vanilla class based theme (good for `tailwindcss`)
+ */
+export declare const AppTheme: ({ theme, children }: AppThemeProps) => JSX.Element;

package/app/css/AppTheme.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// import { ThemeVanillaProvider, ThemeVanillaValue } from "@koine/react";
+import { ThemeProvider } from "../../Theme";
+/**
+ * App theme with vanilla class based theme (good for `tailwindcss`)
+ */
+export const AppTheme = ({ theme, children }) => {
+    // return (
+    //   <ThemeVanillaProvider initialTheme={theme}>{children}</ThemeVanillaProvider>
+    // );
+    return (_jsx(ThemeProvider, { defaultTheme: theme, attribute: "class", children: children }));
+};

package/app/css/auth/index.d.ts

@@ -0,0 +1,9 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "../AppTheme";
+import { AppMainProps } from "../AppMain";
+export declare type NextAppProps = AppProps & AppThemeProps & AppMainProps;
+/**
+ * App with authentication provided by `next-auth`
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/css/auth/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SessionProvider } from "next-auth/react";
+import { AppHead } from "../../AppHead";
+import { AppTheme } from "../AppTheme";
+import { AppMain } from "../AppMain";
+/**
+ * App with authentication provided by `next-auth`
+ */
+export const NextApp = (props) => {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(SessionProvider, { session: props.pageProps.session, children: _jsx(AppTheme, { ...props, children: _jsx(AppMain, { ...props }) }) })] }));
+};
+export default NextApp;