@koine/next 1.0.8 → 1.0.9

package/Theme/Theme.d.ts

@@ -21,7 +21,7 @@ export declare type UseThemeProps = {
     /** 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 = {
+export declare type ThemeProviderProps = React.PropsWithChildren<{
     /** List of all available theme names */
     themes?: string[];
     /** Forced theme name for the current page */
@@ -40,7 +40,7 @@ export declare type ThemeProviderProps = {
     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 declare const ThemeProvider: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, themes, defaultTheme, attribute, value, children, nonce, }: ThemeProviderProps) => JSX.Element;
 export {};

package/Theme/Theme.js

@@ -22,7 +22,7 @@ export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false,
     const attrs = !value ? themes : Object.values(value);
     const applyTheme = useCallback((theme) => {
         let resolved = theme;
-        if (isServer)
+        if (isServer || !resolved)
             return;
         // If theme is system, resolve it before setting theme
         if (theme === "system" && enableSystem) {
@@ -47,13 +47,13 @@ export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false,
         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();
+        enable?.();
     }, [
         attribute,
         attrs,
@@ -103,28 +103,28 @@ export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false,
     }, [defaultTheme, setTheme]);
     // Whenever theme or forcedTheme changes, apply it
     useEffect(() => {
-        applyTheme(forcedTheme !== null && forcedTheme !== void 0 ? forcedTheme : theme);
+        applyTheme(forcedTheme ?? theme);
     }, [applyTheme, forcedTheme, theme]);
-    return (_jsxs(ThemeContext.Provider, Object.assign({ value: {
+    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, Object.assign({}, {
-                forcedTheme,
-                disableTransitionOnChange,
-                enableSystem,
-                enableColorScheme,
-                themes,
-                defaultTheme,
-                attribute,
-                value,
-                children,
-                attrs,
-                nonce,
-            })), children] })));
+        }, 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";

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 const AppHead: () => JSX.Element;

package/app/AppHead.js

@@ -1,5 +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" }) })));
+export const AppHead = () => {
+    return (_jsx(Head, { children: _jsx("meta", { name: "viewport", content: "width=device-width" }) }));
 };

package/app/AppMain.d.ts

@@ -0,0 +1,35 @@
+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/{AppMain--vanilla.js → css/AppMain.js}

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { SeoDefaults } from "../Seo";
+import { SeoDefaults } from "../../Seo";
 /**
  * App main
  *
  * It does not imply any specific styling or animation solution
  */
-export const AppMainVanilla = ({ Component, pageProps, Layout, seo, pre, post, }) => {
-    return (_jsxs(React.Fragment, { children: [_jsx(SeoDefaults, Object.assign({}, seo)), pre, _jsx(Layout, { children: _jsx(Component, Object.assign({}, pageProps)) }), post] }));
+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/{AppTheme--vanilla.js → css/AppTheme.js}

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

package/app/css/auth/package.json

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

package/app/css/index.d.ts

@@ -0,0 +1,54 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "./AppTheme";
+import { AppMainProps } from "./AppMain";
+export declare 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) => JSX.Element;
+export default NextApp;

package/app/css/index.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppHead } from "../AppHead";
+import { AppTheme } from "./AppTheme";
+import { AppMain } from "./AppMain";
+/**
+ * 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 (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(AppTheme, { ...props, children: _jsx(AppMain, { ...props }) })] }));
+};
+export default NextApp;

package/app/css/package.json

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

package/app/em/AppMain.d.ts

@@ -0,0 +1,10 @@
+import type { AppMainBaseProps, AppMainFramerProps } from "../AppMain";
+export declare 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) => JSX.Element;

package/app/em/AppMain.js

@@ -0,0 +1,22 @@
+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, m } from "framer-motion";
+import { MotionProvider } from "@koine/react/m";
+import { SeoDefaults } from "../../Seo";
+import { NextProgress } from "../../NextProgress";
+/**
+ * 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 (_jsxs(_Fragment, { children: [_jsx(SeoDefaults, { ...seo }), pre, _jsxs(MotionProvider, { features: motion, children: [ProgressOverlay && _jsx(NextProgress, { Overlay: ProgressOverlay }), _jsx(Layout, { children: _jsx(AnimatePresence, { exitBeforeEnter: true, initial: false, children: _jsx(m.div, { ...transition, children: _createElement(Component, { ...pageProps, key: pathname }) }, pathname) }) })] }), post] }));
+};

package/app/{AppTheme--emotion.d.ts → em/AppTheme.d.ts}

@@ -2,14 +2,14 @@ import React from "react";
 import { AppProps as NextAppProps } from "next/app";
 import { Theme } from "@mui/material/styles";
 import { EmotionCache } from "@emotion/react";
-export declare type AppThemeEmotionProps = NextAppProps & {
+export declare type AppThemeProps = React.PropsWithChildren<NextAppProps & {
     emotionCache?: EmotionCache;
     /**
      * A theme object
      */
     theme: Theme;
