uibee 2.3.2 → 2.3.4

package/dist/globals.css

@@ -522,11 +522,11 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-  .max-w-\[35rem\] {
-    max-width: 35rem;
+  .max-w-140 {
+    max-width: calc(var(--spacing) * 140);
   }
-  .max-w-\[50rem\] {
-    max-width: 50rem;
+  .max-w-200 {
+    max-width: calc(var(--spacing) * 200);
   }
   .max-w-md {
     max-width: var(--container-md);
@@ -543,6 +543,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .origin-\[0\] {
     transform-origin: 0;
   }
@@ -1051,6 +1054,10 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
+  .duration-600 {
+    --tw-duration: 600ms;
+    transition-duration: 600ms;
+  }
   .duration-1000 {
     --tw-duration: 1000ms;
     transition-duration: 1000ms;
@@ -1059,10 +1066,6 @@
     --tw-duration: 400ms;
     transition-duration: 400ms;
   }
-  .duration-\[600ms\] {
-    --tw-duration: 600ms;
-    transition-duration: 600ms;
-  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1221,16 +1224,16 @@
       left: calc(1/2 * 100%);
     }
   }
-  .before\:h-\[10px\] {
+  .before\:h-2\.5 {
     &::before {
       content: var(--tw-content);
-      height: 10px;
+      height: calc(var(--spacing) * 2.5);
     }
   }
-  .before\:w-\[10px\] {
+  .before\:w-2\.5 {
     &::before {
       content: var(--tw-content);
-      width: 10px;
+      width: calc(var(--spacing) * 2.5);
     }
   }
   .before\:-translate-x-1\/2 {

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

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

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

@@ -5,15 +5,17 @@ import Link from 'next/link';
 import LogoSmall from '../logo/logoSmall';
 import LanguageToggle from '../toggle/language';
 import ThemeToggle from '../toggle/theme';
+import { getCookie } from 'uibee/utils';
 import { LogOut } from 'lucide-react';
 function hamburgerStyle(isOpen, isSecond) {
     return `bg-login-50 h-0.5 absolute w-8 transition-all duration-[400ms] left-2 ${isOpen
         ? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
         : isSecond ? 'top-7' : 'top-4'}`;
 }
-export default function Navbar({ lang, onlyLogo, token, children, disableLanguageToggle, disableThemeToggle, disableAuthButton, profileURL }) {
+export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, disableAuthButton, profileURL, 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`, 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' : ''}`, 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-[50rem]', 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, { token: token, profileURL: profileURL })] }), _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-[35rem] mx-auto left-0 right-0 800px:hidden
+    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 })] }), _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'
@@ -21,21 +23,22 @@ export default function Navbar({ lang, onlyLogo, token, children, disableLanguag
                                     transitionDelay: isMobileMenuOpen ? `${index * 80}ms` : '0ms'
                                 }, children: child }, index))) })] }))] }) }));
 }
-function AuthButton({ token, profileURL }) {
+function AuthButton({ profileURL }) {
+    const token = getCookie('access_token');
     return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-[#6464641a] 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("div", { className: `relative w-[30px] h-5
                                 before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
-                                before:w-[10px] before:h-[10px] before:border-2 before:border-login-50
+                                before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
                                 before:rounded-full before:bg-transparent
                                 after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
                                 after:w-[18px] after:h-2 after:border-2 after:border-login-50
                                 after:rounded-t-[22px] after:border-b-0 after:bg-transparent
                             ` }) })] })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx("div", { className: `relative w-[30px] h-5
                         before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
-                        before:w-[10px] before:h-[10px] before:border-2 before:border-login-50
+                        before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
                         before:rounded-full before:bg-transparent
                         after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
                         after:w-[18px] after:h-2 after:border-2 after:border-login-50

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

@@ -13,8 +13,8 @@ export default function NavDropdown({ children, title }) {
                             e.stopPropagation();
                             setIsMobileDropdownOpen(!isMobileDropdownOpen);
                         }, children: _jsxs("li", { className: `list-none no-underline text-2xl leading-6 overflow-hidden
-                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-[600ms]
-                        flex items-center gap-2 opacity-100 min-h-16 py-5 `, children: [_jsx("span", { children: title }), _jsx(ChevronDown, { className: `w-6 h-6 transition-transform duration-400 flex-shrink-0 
+                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-600
+                        flex items-center gap-2 opacity-100 min-h-16 py-5 `, children: [_jsx("span", { children: title }), _jsx(ChevronDown, { className: `w-6 h-6 transition-transform duration-400 shrink-0 
                             ${isMobileDropdownOpen ? 'rotate-180' : ''}` })] }) }), _jsx("div", { className: `list-none no-underline text-xl px-6 ${isMobileDropdownOpen ? 'pb-4' : ''}`, children: React.Children.map(children, (child, index) => (_jsx("div", { className: `leading-6 transition-all duration-500 group dropdown
                             ${isMobileDropdownOpen ? 'h-11 opacity-100' : 'h-0 opacity-0'}
                         `, children: child }, index))) })] })] }));

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

