uibee 2.15.0 → 2.16.0

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

@@ -26,3 +26,5 @@ export { default as Table } from './table/table';
 export { default as Pagination } from './table/pagination';
 export { default as MarkdownRender } from './markdownrender/markdownRender';
 export { default as ConfirmPopup } from './confirm/confirmPopup';
+export { default as SeverityPill } from './vulnerability/severityPill';
+export { default as Toggle } from './layout/toggle';

package/dist/src/components/index.js

@@ -38,3 +38,7 @@ export { default as Pagination } from './table/pagination';
 export { default as MarkdownRender } from './markdownrender/markdownRender';
 // Confirm
 export { default as ConfirmPopup } from './confirm/confirmPopup';
+// Vulnerability
+export { default as SeverityPill } from './vulnerability/severityPill';
+// Layout
+export { default as Toggle } from './layout/toggle';

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

@@ -0,0 +1,14 @@
+type ToggleOption<T> = {
+    value: T;
+    label?: string;
+    text?: string;
+    icon?: React.ReactNode;
+};
+type ToggleProps<T> = {
+    value: T;
+    onChange: (value: T) => void;
+    left: ToggleOption<T>;
+    right: ToggleOption<T>;
+};
+export default function Toggle<T>({ value, onChange, left, right, }: ToggleProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Toggle({ value, onChange, left, right, }) {
+    const active = 'bg-login-200 text-login-950 shadow';
+    const idle = 'text-login-200 hover:bg-login-50/10 hover:text-login-50';
+    const base = 'flex items-center justify-center rounded-full transition gap-1';
+    function renderContent(opt) {
+        return (_jsxs(_Fragment, { children: [opt.icon, opt.text && _jsx("span", { children: opt.text })] }));
+    }
+    const isLeftActive = value === left.value;
+    const isRightActive = value === right.value;
+    return (_jsxs("div", { className: 'flex items-center rounded-full border border-login-100/10 bg-login-50/5 p-1', children: [_jsx("button", { type: 'button', onClick: () => onChange(left.value), "aria-label": left.label ?? left.text, "aria-pressed": isLeftActive, className: `${base} px-2 h-7 ${isLeftActive ? active : idle}`, children: renderContent(left) }), _jsx("button", { type: 'button', onClick: () => onChange(right.value), "aria-label": right.label ?? right.text, "aria-pressed": isRightActive, className: `${base} px-2 h-7 ${isRightActive ? active : idle}`, children: renderContent(right) })] }));
+}

package/dist/src/components/vulnerability/constants.d.ts

@@ -0,0 +1,4 @@
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown';
+export declare const severityLabel: Record<SeverityLevel, string>;
+export declare const severityClasses: Record<SeverityLevel, string>;
+export {};

package/dist/src/components/vulnerability/constants.js

@@ -0,0 +1,14 @@
+export const severityLabel = {
+    critical: 'Critical',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    unknown: 'Unknown',
+};
+export const severityClasses = {
+    critical: 'border-red-400/25 bg-red-500/10 text-red-200',
+    high: 'border-orange-400/25 bg-orange-500/10 text-orange-200',
+    medium: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
+    low: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
+    unknown: 'border-login-100/10 bg-login-50/5 text-login-200',
+};

package/dist/src/components/vulnerability/severityPill.d.ts

@@ -0,0 +1,8 @@
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown';
+type SeverityPillProps = {
+    severity: SeverityLevel;
+    count: number;
+    compact?: boolean;
+};
+export default function SeverityPill({ severity, count, compact }: SeverityPillProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/vulnerability/severityPill.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { severityClasses, severityLabel } from './constants';
+export default function SeverityPill({ severity, count, compact = false }) {
+    if (count === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: `rounded-xl border ${compact ? 'px-3 py-2' : 'p-3'} ${severityClasses[severity]}`, children: [_jsx("div", { className: 'text-[11px] font-medium uppercase tracking-[0.18em]', children: severityLabel[severity] }), _jsx("div", { className: `${compact ? 'mt-1 text-sm' : 'mt-2 text-lg'} font-semibold`, children: count })] }));
+}

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 {
@@ -13,12 +13,21 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
     --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-sky-200: oklch(90.1% 0.058 230.902);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-500: oklch(68.5% 0.169 237.323);
     --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);
