uibee 2.4.13 → 2.5.1

package/dist/src/components/buttons/button.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+type ButtonProps = {
+    text: string;
+    className?: string;
+    icon?: string | JSX.Element;
+    path?: string;
+    type?: 'button' | 'submit' | 'reset';
+    color?: 'primary' | 'secondary';
+    onClick?: (_: object) => void;
+    disabled?: boolean;
+};
+export default function Button({ text, className, icon, path, color, type, onClick, disabled }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/buttons/button.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+export default function Button({ text, className, icon, path, color, type, onClick, disabled }) {
+    const bg = color === 'secondary'
+        ? 'bg-login-600/70 outline-login-600 hover:bg-login-600/90'
+        : 'bg-login/70 outline-login hover:bg-login/90';
+    if (!path) {
+        return (_jsxs("button", { type: type || 'button', disabled: disabled, onClick: onClick, "aria-label": text, className: `
+                    ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                    focus:outline-none border-0 outline w-fit ${className}
+                `, children: [_jsx("h1", { className: 'font-bold', children: icon ? icon : '' }), _jsx("h1", { children: text })] }));
+    }
+    if (disabled) {
+        return (_jsxs("div", { className: `
+                    ${bg} cursor-not-allowed px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                `, children: [_jsx("h1", { className: 'font-bold', children: icon ? `${icon}` : '' }), _jsx("h1", { className: '', children: text })] }));
+    }
+    return (_jsxs(Link, { href: path, className: `
+                ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                justify-evenly items-center gap-2 select-none
+            `, children: [_jsx("h1", { className: 'font-bold', children: icon ? `${icon}` : '' }), _jsx("h1", { className: '', children: text })] }));
+}

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

@@ -15,3 +15,4 @@ 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 Button } from './buttons/button';

package/dist/src/components/index.js

@@ -21,3 +21,5 @@ 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';
+// Buttons
+export { default as Button } from './buttons/button';

