uibee 2.17.4 → 3.0.0

package/dist/useClickOutside-Cmp-RsP3.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+//#region src/hooks/useClickOutside.ts
+function useClickOutside(ref, callback) {
+	useEffect(() => {
+		function handleClickOutside(event) {
+			if (ref.current && !ref.current.contains(event.target)) callback();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [ref, callback]);
+}
+//#endregion
+export { useClickOutside as t };

package/index.d.ts

@@ -1,5 +1,4 @@
 export * from './components'
 export * from './hooks'
 export * from './utils'
-export * from './scripts'
 export * from './styles'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.17.4",
+  "version": "3.0.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -18,43 +18,42 @@
   "exports": {
     "./hooks": "./dist/src/hooks/index.js",
     "./components": "./dist/src/components/index.js",
-    "./scripts": "./dist/src/scripts/index.js",
     "./utils": "./dist/src/utils/index.js",
-    "./styles": "./dist/src/styles/index.js"
+    "./styles": "./dist/src/styles/index.js",
+    "./icons": "./dist/src/icons/index.js"
   },
   "scripts": {
-    "build:clean": "rm -rf dist",
-    "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",
+    "build": "tsc --noEmit && tsdown",
+    "dev": "tsdown --watch",
     "lint": "eslint ./src",
     "lint:fix": "eslint --fix ./src"
   },
   "peerDependencies": {
-    "next": "^16.2.1",
-    "react": "^19.2.4"
+    "next": "^16.2.9",
+    "react": "^19.2.7"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.10.0",
-    "@tailwindcss/postcss": "^4.2.2",
-    "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.6.0",
-    "@types/react": "19.2.14",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tsdown/css": "^0.22.3",
+    "@types/bun": "^1.3.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.2.1",
-    "glob": "^13.0.6",
-    "postcss": "^8.5.10",
-    "tailwindcss": "^4.2.2",
+    "eslint": "^10.5.0",
+    "postcss": "^8.5.15",
+    "postcss-import": "^16.1.1",
+    "tailwindcss": "^4.3.1",
+    "tsdown": "^0.22.3",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.58.2"
+    "typescript-eslint": "^8.61.1"
   },
   "dependencies": {
-    "lucide-react": "^1.8.0",
-    "react-dom": "19.2.5",
+    "lucide-react": "^1.21.0",
+    "react-dom": "^19.2.7",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
-    "utilbee": "^1.4.5"
+    "utilbee": "^1.4.7"
   }
-}
+}