-};
+}>;
 /**
  * App theme with `emotion` (good for `@mui`)s
  */
-export declare const AppThemeEmotion: React.FC<AppThemeEmotionProps>;
+export declare const AppTheme: ({ emotionCache, theme, children, }: AppThemeProps) => JSX.Element;

package/app/{AppTheme--emotion.js → em/AppTheme.js}

@@ -3,15 +3,15 @@ import { ThemeProvider } from "@mui/material/styles";
 import { CacheProvider } from "@emotion/react";
 import CssBaseline from "@mui/material/CssBaseline";
 import { Global, css } from "@emotion/react";
-import { stylesGlobal } from "@koine/react";
-import { createEmotionCache } from "../utils/emotion-cache";
+import { stylesGlobal } from "@koine/react/sc";
+import { createEmotionCache } from "../../utils/emotion-cache";
 // client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 /**
  * App theme with `emotion` (good for `@mui`)s
  */
-export const AppThemeEmotion = ({ emotionCache = clientSideEmotionCache, theme, children, }) => {
-    return (_jsx(CacheProvider, Object.assign({ value: emotionCache }, { children: _jsxs(ThemeProvider, Object.assign({ theme: theme }, { children: [_jsx(CssBaseline, {}), _jsx(Global, { styles: css `
+export const AppTheme = ({ emotionCache = clientSideEmotionCache, theme, children, }) => {
+    return (_jsx(CacheProvider, { value: emotionCache, children: _jsxs(ThemeProvider, { theme: theme, children: [_jsx(CssBaseline, {}), _jsx(Global, { styles: css `
             ${stylesGlobal}
-          ` }), children] })) })));
+          ` }), children] }) }));
 };

package/app/em/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/em/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;

package/app/em/auth/package.json

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

package/app/em/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
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/em/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppHead } from "../AppHead";
+import { AppTheme } from "./AppTheme";
+import { AppMain } from "./AppMain";
+/**
+ * App
+ */
+export const NextApp = (props) => {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(AppTheme, { ...props, children: _jsx(AppMain, { ...props }) })] }));
+};
+export default NextApp;

package/app/em/package.json

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

package/app/index.d.ts

@@ -1,11 +1,2 @@
-export * from "./App--emotion";
-export * from "./App--sc";
-export * from "./App--vanilla";
-export * from "./AppAuth--emotion";
-export * from "./AppAuth--sc";
 export * from "./AppHead";
-export * from "./AppMain--sc";
-export * from "./AppMain--vanilla";
-export * from "./AppTheme--emotion";
-export * from "./AppTheme--sc";
-export * from "./AppTheme--vanilla";
+export * from "./AppMain";

package/app/index.js

@@ -1,11 +1,2 @@
-export * from "./App--emotion";
-export * from "./App--sc";
-export * from "./App--vanilla";
-export * from "./AppAuth--emotion";
-export * from "./AppAuth--sc";
 export * from "./AppHead";
-export * from "./AppMain--sc";
-export * from "./AppMain--vanilla";
-export * from "./AppTheme--emotion";
-export * from "./AppTheme--sc";
-export * from "./AppTheme--vanilla";
+export * from "./AppMain";

package/app/package.json

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

package/app/sc/AppMain.d.ts

@@ -0,0 +1,10 @@
+import type { AppMainBaseProps, AppMainFramerProps } from "../AppMain";
+export declare 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) => JSX.Element;

package/app/sc/AppMain.js

@@ -0,0 +1,22 @@
+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, m } from "framer-motion";
+import { MotionProvider } from "@koine/react/m";
+import { SeoDefaults } from "../../Seo";
+import { NextProgress } from "../../NextProgress";
+/**
+ * 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 (_jsxs(_Fragment, { children: [_jsx(SeoDefaults, { ...seo }), pre, _jsxs(MotionProvider, { features: motion, children: [ProgressOverlay && _jsx(NextProgress, { Overlay: ProgressOverlay }), _jsx(Layout, { children: _jsx(AnimatePresence, { exitBeforeEnter: true, initial: false, children: _jsx(m.div, { ...transition, children: _createElement(Component, { ...pageProps, key: pathname }) }, pathname) }) })] }), post] }));
+};

package/app/sc/AppTheme.d.ts

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

package/app/sc/AppTheme.js

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

package/app/sc/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/sc/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;

package/app/sc/auth/package.json

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