uibee 2.3.1 → 2.3.2

package/dist/globals.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -359,6 +359,16 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .highlighted-section {
+    line-height: 1.8rem;
+    border-left: .3rem solid var(--color-login);
+    max-width: 50rem;
+    margin-top: 1.2rem;
+    margin-bottom: 1.2rem;
+    padding: .5rem 0 .5rem 1rem;
+    font-size: 1.2rem;
+    font-weight: 500;
+  }
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }

package/dist/src/components/container/highlight.d.ts

@@ -0,0 +1,4 @@
+export default function Highlight({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/container/highlight.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Highlight({ children, className }) {
+    return _jsx("div", { className: `highlighted-section ${className ?? ''}`, children: children });
+}

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

@@ -10,7 +10,8 @@ export { default as LanguageToggle } from './toggle/language';
 export { default as Navbar } from './navbar/navbar';
 export { default as NavItem } from './navbar/navbarItem';
 export { default as NavDropdown } from './navbar/navbarDropdown';
+export { default as PageContainer } from './container/page';
+export { default as Highlight } from './container/highlight';
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, addToast } from './toast/toaster';
-export { default as PageContainer } from './container/page';

package/dist/src/components/index.js

@@ -14,8 +14,10 @@ export { default as LanguageToggle } from './toggle/language';
 export { default as Navbar } from './navbar/navbar';
 export { default as NavItem } from './navbar/navbarItem';
 export { default as NavDropdown } from './navbar/navbarDropdown';
+// Containers
+export { default as PageContainer } from './container/page';
+export { default as Highlight } from './container/highlight';
 // Other components
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, addToast } from './toast/toaster';
-export { default as PageContainer } from './container/page';

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Language } from 'uibee/components';
 export type NavbarProps = {
-    lang: Language;
+    lang?: Language;
     disableLanguageToggle?: boolean;
     onlyLogo?: boolean;
-    theme: string;
+    theme?: string;
     disableThemeToggle?: boolean;
-    token: string | null;
+    token?: string | null;
     disableAuthButton?: boolean;
+    profileURL?: string;
     children: React.ReactNode;
 };
-export default function Navbar({ lang, onlyLogo, token, children, disableLanguageToggle, disableThemeToggle, disableAuthButton }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export default function Navbar({ lang, onlyLogo, token, children, disableLanguageToggle, disableThemeToggle, disableAuthButton, profileURL }: NavbarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,9 +11,9 @@ function hamburgerStyle(isOpen, isSecond) {
         ? `top-6 ${isSecond ? 'rotate-45' : '-rotate-45'}`
         : isSecond ? 'top-7' : 'top-4'}`;
 }
-export default function Navbar({ lang, onlyLogo, token, children, disableLanguageToggle, disableThemeToggle, disableAuthButton }) {
+export default function Navbar({ lang, onlyLogo, token, children, disableLanguageToggle, disableThemeToggle, disableAuthButton, profileURL }) {
     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 })] }), _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`, 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
                             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,11 +21,19 @@ export default function Navbar({ lang, onlyLogo, token, children, disableLanguag
                                     transitionDelay: isMobileMenuOpen ? `${index * 80}ms` : '0ms'
                                 }, children: child }, index))) })] }))] }) }));
 }
