uibee 2.9.4 → 2.10.0

package/dist/src/globals.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -16,13 +16,16 @@
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
@@ -51,6 +54,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
+    --tracking-wider: 0.05em;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
@@ -313,11 +317,17 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .start {
+    inset-inline-start: var(--spacing);
+  }
+  .end {
+    inset-inline-end: var(--spacing);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
   .top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
@@ -356,7 +366,7 @@
     left: calc(var(--spacing) * 0);
   }
   .left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .left-2 {
     left: calc(var(--spacing) * 2);
@@ -1024,6 +1034,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .mr-\[0\.3rem\] {
     margin-right: 0.3rem;
   }
@@ -1139,6 +1152,9 @@
   .max-h-\[calc\(100vh-4rem\)\] {
     max-height: calc(100vh - 4rem);
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
@@ -1178,6 +1194,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -1199,6 +1218,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1232,12 +1254,18 @@
   .min-w-30 {
     min-width: calc(var(--spacing) * 30);
   }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
   .min-w-70 {
     min-width: calc(var(--spacing) * 70);
   }
   .min-w-fit {
     min-width: fit-content;
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1248,7 +1276,7 @@
     transform-origin: center;
   }
   .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-x-8 {
@@ -1256,7 +1284,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-4 {
@@ -1373,6 +1401,33 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
+      border-inline-style: var(--tw-border-style);
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+  }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .divide-login-600 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-login-600);
+    }
+  }
+  .divide-transparent {
+    :where(& > :not(:last-child)) {
+      border-color: transparent;
+    }
+  }
   .self-center {
     align-self: center;
   }
@@ -1387,6 +1442,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1429,6 +1487,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[0\.10rem\] {
+    border-style: var(--tw-border-style);
+    border-width: 0.10rem;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1444,6 +1506,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-login-50 {
+    border-color: var(--color-login-50);
+  }
   .border-login-200 {
     border-color: var(--color-login-200);
   }
@@ -1459,6 +1524,15 @@
       border-color: color-mix(in oklab, var(--color-login-500) 50%, transparent);
     }
   }
+  .border-login-600 {
+    border-color: var(--color-login-600);
+  }
+  .border-login-600\/50 {
+    border-color: color-mix(in srgb, #212121 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-600) 50%, transparent);
+    }
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -1477,6 +1551,12 @@
       background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
     }
   }
+  .bg-blue-500\/20 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+    }
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -1486,9 +1566,21 @@
       background-color: color-mix(in oklab, var(--color-blue-600) 70%, transparent);
     }
   }
+  .bg-gray-500\/20 {
+    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+    }
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
+  .bg-green-500\/20 {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
+    }
+  }
   .bg-green-600\/70 {
     background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1504,6 +1596,21 @@
   .bg-login-50 {
     background-color: var(--color-login-50);
   }
+  .bg-login-50\/0 {
+    background-color: color-mix(in srgb, #ededed 0%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-50) 0%, transparent);
+    }
+  }
+  .bg-login-50\/5 {
+    background-color: color-mix(in srgb, #ededed 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-50) 5%, transparent);
+    }
+  }
+  .bg-login-400 {
+    background-color: var(--color-login-400);
+  }
   .bg-login-500 {
     background-color: var(--color-login-500);
   }
@@ -1555,6 +1662,12 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-red-500\/20 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
   .bg-red-600\/70 {
     background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1576,6 +1689,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-500\/20 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
+    }
+  }
   .bg-yellow-500\/70 {
     background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1641,6 +1760,9 @@
   .stroke-login-50 {
     stroke: var(--color-login-50);
   }
+  .stroke-login-200 {
+    stroke: var(--color-login-200);
+  }
   .stroke-red-400 {
     stroke: var(--color-red-400);
   }
@@ -1659,6 +1781,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1701,6 +1826,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
@@ -1713,6 +1841,9 @@
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -1792,6 +1923,10 @@
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1824,12 +1959,25 @@
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-green-400 {
+    color: var(--color-green-400);
+  }
   .text-green-500 {
     color: var(--color-green-500);
   }
@@ -1860,6 +2008,9 @@
   .text-login-text\! {
     color: var(--color-login-text) !important;
   }
+  .text-red-400 {
+    color: var(--color-red-400);
+  }
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -1869,9 +2020,15 @@
   .text-white\! {
     color: var(--color-white) !important;
   }
+  .text-yellow-400 {
+    color: var(--color-yellow-400);
+  }
   .text-yellow-500 {
     color: var(--color-yellow-500);
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .no-underline {
     text-decoration-line: none;
   }
@@ -1895,6 +2052,10 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
+  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2068,6 +2229,13 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-\[\.dropdown\]\:h-auto {
     &:is(:where(.group):is(.dropdown) *) {
       height: auto;
@@ -2216,6 +2384,12 @@
       }
     }
   }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .checked\:border-login {
     &:checked {
       border-color: var(--color-login);
@@ -2309,6 +2483,13 @@
       }
     }
   }
