remoraid 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Robert Soriano <https://github.com/wobsoriano>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,412 @@
+"use client";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  useUserExperience: () => useUserExperience,
+  useUpdateUserExperience: () => useUpdateUserExperience,
+  defaultNavbarSettings: () => defaultNavbarSettings,
+  UserExperienceProvider: () => UserExperienceProvider,
+  AppShell: () => AppShell
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/components/AppShell/NavbarMinimal/index.tsx
+var import_core2 = require("@mantine/core");
+var import_icons_react = require("@tabler/icons-react");
+var import_link = __toESM(require("next/link"));
+var import_navigation = require("next/navigation");
+var import_react = require("react");
+
+// src/lib/utils.ts
+var import_core = require("@mantine/core");
+var co = (condition, value, fallback) => condition(value) ? value : fallback;
+var isMantinePrimaryShade = (primaryShade) => {
+  if (isNaN(Number(primaryShade))) {
+    return true;
+  }
+  return false;
+};
+var getCustomStyles = (theme, colorScheme) => {
+  return {
+    transparentBackground: colorScheme === "dark" ? import_core.rgba(theme.colors.dark[8], 0.8) : import_core.rgba(theme.white, 0.8),
+    iconSize: "1.125em",
+    primaryColor: theme.colors[theme.primaryColor][isMantinePrimaryShade(theme.primaryShade) ? theme.primaryShade[colorScheme === "auto" ? "light" : colorScheme] : theme.primaryShade],
+    spacingPx: {
+      xs: Number(co((v) => !Number.isNaN(v), Number(import_core.px(theme.spacing.xs)), 0)),
+      sm: Number(co((v) => !Number.isNaN(v), Number(import_core.px(theme.spacing.sm)), 0)),
+      md: Number(co((v) => !Number.isNaN(v), Number(import_core.px(theme.spacing.md)), 0)),
+      lg: Number(co((v) => !Number.isNaN(v), Number(import_core.px(theme.spacing.lg)), 0)),
+      xl: Number(co((v) => !Number.isNaN(v), Number(import_core.px(theme.spacing.xl)), 0))
+    }
+  };
+};
+
+// src/components/AppShell/NavbarMinimal/index.tsx
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+function NavbarLink({
+  icon: Icon2,
+  label,
+  active,
+  onClick,
+  href,
+  indicator,
+  settings
+}) {
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react.useState(false);
+  const iconProps = {
+    size: settings.iconSize,
+    stroke: 1.5
+  };
+  if (!href) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Tooltip, {
+      label,
+      position: "right",
+      transitionProps: { duration: 0 },
+      children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.UnstyledButton, {
+        onClick,
+        className: "remoraid-navbar-minimal-link",
+        "data-active": active || undefined,
+        w: settings.linkSize,
+        h: settings.linkSize,
+        children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Icon2, {
+          ...iconProps
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const button = /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.UnstyledButton, {
+    onClick,
+    className: "remoraid-navbar-minimal-link",
+    "data-active": active || undefined,
+    w: settings.linkSize,
+    h: settings.linkSize,
+    component: import_link.default,
+    href,
+    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Icon2, {
+      ...iconProps
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Tooltip, {
+    label,
+    position: "right",
+    transitionProps: { duration: 0 },
+    children: indicator === undefined ? button : /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Indicator, {
+      withBorder: true,
+      size: 13,
+      offset: 2,
+      onMouseEnter: () => setIsHoveringRoleIndicator(true),
+      onMouseLeave: () => setIsHoveringRoleIndicator(false),
+      ...indicator(isHoveringRoleIndicator),
+      children: button
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var defaultSettings = {
+  hiddenPages: [],
+  linkSize: import_core2.rem("50px"),
+  iconSize: "50%",
+  px: "sm",
+  py: "md"
+};
+function NavbarMinimal({
+  logo,
+  pages,
+  user,
+  settings: settingsProp,
+  linkIndicator,
+  logoIndicator,
+  onLogout
+}) {
+  const pathname = import_navigation.usePathname();
+  const theme = import_core2.useMantineTheme();
+  const { setColorScheme, colorScheme } = import_core2.useMantineColorScheme();
+  const { transparentBackground } = getCustomStyles(theme, colorScheme);
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = import_react.useState(false);
+  const settings = settingsProp || defaultSettings;
+  const links = pages.filter((link) => !settings.hiddenPages.includes(link.href)).map((link) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV(NavbarLink, {
+    active: link.href === pathname,
+    indicator: linkIndicator,
+    settings,
+    ...link
+  }, link.label, false, undefined, this));
+  const logoImage = logo({
+    style: {
+      cursor: "pointer",
+      width: settings.linkSize,
+      height: settings.linkSize
+    }
+  });
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Paper, {
+    h: "100%",
+    py: settings.py,
+    bg: transparentBackground,
+    radius: 0,
+    shadow: "md",
+    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Flex, {
+      direction: "column",
+      h: "100%",
+      align: "center",
+      px: settings.px,
+      children: [
+        logoIndicator === undefined ? logoImage : /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Indicator, {
+          withBorder: true,
+          offset: 2,
+          size: 13,
+          onMouseEnter: () => setIsHoveringRoleIndicator(true),
+          onMouseLeave: () => setIsHoveringRoleIndicator(false),
+          ...logoIndicator(isHoveringRoleIndicator),
+          children: logoImage
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Divider, {
+          my: "md",
+          variant: "dashed",
+          w: "100%"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Stack, {
+          justify: "flex-start",
+          gap: 0,
+          flex: 1,
+          children: links
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_core2.Stack, {
+          justify: "center",
+          gap: 0,
+          children: [
+            user !== undefined && (user === null ? /* @__PURE__ */ jsx_dev_runtime.jsxDEV(NavbarLink, {
+              icon: import_icons_react.IconLogin,
+              label: "Login",
+              href: "/login",
+              active: pathname === "/login",
+              settings
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime.jsxDEV(NavbarLink, {
+              icon: import_icons_react.IconLogout,
+              label: "Logout",
+              onClick: () => {
+                if (onLogout) {
+                  onLogout();
+                }
+              },
+              href: "/login",
+              settings
+            }, undefined, false, undefined, this)),
+            /* @__PURE__ */ jsx_dev_runtime.jsxDEV(NavbarLink, {
+              icon: colorScheme === "dark" ? import_icons_react.IconSun : import_icons_react.IconMoon,
+              onClick: () => {
+                if (colorScheme === "dark") {
+                  setColorScheme("light");
+                } else {
+                  setColorScheme("dark");
+                }
+              },
+              label: "Toggle Color Scheme",
+              settings
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/lib/navbar-utils.ts
+var defaultNavbarVariant = "minimal";
+var defaultNavbarSettings = {
+  minimal: defaultSettings
+};
+
+// src/components/UserExperienceProvider/index.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_cookie = require("react-cookie");
+var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
+var defaultUserExperience = {
+  navbarVariant: defaultNavbarVariant,
+  navbarSettings: defaultNavbarSettings[defaultNavbarVariant],
+  showWelcomeMessage: true
+};
+var userExperienceContext = import_react2.default.createContext(defaultUserExperience);
+var updateUserExperienceContext = import_react2.default.createContext(null);
+var useUserExperience = () => {
+  return import_react2.useContext(userExperienceContext);
+};
+var useUpdateUserExperience = () => {
+  return import_react2.useContext(updateUserExperienceContext);
+};
+function UserExperienceProvider({
+  children
+}) {
+  const [cookies, setCookie] = import_react_cookie.useCookies();
+  const isUserExperience = (x) => {
+    if (typeof x !== "object") {
+      return false;
+    }
+    if (!("showWelcomeMessage" in x)) {
+      return false;
+    }
+    if (!("navbarVariant" in x)) {
+      return false;
+    }
+    if (!("navbarSettings" in x)) {
+      return false;
+    }
+    if (typeof x.navbarSettings !== "object") {
+      return false;
+    }
+    if (!("hiddenPages" in x.navbarSettings)) {
+      return false;
+    }
+    if (!("linkSize" in x.navbarSettings)) {
+      return false;
+    }
+    if (!("px" in x.navbarSettings)) {
+      return false;
+    }
+    if (!("py" in x.navbarSettings)) {
+      return false;
+    }
+    return true;
+  };
+  const userExperience = cookies["userExperience"] && isUserExperience(cookies["userExperience"]) ? cookies["userExperience"] : defaultUserExperience;
+  const updateUserExperience = (p) => {
+    if (typeof p === "function") {
+      setCookie("userExperience", p(userExperience), { path: "/" });
+      return;
+    }
+    setCookie("userExperience", p, { path: "/" });
+  };
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(updateUserExperienceContext.Provider, {
+    value: updateUserExperience,
+    children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(userExperienceContext.Provider, {
+      value: userExperience,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// src/components/AppShell/index.tsx
+var import_core4 = require("@mantine/core");
+var import_hooks = require("@mantine/hooks");
+
+// src/components/AppShell/Footer/index.tsx
+var import_core3 = require("@mantine/core");
+var import_icons_react2 = require("@tabler/icons-react");
+var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
+function Footer() {
+  const theme = import_core3.useMantineTheme();
+  const { colorScheme } = import_core3.useMantineColorScheme();
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_core3.Group, {
+    justify: "center",
+    w: "100%",
+    py: "md",
+    children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(import_icons_react2.IconPennant, {
+      size: 50,
+      color: colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/AppShell/index.tsx
+var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
+function AppShell({
+  children,
+  logo,
+  pages,
+  navbar,
+  user
+}) {
+  const theme = import_core4.useMantineTheme();
+  const { colorScheme } = import_core4.useMantineColorScheme();
+  const { spacingPx } = getCustomStyles(theme, colorScheme);
+  const [opened, { toggle }] = import_hooks.useDisclosure();
+  const navbarVariant = navbar && navbar.variant ? navbar.variant : defaultNavbarVariant;
+  const navbarSettings = navbar && navbar.settings ? navbar.settings : defaultNavbarSettings[defaultNavbarVariant];
+  const navbarLinkSizePx = co((v) => !Number.isNaN(v), Number(import_core4.px(navbarSettings.linkSize)), 0);
+  const navbarPaddingPx = typeof navbarSettings.px === "number" ? navbarSettings.px : spacingPx[navbarSettings.px];
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.AppShell, {
+    header: { height: 0 },
+    navbar: {
+      width: import_core4.rem(`${navbarLinkSizePx + 2 * navbarPaddingPx}px`),
+      breakpoint: "sm",
+      collapsed: { mobile: !opened }
+    },
+    bg: colorScheme === "dark" ? theme.colors.dark[9] : theme.colors.gray[0],
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.AppShell.Header, {
+        withBorder: false,
+        children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.Group, {
+          p: "md",
+          bg: colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3],
+          hiddenFrom: "sm",
+          children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.Burger, {
+            opened,
+            onClick: toggle,
+            h: 20,
+            size: 18
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.AppShell.Navbar, {
+        withBorder: false,
+        children: navbarVariant === "minimal" && /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(NavbarMinimal, {
+          logo,
+          pages,
+          user,
+          ...navbar
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.AppShell.Main, {
+        children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(import_core4.Paper, {
+              radius: 0,
+              my: "md",
+              h: 20,
+              hiddenFrom: "sm"
+            }, undefined, false, undefined, this),
+            children,
+            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Footer, {}, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { IndicatorProps, MantineSize } from '@mantine/core';
+import { Icon } from '@tabler/icons-react';
+import { ImageProps } from 'next/image';
+import React$1 from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
+
+export interface Page {
+	icon: Icon;
+	label: string;
+	href: string;
+}
+export type NavbarVariant = "minimal";
+export interface NavbarSettings {
+	hiddenPages: string[];
+	linkSize: string;
+	px: MantineSize | number;
+	py: MantineSize | number;
+	iconSize?: string | number;
+}
+export interface UserExperience {
+	navbarVariant: NavbarVariant;
+	navbarSettings: NavbarSettings;
+	showWelcomeMessage: boolean;
+}
+export type AppShellLogo = (props: Omit<ImageProps, "src" | "alt">) => React$1.ReactNode;
+export interface NavbarProps {
+	settings?: NavbarSettings;
+	variant?: NavbarVariant;
+	linkIndicator?: (isHovering: boolean) => IndicatorProps;
+	logoIndicator?: (isHovering: boolean) => IndicatorProps;
+	onLogout?: () => void;
+}
+export declare const useUserExperience: () => UserExperience;
+export declare const useUpdateUserExperience: () => ((p: UserExperience | ((prev: UserExperience) => UserExperience)) => void) | null;
+export function UserExperienceProvider({ children, }: React$1.PropsWithChildren): React$1.JSX.Element;
+export interface AppShellProps {
+	logo: AppShellLogo;
+	pages: Page[];
+	navbar?: NavbarProps;
+	user?: {
+		name: string;
+	} | null;
+}
+export function AppShell({ children, logo, pages, navbar, user, }: React$1.PropsWithChildren<AppShellProps>): import("react").React$1.JSX.Element;
+export declare const defaultNavbarSettings: {
+	[V in NavbarVariant]: NavbarSettings;
+};
+
+export {};

package/dist/index.js

@@ -0,0 +1,395 @@
+"use client";
+// src/components/AppShell/NavbarMinimal/index.tsx
+import {
+  Tooltip,
+  UnstyledButton,
+  Stack,
+  rem,
+  useMantineColorScheme,
+  Flex,
+  Paper,
+  useMantineTheme,
+  Divider,
+  Indicator
+} from "@mantine/core";
+import {
+  IconLogin,
+  IconLogout,
+  IconMoon,
+  IconSun
+} from "@tabler/icons-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+// src/lib/utils.ts
+import {
+  px,
+  rgba
+} from "@mantine/core";
+var co = (condition, value, fallback) => condition(value) ? value : fallback;
+var isMantinePrimaryShade = (primaryShade) => {
+  if (isNaN(Number(primaryShade))) {
+    return true;
+  }
+  return false;
+};
+var getCustomStyles = (theme, colorScheme) => {
+  return {
+    transparentBackground: colorScheme === "dark" ? rgba(theme.colors.dark[8], 0.8) : rgba(theme.white, 0.8),
+    iconSize: "1.125em",
+    primaryColor: theme.colors[theme.primaryColor][isMantinePrimaryShade(theme.primaryShade) ? theme.primaryShade[colorScheme === "auto" ? "light" : colorScheme] : theme.primaryShade],
+    spacingPx: {
+      xs: Number(co((v) => !Number.isNaN(v), Number(px(theme.spacing.xs)), 0)),
+      sm: Number(co((v) => !Number.isNaN(v), Number(px(theme.spacing.sm)), 0)),
+      md: Number(co((v) => !Number.isNaN(v), Number(px(theme.spacing.md)), 0)),
+      lg: Number(co((v) => !Number.isNaN(v), Number(px(theme.spacing.lg)), 0)),
+      xl: Number(co((v) => !Number.isNaN(v), Number(px(theme.spacing.xl)), 0))
+    }
+  };
+};
+
+// src/components/AppShell/NavbarMinimal/index.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function NavbarLink({
+  icon: Icon2,
+  label,
+  active,
+  onClick,
+  href,
+  indicator,
+  settings
+}) {
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = useState(false);
+  const iconProps = {
+    size: settings.iconSize,
+    stroke: 1.5
+  };
+  if (!href) {
+    return /* @__PURE__ */ jsxDEV(Tooltip, {
+      label,
+      position: "right",
+      transitionProps: { duration: 0 },
+      children: /* @__PURE__ */ jsxDEV(UnstyledButton, {
+        onClick,
+        className: "remoraid-navbar-minimal-link",
+        "data-active": active || undefined,
+        w: settings.linkSize,
+        h: settings.linkSize,
+        children: /* @__PURE__ */ jsxDEV(Icon2, {
+          ...iconProps
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const button = /* @__PURE__ */ jsxDEV(UnstyledButton, {
+    onClick,
+    className: "remoraid-navbar-minimal-link",
+    "data-active": active || undefined,
+    w: settings.linkSize,
+    h: settings.linkSize,
+    component: Link,
+    href,
+    children: /* @__PURE__ */ jsxDEV(Icon2, {
+      ...iconProps
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV(Tooltip, {
+    label,
+    position: "right",
+    transitionProps: { duration: 0 },
+    children: indicator === undefined ? button : /* @__PURE__ */ jsxDEV(Indicator, {
+      withBorder: true,
+      size: 13,
+      offset: 2,
+      onMouseEnter: () => setIsHoveringRoleIndicator(true),
+      onMouseLeave: () => setIsHoveringRoleIndicator(false),
+      ...indicator(isHoveringRoleIndicator),
+      children: button
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var defaultSettings = {
+  hiddenPages: [],
+  linkSize: rem("50px"),
+  iconSize: "50%",
+  px: "sm",
+  py: "md"
+};
+function NavbarMinimal({
+  logo,
+  pages,
+  user,
+  settings: settingsProp,
+  linkIndicator,
+  logoIndicator,
+  onLogout
+}) {
+  const pathname = usePathname();
+  const theme = useMantineTheme();
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
+  const { transparentBackground } = getCustomStyles(theme, colorScheme);
+  const [isHoveringRoleIndicator, setIsHoveringRoleIndicator] = useState(false);
+  const settings = settingsProp || defaultSettings;
+  const links = pages.filter((link) => !settings.hiddenPages.includes(link.href)).map((link) => /* @__PURE__ */ jsxDEV(NavbarLink, {
+    active: link.href === pathname,
+    indicator: linkIndicator,
+    settings,
+    ...link
+  }, link.label, false, undefined, this));
+  const logoImage = logo({
+    style: {
+      cursor: "pointer",
+      width: settings.linkSize,
+      height: settings.linkSize
+    }
+  });
+  return /* @__PURE__ */ jsxDEV(Paper, {
+    h: "100%",
+    py: settings.py,
+    bg: transparentBackground,
+    radius: 0,
+    shadow: "md",
+    children: /* @__PURE__ */ jsxDEV(Flex, {
+      direction: "column",
+      h: "100%",
+      align: "center",
+      px: settings.px,
+      children: [
+        logoIndicator === undefined ? logoImage : /* @__PURE__ */ jsxDEV(Indicator, {
+          withBorder: true,
+          offset: 2,
+          size: 13,
+          onMouseEnter: () => setIsHoveringRoleIndicator(true),
+          onMouseLeave: () => setIsHoveringRoleIndicator(false),
+          ...logoIndicator(isHoveringRoleIndicator),
+          children: logoImage
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Divider, {
+          my: "md",
+          variant: "dashed",
+          w: "100%"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Stack, {
+          justify: "flex-start",
+          gap: 0,
+          flex: 1,
+          children: links
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Stack, {
+          justify: "center",
+          gap: 0,
+          children: [
+            user !== undefined && (user === null ? /* @__PURE__ */ jsxDEV(NavbarLink, {
+              icon: IconLogin,
+              label: "Login",
+              href: "/login",
+              active: pathname === "/login",
+              settings
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(NavbarLink, {
+              icon: IconLogout,
+              label: "Logout",
+              onClick: () => {
+                if (onLogout) {
+                  onLogout();
+                }
+              },
+              href: "/login",
+              settings
+            }, undefined, false, undefined, this)),
+            /* @__PURE__ */ jsxDEV(NavbarLink, {
+              icon: colorScheme === "dark" ? IconSun : IconMoon,
+              onClick: () => {
+                if (colorScheme === "dark") {
+                  setColorScheme("light");
+                } else {
+                  setColorScheme("dark");
+                }
+              },
+              label: "Toggle Color Scheme",
+              settings
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/lib/navbar-utils.ts
+var defaultNavbarVariant = "minimal";
+var defaultNavbarSettings = {
+  minimal: defaultSettings
+};
+
+// src/components/UserExperienceProvider/index.tsx
+import React, { useContext } from "react";
+import { useCookies } from "react-cookie";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var defaultUserExperience = {
+  navbarVariant: defaultNavbarVariant,
+  navbarSettings: defaultNavbarSettings[defaultNavbarVariant],
+  showWelcomeMessage: true
+};
+var userExperienceContext = React.createContext(defaultUserExperience);
+var updateUserExperienceContext = React.createContext(null);
+var useUserExperience = () => {
+  return useContext(userExperienceContext);
+};
+var useUpdateUserExperience = () => {
+  return useContext(updateUserExperienceContext);
+};
+function UserExperienceProvider({
+  children
+}) {
+  const [cookies, setCookie] = useCookies();
+  const isUserExperience = (x) => {
+    if (typeof x !== "object") {
+      return false;
+    }
+    if (!("showWelcomeMessage" in x)) {
+      return false;
+    }
+    if (!("navbarVariant" in x)) {
+      return false;
+    }
+    if (!("navbarSettings" in x)) {
+      return false;
+    }
+    if (typeof x.navbarSettings !== "object") {
+      return false;
+    }
+    if (!("hiddenPages" in x.navbarSettings)) {
+      return false;
+    }
+    if (!("linkSize" in x.navbarSettings)) {
+      return false;
+    }
+    if (!("px" in x.navbarSettings)) {
+      return false;
+    }
+    if (!("py" in x.navbarSettings)) {
+      return false;
+    }
+    return true;
+  };
+  const userExperience = cookies["userExperience"] && isUserExperience(cookies["userExperience"]) ? cookies["userExperience"] : defaultUserExperience;
+  const updateUserExperience = (p) => {
+    if (typeof p === "function") {
+      setCookie("userExperience", p(userExperience), { path: "/" });
+      return;
+    }
+    setCookie("userExperience", p, { path: "/" });
+  };
+  return /* @__PURE__ */ jsxDEV2(updateUserExperienceContext.Provider, {
+    value: updateUserExperience,
+    children: /* @__PURE__ */ jsxDEV2(userExperienceContext.Provider, {
+      value: userExperience,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// src/components/AppShell/index.tsx
+import {
+  AppShell as MantineAppShell,
+  Burger,
+  rem as rem2,
+  Group as Group2,
+  useMantineTheme as useMantineTheme3,
+  useMantineColorScheme as useMantineColorScheme3,
+  Paper as Paper2,
+  px as px2
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
+// src/components/AppShell/Footer/index.tsx
+import { Group, useMantineColorScheme as useMantineColorScheme2, useMantineTheme as useMantineTheme2 } from "@mantine/core";
+import { IconPennant } from "@tabler/icons-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function Footer() {
+  const theme = useMantineTheme2();
+  const { colorScheme } = useMantineColorScheme2();
+  return /* @__PURE__ */ jsxDEV3(Group, {
+    justify: "center",
+    w: "100%",
+    py: "md",
+    children: /* @__PURE__ */ jsxDEV3(IconPennant, {
+      size: 50,
+      color: colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/AppShell/index.tsx
+import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
+function AppShell({
+  children,
+  logo,
+  pages,
+  navbar,
+  user
+}) {
+  const theme = useMantineTheme3();
+  const { colorScheme } = useMantineColorScheme3();
+  const { spacingPx } = getCustomStyles(theme, colorScheme);
+  const [opened, { toggle }] = useDisclosure();
+  const navbarVariant = navbar && navbar.variant ? navbar.variant : defaultNavbarVariant;
+  const navbarSettings = navbar && navbar.settings ? navbar.settings : defaultNavbarSettings[defaultNavbarVariant];
+  const navbarLinkSizePx = co((v) => !Number.isNaN(v), Number(px2(navbarSettings.linkSize)), 0);
+  const navbarPaddingPx = typeof navbarSettings.px === "number" ? navbarSettings.px : spacingPx[navbarSettings.px];
+  return /* @__PURE__ */ jsxDEV4(MantineAppShell, {
+    header: { height: 0 },
+    navbar: {
+      width: rem2(`${navbarLinkSizePx + 2 * navbarPaddingPx}px`),
+      breakpoint: "sm",
+      collapsed: { mobile: !opened }
+    },
+    bg: colorScheme === "dark" ? theme.colors.dark[9] : theme.colors.gray[0],
+    children: [
+      /* @__PURE__ */ jsxDEV4(MantineAppShell.Header, {
+        withBorder: false,
+        children: /* @__PURE__ */ jsxDEV4(Group2, {
+          p: "md",
+          bg: colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3],
+          hiddenFrom: "sm",
+          children: /* @__PURE__ */ jsxDEV4(Burger, {
+            opened,
+            onClick: toggle,
+            h: 20,
+            size: 18
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(MantineAppShell.Navbar, {
+        withBorder: false,
+        children: navbarVariant === "minimal" && /* @__PURE__ */ jsxDEV4(NavbarMinimal, {
+          logo,
+          pages,
+          user,
+          ...navbar
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(MantineAppShell.Main, {
+        children: /* @__PURE__ */ jsxDEV4(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV4(Paper2, {
+              radius: 0,
+              my: "md",
+              h: 20,
+              hiddenFrom: "sm"
+            }, undefined, false, undefined, this),
+            children,
+            /* @__PURE__ */ jsxDEV4(Footer, {}, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  useUserExperience,
+  useUpdateUserExperience,
+  defaultNavbarSettings,
+  UserExperienceProvider,
+  AppShell
+};

package/dist/ssc.cjs

@@ -0,0 +1,70 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/ssc.ts
+var exports_ssc = {};
+__export(exports_ssc, {
+  EnvironmentShell: () => EnvironmentShell
+});
+module.exports = __toCommonJS(exports_ssc);
+
+// src/components/EnvironmentShell/index.tsx
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+function EnvironmentShell({
+  children,
+  vars
+}) {
+  const missingVars = vars.filter((v) => !process.env[v]);
+  if (missingVars.length !== 0) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+      style: { padding: 5 },
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("h1", {
+          style: { fontWeight: 700 },
+          children: [
+            "Environment variable",
+            missingVars.length > 1 ? "s" : "",
+            " missing:"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("ul", {
+          style: { margin: 5 },
+          children: missingVars.map((v, i) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("li", {
+            children: v
+          }, i, false, undefined, this))
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("p", {
+          children: "Please specify in your '.env' file. See README for details."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(jsx_dev_runtime.Fragment, {
+    children
+  }, undefined, false, undefined, this);
+}

package/dist/ssc.d.ts

@@ -0,0 +1,10 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PropsWithChildren } from 'react';
+
+export interface EnvironmentShellProps {
+	vars: string[];
+}
+export function EnvironmentShell({ children, vars, }: PropsWithChildren<EnvironmentShellProps>): import("react").JSX.Element;
+
+export {};

package/dist/ssc.js

@@ -0,0 +1,38 @@
+// src/components/EnvironmentShell/index.tsx
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function EnvironmentShell({
+  children,
+  vars
+}) {
+  const missingVars = vars.filter((v) => !process.env[v]);
+  if (missingVars.length !== 0) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      style: { padding: 5 },
+      children: [
+        /* @__PURE__ */ jsxDEV("h1", {
+          style: { fontWeight: 700 },
+          children: [
+            "Environment variable",
+            missingVars.length > 1 ? "s" : "",
+            " missing:"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV("ul", {
+          style: { margin: 5 },
+          children: missingVars.map((v, i) => /* @__PURE__ */ jsxDEV("li", {
+            children: v
+          }, i, false, undefined, this))
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("p", {
+          children: "Please specify in your '.env' file. See README for details."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children
+  }, undefined, false, undefined, this);
+}
+export {
+  EnvironmentShell
+};

package/dist/styles.css

@@ -0,0 +1,22 @@
+.remoraid-navbar-minimal-link {
+  border-radius: var(--mantine-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+
+  &:hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-0),
+      var(--mantine-color-dark-5)
+    );
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "remoraid",
+  "version": "1.1.0",
+  "author": "Konrad Goldammer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/konradag/remoraid.git"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "devDependencies": {
+    "@types/bun": "^1.1.10",
+    "@types/css-modules": "^1.0.5",
+    "@types/react": "^19.1.2",
+    "bun-plugin-dts": "^0.3.0",
+    "next": "^15.3.1",
+    "react": "^19.1.0",
+    "react-cookie": "^8.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-cookie": "^8.0.1",
+    "next": "^15.3.1",
+    "@mantine/core": "^7.17.4",
+    "@mantine/hooks": "^7.17.4",
+    "@tabler/icons-react": "^3.31.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./ssc": {
+      "types": "./dist/ssc.d.ts",
+      "import": "./dist/ssc.js",
+      "require": "./dist/ssc.cjs"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "bugs": "https://github.com/konradag/remoraid/issues",
+  "description": "A React components library built on top of Mantine",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "bun",
+    "react",
+    "mantine"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "bun run build.ts",
+    "prepublishOnly": "bun run build"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts"
+}