@@ -71,6 +80,7 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-login: #fd8738;
+    --color-login-950: #0e0e0e;
     --color-login-900: #121212;
     --color-login-800: #181818;
     --color-login-700: #1a1a1a;
@@ -1119,6 +1129,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -1509,12 +1522,24 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-amber-400\/25 {
+    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-400) 25%, transparent);
+    }
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
   .border-login-50 {
     border-color: var(--color-login-50);
   }
+  .border-login-100\/10 {
+    border-color: color-mix(in srgb, #b0b0b0 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-100) 10%, transparent);
+    }
+  }
   .border-login-200 {
     border-color: var(--color-login-200);
   }
@@ -1539,9 +1564,27 @@
       border-color: color-mix(in oklab, var(--color-login-600) 50%, transparent);
     }
   }
+  .border-orange-400\/25 {
+    border-color: color-mix(in srgb, oklch(75% 0.183 55.934) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-orange-400) 25%, transparent);
+    }
+  }
+  .border-red-400\/25 {
+    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-400) 25%, transparent);
+    }
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .border-sky-400\/25 {
+    border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-sky-400) 25%, transparent);
+    }
+  }
   .border-white {
     border-color: var(--color-white);
   }
@@ -1551,6 +1594,12 @@
   .bg-\[\#18181899\] {
     background-color: #18181899;
   }
+  .bg-amber-500\/10 {
+    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
+    }
+  }
   .bg-black\/60 {
     background-color: color-mix(in srgb, #000 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1614,6 +1663,9 @@
       background-color: color-mix(in oklab, var(--color-login-50) 5%, transparent);
     }
   }
+  .bg-login-200 {
+    background-color: var(--color-login-200);
+  }
   .bg-login-400 {
     background-color: var(--color-login-400);
   }
