uibee 2.16.26 → 2.16.29

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

@@ -4,5 +4,5 @@ export default function Bubble({ bubble }) {
     if (bubble.hide) {
         return null;
     }
-    return (_jsxs("a", { href: bubble.href, className: `relative ${bubble.className}`, children: [_jsxs("svg", { viewBox: '0 0 24 12', className: 'absolute -top-3 h-3 w-6', "aria-hidden": 'true', children: [_jsx("path", { d: 'M12 0 24 12H0Z', fill: bubble.fill, stroke: bubble.stroke, strokeWidth: '1.5', strokeLinejoin: 'round' }), _jsx("path", { d: 'M12 0 24 12H0Z', fill: bubble.fill })] }), _jsxs("div", { className: 'flex justify-between', children: [_jsx("span", { children: bubble.text }), _jsx(X, { onClick: bubble.handleHide, className: bubble.x })] })] }));
+    return (_jsxs("a", { href: bubble.href, className: `absolute top-5 min-w-10 ${bubble.className}`, children: [_jsxs("svg", { viewBox: '0 0 24 12', className: 'absolute -top-3 h-3 w-6', "aria-hidden": 'true', children: [_jsx("path", { d: 'M12 0 24 12H0Z', fill: bubble.fill, stroke: bubble.stroke, strokeWidth: '1.5', strokeLinejoin: 'round' }), _jsx("path", { d: 'M12 0 24 12H0Z', fill: bubble.fill })] }), _jsxs("div", { className: 'flex justify-between', children: [_jsx("span", { children: bubble.text }), _jsx(X, { onClick: bubble.handleHide, className: bubble.x })] })] }));
 }

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

@@ -1,16 +1,5 @@
 import React from 'react';
 import { Language } from 'uibee/components';
-type BubbleContent = {
-    condition: boolean;
-    href: string;
-    className: string;
-    text: string;
-    fill: string;
-    stroke: string;
-    x: string;
-    hide: boolean;
-    handleHide: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
-};
 export type NavbarProps = {
     children: React.ReactNode;
     bubble?: {
@@ -30,5 +19,16 @@ export type NavbarProps = {
     theme?: string;
     token?: string | null;
 };
+type BubbleContent = {
+    condition: boolean;
+    href: string;
+    className: string;
+    text: string;
+    fill: string;
+    stroke: string;
+    x: string;
+    hide: boolean;
+    handleHide: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+};
 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

@@ -7,17 +7,12 @@ import LanguageToggle from '../toggle/language';
 import ThemeToggle from '../toggle/theme';
 import { LogOut, User } from 'lucide-react';
 import Bubble from './bubble';
-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({ 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: [_jsxs("div", { className: 'grid gap-2', children: [!disableThemeToggle &&
-                                            _jsx(ThemeToggle, {}), bubble?.theme?.condition && _jsx(Bubble, { bubble: bubble.theme })] }), _jsxs("div", { className: 'grid gap-2', children: [!disableLanguageToggle &&
-                                            _jsx(LanguageToggle, { language: lang }), bubble?.lang?.condition && _jsx(Bubble, { bubble: bubble.lang })] }), _jsxs("div", { className: 'grid gap-2', children: [loginPath && logoutPath &&
+            `, 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: 'relative grid gap-2', children: [!disableThemeToggle &&
+                                            _jsx(ThemeToggle, {}), bubble?.theme?.condition && _jsx(Bubble, { bubble: bubble.theme })] }), _jsxs("div", { className: 'relative grid gap-2', children: [!disableLanguageToggle &&
+                                            _jsx(LanguageToggle, { language: lang }), bubble?.lang?.condition && _jsx(Bubble, { bubble: bubble.lang })] }), _jsxs("div", { className: 'relative grid gap-2', children: [loginPath && logoutPath &&
                                             _jsx(AuthButton, { profilePath: profilePath, token: token, loginPath: loginPath, logoutPath: logoutPath }), bubble?.login?.condition && _jsx(Bubble, { bubble: bubble.login })] })] }), _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
@@ -34,3 +29,8 @@ function AuthButton({ profilePath, logoutPath, loginPath, token }) {
                         }, 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 }) })) }));
 }
+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'}`;
+}

package/dist/src/globals.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -348,6 +348,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-5 {
+    top: calc(var(--spacing) * 5);
+  }
   .top-6 {
     top: calc(var(--spacing) * 6);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.16.26",
+  "version": "2.16.29",
   "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

@@ -19,7 +19,7 @@ export default function Bubble({ bubble }: { bubble: BubbleText }) {
     return (
         <a
             href={bubble.href}
-            className={`relative ${bubble.className}`}
+            className={`absolute top-5 min-w-10 ${bubble.className}`}
         >
             <svg
                 viewBox='0 0 24 12'

package/src/components/navbar/navbar.tsx

@@ -9,26 +9,6 @@ import { Language } from 'uibee/components'
 import { LogOut, User } from 'lucide-react'
 import Bubble from './bubble'
 
-type BubbleContent = {
-    condition: boolean
-    href: string
-    className: string
-    text: string
-    fill: string
-    stroke: string
-    x: string
-    hide: boolean
-    handleHide: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void
-}
-
-function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
-    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 type NavbarProps = {
     children: React.ReactNode
     bubble?: {
@@ -49,6 +29,25 @@ export type NavbarProps = {
     token?: string | null
 }
 
+type BubbleContent = {
+    condition: boolean
+    href: string
+    className: string
+    text: string
+    fill: string
+    stroke: string
+    x: string
+    hide: boolean
+    handleHide: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void
+}
+
+type AuthButtonProps = {
+    profilePath?: string
+    logoutPath: string
+    loginPath: string
+    token?: string | null
+}
+
 export default function Navbar({
     children,
     bubble,
@@ -89,13 +88,13 @@ export default function Navbar({
 
                         {/* Controls */}
                         <nav className='flex w-[calc(100vw-8rem)] justify-end h-12 800px:w-fit'>
-                            <div className='grid gap-2'>
+                            <div className='relative grid gap-2'>
                                 {!disableThemeToggle &&
                                     <ThemeToggle />
                                 }
                                 {bubble?.theme?.condition && <Bubble bubble={bubble.theme} />}
                             </div>
-                            <div className='grid gap-2'>
+                            <div className='relative grid gap-2'>
                                 {!disableLanguageToggle &&
                                     <LanguageToggle
                                         language={lang}
@@ -103,7 +102,7 @@ export default function Navbar({
                                 }
                                 {bubble?.lang?.condition && <Bubble bubble={bubble.lang} />}
                             </div>
-                            <div className='grid gap-2'>
+                            <div className='relative grid gap-2'>
                                 {loginPath && logoutPath &&
                                     <AuthButton
                                         profilePath={profilePath}
@@ -153,13 +152,6 @@ export default function Navbar({
     )
 }
 
-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'>
@@ -198,3 +190,11 @@ function AuthButton({ profilePath, logoutPath, loginPath, token }: AuthButtonPro
         </div>
     )
 }
+
+function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
+    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'
+    }`
+}