uibee 2.8.7 → 2.9.1

package/dist/src/components/confirm/confirmPopup.d.ts

@@ -0,0 +1,12 @@
+type ConfirmPopupProps = {
+    isOpen: boolean;
+    header: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    variant?: 'danger' | 'warning' | 'default';
+};
+export default function ConfirmPopup({ isOpen, header, description, confirmText, cancelText, onConfirm, onCancel, variant, }: ConfirmPopupProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/confirm/confirmPopup.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+export default function ConfirmPopup({ isOpen, header, description, confirmText = 'Confirm', cancelText = 'Cancel', onConfirm, onCancel, variant = 'default', }) {
+    if (!isOpen)
+        return null;
+    const confirmBg = variant === 'danger'
+        ? 'bg-red-700/80 outline-red-700 hover:bg-red-700'
+        : variant === 'warning'
+            ? 'bg-yellow-600/80 outline-yellow-600 hover:bg-yellow-600'
+            : 'bg-login/70 outline-login hover:bg-login/90';
+    return (_jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'confirm-popup-header', className: 'fixed inset-0 z-50 flex items-center justify-center', onClick: onCancel, children: [_jsx("div", { className: 'absolute inset-0 bg-black/60 backdrop-blur-sm' }), _jsxs("div", { className: '\n                    relative z-10 w-full max-w-md mx-4\n                    bg-login-800 border border-login-500/50 rounded-xl\n                    shadow-2xl p-6 flex flex-col gap-4\n                ', onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: 'flex items-center gap-3', children: [variant !== 'default' && (_jsx(TriangleAlert, { className: `w-6 h-6 shrink-0 ${variant === 'danger' ? 'stroke-red-400' : 'stroke-yellow-400'}` })), _jsx("h2", { id: 'confirm-popup-header', className: 'text-login-50 text-lg font-bold leading-snug', children: header })] }), description && (_jsx("p", { className: 'text-login-100 text-sm leading-relaxed', children: description })), _jsxs("div", { className: 'flex justify-end gap-3 mt-1', children: [_jsx("button", { type: 'button', onClick: onCancel, className: '\n                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium\n                            bg-login-500/60 text-login-50 outline outline-login-500/60\n                            hover:bg-login-500/90 focus:outline-none select-none\n                            transition-colors duration-150\n                        ', children: cancelText }), _jsx("button", { type: 'button', onClick: onConfirm, className: `
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-bold
+                            text-white outline focus:outline-none select-none
+                            transition-colors duration-150
+                            ${confirmBg}
+                        `, children: confirmText })] })] })] }));
+}

package/dist/src/components/index.d.ts

@@ -20,3 +20,4 @@ export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, toast } from './toast/toaster';
 export { default as Button } from './buttons/button';
 export { default as Alert } from './alert/alert';
+export { default as ConfirmPopup } from './confirm/confirmPopup';

package/dist/src/components/index.js

@@ -29,3 +29,5 @@ export { default as Toaster, toast } from './toast/toaster';
 export { default as Button } from './buttons/button';
 // Alert
 export { default as Alert } from './alert/alert';
+// Confirm
+export { default as ConfirmPopup } from './confirm/confirmPopup';

package/dist/src/components/navbar/navbar.d.ts

@@ -7,10 +7,11 @@ export type NavbarProps = {
     theme?: string;
     disableThemeToggle?: boolean;
     token?: string | null;
-    disableAuthButton?: boolean;
-    profileURL?: string;
+    profilePath?: string;
+    loginPath: string;
+    logoutPath: string;
     className?: string;
     innerClassName?: string;
     children: React.ReactNode;
 };
-export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, disableAuthButton, profileURL, className, innerClassName, children, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, profilePath, loginPath, logoutPath, className, innerClassName, children, }: NavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navbar/navbar.js