+  .hover\:bg-login-400 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-login-400);
+      }
+    }
+  }
   .hover\:bg-login-500 {
     &:hover {
       @media (hover: hover) {
@@ -2336,6 +2517,23 @@
       }
     }
   }
+  .hover\:bg-login-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-login-600);
+      }
+    }
+  }
+  .hover\:bg-login-600\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #212121 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-600) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login\/80 {
     &:hover {
       @media (hover: hover) {
@@ -2373,6 +2571,16 @@
       }
     }
   }
+  .hover\:bg-white\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-yellow-500\/90 {
     &:hover {
       @media (hover: hover) {
@@ -2390,6 +2598,13 @@
       }
     }
   }
+  .hover\:text-login-100 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-login-100);
+      }
+    }
+  }
   .hover\:text-login-200 {
     &:hover {
       @media (hover: hover) {
@@ -2718,11 +2933,21 @@ input::-ms-clear {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-gradient-position {
   syntax: "*";
   inherits: false;
@@ -2911,7 +3136,9 @@ input::-ms-clear {
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-x-reverse: 0;
+      --tw-divide-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-divide-y-reverse: 0;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
       --tw-gradient-via: #0000;

package/dist/src/hooks/useClickOutside.d.ts

@@ -1 +1,2 @@
-export default function useClickOutside<T extends HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void): import("react").RefObject<T | null>;
+import { RefObject } from 'react';
+export default function useClickOutside<T extends HTMLElement>(refOrCallback: RefObject<T | null> | (() => void), maybeCallback?: () => void): RefObject<T | null> | undefined;

package/dist/src/hooks/useClickOutside.js

@@ -1,20 +1,27 @@
 import { useEffect, useRef } from 'react';
-export default function useClickOutside(handler) {
-    const ref = useRef(null);
+export default function useClickOutside(refOrCallback, maybeCallback) {
+    let ref;
+    let callback;
+    if (typeof refOrCallback === 'function') {
+        ref = useRef(null);
+        callback = refOrCallback;
+    }
+    else {
+        ref = refOrCallback;
+        callback = maybeCallback;
+    }
     useEffect(() => {
-        const listener = (event) => {
-            const el = ref.current;
-            if (!el || el.contains(event.target)) {
-                return;
+        function handleClickOutside(event) {
+            if (ref && ref.current && !ref.current.contains(event.target)) {
+                callback();
             }
-            handler(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
+        }
+        document.addEventListener('mousedown', handleClickOutside);
         return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
+            document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [handler]);
-    return ref;
+    }, [ref, callback]);
+    if (typeof refOrCallback === 'function')
+        return ref;
+    return undefined;
 }

package/eslint.config.js

@@ -2,7 +2,6 @@ import eslint from '@eslint/js'
 import tseslint from 'typescript-eslint'
 import typescriptParser from '@typescript-eslint/parser'
 import stylistic from '@stylistic/eslint-plugin'
-import pluginNext from '@next/eslint-plugin-next'
 
 export default [
     eslint.configs.recommended,
@@ -10,7 +9,6 @@ export default [
     {
         plugins: {
             '@stylistic': stylistic,
-            '@next/next': pluginNext,
         },
         languageOptions: {
             sourceType: 'module',
@@ -18,7 +16,6 @@ export default [
             parser: typescriptParser,
         },
         rules: {
-            ...pluginNext.configs.recommended.rules,
             '@next/next/no-html-link-for-pages': 'off',
             strict: 'error',
             'no-var': 'error',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.9.4",
+  "version": "2.10.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -32,29 +32,28 @@
     "lint:fix": "eslint --fix ./src"
   },
   "peerDependencies": {
-    "next": "^16.0.10",
-    "react": "^19.2.3"
+    "next": "^16.1.6",
+    "react": "^19.2.4"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.3",
-    "@next/eslint-plugin-next": "16.1.1",
-    "@stylistic/eslint-plugin": "^5.6.1",
-    "@tailwindcss/postcss": "^4.1.18",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@tailwindcss/postcss": "^4.2.1",
     "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.0.3",
-    "@types/react": "19.2.7",
-    "eslint": "^9.39.2",
-    "glob": "^13.0.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "@types/node": "^25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^10.0.3",
+    "glob": "^13.0.6",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.1"
+    "typescript-eslint": "^8.57.0"
   },
   "dependencies": {
-    "lucide-react": "^0.562.0",
-    "react-dom": "19.2.3",
+    "lucide-react": "^0.577.0",
+    "react-dom": "19.2.4",
     "react-markdown": "^10.1.0",
-    "utilbee": "^1.1.0"
+    "utilbee": "^1.4.1"
   }
 }