uibee 2.16.10 → 2.16.12

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Bubble({ href, className, fill, stroke, text }) {
-    return (_jsxs("a", { href: href, className: className, children: [_jsxs("svg", { viewBox: '0 0 24 12', className: 'absolute -top-[0.68rem] right-6 h-3 w-6', "aria-hidden": 'true', children: [_jsx("path", { d: 'M12 0 24 12H0Z', fill: fill, stroke: stroke, strokeWidth: '1.5', strokeLinejoin: 'round' }), _jsx("path", { d: 'M12 0 24 12H0Z', fill: fill })] }), _jsx("span", { children: text })] }));
+    return (_jsxs("a", { href: href, className: className, children: [_jsxs("svg", { viewBox: '0 0 24 12', className: 'absolute -top-[0.65rem] right-6 h-3 w-6', "aria-hidden": 'true', children: [_jsx("path", { d: 'M12 0 24 12H0Z', fill: fill, stroke: stroke, strokeWidth: '1.5', strokeLinejoin: 'round' }), _jsx("path", { d: 'M12 0 24 12H0Z', fill: fill })] }), _jsx("span", { children: text })] }));
 }

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

@@ -9,12 +9,12 @@ type BubbleContent = {
     stroke: string;
 };
 export type NavbarProps = {
+    children: React.ReactNode;
     bubble?: {
         lang?: BubbleContent;
         theme?: BubbleContent;
         login?: BubbleContent;
     };
-    children: React.ReactNode;
     className?: string;
     disableLanguageToggle?: boolean;
     disableThemeToggle?: boolean;
@@ -27,5 +27,5 @@ export type NavbarProps = {
     theme?: string;
     token?: string | null;
 };
-export default function Navbar({ lang, onlyLogo, disableLanguageToggle, disableThemeToggle, token, profilePath, loginPath, logoutPath, className, innerClassName, children, bubble }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export default function Navbar({ children, bubble, className, disableLanguageToggle, disableThemeToggle, innerClassName, lang, loginPath, logoutPath, onlyLogo, profilePath, token }: NavbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,13 +12,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, profilePath, loginPath, logoutPath, className, innerClassName, children, bubble }) {
+export default function Navbar({ children, bubble, className, disableLanguageToggle, disableThemeToggle, innerClassName, lang, loginPath, logoutPath, onlyLogo, profilePath, token }) {
     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, {}), bubble?.theme?.condition && _jsx(Bubble, { href: bubble.theme.href, className: bubble.theme.className, text: bubble.theme.text, fill: bubble.theme.fill, stroke: bubble.theme.stroke }), !disableLanguageToggle &&
-                                    _jsx(LanguageToggle, { language: lang }), bubble?.lang?.condition && _jsx(Bubble, { href: bubble.lang.href, className: bubble.lang.className, text: bubble.lang.text, fill: bubble.lang.fill, stroke: bubble.lang.stroke }), loginPath && logoutPath &&
-                                    _jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath }), bubble?.login?.condition && _jsx(Bubble, { href: bubble.login.href, className: bubble.login.className, text: bubble.login.text, fill: bubble.login.fill, stroke: bubble.login.stroke })] }), _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: [_jsxs("div", { className: 'grid gap-2', children: [!disableThemeToggle &&
+                                            _jsx(ThemeToggle, {}), bubble?.theme?.condition && _jsx(Bubble, { href: bubble.theme.href, className: bubble.theme.className, text: bubble.theme.text, fill: bubble.theme.fill, stroke: bubble.theme.stroke })] }), _jsxs("div", { className: 'grid gap-2', children: [!disableLanguageToggle &&
+                                            _jsx(LanguageToggle, { language: lang }), bubble?.lang?.condition && _jsx(Bubble, { href: bubble.lang.href, className: bubble.lang.className, text: bubble.lang.text, fill: bubble.lang.fill, stroke: bubble.lang.stroke })] }), _jsxs("div", { className: 'grid gap-2', children: [loginPath && logoutPath &&
+                                            _jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath }), bubble?.login?.condition && _jsx(Bubble, { href: bubble.login.href, className: bubble.login.className, text: bubble.login.text, fill: bubble.login.fill, stroke: bubble.login.stroke })] })] }), _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'

package/dist/src/globals.css

@@ -333,8 +333,8 @@
   .end {
     inset-inline-end: var(--spacing);
   }