@@ -11,10 +11,13 @@ function hamburgerStyle(isOpen, isSecond) {
         ? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
         : isSecond ? 'top-7' : 'top-4'}`;
 }
-export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, disableAuthButton, profileURL, className, innerClassName, children, }) {
+export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, profilePath, loginPath, logoutPath, className, innerClassName, children, }) {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     return (_jsx("div", { className: `${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full ${className}`, children: _jsxs("div", { className: `flex w-full max-w-6xl m-auto p-2 transition duration-500 800px:justify-between 800px:p-4 ${isMobileMenuOpen ? 'h-screen bg-login-900/20 800px:h-20' : ''} ${innerClassName}
-            `, children: [_jsx("div", { className: 'block h-12 p-1 800px:p-0', children: _jsx(Link, { href: '/', onClick: () => setIsMobileMenuOpen(false), children: _jsx(LogoSmall, {}) }) }), onlyLogo ? null : (_jsxs(_Fragment, { children: [_jsx("nav", { className: 'hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-200', children: children }), _jsxs("nav", { className: 'flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit', children: [!disableThemeToggle && _jsx(ThemeToggle, {}), !disableLanguageToggle && _jsx(LanguageToggle, { language: lang }), !disableAuthButton && _jsx(AuthButton, { profileURL: profileURL, token: token })] }), _jsxs("button", { className: 'w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden', onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: [_jsx("div", { className: hamburgerStyle(isMobileMenuOpen) }), _jsx("div", { className: hamburgerStyle(isMobileMenuOpen, true) })] }), _jsx("nav", { className: `fixed top-16 w-[calc(100%-2rem)] max-w-140 mx-auto left-0 right-0 800px:hidden
+            `, children: [_jsx("div", { className: 'block h-12 p-1 800px:p-0', children: _jsx(Link, { href: '/', onClick: () => setIsMobileMenuOpen(false), children: _jsx(LogoSmall, {}) }) }), onlyLogo ? null : (_jsxs(_Fragment, { children: [_jsx("nav", { className: 'hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-200', children: children }), _jsxs("nav", { className: 'flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit', children: [!disableThemeToggle &&
+                                    _jsx(ThemeToggle, {}), !disableLanguageToggle &&
+                                    _jsx(LanguageToggle, { language: lang }), !loginPath && !logoutPath &&
+                                    _jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath })] }), _jsxs("button", { className: 'w-12 h-12 relative cursor-pointer bg-none border-none 800px:hidden', onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: [_jsx("div", { className: hamburgerStyle(isMobileMenuOpen) }), _jsx("div", { className: hamburgerStyle(isMobileMenuOpen, true) })] }), _jsx("nav", { className: `fixed top-16 w-[calc(100%-2rem)] max-w-140 mx-auto left-0 right-0 800px:hidden
                             transition-all duration-500 ease-in-out overflow-hidden 
                             ${isMobileMenuOpen ? 'max-h-[calc(100vh-4rem)] opacity-100' : 'max-h-0 opacity-0'}`, onClick: () => setIsMobileMenuOpen(false), children: React.Children.map(children, (child, index) => (_jsx("div", { className: `transition-all duration-500 ease-out ${isMobileMenuOpen
                                     ? 'opacity-100 transform translate-y-0'
@@ -22,10 +25,11 @@ export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableT
                                     transitionDelay: isMobileMenuOpen ? `${index * 80}ms` : '0ms'
                                 }, children: child }, index))) })] }))] }) }));
 }
-function AuthButton({ profileURL, token }) {
-    return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12', children: token ? (_jsxs(_Fragment, { children: [_jsx(Link, { href: '/api/logout', prefetch: false, onClick: (e) => {
-                        e.preventDefault();
-                        window.location.href = '/api/logout';
-                    }, className: 'grid items-center justify-center h-full w-full', children: _jsx(LogOut, { size: 24 }) }), profileURL &&
-                    _jsx(Link, { href: profileURL, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })] })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })) }));
+function AuthButton({ profilePath, logoutPath, loginPath, token }) {
+    return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12', children: token ? (_jsxs(_Fragment, { children: [logoutPath &&
+                    _jsx(Link, { href: logoutPath, prefetch: false, onClick: (e) => {
+                            e.preventDefault();
+                            window.location.href = logoutPath;
+                        }, className: 'grid items-center justify-center h-full w-full', children: _jsx(LogOut, { size: 24 }) }), profilePath &&
+                    _jsx(Link, { href: profilePath, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })] })) : (_jsx(Link, { href: loginPath, className: 'grid items-center justify-center h-full w-full', children: _jsx(User, { size: 24 }) })) }));
 }

package/dist/src/globals.css

@@ -10,8 +10,11 @@
     --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -46,6 +49,8 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
+    --leading-snug: 1.375;
+    --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -53,6 +58,7 @@
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --blur-sm: 8px;
     --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -377,6 +383,9 @@
   .m-auto {
     margin: auto;
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -1442,6 +1451,12 @@
   .border-login-500 {
     border-color: var(--color-login-500);
   }
+  .border-login-500\/50 {
+    border-color: color-mix(in srgb, #323232 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-500) 50%, transparent);
+    }
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -1454,6 +1469,12 @@
   .bg-\[\#18181899\] {
     background-color: #18181899;
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -1478,6 +1499,12 @@
       background-color: color-mix(in oklab, var(--color-login-500) 50%, transparent);
     }
   }
+  .bg-login-500\/60 {
+    background-color: color-mix(in srgb, #323232 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-500) 60%, transparent);
+    }
+  }
   .bg-login-500\/70 {
     background-color: color-mix(in srgb, #323232 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1514,6 +1541,12 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-red-700\/80 {
+    background-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-700) 80%, transparent);
+    }
+  }
   .bg-red-900 {
     background-color: var(--color-red-900);
   }
