uibee 2.17.5 → 3.0.1

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -137,7 +137,7 @@ export default function DateTimePickerPopup({
                     onClick={() => handleDateSelect(i)}
                     className={`
                         w-8 h-8 flex items-center justify-center rounded-full text-sm
-                        hover:bg-login-500 transition-colors
+                        hover:bg-login-600 transition-colors
                         ${isSelected ? 'bg-login! text-white! hover:bg-login!' : ''}
                         ${!isSelected && isToday ? 'text-login! font-bold' : ''}
                         ${!isSelected && !isToday ? 'text-login-text!' : ''}
@@ -154,7 +154,7 @@ export default function DateTimePickerPopup({
                     <button
                         type='button'
                         onClick={() => setCurrentDate(new Date(year, month - 1))}
-                        className='p-1 hover:bg-login-500 rounded-full text-login-text'
+                        className='p-1 hover:bg-login-600 rounded-full text-login-text transition-colors'
                     >
                         <ChevronLeft className='w-4 h-4' />
                     </button>
@@ -164,7 +164,7 @@ export default function DateTimePickerPopup({
                     <button
                         type='button'
                         onClick={() => setCurrentDate(new Date(year, month + 1))}
-                        className='p-1 hover:bg-login-500 rounded-full text-login-text'
+                        className='p-1 hover:bg-login-600 rounded-full text-login-text transition-colors'
                     >
                         <ChevronRight className='w-4 h-4' />
                     </button>
@@ -185,7 +185,7 @@ export default function DateTimePickerPopup({
 
     function renderTimePicker() {
         return (
-            <div className='p-2 border-t border-login-500 flex justify-center gap-2'>
+            <div className='p-2 border-t border-login-500/25 flex justify-center gap-2'>
                 <div className='flex flex-col items-center'>
                     <label className='text-xs text-login-200 mb-1'>Hour</label>
                     <input
@@ -195,8 +195,8 @@ export default function DateTimePickerPopup({
                         onChange={(e) => onTimeInputChange('hours', e.target.value)}
                         onBlur={() => onTimeInputBlur('hours')}
                         className={`
-                            w-16 p-1 bg-login-500 rounded text-center text-login-text 
-                            border border-login-500 focus:border-login outline-none
+                            w-16 p-1 bg-login-600 rounded text-center text-login-text text-sm
+                            border border-login-500/50 focus:border-login/60 focus:ring-1 focus:ring-login/30 outline-none
                         `}
                     />
                 </div>
@@ -210,8 +210,8 @@ export default function DateTimePickerPopup({
                         onChange={(e) => onTimeInputChange('minutes', e.target.value)}
                         onBlur={() => onTimeInputBlur('minutes')}
                         className={`
-                            w-16 p-1 bg-login-500 rounded text-center text-login-text 
-                            border border-login-500 focus:border-login outline-none
+                            w-16 p-1 bg-login-600 rounded text-center text-login-text text-sm
+                            border border-login-500/50 focus:border-login/60 focus:ring-1 focus:ring-login/30 outline-none
                         `}
                     />
                 </div>
@@ -221,7 +221,7 @@ export default function DateTimePickerPopup({
 
     return (
         <div 
-            className='fixed z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70 anchor-popup'
+            className='fixed z-50 bg-login-700 border border-login-500/50 rounded-md shadow-xl p-1 min-w-70 anchor-popup'
             style={{
                 positionAnchor: anchorName,
                 positionArea: 'bottom span-right',

package/src/components/inputs/shared/inputError.tsx

@@ -10,7 +10,7 @@ export default function InputError({ error, id }: InputErrorProps) {
         <div className='h-4'>
             <span
                 id={id}
-                className='text-xs text-red-500 ml-1 truncate block'
+                className='text-xs text-red-400 ml-1 truncate block'
                 role='alert'
                 title={error}
             >

package/src/components/inputs/switch.tsx

@@ -25,23 +25,22 @@ export default function Switch(props: SwitchProps) {
             textSize={textSize}
             className={className}
         >
-            <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>
+            <label className={`group/sw inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10'}`}>
                 <input
                     {...inputProps}
                     type='checkbox'
                     id={name}
                     name={name}
-                    className='sr-only peer'
+                    className='sr-only'
                 />
                 <div className={`
-                    w-11 h-6 bg-login-500/50 rounded-full peer 
-                    peer-checked:after:translate-x-full peer-checked:after:border-white 
-                    after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} after:left-0.5 
-                    after:bg-white after:border-gray-300 after:border after:rounded-full 
-                    after:h-5 after:w-5 after:transition-all peer-checked:bg-login
-                    ${inputProps.disabled ? 'opacity-50 cursor-not-allowed' : ''}
-                    ${error ? 'ring-1 ring-red-500' : ''}
-                `} />
+                    relative flex items-center w-11 h-6 rounded-full transition-colors
+                    bg-login-600 group-has-[input:checked]/sw:bg-login
+                    ${inputProps.disabled ? 'opacity-40 cursor-not-allowed' : ''}
+                    ${error ? 'ring-1 ring-red-500/60' : ''}
+                `}>
+                    <span className='absolute inset-y-0 my-auto left-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-all group-has-[input:checked]/sw:translate-x-full' />
+                </div>
             </label>
         </FieldWrapper>
     )

package/src/components/inputs/tagInput.tsx

@@ -69,18 +69,17 @@ export default function TagInput({
         >
             <div
                 className={`
-                    flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500 
-                    text-login-text min-h-10.5
-                    focus-within:border-login focus-within:ring-1 focus-within:ring-login
-                    disabled:opacity-50 disabled:cursor-not-allowed
-                    transition-all duration-200
-                    ${error ? 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500' : ''}
+                    flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500
+                    text-login-text min-h-10
+                    focus-within:border-login/60 focus-within:ring-1 focus-within:ring-login/30
+                    transition-all duration-150
+                    ${error ? 'border-red-500/70 focus-within:border-red-500/70 focus-within:ring-red-500/30' : ''}
                 `}
             >
                 {value.map((tag, index) => (
                     <span
                         key={index}
-                        className='flex items-center gap-1 px-2 py-1 bg-login rounded text-sm text-white'
+                        className='flex items-center gap-1 px-2 py-0.5 bg-login-600 text-login-100 border border-login-500 rounded text-sm'
                     >
                         {tag}
                         {!disabled && (

package/src/components/inputs/textarea.tsx

@@ -31,8 +31,6 @@ export default function Textarea(props: TextareaProps) {
     const jsonError = type === 'json' && value ? isValidJson(value as string) : undefined
     const displayError = jsonError || error
 
-    console.log(value)
-
     return (
         <FieldWrapper
             label={label}
@@ -61,8 +59,8 @@ export default function Textarea(props: TextareaProps) {
                 {type === 'markdown' && preview && (
                     <div
                         className={`
-                            w-full rounded-md bg-login-500/50 border border-login-500 
-                            p-3 overflow-y-auto ${error ? 'border-red-500' : ''}
+                            w-full rounded-md bg-login-500/50 border border-login-500
+                            p-3 overflow-y-auto ${error ? 'border-red-500/70' : ''}
                         `}
                     >
                         <MarkdownRender MDstr={String(value || '')} />
@@ -79,14 +77,14 @@ export default function Textarea(props: TextareaProps) {
                     aria-describedby={error ? `${name}-error` : undefined}
                     className={`
                         ${type === 'markdown' && preview ? 'hidden' : ''}
-                        w-full rounded-md bg-login-500/50 border border-login-500 
-                        text-login-text placeholder-login-200
-                        focus:outline-none focus:border-login focus:ring-1 focus:ring-login
-                        disabled:opacity-50 disabled:cursor-not-allowed
+                        w-full rounded-md bg-login-500/50 border border-login-500
+                        text-login-text placeholder-login-200 text-sm
+                        focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
                         p-3 pr-10
-                        transition-all duration-200
+                        transition-all duration-150
                         resize-y
-                        ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
+                        ${error ? 'border-red-500/70 focus:border-red-500/70 focus:ring-red-500/30' : ''}
                     `}
                 />
             </div>

package/src/components/inputs/toggle.tsx

@@ -18,9 +18,9 @@ export default function Toggle<T>({
     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-lg transition gap-1'
+    const active = 'bg-login text-white shadow-sm'
+    const idle = 'text-login-200 hover:text-login-50 hover:bg-login-500/50'
+    const base = 'flex items-center justify-center rounded-md px-3 h-7 transition-all duration-150 gap-1.5 text-sm'
 
     function renderContent(opt: ToggleOption<T>) {
         return (
@@ -35,13 +35,13 @@ export default function Toggle<T>({
     const isRightActive = value === right.value
 
     return (
-        <div className='flex items-center border rounded-lg border-login-100/10 bg-login-50/5 p-1'>
+        <div className='flex items-center w-fit bg-login-500/50 border border-login-500 rounded-lg p-1 gap-0.5'>
             <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}`}
+                className={`${base} ${isLeftActive ? active : idle}`}
             >
                 {renderContent(left)}
             </button>
@@ -51,7 +51,7 @@ export default function Toggle<T>({
                 onClick={() => onChange(right.value)}
                 aria-label={right.label ?? right.text}
                 aria-pressed={isRightActive}
-                className={`${base} px-2 h-7 ${isRightActive ? active : idle}`}
+                className={`${base} ${isRightActive ? active : idle}`}
             >
                 {renderContent(right)}
             </button>

package/src/components/table/body.tsx

@@ -38,8 +38,8 @@ export default function Body({ list, columns, menuItems, redirectPath, variant =
         <tbody
             ref={tbodyRef}
             className={`
-                divide-login-600 block overflow-y-auto flex-1 min-h-0
-                ${variant === 'default' ? 'bg-login-500/50 divide-y' : 'bg-transparent divide-y'}
+                block overflow-y-auto flex-1 min-h-0 divide-y
+                ${variant === 'default' ? 'bg-login-800 divide-login-600/25' : 'bg-transparent divide-login-600/20'}
             `}
         >
             {list.map((item, index) => {
@@ -76,8 +76,8 @@ export default function Body({ list, columns, menuItems, redirectPath, variant =
                         className={`
                             flex w-full group/row transition-colors 
                             ${redirectConfig.path ? 'cursor-pointer' : ''}
-                            ${variant === 'default' && redirectConfig.path ? 'hover:bg-login-600/30' : ''}
-                            ${variant === 'minimal' ? 'hover:bg-white/5 border-b border-login-600/50 last:border-0' : ''}
+                            ${variant === 'default' && redirectConfig.path ? 'hover:bg-login-600/80' : ''}
+                            ${variant === 'minimal' ? 'hover:bg-login-600/70 border-b border-login-600/20 last:border-0' : ''}
                         `}
                         onMouseDown={() => {
                             menuWasOpenOnMouseDown.current = openMenuId !== null
@@ -135,9 +135,9 @@ export default function Body({ list, columns, menuItems, redirectPath, variant =
                                     `}
                                 >
                                     <div className='relative w-full min-w-0'>
-                                        <h1 className={`block max-w-full truncate ${badgeClass}`}>
+                                        <span className={`block max-w-full truncate ${badgeClass}`}>
                                             {formatValue(col.key, value as string | number)}
-                                        </h1>
+                                        </span>
                                     </div>
                                 </td>
                             )

package/src/components/table/format.ts

@@ -4,7 +4,7 @@ const ISODateTimeReg = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/
 const ISODateReg = /^\d{4}-\d{2}-\d{2}$/
 const ISOTimeReg = /^\d{2}:\d{2}(:\d{2})?$/
 
-const OsloTZ = { timeZone: 'Europe/Oslo', second: undefined } as const
+const OsloTZ = { timeZone: 'Europe/Oslo' } as const
 const OsloTime: Intl.DateTimeFormatOptions = { ...OsloTZ, hour: '2-digit', minute: '2-digit' }
 const OsloDateTime: Intl.DateTimeFormatOptions = { ...OsloTime, year: 'numeric', month: '2-digit', day: '2-digit' }
 

package/src/components/table/header.tsx

@@ -47,7 +47,7 @@ export default function Header({ columns, hideMenu, variant = 'default' }: Heade
             block w-full
             ${variant === 'default' ? 'bg-login-700' : 'bg-transparent border-b border-login-600'}
         `}>
-            <tr className='flex w-full divide-x divide-transparent'>
+            <tr className='flex w-full'>
                 {columns.map((col) => {
                     const key = col.key
                     const value = col.label || (

package/src/components/table/pagination.tsx

@@ -21,19 +21,16 @@ export default function Pagination({
     const initialPage = Math.max(1, Number.isNaN(rawPage) ? 1 : rawPage)
     const [current, setCurrent] = useState<number>(initialPage)
 
+    const totalPages = Math.max(
+        1,
+        Math.ceil(totalRows !== undefined && pageSize > 0 ? totalRows / pageSize : 1)
+    )
+
     useEffect(() => {
         const raw = parseInt(searchParams.get('page') || '1', 10)
         const p = Math.max(1, Number.isNaN(raw) ? 1 : raw)
-        const computedTotalPages = Math.max(
-            1,
-            Math.ceil(
-                totalRows !== undefined && pageSize > 0
-                    ? totalRows / pageSize
-                    : 1
-            )
-        )
-        setCurrent(Math.max(1, Math.min(computedTotalPages, p)))
-    }, [searchParams, totalRows, pageSize])
+        setCurrent(Math.max(1, Math.min(totalPages, p)))
+    }, [searchParams, totalPages])
 
     function updateQuery(p: number) {
         const params = new URLSearchParams(searchParams.toString())
@@ -48,15 +45,6 @@ export default function Pagination({
         updateQuery(next)
     }
 
-    const totalPages = Math.max(
-        1,
-        Math.ceil(
-            totalRows !== undefined && pageSize > 0
-                ? totalRows / pageSize
-                : 1
-        )
-    )
-
     function goNext() {
         if (current >= totalPages) return
         const next = current + 1
@@ -121,8 +109,8 @@ export default function Pagination({
                     disabled={current <= 1}
                     className={`
                         flex items-center gap-2 p-1 rounded-lg
-                        bg-login-50/5 hover:bg-login-500 disabled:opacity-50
-                        border-[0.10rem] border-login-200 text-sm
+                        bg-login-700 hover:bg-login-600 disabled:opacity-40
+                        border border-login-500/50 text-sm transition-colors duration-150
                     `}
                 >
                     <ChevronLeft className='h-5 w-5' />
@@ -146,13 +134,11 @@ export default function Pagination({
                                     p === current ? 'page' : undefined
                                 }
                                 className={`
-                                    px-3 py-1 rounded-lg text-sm
-                                    border-[0.10rem] ${
-                            p === current
-                                ? 'bg-login-50/5 border-login-50'
-                                : `bg-login-50/0 border-login-200
-                                    'hover:bg-login-400`
-                            }
+                                    px-3 py-1 rounded-lg text-sm border transition-colors duration-150
+                                    ${p === current
+                                        ? 'bg-login text-white border-login'
+                                        : 'bg-login-700 border-login-500/50 hover:bg-login-600'
+                                    }
                                 `}
                             >
                                 {p}
@@ -166,9 +152,9 @@ export default function Pagination({
                     onClick={goNext}
                     disabled={current >= totalPages}
                     className={`
-                        flex items-center gap-2 p-1 rounded-lg bg-login-50/5
-                        hover:bg-login-500 disabled:opacity-50 select-none
-                        border-[0.10rem] border-login-200 text-sm
+                        flex items-center gap-2 p-1 rounded-lg select-none
+                        bg-login-700 hover:bg-login-600 disabled:opacity-40
+                        border border-login-500/50 text-sm transition-colors duration-150
                     `}
                 >
                     <ChevronRight className='h-5 w-5' />

package/src/components/table/table.tsx

@@ -21,10 +21,10 @@ export default function Table({ data, columns, menuItems, redirectPath, variant
     return (
         <div className={`
             flex-1 flex flex-col min-h-0 overflow-x-auto overflow-y-hidden h-full w-full
-            ${variant === 'default' ? 'bg-login-500/50 rounded-lg shadow border border-login-600' : ''}
+            ${variant === 'default' ? 'bg-login-800 rounded-lg border border-login-600/30' : ''}
             ${variant === 'minimal' ? 'bg-transparent' : ''}
         `}>
-            <table className='min-w-full w-max divide-y divide-login-600 flex flex-col flex-1 min-h-0'>
+            <table className='min-w-full w-max divide-y divide-login-600/30 flex flex-col flex-1 min-h-0'>
                 <Header
                     columns={columns}
                     hideMenu={!menuItems}

package/src/components/version/version.tsx

@@ -12,7 +12,7 @@ export default function VersionTag({version, url, className}: VersionTagProps) {
     }
 
     const style =
-        `w-fit bg-login-600 px-2 py-1 rounded-md text-white tracking-[0.05em] font-semibold text-lg ${className}`
+        `w-fit bg-login-700 text-login-100 border border-login-500/40 text-xs font-mono px-2 py-0.5 rounded ${className || ''}`
 
     if (url) {
         return (

package/src/components/vulnerability/constants.ts

@@ -1,4 +1,4 @@
-type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+export type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
 
 export const severityLabel: Record<SeverityLevel, string> = {
     critical: 'Critical',
@@ -9,9 +9,9 @@ export const severityLabel: Record<SeverityLevel, string> = {
 }
 
 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',
+    critical: 'border-l-red-500',
+    high:     'border-l-orange-500',
+    medium:   'border-l-amber-500',
+    low:      'border-l-green-500',
+    unknown:  'border-l-login-400',
 }

package/src/components/vulnerability/severityPill.tsx

@@ -1,6 +1,5 @@
-import { severityClasses, severityLabel } from './constants'
-
-type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+import LeftBarPanel from '@components/container/leftBarPanel'
+import { severityClasses, severityLabel, type SeverityLevel } from './constants'
 
 type SeverityPillProps = {
     severity: SeverityLevel
@@ -14,9 +13,9 @@ export default function SeverityPill({ severity, count, compact = false }: Sever
     }
 
     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>
+        <LeftBarPanel color={severityClasses[severity]} className={`flex items-center gap-2.5 ${compact ? 'px-2.5 py-1.5' : 'px-3 py-2'}`}>
+            <span className={`${compact ? 'text-sm' : 'text-base'} font-bold text-login-50`}>{count}</span>
+            <span className='text-[10px] font-semibold uppercase tracking-[0.15em] text-login-300'>{severityLabel[severity]}</span>
+        </LeftBarPanel>
     )
 }

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+'use client'
 export { default as useVisibility } from './useVisibility'
 export { default as useDarkMode } from './useDarkMode'
 export { default as useClickOutside } from './useClickOutside'

package/src/hooks/useClickOutside.ts

@@ -1,33 +1,16 @@
-import { useEffect, useRef, RefObject } from 'react'
+import { useEffect, type RefObject } from 'react'
 
 export default function useClickOutside<T extends HTMLElement>(
-    refOrCallback: RefObject<T | null> | (() => void),
-    maybeCallback?: () => void
+    ref: RefObject<T | null>,
+    callback: () => void
 ) {
-    let ref: RefObject<T | null>
-    let callback: () => void
-
-    if (typeof refOrCallback === 'function') {
-        ref = useRef<T>(null)
-        callback = refOrCallback
-    } else {
-        ref = refOrCallback
-        callback = maybeCallback as () => void
-    }
-
     useEffect(() => {
         function handleClickOutside(event: MouseEvent) {
-            if (ref && ref.current && !ref.current.contains(event.target as Node)) {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
                 callback()
             }
         }
-
         document.addEventListener('mousedown', handleClickOutside)
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside)
-        }
+        return () => document.removeEventListener('mousedown', handleClickOutside)
     }, [ref, callback])
-
-    if (typeof refOrCallback === 'function') return ref
-    return undefined
 }