@koine/next 2.0.0-beta.14 → 2.0.0-beta.141

package/12/ThemeProvider.mjs

@@ -1,245 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import NextScript from "next/script";
-import { memo, useCallback, useEffect, useState } from "react";
-import isServer from "@koine/utils/isServer";
-import { ThemeContext } from "./ThemeContext";
-const colorSchemes = [
-    "light",
-    "dark"
-];
-const MEDIA = "(prefers-color-scheme: dark)";
-const THEME_STORAGE_KEY = "theme";
-/**
- * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
- *
- * Differences:
- *
- * - enableColorScheme: `false` by default (instead of `true`), this plays more
- * nicely with tailwind `dark` class mode as dark theme is supposed to be only
- * controlled by tailwind modifiers
- */ export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme, 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 /*#__PURE__*/ _jsxs(ThemeContext.Provider, {
-        value: {
-            theme,
-            setTheme,
-            forcedTheme,
-            resolvedTheme: theme === "system" ? resolvedTheme : theme,
-            themes: enableSystem ? [
-                ...themes,
-                "system"
-            ] : themes,
-            systemTheme: enableSystem ? resolvedTheme : undefined
-        },
-        children: [
-            /*#__PURE__*/ _jsx(ThemeScript, {
-                forcedTheme,
-                disableTransitionOnChange,
-                enableSystem,
-                enableColorScheme,
-                themes,
-                defaultTheme,
-                attribute,
-                value,
-                children,
-                attrs,
-                nonce
-            }),
-            children
-        ]
-    });
-};
-const ThemeScript = /*#__PURE__*/ 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 /*#__PURE__*/ _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 d = document;
-    const css = d.createElement("style");
-    css.appendChild(d.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
-    d.head.appendChild(css);
-    return ()=>{
-        // Force restyle
-        (()=>window.getComputedStyle(d.body))();
-        // Wait for next tick before removing
-        setTimeout(()=>{
-            d.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);
-};
-export default ThemeProvider;

package/12/TransText.d.ts

@@ -1,3 +0,0 @@
-import _TransText from "next-translate/TransText";
-export declare const TransText: typeof _TransText;
-export default TransText;

package/12/TransText.mjs

@@ -1,4 +0,0 @@
-"use client";
-import _TransText from "next-translate/TransText";
-export const TransText = _TransText;
-export default TransText;

package/12/app/AppHead.d.ts

@@ -1,3 +0,0 @@
-export type AppHeadProps = unknown;
-export declare const AppHead: () => import("react/jsx-runtime").JSX.Element;
-export default AppHead;

package/12/app/AppHead.mjs

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

package/12/app/AppMain.d.ts

@@ -1,35 +0,0 @@
-import type { HTMLMotionProps } from "framer-motion";
-import type { AppProps as NextAppProps } from "next/app";
-import React from "react";
-import type { MotionProviderFeatures } from "@koine/react/m";
-import type { NextProgressProps } from "../NextProgress";
-import type { SeoDefaultsProps } from "../SeoDefaults";
-export 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 type AppMainFramerProps = {
-    motion: MotionProviderFeatures;
-    /**
-     * Default layout transition, by default it is a simple fade in/out
-     */
-    transition?: Omit<HTMLMotionProps<"div">, "key">;
-};

package/12/app/AppMain.mjs

@@ -1 +0,0 @@
-import React from "react";

package/12/app/css/AppMain.d.ts

@@ -1,9 +0,0 @@
-import type { AppMainBaseProps } from "../AppMain";
-export 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) => import("react/jsx-runtime").JSX.Element;
-export default AppMain;

package/12/app/css/AppMain.mjs

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

package/12/app/css/AppTheme.d.ts

@@ -1,11 +0,0 @@
-import { type AppProps as NextAppProps } from "next/app";
-import React from "react";
-import { type ThemeProviderProps } from "../../ThemeProvider";
-export 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) => import("react/jsx-runtime").JSX.Element;
-export default AppTheme;

package/12/app/css/AppTheme.mjs

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

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

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

package/12/app/css/auth/index.mjs

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

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

@@ -1,54 +0,0 @@
-import { AppProps } from "next/app";
-import { type AppMainProps } from "./AppMain";
-import { type AppThemeProps } from "./AppTheme";
-export type NextAppProps = AppProps & AppThemeProps & AppMainProps;
-/**
- * App
- *
- * @example
- *
- * ```tsx
- * import { NextApp, NextAppProps } from "@koine/next/app/css/auth";
- * import { Favicon, AnalyticsGoogle } from "@koine/next";
- * import { theme } from "src/helpers/theme";
- * import { Layout } from "src/components/Layout";
- * // import "@fontsource/myfont/800.css";
- * // import "src/helpers/theme.css";
- *
- * const motion = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * export default function App(props: NextAppProps) {
- *   return (
- *     <NextApp
- *       {...props}
- *       Layout={Layout}
- *       theme={theme}
- *       seo={{
- *         titleTemplate: "%s | MyApp",
- *         defaultTitle: "MyApp",
- *         openGraph: {
- *           type: "website",
- *           locale: "en_US",
- *           url: "https://myapp.com/",
- *           site_name: "MyApp",
- *         },
- *         twitter: {
- *           handle: "@MklrNl",
- *           site: "@MyApp",
- *           cardType: "summary_large_image",
- *         },
- *       }}
- *       pre={
- *         <>
- *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
- *           <Favicon name="MyApp" color="#000000" />
- *         </>
- *       }
- *     />
- *   );
- * }
- *
- * ```
- */
-export declare const NextApp: (props: NextAppProps) => import("react/jsx-runtime").JSX.Element;
-export default NextApp;