-  .-top-\[0\.68rem\] {
-    top: calc(0.68rem * -1);
+  .-top-\[0\.65rem\] {
+    top: calc(0.65rem * -1);
   }
   .top-0 {
     top: calc(var(--spacing) * 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.16.10",
+  "version": "2.16.12",
   "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/bubble.tsx

@@ -14,7 +14,7 @@ export default function Bubble({ href, className, fill, stroke, text }: BubbleTe
         >
             <svg
                 viewBox='0 0 24 12'
-                className='absolute -top-[0.68rem] right-6 h-3 w-6'
+                className='absolute -top-[0.65rem] right-6 h-3 w-6'
                 aria-hidden='true'
             >
                 <path

package/src/components/navbar/navbar.tsx

@@ -27,12 +27,12 @@ function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
 }
 
 export type NavbarProps = {
+    children: React.ReactNode
     bubble?: {
         lang?: BubbleContent
         theme?: BubbleContent
         login?: BubbleContent
     }
-    children: React.ReactNode
     className?: string
     disableLanguageToggle?: boolean
     disableThemeToggle?: boolean
@@ -47,18 +47,18 @@ export type NavbarProps = {
 }
 
 export default function Navbar({
-    lang,
-    onlyLogo,
+    children,
+    bubble,
+    className,
     disableLanguageToggle,
     disableThemeToggle,
-    token,
-    profilePath,
+    innerClassName,
+    lang,
     loginPath,
     logoutPath,
-    className,
-    innerClassName,
-    children,
-    bubble
+    onlyLogo,
+    profilePath,
+    token
 }: NavbarProps) {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
@@ -86,43 +86,49 @@ export default function Navbar({
 
                         {/* Controls */}
                         <nav className='flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit'>
-                            {!disableThemeToggle &&
-                                <ThemeToggle />
-                            }
-                            {bubble?.theme?.condition && <Bubble
-                                href={bubble.theme.href}
-                                className={bubble.theme.className}
-                                text={bubble.theme.text}
-                                fill={bubble.theme.fill}
-                                stroke={bubble.theme.stroke}
-                            />}
-                            {!disableLanguageToggle &&
-                                <LanguageToggle
-                                    language={lang}
-                                />
-                            }
-                            {bubble?.lang?.condition && <Bubble
-                                href={bubble.lang.href}
-                                className={bubble.lang.className}
-                                text={bubble.lang.text}
-                                fill={bubble.lang.fill}
-                                stroke={bubble.lang.stroke}
-                            />}
-                            {loginPath && logoutPath &&
-                                <AuthButton
-                                    profilePath={profilePath}
-                                    token={token}
-                                    loginPath={loginPath}
-                                    logoutPath={logoutPath}
-                                />
-                            }
-                            {bubble?.login?.condition && <Bubble
-                                href={bubble.login.href}
-                                className={bubble.login.className}
-                                text={bubble.login.text}
-                                fill={bubble.login.fill}
-                                stroke={bubble.login.stroke}
-                            />}
+                            <div className='grid gap-2'>
+                                {!disableThemeToggle &&
+                                    <ThemeToggle />
+                                }
+                                {bubble?.theme?.condition && <Bubble
+                                    href={bubble.theme.href}
+                                    className={bubble.theme.className}
+                                    text={bubble.theme.text}
+                                    fill={bubble.theme.fill}
+                                    stroke={bubble.theme.stroke}
+                                />}
+                            </div>
+                            <div className='grid gap-2'>
+                                {!disableLanguageToggle &&
+                                    <LanguageToggle
+                                        language={lang}
+                                    />
+                                }
+                                {bubble?.lang?.condition && <Bubble
+                                    href={bubble.lang.href}
+                                    className={bubble.lang.className}
+                                    text={bubble.lang.text}
+                                    fill={bubble.lang.fill}
+                                    stroke={bubble.lang.stroke}
+                                />}
+                            </div>
+                            <div className='grid gap-2'>
+                                {loginPath && logoutPath &&
+                                    <AuthButton
+                                        profilePath={profilePath}
+                                        token={token}
+                                        loginPath={loginPath}
+                                        logoutPath={logoutPath}
+                                    />
+                                }
+                                {bubble?.login?.condition && <Bubble
+                                    href={bubble.login.href}
+                                    className={bubble.login.className}
+                                    text={bubble.login.text}
+                                    fill={bubble.login.fill}
+                                    stroke={bubble.login.stroke}
+                                />}
+                            </div>
                         </nav>
 
                         {/* Mobile Menu Button */}