@@ -1523,6 +1556,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-600\/80 {
+    background-color: color-mix(in srgb, oklch(68.1% 0.162 75.834) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-600) 80%, transparent);
+    }
+  }
   .bg-linear-to-r {
     --tw-gradient-position: to right;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1576,6 +1615,12 @@
   .stroke-login-50 {
     stroke: var(--color-login-50);
   }
+  .stroke-red-400 {
+    stroke: var(--color-red-400);
+  }
+  .stroke-yellow-400 {
+    stroke: var(--color-yellow-400);
+  }
   .stroke-\[3\.5px\] {
     stroke-width: 3.5px;
   }
@@ -1597,6 +1642,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -1718,6 +1766,14 @@
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
   }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1757,6 +1813,12 @@
   .text-login\! {
     color: var(--color-login) !important;
   }
+  .text-login-50 {
+    color: var(--color-login-50);
+  }
+  .text-login-100 {
+    color: var(--color-login-100);
+  }
   .text-login-200 {
     color: var(--color-login-200);
   }
@@ -1807,6 +1869,10 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_0\.1rem_0\.5rem_rgba\(3\,3\,3\,0\.5\)\] {
     --tw-shadow: 0 0.1rem 0.5rem var(--tw-shadow-color, rgba(3,3,3,0.5));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1846,6 +1912,23 @@
   .outline-login-500 {
     outline-color: var(--color-login-500);
   }
+  .outline-login-500\/60 {
+    outline-color: color-mix(in srgb, #323232 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-login-500) 60%, transparent);
+    }
+  }
+  .outline-red-700 {
+    outline-color: var(--color-red-700);
+  }
+  .outline-yellow-600 {
+    outline-color: var(--color-yellow-600);
+  }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-xl {
     --tw-backdrop-blur: blur(var(--blur-xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -2215,6 +2298,20 @@
       }
     }
   }
+  .hover\:bg-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-700);
+      }
+    }
+  }
+  .hover\:bg-yellow-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-yellow-600);
+      }
+    }
+  }
   .hover\:text-login-200 {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.8.7",
+  "version": "2.9.1",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/confirm/confirmPopup.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { TriangleAlert } from 'lucide-react'
+
+type ConfirmPopupProps = {
+    isOpen: boolean
+    header: string
+    description?: string
+    confirmText?: string
+    cancelText?: string
+    onConfirm: () => void
+    onCancel: () => void
+    variant?: 'danger' | 'warning' | 'default'
+}
+
+export default function ConfirmPopup({
+    isOpen,
+    header,
+    description,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    onConfirm,
+    onCancel,
+    variant = 'default',
+}: ConfirmPopupProps) {
+    if (!isOpen) return null
+
+    const confirmBg =
+        variant === 'danger'
+            ? 'bg-red-700/80 outline-red-700 hover:bg-red-700'
+            : variant === 'warning'
+                ? 'bg-yellow-600/80 outline-yellow-600 hover:bg-yellow-600'
+                : 'bg-login/70 outline-login hover:bg-login/90'
+
+    return (
+        <div
+            role='dialog'
+            aria-modal='true'
+            aria-labelledby='confirm-popup-header'
+            className='fixed inset-0 z-50 flex items-center justify-center'
+            onClick={onCancel}
+        >
+            <div className='absolute inset-0 bg-black/60 backdrop-blur-sm' />
+
+            <div
+                className='
+                    relative z-10 w-full max-w-md mx-4
+                    bg-login-800 border border-login-500/50 rounded-xl
+                    shadow-2xl p-6 flex flex-col gap-4
+                '
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className='flex items-center gap-3'>
+                    {variant !== 'default' && (
+                        <TriangleAlert
+                            className={`w-6 h-6 shrink-0 ${variant === 'danger' ? 'stroke-red-400' : 'stroke-yellow-400'}`}
+                        />
+                    )}
+                    <h2
+                        id='confirm-popup-header'
+                        className='text-login-50 text-lg font-bold leading-snug'
+                    >
+                        {header}
+                    </h2>
+                </div>
+
+                {description && (
+                    <p className='text-login-100 text-sm leading-relaxed'>
+                        {description}
+                    </p>
+                )}
+
+                <div className='flex justify-end gap-3 mt-1'>
+                    <button
+                        type='button'
+                        onClick={onCancel}
+                        className='
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium
+                            bg-login-500/60 text-login-50 outline outline-login-500/60
+                            hover:bg-login-500/90 focus:outline-none select-none
+                            transition-colors duration-150
+                        '
+                    >
+                        {cancelText}
+                    </button>
+
+                    <button
+                        type='button'
+                        onClick={onConfirm}
+                        className={`
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-bold
+                            text-white outline focus:outline-none select-none
+                            transition-colors duration-150
+                            ${confirmBg}
+                        `}
+                    >
+                        {confirmText}
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/index.ts

@@ -36,4 +36,7 @@ export { default as Toaster, toast } from './toast/toaster'
 export { default as Button } from './buttons/button'
 
 // Alert
-export { default as Alert } from './alert/alert'
+export { default as Alert } from './alert/alert'
+
+// Confirm
+export { default as ConfirmPopup } from './confirm/confirmPopup'

package/src/components/navbar/navbar.tsx

@@ -24,8 +24,9 @@ export type NavbarProps = {
     theme?: string
     disableThemeToggle?: boolean
     token?: string | null
-    disableAuthButton?: boolean
-    profileURL?: string
+    profilePath?: string
+    loginPath: string
+    logoutPath: string
     className?: string
     innerClassName?: string
     children: React.ReactNode
@@ -37,8 +38,9 @@ export default function Navbar({
     disableLanguageToggle,
     disableThemeToggle,
     token,
-    disableAuthButton,
-    profileURL,
+    profilePath,
+    loginPath,
+    logoutPath,
     className,
     innerClassName,
     children,
@@ -69,9 +71,22 @@ export default function Navbar({
 
                         {/* Controls */}
                         <nav className='flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit'>
-                            {!disableThemeToggle && <ThemeToggle />}
-                            {!disableLanguageToggle && <LanguageToggle language={lang} />}
-                            {!disableAuthButton && <AuthButton profileURL={profileURL} token={token} />}
+                            {!disableThemeToggle &&
+                                <ThemeToggle />
+                            }
+                            {!disableLanguageToggle &&
+                                <LanguageToggle
+                                    language={lang}
+                                />
+                            }
+                            {!loginPath && !logoutPath &&
+                                <AuthButton
+                                    profilePath={profilePath}
+                                    token={token}
+                                    loginPath={loginPath}
+                                    logoutPath={logoutPath}
+                                />
+                            }
                         </nav>
 
                         {/* Mobile Menu Button */}
@@ -111,26 +126,35 @@ export default function Navbar({
     )
 }
 
-function AuthButton({ profileURL, token }: { profileURL?: string, token?: string | null }) {
+type AuthButtonProps = {
+    profilePath?: string
+    logoutPath: string
+    loginPath: string
+    token?: string | null
+}
+
+function AuthButton({ profilePath, logoutPath, loginPath, token }: AuthButtonProps) {
 
     return (
         <div className='rounded-[0.3rem] hover:bg-login-300/20 h-12 w-12'>
             {token ? (
                 <>
-                    <Link
-                        href='/api/logout'
-                        prefetch={false}
-                        onClick={(e) => {
-                            e.preventDefault()
-                            window.location.href = '/api/logout'
-                        }}
-                        className='grid items-center justify-center h-full w-full'
-                    >
-                        <LogOut size={24} />
-                    </Link>
-                    {profileURL &&
+                    {logoutPath &&
+                        <Link
+                            href={logoutPath}
+                            prefetch={false}
+                            onClick={(e) => {
+                                e.preventDefault()
+                                window.location.href = logoutPath
+                            }}
+                            className='grid items-center justify-center h-full w-full'
+                        >
+                            <LogOut size={24} />
+                        </Link>
+                    }
+                    {profilePath &&
                         <Link
-                            href={profileURL}
+                            href={profilePath}
                             className='grid items-center justify-center h-full w-full'
                         >
                             <User size={24} />
@@ -139,7 +163,7 @@ function AuthButton({ profileURL, token }: { profileURL?: string, token?: string
                 </>
             ) : (
                 <Link
-                    href='/api/login'
+                    href={loginPath}
                     className='grid items-center justify-center h-full w-full'
                 >
                     <User size={24} />

package/src/types/components.d.ts

@@ -45,4 +45,16 @@ declare module 'uibee/components' {
     }
     export default function LanguageToggle(props: { lang: Language }): JSX.Element;
     export default function ThemeSwitch(props: { className?: string }): JSX.Element;
+
+    export interface ConfirmPopupProps {
+        isOpen: boolean
+        header: string
+        description?: string
+        confirmText?: string
+        cancelText?: string
+        onConfirm: () => void
+        onCancel: () => void
+        variant?: 'danger' | 'warning' | 'default'
+    }
+    export function ConfirmPopup(props: ConfirmPopupProps): JSX.Element | null;
 }