-function AuthButton({ token }) {
-    return (_jsx("div", { className: 'rounded-[0.3rem] hover:bg-[#6464641a] h-12 w-12', children: token ? (_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 }) })) : (_jsx(Link, { href: '/api/login', className: 'grid items-center justify-center h-full w-full', children: _jsx("div", { className: `relative w-[30px] h-5
+function AuthButton({ token, profileURL }) {
+    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: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:rounded-full before:bg-transparent

package/dist/src/components/toggle/language.d.ts

@@ -1,4 +1,4 @@
 import { Language } from 'uibee/components';
 export default function LanguageToggle({ language }: {
-    language: Language;
+    language?: Language;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toggle/language.js

@@ -5,7 +5,7 @@ import { getCookie, setCookie } from '../../utils/cookies/cookies';
 import { useRouter } from 'next/navigation';
 import { Globe } from 'lucide-react';
 export default function LanguageToggle({ language }) {
-    const [lang, setLang] = useState(language);
+    const [lang, setLang] = useState(language || 'en');
     const [jump, setJump] = useState(false);
     const router = useRouter();
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -36,23 +36,23 @@
     "react": "^19.1.1"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
-    "@next/eslint-plugin-next": "16.0.0",
-    "@stylistic/eslint-plugin": "^5.4.0",
-    "@tailwindcss/postcss": "^4.1.13",
-    "@types/node": "^24.5.2",
-    "@types/react": "19.2.2",
-    "eslint": "^9.36.0",
-    "glob": "^11.0.3",
+    "@eslint/eslintrc": "^3.3.3",
+    "@next/eslint-plugin-next": "16.0.6",
+    "@stylistic/eslint-plugin": "^5.6.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "19.2.7",
+    "eslint": "^9.39.1",
+    "glob": "^13.0.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0"
   },
   "dependencies": {
-    "lucide-react": "^0.544.0",
-    "next": "16.0.0",
+    "lucide-react": "^0.555.0",
+    "next": "16.0.6",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   }

package/src/components/container/highlight.tsx

@@ -0,0 +1,3 @@
+export default function Highlight({ children, className }: { children: React.ReactNode, className?: string }) {
+    return <div className={`highlighted-section ${className ?? ''}`}>{children}</div>
+}

package/src/components/index.ts

@@ -18,8 +18,11 @@ export { default as Navbar } from './navbar/navbar'
 export { default as NavItem } from './navbar/navbarItem'
 export { default as NavDropdown } from './navbar/navbarDropdown'
 
+// Containers
+export { default as PageContainer} from './container/page'
+export { default as Highlight } from './container/highlight'
+
 // Other components
 export { default as VersionTag } from './version/version'
 export { default as LoginPage } from './login/loginPage'
 export { default as Toaster, addToast } from './toast/toaster'
-export { default as PageContainer} from './container/page'

package/src/components/navbar/navbar.tsx

@@ -18,13 +18,14 @@ function hamburgerStyle (isOpen: boolean, isSecond?: boolean) {
 }
 
 export type NavbarProps = {
-    lang: Language
+    lang?: Language
     disableLanguageToggle?: boolean
     onlyLogo?: boolean
-    theme: string
+    theme?: string
     disableThemeToggle?: boolean
-    token: string | null
+    token?: string | null
     disableAuthButton?: boolean
+    profileURL?: string
     children: React.ReactNode
 }
 
@@ -35,7 +36,8 @@ export default function Navbar({
     children,
     disableLanguageToggle,
     disableThemeToggle,
-    disableAuthButton
+    disableAuthButton,
+    profileURL
 }: NavbarProps) {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
@@ -65,7 +67,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} />}
+                            {!disableAuthButton && <AuthButton token={token} profileURL={profileURL} />}
                         </nav>
 
                         {/* Mobile Menu Button */}
@@ -105,21 +107,39 @@ export default function Navbar({
     )
 }
 
-function AuthButton({ token }: { token: string | null }) {
+function AuthButton({ token, profileURL }: { token?: string | null, profileURL?: string }) {
     return (
         <div className='rounded-[0.3rem] hover:bg-[#6464641a] 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>
+                <>
+                    <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 &&
+                        <Link
+                            href={profileURL}
+                            className='grid items-center justify-center h-full w-full'
+                        >
+                            <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: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
+                            `}
+                            />
+                        </Link>
+                    }
+                </>
             ) : (
                 <Link
                     href='/api/login'

package/src/components/toggle/language.tsx

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation'
 import { Language } from 'uibee/components'
 import { Globe } from 'lucide-react'
 
-export default function LanguageToggle({language}: {language: Language}) {
-    const [lang, setLang] = useState<Language>(language)
+export default function LanguageToggle({language}: {language?: Language}) {
+    const [lang, setLang] = useState<Language>(language || 'en')
     const [jump, setJump] = useState(false)
 
     const router = useRouter()