package/src/components/alert/alert.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
-import { CircleAlert, TriangleAlert, Info } from 'lucide-react'
+import { CircleAlert, Info } from 'lucide-react'
+import LeftBarPanel from '@components/container/leftBarPanel'
 
 type AlertProps = {
     children: ReactNode
@@ -7,29 +8,30 @@ type AlertProps = {
     className?: string
 }
 
+const styles = {
+    warning: {
+        color: 'border-l-red-500',
+        iconClass: 'w-4 h-4 shrink-0 stroke-red-400 mr-3 mt-0.5',
+        Icon: CircleAlert,
+    },
+    info: {
+        color: 'border-l-blue-500',
+        iconClass: 'w-4 h-4 shrink-0 stroke-blue-400 mr-3 mt-0.5',
+        Icon: Info,
+    },
+}
+
 export default function Alert({
     children,
     variant = 'warning',
     className = '',
 }: AlertProps) {
-    const color = variant === 'warning' ? 'bg-red-900'
-        : variant === 'info' ? 'bg-blue-600' :
-            'bg-gray-900'
-
-    const Icon = variant === 'warning' ? CircleAlert
-        : variant === 'info' ? Info :
-            TriangleAlert
+    const { color, iconClass, Icon } = styles[variant] ?? styles.warning
 
     return (
-        <div
-            className={`
-                grid grid-cols-[min-content_auto] rounded-lg
-                p-[0.5em_1em_0.5em_0.8em] items-start w-fit text-white
-                ${color} ${className}
-            `}
-        >
-            <Icon className='w-8 h-8 mr-[0.3rem] stroke-login-50' />
-            <div className='self-center'>{children}</div>
-        </div>
+        <LeftBarPanel color={color} className={`flex items-start px-4 py-3 text-sm text-login-100 ${className}`}>
+            <Icon className={iconClass} />
+            <div className='leading-relaxed'>{children}</div>
+        </LeftBarPanel>
     )
 }

package/src/components/buttons/button.tsx

@@ -2,25 +2,31 @@ import Link from 'next/link'
 import type { JSX } from 'react'
 
 type ButtonProps = {
-    text: string
+    text?: string
     className?: string
-    icon: string | JSX.Element
+    icon?: string | JSX.Element
     path?: string
     type?: 'button' | 'submit' | 'reset'
     variant?: 'primary' | 'secondary' | 'warning' | 'danger' | 'success' | 'info'
-    onClick?: (_: object | string) => void
+    onClick?: (e: React.MouseEvent) => void
     disabled?: boolean
 }
 
 const variants = {
-    primary: 'bg-login/70 outline-login hover:bg-login/90',
-    secondary: 'bg-login-500/70 outline-login-500 hover:bg-login-500/90',
-    warning: 'bg-yellow-500/70 outline-yellow-500 hover:bg-yellow-500/90',
-    danger: 'bg-red-600/70 outline-red-600 hover:bg-red-600/90',
-    success: 'bg-green-600/70 outline-green-600 hover:bg-green-600/90',
-    info: 'bg-blue-600/70 outline-blue-600 hover:bg-blue-600/90'
+    primary:   'bg-login text-white hover:brightness-110',
+    secondary: 'bg-login-500 text-login-50 hover:bg-login-400',
+    warning:   'bg-yellow-500 text-black hover:brightness-110',
+    danger:    'bg-red-600 text-white hover:brightness-110',
+    success:   'bg-green-600 text-white hover:brightness-110',
+    info:      'bg-blue-600 text-white hover:brightness-110',
 }
 
+const base = 'cursor-pointer px-4 rounded-md h-9 flex items-center justify-center gap-2 select-none text-sm font-medium transition-all duration-150 w-fit'
+const disabledCls = 'opacity-40 cursor-not-allowed pointer-events-none'
+
+const iconWrap = (icon: ButtonProps['icon']) =>
+    icon ? <span className='[&>svg]:w-4 [&>svg]:h-4 flex items-center'>{icon}</span> : null
+
 export default function Button({
     text,
     className,
@@ -29,9 +35,10 @@ export default function Button({
     variant = 'primary',
     type,
     onClick,
-    disabled
+    disabled,
 }: ButtonProps) {
-    const bg = variants[variant]
+    const color = variants[variant]
+    const cls = `${base} ${color} ${disabled ? disabledCls : ''} ${className || ''}`
 
     if (!path) {
         return (
@@ -40,42 +47,28 @@ export default function Button({
                 disabled={disabled}
                 onClick={onClick}
                 aria-label={text}
-                className={`
-                    ${bg} cursor-pointer px-4 rounded-md min-h-8 h-8 flex
-                    justify-evenly items-center gap-2 select-none
-                    focus:outline-none border-0 outline w-fit ${className}
-                `}
+                className={cls}
             >
-                <h1 className='font-bold'>{icon || ''}</h1>
-                <h1 className='min-w-fit w-fit'>{text}</h1>
+                {iconWrap(icon)}
+                {text}
             </button>
         )
     }
 
     if (disabled) {
         return (
-            <div
-                className={`
-                    ${bg} cursor-not-allowed px-4 rounded-md h-8 flex w-fit
-                    justify-evenly items-center gap-2 select-none ${className}
-                `}
-            >
-                <h1 className='font-bold'>{icon || ''}</h1>
-                <h1 className='min-w-fit w-fit'>{text}</h1>
+            <div className={cls}>
+                {iconWrap(icon)}
+                {text}
             </div>
         )
     }
 
     return (
-        <Link
-            href={path}
-            className={`
-                ${bg} cursor-pointer px-4 rounded-md h-8 flex w-fit
-                justify-evenly items-center gap-2 select-none ${className}
-            `}
-        >
-            <h1 className='font-bold'>{icon || ''}</h1>
-            <h1 className='min-w-fit w-fit'>{text}</h1>
+        <Link href={path} className={`${base} ${color} ${className || ''}`}>
+            {iconWrap(icon)}
+            {text}
         </Link>
     )
 }
+

package/src/components/confirm/confirmPopup.tsx

@@ -25,12 +25,12 @@ export default function ConfirmPopup({
 }: ConfirmPopupProps) {
     if (!isOpen) return null
 
-    const confirmBg =
+    const confirmClass =
         variant === 'danger'
-            ? 'bg-red-700/80 outline-red-700 hover:bg-red-700'
+            ? 'bg-red-600 hover:brightness-110 text-white'
             : variant === 'warning'
-                ? 'bg-yellow-600/80 outline-yellow-600 hover:bg-yellow-600'
-                : 'bg-login/70 outline-login hover:bg-login/90'
+                ? 'bg-yellow-500 hover:brightness-110 text-black'
+                : 'bg-login hover:brightness-110 text-white'
 
     return (
         <div
@@ -40,7 +40,7 @@ export default function ConfirmPopup({
             className='fixed inset-0 z-50 flex items-center justify-center'
             onClick={onCancel}
         >
-            <div className='absolute inset-0 bg-black/60 backdrop-blur-sm' />
+            <div className='absolute inset-0 bg-black/50 backdrop-blur-sm' />
 
             <div
                 className='
@@ -50,35 +50,34 @@ export default function ConfirmPopup({
                 '
                 onClick={(e) => e.stopPropagation()}
             >
-                <div className='flex items-center gap-3'>
+                <div className='flex items-start gap-3'>
                     {variant !== 'default' && (
                         <TriangleAlert
-                            className={`w-6 h-6 shrink-0 ${variant === 'danger' ? 'stroke-red-400' : 'stroke-yellow-400'}`}
+                            className={`w-5 h-5 shrink-0 mt-0.5 ${variant === 'danger' ? 'stroke-red-400' : 'stroke-yellow-400'}`}
                         />
                     )}
                     <h2
                         id='confirm-popup-header'
-                        className='text-login-50 text-lg font-bold leading-snug'
+                        className='text-login-50 text-base font-semibold leading-snug'
                     >
                         {header}
                     </h2>
                 </div>
 
                 {description && (
-                    <p className='text-login-100 text-sm leading-relaxed'>
+                    <p className='text-login-200 text-sm leading-relaxed'>
                         {description}
                     </p>
                 )}
 
-                <div className='flex justify-end gap-3 mt-1'>
+                <div className='flex justify-end gap-2 mt-1'>
                     <button
                         type='button'
                         onClick={onCancel}
                         className='
                             cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium
-                            bg-login-500/60 text-login-50 outline outline-login-500/60
-                            hover:bg-login-500/90 focus:outline-none select-none
-                            transition-colors duration-150
+                            bg-login-600 hover:bg-login-500 text-login-100
+                            transition-colors duration-150 select-none
                         '
                     >
                         {cancelText}
@@ -88,10 +87,9 @@ export default function ConfirmPopup({
                         type='button'
                         onClick={onConfirm}
                         className={`
-                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-bold
-                            text-white outline focus:outline-none select-none
-                            transition-colors duration-150
-                            ${confirmBg}
+                            cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium
+                            transition-all duration-150 select-none
+                            ${confirmClass}
                         `}
                     >
                         {confirmText}

package/src/components/container/accordion.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { createContext, useContext, useState, type ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+const GroupContext = createContext(false)
+
+type AccordionProps = {
+    title: ReactNode
+    children: ReactNode
+    defaultOpen?: boolean
+    className?: string
+}
+
+type AccordionGroupProps = {
+    children: ReactNode
+    className?: string
+}
+
+export function AccordionGroup({ children, className = '' }: AccordionGroupProps) {
+    return (
+        <GroupContext.Provider value={true}>
+            <div className={`rounded-lg border border-login-500/40 overflow-hidden divide-y divide-login-500/25 ${className}`}>
+                {children}
+            </div>
+        </GroupContext.Provider>
+    )
+}
+
+export default function Accordion({ title, children, defaultOpen = false, className = '' }: AccordionProps) {
+    const [open, setOpen] = useState(defaultOpen)
+    const grouped = useContext(GroupContext)
+
+    return (
+        <div className={grouped ? className : `rounded-lg border border-login-500/40 overflow-hidden ${className}`}>
+            <button
+                type='button'
+                onClick={() => setOpen((o) => !o)}
+                className='flex w-full cursor-pointer items-center justify-between bg-login-800 px-4 py-3 text-left transition-colors duration-150 hover:bg-login-700 select-none'
+            >
+                <div className='text-sm font-medium text-login-50'>{title}</div>
+                <ChevronDown
+                    size={16}
+                    className={`shrink-0 text-login-300 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+                />
+            </button>
+            <div className={`overflow-hidden bg-login-900 transition-all duration-200 ${open ? 'max-h-[9999px]' : 'max-h-0'}`}>
+                <div className='px-4 py-3 text-sm text-login-100'>
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/container/glassCard.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+
+type GlassCardProps = {
+    children: ReactNode
+    className?: string
+}
+
+export default function GlassCard({ children, className = '' }: GlassCardProps) {
+    return (
+        <section className={`rounded-xl border border-login-500/30 bg-login-800 ${className}`}>
+            {children}
+        </section>
+    )
+}

package/src/components/container/iconBubble.tsx

@@ -0,0 +1,30 @@
+import type { ElementType } from 'react'
+
+const tones = {
+    amber:   'bg-amber-500/10 text-amber-400',
+    blue:    'bg-sky-500/10 text-sky-400',
+    emerald: 'bg-emerald-500/10 text-emerald-400',
+    rose:    'bg-rose-500/10 text-rose-400',
+    slate:   'bg-login-600 text-login-100',
+    violet:  'bg-violet-500/10 text-violet-400',
+    orange:  'bg-login/10 text-login',
+} as const
+
+type IconBubbleProps = {
+    icon: ElementType
+    tone?: keyof typeof tones
+    size?: 'sm' | 'md' | 'lg'
+}
+
+export type IconBubbleTone = keyof typeof tones
+
+export default function IconBubble({ icon: Icon, tone = 'slate', size = 'md' }: IconBubbleProps) {
+    const sizeClass = size === 'sm' ? 'h-7 w-7' : size === 'lg' ? 'h-11 w-11' : 'h-9 w-9'
+    const iconSize = size === 'sm' ? 'h-3.5 w-3.5' : size === 'lg' ? 'h-5 w-5' : 'h-4 w-4'
+
+    return (
+        <div className={`flex shrink-0 items-center justify-center rounded-lg ${sizeClass} ${tones[tone]}`}>
+            <Icon className={iconSize} />
+        </div>
+    )
+}

package/src/components/container/leftBarPanel.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+type LeftBarPanelProps = {
+    color: string
+    children: ReactNode
+    className?: string
+}
+
+export default function LeftBarPanel({ color, children, className = '' }: LeftBarPanelProps) {
+    return (
+        <div className={`bg-login-500/50 border border-login-500/30 border-l-2 rounded-sm ${color} ${className}`}>
+            {children}
+        </div>
+    )
+}

package/src/components/container/pulseDot.tsx

@@ -0,0 +1,31 @@
+type PulseDotVariant = 'online' | 'offline' | 'warning' | 'unknown'
+
+type PulseDotProps = {
+    variant?: PulseDotVariant
+    size?: 'sm' | 'md' | 'lg'
+}
+
+const variantColor: Record<PulseDotVariant, string> = {
+    online:  'bg-green-500',
+    offline: 'bg-red-500',
+    warning: 'bg-login',
+    unknown: 'bg-login-400',
+}
+
+const sizeClass = {
+    sm: 'w-1.5 h-1.5',
+    md: 'w-2 h-2',
+    lg: 'w-3 h-3',
+}
+
+export default function PulseDot({ variant = 'online', size = 'md' }: PulseDotProps) {
+    const color = variantColor[variant]
+    const dotSize = sizeClass[size]
+
+    return (
+        <div className={`relative grid place-items-center ${dotSize}`}>
+            <span className={`absolute inline-flex h-full w-full rounded-full ${color} opacity-50 animate-ping`} />
+            <span className={`relative inline-flex rounded-full ${dotSize} ${color}`} />
+        </div>
+    )
+}

package/src/components/container/statCard.tsx

@@ -0,0 +1,24 @@
+import type { ElementType } from 'react'
+import GlassCard from './glassCard'
+import IconBubble, { type IconBubbleTone } from './iconBubble'
+
+type StatCardProps = {
+    label: string
+    value: string
+    icon: ElementType
+    tone?: IconBubbleTone
+}
+
+export default function StatCard({ label, value, icon, tone = 'slate' }: StatCardProps) {
+    return (
+        <GlassCard className='p-4'>
+            <div className='mb-3 flex items-center gap-3'>
+                <IconBubble icon={icon} tone={tone} />
+                <span className='text-sm font-medium text-login-200'>{label}</span>
+            </div>
+            <div className='truncate text-lg font-semibold text-login-50' title={value}>
+                {value}
+            </div>
+        </GlassCard>
+    )
+}

package/src/components/container/tabs.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+
+type Tab = {
+    id: string
+    label: ReactNode
+}
+
+type TabsProps = {
+    tabs: Tab[]
+    defaultTab?: string
+    activeTab?: string
+    onTabChange?: (id: string) => void
+    children: ReactNode
+    className?: string
+}
+
+type TabPanelProps = {
+    id: string
+    activeTab: string
+    children: ReactNode
+}
+
+export function Tabs({ tabs, defaultTab, activeTab: controlledTab, onTabChange, children, className = '' }: TabsProps) {
+    const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? '')
+    const activeTab = controlledTab ?? internalTab
+
+    function handleTabChange(id: string) {
+        if (!controlledTab) setInternalTab(id)
+        onTabChange?.(id)
+    }
+
+    return (
+        <div className={className}>
+            <div className='flex gap-1 rounded-md bg-login-500/50 border border-login-500/40 p-1 w-fit'>
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.id}
+                        type='button'
+                        onClick={() => handleTabChange(tab.id)}
+                        className={`
+                            px-3 py-1.5 rounded text-sm font-medium transition-all duration-150 cursor-pointer select-none
+                            ${activeTab === tab.id
+                                ? 'bg-login text-white shadow-sm'
+                                : 'text-login-200 hover:text-login-50 hover:bg-login-600'
+                            }
+                        `}
+                    >
+                        {tab.label}
+                    </button>
+                ))}
+            </div>
+            <div className='mt-3'>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export function TabPanel({ id, activeTab, children }: TabPanelProps) {
+    if (activeTab !== id) return null
+    return <div>{children}</div>
+}