@@ -7,6 +7,6 @@ export default function NavItem({ href, children, external = false, target, rel,
     const linkProps = { href, target, rel, title };
     return (_jsxs(_Fragment, { children: [_jsx(Link, { ...linkProps, className: 'hidden 800px:flex', children: _jsxs("li", { className: `${commonStyling} text-base leading-4 p-3 font-bold transition-colors link-corner-hover
                     group-[.dropdown]:p-2.5 group-[.dropdown]:pr-3 group-[.dropdown]:pl-1`, children: [icon, children, external && _jsx(ArrowUpRight, { className: 'w-6 h-6 stroke-login' })] }) }), _jsx(Link, { ...linkProps, className: '800px:hidden', children: _jsxs("li", { className: `${commonStyling} text-2xl leading-6 overflow-hidden w-auto pl-4 rounded-[0.3rem] transition-all 
-                    duration-[600ms] opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
+                    duration-600 opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
                     group-[.dropdown]:py-2.5 group-[.dropdown]:pl-4`, children: [children, external && _jsx(ArrowUpRight, { className: 'w-6 h-6 stroke-login' })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "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/navbar/navbar.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import LogoSmall from '@components/logo/logoSmall'
 import LanguageToggle from '@components/toggle/language'
 import ThemeToggle from '@components/toggle/theme'
+import { getCookie } from 'uibee/utils'
 import { Language } from 'uibee/components'
 import { LogOut } from 'lucide-react'
 
@@ -26,26 +27,29 @@ export type NavbarProps = {
     token?: string | null
     disableAuthButton?: boolean
     profileURL?: string
+    className?: string
+    innerClassName?: string
     children: React.ReactNode
 }
 
 export default function Navbar({
     lang,
     onlyLogo,
-    token,
-    children,
     disableLanguageToggle,
     disableThemeToggle,
     disableAuthButton,
-    profileURL
+    profileURL,
+    className,
+    innerClassName,
+    children,
 }: NavbarProps) {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
     return (
-        <div className={`${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full`}>
+        <div className={`${isMobileMenuOpen ? 'bg-[#181818f0]' : 'bg-[#18181899]'} backdrop-blur-xl fixed top-0 z-900 w-full ${className}`}>
             <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' : ''
-            }`}>
+                isMobileMenuOpen ? 'h-screen bg-login-900/20 800px:h-20' : ''} ${innerClassName}
+            `}>
                 {/* Logo */}
                 <div className='block h-12 p-1 800px:p-0'>
                     <Link
@@ -59,7 +63,7 @@ export default function Navbar({
                 {onlyLogo ? null : (
                     <>
                         {/* Desktop Navigation */}
-                        <nav className='hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-[50rem]'>
+                        <nav className='hidden 800px:flex 800px:justify-between 800px:items-center 800px:w-fill max-w-200'>
                             {children}
                         </nav>
 
@@ -67,7 +71,7 @@ export default function Navbar({
                         <nav className='flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit'>
                             {!disableThemeToggle && <ThemeToggle />}
                             {!disableLanguageToggle && <LanguageToggle language={lang} />}
-                            {!disableAuthButton && <AuthButton token={token} profileURL={profileURL} />}
+                            {!disableAuthButton && <AuthButton profileURL={profileURL} />}
                         </nav>
 
                         {/* Mobile Menu Button */}
@@ -80,7 +84,7 @@ export default function Navbar({
                         </button>
 
                         {/* Mobile Navigation */}
-                        <nav className={`fixed top-16 w-[calc(100%-2rem)] max-w-[35rem] mx-auto left-0 right-0 800px:hidden
+                        <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)}>
@@ -107,7 +111,9 @@ export default function Navbar({
     )
 }
 
-function AuthButton({ token, profileURL }: { token?: string | null, profileURL?: string }) {
+function AuthButton({ profileURL }: { profileURL?: string }) {
+    const token = getCookie('access_token')
+
     return (
         <div className='rounded-[0.3rem] hover:bg-[#6464641a] h-12 w-12'>
             {token ? (
@@ -130,7 +136,7 @@ function AuthButton({ token, profileURL }: { token?: string | null, profileURL?:
                         >
                             <div className={`relative w-[30px] h-5
                                 before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
-                                before:w-[10px] before:h-[10px] before:border-2 before:border-login-50
+                                before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
                                 before:rounded-full before:bg-transparent
                                 after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
                                 after:w-[18px] after:h-2 after:border-2 after:border-login-50
@@ -147,7 +153,7 @@ function AuthButton({ token, profileURL }: { token?: string | null, profileURL?:
                 >
                     <div className={`relative w-[30px] h-5
                         before:content-[""] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2
-                        before:w-[10px] before:h-[10px] before:border-2 before:border-login-50
+                        before:w-2.5 before:h-2.5 before:border-2 before:border-login-50
                         before:rounded-full before:bg-transparent
                         after:content-[""] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2
                         after:w-[18px] after:h-2 after:border-2 after:border-login-50

package/src/components/navbar/navbarDropdown.tsx

@@ -53,11 +53,11 @@ export default function NavDropdown({ children, title }: NavDropdownProps) {
                     }}
                 >
                     <li className={`list-none no-underline text-2xl leading-6 overflow-hidden
-                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-[600ms]
+                        w-full pl-4 pr-4 rounded-[0.3rem] transition-all duration-600
                         flex items-center gap-2 opacity-100 min-h-16 py-5 `}
                     >
                         <span>{title}</span>
-                        <ChevronDown className={`w-6 h-6 transition-transform duration-400 flex-shrink-0 
+                        <ChevronDown className={`w-6 h-6 transition-transform duration-400 shrink-0 
                             ${isMobileDropdownOpen ? 'rotate-180' : ''}`}
                         />
                     </li>

package/src/components/navbar/navbarItem.tsx

@@ -35,7 +35,7 @@ export default function NavItem({ href, children, external = false, target, rel,
             {/* Mobile version */}
             <Link {...linkProps} className='800px:hidden'>
                 <li className={`${commonStyling} text-2xl leading-6 overflow-hidden w-auto pl-4 rounded-[0.3rem] transition-all 
-                    duration-[600ms] opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
+                    duration-600 opacity-100 h-16 py-5 group-[.dropdown]:p-0 group-[.dropdown]:text-lg group-[.dropdown]:h-auto 
                     group-[.dropdown]:py-2.5 group-[.dropdown]:pl-4`
                 }>
                     {children}