@@ -1668,6 +1720,18 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-orange-500\/10 {
+    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+    }
+  }
+  .bg-red-500\/10 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, 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)) {
@@ -1689,6 +1753,12 @@
   .bg-red-900 {
     background-color: var(--color-red-900);
   }
+  .bg-sky-500\/10 {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1931,6 +2001,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -1975,6 +2048,10 @@
     --tw-tracking: 0.05em;
     letter-spacing: 0.05em;
   }
+  .tracking-\[0\.18em\] {
+    --tw-tracking: 0.18em;
+    letter-spacing: 0.18em;
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -1986,6 +2063,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-amber-200 {
+    color: var(--color-amber-200);
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -2022,18 +2102,30 @@
   .text-login-800 {
     color: var(--color-login-800);
   }
+  .text-login-950 {
+    color: var(--color-login-950);
+  }
   .text-login-text {
     color: var(--color-login-text);
   }
   .text-login-text\! {
     color: var(--color-login-text) !important;
   }
+  .text-orange-200 {
+    color: var(--color-orange-200);
+  }
+  .text-red-200 {
+    color: var(--color-red-200);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-sky-200 {
+    color: var(--color-sky-200);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -2497,6 +2589,16 @@
       }
     }
   }
+  .hover\:bg-login-50\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #ededed 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-50) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login-300\/20 {
     &:hover {
       @media (hover: hover) {
@@ -2622,6 +2724,13 @@
       }
     }
   }
+  .hover\:text-login-50 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-login-50);
+      }
+    }
+  }
   .hover\:text-login-100 {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "build:clean": "rm -rf dist",
-    "build:css": "node --loader ts-node/esm src/scripts/buildCss.ts",
+    "build:css": "node src/scripts/buildCss.ts",
     "build:rewrite": "node dist/src/scripts/rewriteAlias.js",
     "build:ts": "tsc --declaration",
     "build": "npm run build:clean && npm run build:css && npm run build:ts && npm run build:rewrite",
@@ -32,27 +32,27 @@
     "lint:fix": "eslint --fix ./src"
   },
   "peerDependencies": {
-    "next": "^16.1.6",
+    "next": "^16.2.1",
     "react": "^19.2.4"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.10.0",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.0.3",
+    "eslint": "^10.2.0",
     "glob": "^13.0.6",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
+    "postcss": "^8.5.10",
+    "tailwindcss": "^4.2.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.2"
   },
   "dependencies": {
-    "lucide-react": "^0.577.0",
-    "react-dom": "19.2.4",
+    "lucide-react": "^1.8.0",
+    "react-dom": "19.2.5",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "utilbee": "^1.4.1"

package/src/components/index.ts

@@ -48,4 +48,10 @@ export { default as Pagination } from './table/pagination'
 export { default as MarkdownRender } from './markdownrender/markdownRender'
 
 // Confirm
-export { default as ConfirmPopup } from './confirm/confirmPopup'
+export { default as ConfirmPopup } from './confirm/confirmPopup'
+
+// Vulnerability
+export { default as SeverityPill } from './vulnerability/severityPill'
+
+// Layout
+export { default as Toggle } from './layout/toggle'

package/src/components/layout/toggle.tsx

@@ -0,0 +1,62 @@
+type ToggleOption<T> = {
+    value: T
+    label?: string
+    text?: string
+    icon?: React.ReactNode
+}
+
+type ToggleProps<T> = {
+    value: T
+    onChange: (value: T) => void
+    left: ToggleOption<T>
+    right: ToggleOption<T>
+}
+
+export default function Toggle<T>({
+    value,
+    onChange,
+    left,
+    right,
+}: ToggleProps<T>) {
+    const active = 'bg-login-200 text-login-950 shadow'
+    const idle = 'text-login-200 hover:bg-login-50/10 hover:text-login-50'
+
+    const base =
+        'flex items-center justify-center rounded-full transition gap-1'
+
+    function renderContent(opt: ToggleOption<T>) {
+        return (
+            <>
+                {opt.icon}
+                {opt.text && <span>{opt.text}</span>}
+            </>
+        )
+    }
+
+    const isLeftActive = value === left.value
+    const isRightActive = value === right.value
+
+    return (
+        <div className='flex items-center rounded-full border border-login-100/10 bg-login-50/5 p-1'>
+            <button
+                type='button'
+                onClick={() => onChange(left.value)}
+                aria-label={left.label ?? left.text}
+                aria-pressed={isLeftActive}
+                className={`${base} px-2 h-7 ${isLeftActive ? active : idle}`}
+            >
+                {renderContent(left)}
+            </button>
+
+            <button
+                type='button'
+                onClick={() => onChange(right.value)}
+                aria-label={right.label ?? right.text}
+                aria-pressed={isRightActive}
+                className={`${base} px-2 h-7 ${isRightActive ? active : idle}`}
+            >
+                {renderContent(right)}
+            </button>
+        </div>
+    )
+}

package/src/components/vulnerability/constants.ts

@@ -0,0 +1,17 @@
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+
+export const severityLabel: Record<SeverityLevel, string> = {
+    critical: 'Critical',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    unknown: 'Unknown',
+}
+
+export const severityClasses: Record<SeverityLevel, string> = {
+    critical: 'border-red-400/25 bg-red-500/10 text-red-200',
+    high: 'border-orange-400/25 bg-orange-500/10 text-orange-200',
+    medium: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
+    low: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
+    unknown: 'border-login-100/10 bg-login-50/5 text-login-200',
+}

package/src/components/vulnerability/severityPill.tsx

@@ -0,0 +1,22 @@
+import { severityClasses, severityLabel } from './constants'
+
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+
+type SeverityPillProps = {
+    severity: SeverityLevel
+    count: number
+    compact?: boolean
+}
+
+export default function SeverityPill({ severity, count, compact = false }: SeverityPillProps) {
+    if (count === 0) {
+        return null
+    }
+
+    return (
+        <div className={`rounded-xl border ${compact ? 'px-3 py-2' : 'p-3'} ${severityClasses[severity]}`}>
+            <div className='text-[11px] font-medium uppercase tracking-[0.18em]'>{severityLabel[severity]}</div>
+            <div className={`${compact ? 'mt-1 text-sm' : 'mt-2 text-lg'} font-semibold`}>{count}</div>
+        </div>
+    )
+}

package/tsconfig.json

@@ -8,6 +8,7 @@
     "rootDir": ".",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "noUncheckedSideEffectImports": false,
     "strict": true,
     "skipLibCheck": true,
     "jsx": "react-jsx",