package/12/app/css/index.mjs

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AppHead } from "../AppHead";
-import { AppMain } from "./AppMain";
-import { AppTheme } from "./AppTheme";
-/**
- * App
- *
- * @example
- *
- * ```tsx
- * import { NextApp, NextAppProps } from "@koine/next/app/css/auth";
- * import { Favicon, AnalyticsGoogle } from "@koine/next";
- * import { theme } from "src/helpers/theme";
- * import { Layout } from "src/components/Layout";
- * // import "@fontsource/myfont/800.css";
- * // import "src/helpers/theme.css";
- *
- * const motion = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * export default function App(props: NextAppProps) {
- *   return (
- *     <NextApp
- *       {...props}
- *       Layout={Layout}
- *       theme={theme}
- *       seo={{
- *         titleTemplate: "%s | MyApp",
- *         defaultTitle: "MyApp",
- *         openGraph: {
- *           type: "website",
- *           locale: "en_US",
- *           url: "https://myapp.com/",
- *           site_name: "MyApp",
- *         },
- *         twitter: {
- *           handle: "@MklrNl",
- *           site: "@MyApp",
- *           cardType: "summary_large_image",
- *         },
- *       }}
- *       pre={
- *         <>
- *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
- *           <Favicon name="MyApp" color="#000000" />
- *         </>
- *       }
- *     />
- *   );
- * }
- *
- * ```
- */ export const NextApp = (props)=>{
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(AppHead, {}),
-            /*#__PURE__*/ _jsx(AppTheme, {
-                ...props,
-                children: /*#__PURE__*/ _jsx(AppMain, {
-                    ...props
-                })
-            })
-        ]
-    });
-};
-export default NextApp;

package/12/app/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./AppHead";
-export * from "./AppMain";

package/12/app/index.mjs

@@ -1,2 +0,0 @@
-export * from "./AppHead";
-export * from "./AppMain";

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

@@ -1,11 +0,0 @@
-import type { AppMainBaseProps, AppMainFramerProps } from "../AppMain";
-export type AppMainProps = AppMainBaseProps & AppMainFramerProps;
-/**
- * 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: ({ Component, pageProps, Layout, ProgressOverlay, seo, motion, transition, pre, post, }: AppMainProps) => import("react/jsx-runtime").JSX.Element;
-export default AppMain;

package/12/app/sc/AppMain.mjs

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { AnimatePresence, m } from "framer-motion";
-import { useRouter } from "next/router";
-import React from "react";
-import { MotionProvider } from "@koine/react/m";
-import { NextProgress } from "../../NextProgress";
-import { SeoDefaults } from "../../SeoDefaults";
-/**
- * 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 AppMain = ({ Component, pageProps, Layout, ProgressOverlay, seo, motion, transition = {
-    initial: {
-        opacity: 0
-    },
-    animate: {
-        opacity: 1
-    },
-    exit: {
-        opacity: 0
-    }
-}, pre, post })=>{
-    const { pathname } = useRouter();
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(SeoDefaults, {
-                ...seo
-            }),
-            pre,
-            /*#__PURE__*/ _jsxs(MotionProvider, {
-                features: motion,
-                children: [
-                    ProgressOverlay && /*#__PURE__*/ _jsx(NextProgress, {
-                        Overlay: ProgressOverlay
-                    }),
-                    /*#__PURE__*/ _jsx(Layout, {
-                        children: /*#__PURE__*/ _jsx(AnimatePresence, {
-                            exitBeforeEnter: true,
-                            initial: false,
-                            children: /*#__PURE__*/ _jsx(m.div, {
-                                ...transition,
-                                children: /*#__PURE__*/ _createElement(Component, {
-                                    ...pageProps,
-                                    key: pathname
-                                })
-                            }, pathname)
-                        })
-                    })
-                ]
-            }),
-            post
-        ]
-    });
-};
-export default AppMain;

package/12/app/sc/AppTheme.d.ts

@@ -1,14 +0,0 @@
-import { type AppProps as NextAppProps } from "next/app";
-import React from "react";
-import { Theme } from "@koine/react/sc";
-export type AppThemeProps = React.PropsWithChildren<NextAppProps & {
-    /**
-     * A theme object
-     */
-    theme: Theme;
-}>;
-/**
- * App theme with `styled-components`
- */
-export declare const AppTheme: ({ theme, children }: AppThemeProps) => import("react/jsx-runtime").JSX.Element;
-export default AppTheme;

package/12/app/sc/AppTheme.mjs

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { ThemeProvider } from "styled-components";
-import { StylesGlobal } from "@koine/react/sc";
-/**
- * App theme with `styled-components`
- */ export const AppTheme = ({ theme, children })=>{
-    return /*#__PURE__*/ _jsxs(ThemeProvider, {
-        theme: theme,
-        children: [
-            /*#__PURE__*/ _jsx(StylesGlobal, {}),
-            children
-        ]
-    });
-};
-export default AppTheme;

package/12/app/sc/auth/index.d.ts

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