package/dist/src/components/inputs/label.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function Label({ label, value, required, showRequired, className, color }) {
     return (_jsx("label", { className: 'w-[calc(100%-10px)] truncate pointer-events-none absolute text-sm duration-300 transform z-10 ' +
-            'peer-focus:px-2 peer-focus:top-2 origin-[0] px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
+            'peer-focus:px-2 peer-focus:top-2 origin-left px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
             `${color ? color : 'bg-login-800'} ` +
             `${value ? '-translate-y-5 scale-75 top-2 w-fit '
                 : '-translate-y-1/2 scale-100 top-1/2 '

package/dist/src/components/toast/toaster.js

@@ -72,7 +72,7 @@ export default function Toaster() {
                 top: mainToastPosition ? `${mainToastPosition.top - idx * 8}px` : 'auto',
                 zIndex: 100 - idx,
                 transform: `scale(${1 - idx * 0.05})`,
-            }, children: [_jsx("span", { className: 'flex-shrink-0 w-10 h-10 flex items-center justify-center', children: _jsx(ToastIcon, { type: toast.type }) }), _jsxs("div", { className: 'pr-1 pb-1', children: [_jsx("span", { className: 'font-bold', children: toast.title }), (idx === 0 || isHovered) &&
+            }, children: [_jsx("span", { className: 'shrink-0 w-10 h-10 flex items-center justify-center', children: _jsx(ToastIcon, { type: toast.type }) }), _jsxs("div", { className: 'pr-1 pb-1', children: [_jsx("span", { className: 'font-bold', children: toast.title }), (idx === 0 || isHovered) &&
                             _jsx("span", { className: 'text-sm line-clamp-3', children: toast.description })] })] }, `${toast.id}-${idx}`))) }));
 }
 function ToastIcon({ type }) {

package/dist/src/globals.css

@@ -537,18 +537,15 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .origin-\[0\] {
-    transform-origin: 0;
-  }
   .origin-center {
     transform-origin: center;
   }
+  .origin-left {
+    transform-origin: 0;
+  }
   .translate-x-4 {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -603,6 +600,9 @@
   .animate-jump {
     animation: jump 0.4s 1;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -642,6 +642,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -696,6 +699,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-\[0\.10rem\] {
     border-style: var(--tw-border-style);
     border-width: 0.10rem;
@@ -729,6 +736,12 @@
   .bg-login-600 {
     background-color: var(--color-login-600);
   }
+  .bg-login-600\/70 {
+    background-color: color-mix(in srgb, #212121 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-600) 70%, transparent);
+    }
+  }
   .bg-login-700 {
     background-color: var(--color-login-700);
   }
@@ -750,6 +763,12 @@
       background-color: color-mix(in oklab, var(--color-login-900) 20%, transparent);
     }
   }
+  .bg-login\/70 {
+    background-color: color-mix(in srgb, #fd8738 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1002,6 +1021,16 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .outline-login {
+    outline-color: var(--color-login);
+  }
+  .outline-login-600 {
+    outline-color: var(--color-login-600);
+  }
   .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,);
@@ -1072,6 +1101,10 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .group-\[\.dropdown\]\:h-auto {
     &:is(:where(.group):is(.dropdown) *) {
       height: auto;
@@ -1202,6 +1235,16 @@
       }
     }
   }
+  .hover\:bg-login-600\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #212121 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-600) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login\/80 {
     &:hover {
       @media (hover: hover) {
@@ -1212,6 +1255,16 @@
       }
     }
   }
+  .hover\:bg-login\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fd8738 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-red-800 {
     &:hover {
       @media (hover: hover) {
@@ -1472,6 +1525,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1553,6 +1611,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;
@@ -1567,4 +1626,4 @@
       --tw-content: "";
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.4.13",
+  "version": "2.5.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/buttons/button.tsx

@@ -0,0 +1,74 @@
+import Link from 'next/link'
+import type { JSX } from 'react'
+
+type ButtonProps = {
+    text: string
+    className?: string
+    icon?: string | JSX.Element
+    path?: string
+    type?: 'button' | 'submit' | 'reset'
+    color?: 'primary' | 'secondary'
+    onClick?: (_: object) => void
+    disabled?: boolean
+}
+
+export default function Button({
+    text,
+    className,
+    icon,
+    path,
+    color,
+    type,
+    onClick,
+    disabled
+}: ButtonProps) {
+    const bg = color === 'secondary'
+        ? 'bg-login-600/70 outline-login-600 hover:bg-login-600/90'
+        : 'bg-login/70 outline-login hover:bg-login/90'
+
+    if (!path) {
+        return (
+            <button
+                type={type || 'button'}
+                disabled={disabled}
+                onClick={onClick}
+                aria-label={text}
+                className={`
+                    ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                    focus:outline-none border-0 outline w-fit ${className}
+                `}
+            >
+                <h1 className='font-bold'>{icon ? icon : ''}</h1>
+                <h1>{text}</h1>
+            </button>
+        )
+    }
+
+    if (disabled) {
+        return (
+            <div
+                className={`
+                    ${bg} cursor-not-allowed px-4 rounded-md h-6 flex
+                    justify-evenly items-center gap-2 select-none
+                `}
+            >
+                <h1 className='font-bold'>{icon ? `${icon}` : ''}</h1>
+                <h1 className=''>{text}</h1>
+            </div>
+        )
+    }
+
+    return (
+        <Link
+            href={path}
+            className={`
+                ${bg} cursor-pointer px-4 rounded-md h-6 flex
+                justify-evenly items-center gap-2 select-none
+            `}
+        >
+            <h1 className='font-bold'>{icon ? `${icon}` : ''}</h1>
+            <h1 className=''>{text}</h1>
+        </Link>
+    )
+}

package/src/components/container/highlight.tsx

@@ -1,3 +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

@@ -26,3 +26,6 @@ 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'
+
+// Buttons
+export { default as Button } from './buttons/button'

package/src/components/inputs/label.tsx

@@ -13,7 +13,7 @@ export default function Label({ label, value, required, showRequired, className,
         <label
             className={
                 'w-[calc(100%-10px)] truncate pointer-events-none absolute text-sm duration-300 transform z-10 ' +
-                'peer-focus:px-2 peer-focus:top-2 origin-[0] px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
+                'peer-focus:px-2 peer-focus:top-2 origin-left px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
                 `${color ? color : 'bg-login-800'} ` +
                 `${value ? '-translate-y-5 scale-75 top-2 w-fit '
                     : '-translate-y-1/2 scale-100 top-1/2 '

package/src/components/inputs/select.tsx

@@ -200,5 +200,3 @@ function SelectedOption({ value, selectedOption }: SelectedOptionProps) {
         </div>
     )
 }
-
-

package/src/components/navbar/navbarDropdown.tsx

@@ -84,4 +84,4 @@ export default function NavDropdown({ children, title, className }: NavDropdownP
             </div>
         </>
     )
-}
+}

package/src/components/navbar/navbarItem.tsx

@@ -44,4 +44,4 @@ export default function NavItem({ href, children, external = false, target, rel,
             </Link>
         </>
     )
-}
+}

package/src/components/toast/toaster.tsx

@@ -94,7 +94,7 @@ export default function Toaster() {
                         transform: `scale(${1 - idx * 0.05})`,
                     }}
                 >
-                    <span className='flex-shrink-0 w-10 h-10 flex items-center justify-center'>
+                    <span className='shrink-0 w-10 h-10 flex items-center justify-center'>
                         <ToastIcon type={toast.type} />
                     </span>
                     <div className='pr-1 pb-1'>

package/src/components/toggle/theme.tsx

@@ -147,4 +147,4 @@ function ThemeIcon({ theme }: { theme: 'dark' | 'light' }) {
             />
         </svg>
     )
-}
+}

package/src/components/version/version.tsx

@@ -31,4 +31,4 @@ export default function VersionTag({version, url, className}: VersionTagProps) {
             v{version}
         </div>
     )
-}
+}

package/src/globals.css

@@ -183,4 +183,4 @@
     padding: .5rem 0 .5rem 1rem;
     font-size: 1.2rem;
     font-weight: 500;
-}
+}

package/src/utils/auth/callback.ts

@@ -86,4 +86,4 @@ export default async function authCallback({
         console.error('Error during OAuth flow:', error.message)
         return NextResponse.json({ error: 'Authentication failed' }, { status: 500 })
     }
-}
+}

package/src/utils/auth/token.ts

@@ -29,4 +29,4 @@ export default async function AuthToken({ req, frontendURL, redirectPath }: Auth
     response.cookies.set('user_groups', userGroups)
 
     return response
-}
+}

package/src/utils/cookies/cookies.ts

@@ -40,4 +40,4 @@ export function removeCookies(...cookies: string[]) {
     for (const cookie of cookies) {
         removeCookie(cookie)
     }
-}
+}