uibee 3.1.1 → 3.1.3

package/src/components/table/constants.ts

@@ -0,0 +1,53 @@
+import type { TableColor, Density, TableVariant } from './types'
+
+export const HIGHLIGHT: Record<TableColor, string> = {
+    green:  'bg-green-500/15  text-green-400  ring-1 ring-green-500/25',
+    yellow: 'bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/25',
+    red:    'bg-red-500/15    text-red-400    ring-1 ring-red-500/25',
+    blue:   'bg-blue-500/15   text-blue-400   ring-1 ring-blue-500/25',
+    gray:   'bg-gray-500/15   text-gray-400   ring-1 ring-gray-500/25',
+    orange: 'bg-orange-500/15 text-orange-400 ring-1 ring-orange-500/25',
+    purple: 'bg-purple-500/15 text-purple-400 ring-1 ring-purple-500/25',
+}
+
+export const DENSITY_TH: Record<Density, string> = {
+    compact:     'px-4 py-2',
+    comfortable: 'px-6 py-3',
+    spacious:    'px-8 py-4',
+}
+
+export const DENSITY_TD: Record<Density, string> = {
+    compact:     'px-4 py-1.5',
+    comfortable: 'px-6 py-3.5',
+    spacious:    'px-8 py-5',
+}
+
+export const VARIANT_CONTAINER: Record<TableVariant, string> = {
+    original: 'bg-login-500/50 rounded-lg border border-login-600 shadow',
+    modern:   'bg-transparent',
+}
+
+export const VARIANT_THEAD: Record<TableVariant, string> = {
+    original: 'bg-login-700',
+    modern:   'bg-transparent border-b border-login-500/40',
+}
+
+export const VARIANT_THEAD_TH: Record<TableVariant, string> = {
+    original: 'text-login-200',
+    modern:   'text-login-300',
+}
+
+export const VARIANT_TBODY: Record<TableVariant, string> = {
+    original: 'bg-login-500/50 divide-login-600',
+    modern:   'divide-login-600/15',
+}
+
+export const VARIANT_ROW_HOVER: Record<TableVariant, string> = {
+    original: 'hover:bg-login-600/30',
+    modern:   'hover:bg-login-700/50',
+}
+
+export const VARIANT_ROW_STRIPED: Record<TableVariant, string> = {
+    original: 'even:bg-login-600/40',
+    modern:   'even:bg-login-800/40',
+}

package/src/components/table/empty.tsx

@@ -0,0 +1,31 @@
+import { TableIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+export default function Empty({ emptyState }: { emptyState?: ReactNode }) {
+    if (emptyState) {
+        return (
+            <tbody className='block w-full'>
+                <tr className='flex w-full'>
+                    <td className='w-full'>
+                        <div className='flex items-center justify-center min-h-[160px] py-8 px-6'>
+                            {emptyState}
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        )
+    }
+
+    return (
+        <tbody className='block w-full'>
+            <tr className='flex w-full'>
+                <td className='w-full'>
+                    <div className='flex flex-col items-center justify-center gap-3 min-h-[160px] py-8 text-login-300'>
+                        <TableIcon className='h-10 w-10 opacity-30' />
+                        <span className='text-sm'>No data found</span>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    )
+}

package/src/components/table/format.ts

@@ -1,35 +1,42 @@
-const nullableTimeKeys = ['date', 'last_sent', 'time']
+const nullableTimeKeys = new Set(['date', 'last_sent', 'sent_at', 'time'])
 
-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 RX_DATETIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/
+const RX_DATE     = /^\d{4}-\d{2}-\d{2}$/
+const RX_TIME     = /^\d{2}:\d{2}(:\d{2})?$/
 
-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' }
+export function formatValue(key: string, value: unknown): string | number {
+    if (value === null || value === undefined) {
+        return nullableTimeKeys.has(key) ? 'Never' : '-'
+    }
+
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No'
 
-export function formatValue(key: string, value: string | number) {
-    if (nullableTimeKeys.includes(key) && !value) {
-        return 'Never'
+    if (typeof value === 'number') {
+        if (key.includes('capacity') && value === 0) return 'Unlimited'
+        return value
     }
 
     if (typeof value === 'string') {
-        if (ISODateTimeReg.test(value)) {
-            return new Date(value).toLocaleString('nb-NO', OsloDateTime)
+        if (RX_DATETIME.test(value)) {
+            return new Date(value).toLocaleString('nb-NO', {
+                timeZone: 'Europe/Oslo',
+                year: 'numeric', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit',
+            })
         }
-
-        if (ISODateReg.test(value)) {
-            return new Date(value).toLocaleDateString('nb-NO', OsloTZ)
+        if (RX_DATE.test(value)) {
+            return new Date(value).toLocaleDateString('nb-NO', { timeZone: 'Europe/Oslo' })
         }
-
-        if (ISOTimeReg.test(value)) {
-            return new Date(`1970-01-01T${value}`).toLocaleTimeString('nb-NO', OsloTime)
+        if (RX_TIME.test(value)) {
+            return new Date(`1970-01-01T${value}`).toLocaleTimeString('nb-NO', {
+                timeZone: 'Europe/Oslo',
+                hour: '2-digit', minute: '2-digit',
+            })
         }
+        return value
     }
 
-    if (key.includes('capacity')) {
-        return value === 0 ? 'Unlimited' : value
-    }
+    if (Array.isArray(value)) return value.join(', ')
 
-    return value
+    return String(value)
 }

package/src/components/table/header.tsx

@@ -1,94 +1,139 @@
-import { ChevronDown, ChevronUp } from 'lucide-react'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import type { Column } from 'uibee/components'
+'use client'
 
-type HeaderProps = {
-    columns: Column[]
-    hideMenu?: boolean
-    variant?: 'default' | 'minimal'
-}
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react'
+import type { Column, SortState, Density, TableVariant } from './types'
+import { DENSITY_TH, VARIANT_THEAD, VARIANT_THEAD_TH } from './constants'
 
-function parseOrder(value: string | null) {
-    return value === 'asc' || value === 'desc' ? value : undefined
+type HeaderProps<T extends Record<string, unknown>> = {
+    columns: Column<T>[]
+    sort?: SortState
+    onSort: (sort: SortState) => void
+    hasMenu: boolean
+    hasSelect: boolean
+    hasExpand: boolean
+    allSelected: boolean
+    someSelected: boolean
+    onSelectAll: () => void
+    variant: TableVariant
+    density: Density
 }
 
-export default function Header({ columns, hideMenu, variant = 'default' }: HeaderProps) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const searchParams = useSearchParams()
-    const [column, setColumn] = useState(searchParams.get('column') ?? '')
-    const [order, setOrder] = useState<'asc' | 'desc' | undefined>(parseOrder(searchParams.get('order')))
-
-    useEffect(() => {
-        if (!column || !order) {
-            return
-        }
+// Title case from any key format: last_active → "Last Active", cpuPct → "Cpu Pct", id → "ID"
+function formatLabel(key: string, label?: string): string {
+    if (label) return label
+    if (key.length <= 2) return key.toUpperCase()
+    return key
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')  // split camelCase
+        .replaceAll('_', ' ')
+        .replaceAll('-', ' ')
+        .split(/\s+/)
+        .filter(Boolean)
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ')
+}
 
-        const params = new URLSearchParams(searchParams.toString())
-        if (
-            searchParams.get('order') !== order ||
-            searchParams.get('column') !== column
-        ) {
-            params.set('order', order)
-            params.set('column', column)
-            params.set('page', '1')
-            router.push(`${pathname}?${params.toString()}`)
-        }
-    }, [order, column, pathname, router, searchParams])
+export default function Header<T extends Record<string, unknown>>({
+    columns, sort, onSort, hasMenu, hasSelect, hasExpand,
+    allSelected, someSelected, onSelectAll, variant, density,
+}: HeaderProps<T>) {
 
-    function handleChange(key: string) {
-        setColumn(key)
-        setOrder((prev) => (key === column && prev === 'asc' ? 'desc' : 'asc'))
+    function handleSort(key: string) {
+        const sameCol = sort?.column === key
+        onSort({ column: key, order: sameCol && sort?.order === 'asc' ? 'desc' : 'asc' })
     }
 
     return (
-        <thead className={`
-            block w-full
-            ${variant === 'default' ? 'bg-login-700' : 'bg-transparent border-b border-login-600'}
-        `}>
+        <thead className={`block w-full sticky top-0 z-10 ${VARIANT_THEAD[variant]}`}>
             <tr className='flex w-full'>
+
+                {hasSelect && (
+                    <th className='flex items-center justify-center'
+                        style={{ width: '3rem', minWidth: '3rem', flexShrink: 0 }}>
+                        <button
+                            type='button'
+                            aria-label={allSelected ? 'Deselect all' : 'Select all'}
+                            onClick={onSelectAll}
+                            className={`
+                                h-4 w-4 rounded border flex items-center justify-center transition-colors cursor-pointer
+                                ${allSelected || someSelected
+                                    ? 'bg-login border-login text-white'
+                                    : 'border-login-400 bg-transparent hover:border-login-200'
+                                }
+                            `}
+                        >
+                            {someSelected && !allSelected && (
+                                <span className='block h-0.5 w-2 bg-white rounded-full' />
+                            )}
+                            {allSelected && (
+                                <svg className='h-3 w-3' viewBox='0 0 12 12' fill='none'>
+                                    <path d='M2 6l3 3 5-5' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+                                </svg>
+                            )}
+                        </button>
+                    </th>
+                )}
+
                 {columns.map((col) => {
-                    const key = col.key
-                    const value = col.label || (
-                        key.length < 3
-                            ? key.toUpperCase()
-                            : `${key[0].toUpperCase()}${key
-                                .slice(1)
-                                .replaceAll('_', ' ')}`
-                    )
+                    const sortable = col.sortable !== false
+                    const isActive = sort?.column === col.key
+                    const ariaSort = isActive
+                        ? sort!.order === 'asc' ? 'ascending' : 'descending'
+                        : 'none'
+
+                    const alignClass =
+                        col.align === 'right'  ? 'justify-end'    :
+                        col.align === 'center' ? 'justify-center' : ''
+
                     return (
                         <th
-                            key={key}
+                            key={col.key}
+                            aria-sort={sortable ? ariaSort : undefined}
+                            style={col.width ? { width: col.width, flexShrink: 0 } : undefined}
                             className={`
-                                flex-1 min-w-0 px-6 py-3 text-xs font-medium uppercase tracking-wider text-left
-                                ${variant === 'default' ? 'text-login-200' : 'text-login-100'}
-                                ${variant === 'minimal' ? 'px-4!' : ''}
+                                ${col.width ? '' : 'flex-1'}
+                                text-xs font-medium uppercase tracking-wider
+                                ${DENSITY_TH[density]} ${VARIANT_THEAD_TH[variant]}
                             `}
                         >
-                            <button
-                                className='flex w-full min-w-0 flex-row items-center gap-2 group uppercase whitespace-nowrap'
-                                onClick={() => handleChange(key)}
-                            >
-                                <span className='min-w-0 truncate'>{value}</span>
-                                <span className='flex flex-col'>
-                                    {column === key ? (
-                                        order === 'asc' ? (
-                                            <ChevronUp className='h-4 w-4' />
+                            {sortable ? (
+                                <button
+                                    type='button'
+                                    className={`group inline-flex items-center gap-1.5 w-full cursor-pointer ${alignClass}`}
+                                    onClick={() => handleSort(col.key)}
+                                >
+                                    <span className='whitespace-nowrap'>{formatLabel(col.key, col.label)}</span>
+                                    <span className='shrink-0 text-current'>
+                                        {isActive ? (
+                                            sort!.order === 'asc'
+                                                ? <ChevronUp className='h-3.5 w-3.5' />
+                                                : <ChevronDown className='h-3.5 w-3.5' />
                                         ) : (
-                                            <ChevronDown className='h-4 w-4' />
-                                        )
-                                    ) : (
-                                        <ChevronUp
-                                            className='h-4 w-4 stroke-login-200 opacity-0 group-hover:opacity-100'
-                                        />
-                                    )}
+                                            <ChevronsUpDown className='h-3.5 w-3.5 opacity-0 group-hover:opacity-35 transition-opacity' />
+                                        )}
+                                    </span>
+                                </button>
+                            ) : (
+                                <span className={`flex w-full ${alignClass}`}>
+                                    {formatLabel(col.key, col.label)}
                                 </span>
-                            </button>
+                            )}
                         </th>
                     )
                 })}
-                {!hideMenu && <th className='shrink-0 w-16 px-6 py-3' />}
+
+                {hasExpand && (
+                    <th className='flex items-center justify-center'
+                        style={{ width: '2.5rem', minWidth: '2.5rem', flexShrink: 0 }}>
+                        <span className={`text-xs font-medium tracking-wider uppercase opacity-50 ${VARIANT_THEAD_TH[variant]}`}>
+                            +
+                        </span>
+                    </th>
+                )}
+
+                {hasMenu && (
+                    <th aria-hidden='true'
+                        style={{ width: '3.5rem', minWidth: '3.5rem', flexShrink: 0 }} />
+                )}
             </tr>
         </thead>
     )

package/src/components/table/menu.tsx

@@ -1,25 +1,38 @@
 'use client'
 
-import React, { createContext, useContext, SVGProps, useEffect } from 'react'
+import React, { createContext, useContext, useEffect } from 'react'
 import { createPortal } from 'react-dom'
+import type { MenuAnchor } from './types'
 
-const MenuContext = createContext<{ onClose?: () => void }>({})
+const MenuCtx = createContext<{ onClose?: () => void }>({})
 
-export default function Menu({ ref, children, anchor, onClose }: {
+type MenuProps = {
     ref: React.RefObject<HTMLDivElement | null>
     children: React.ReactNode
-    anchor: { top: number; right: number }
+    anchor: MenuAnchor
     onClose?: () => void
-}) {
+}
+
+export default function Menu({ ref, children, anchor, onClose }: MenuProps) {
+    useEffect(() => {
+        function handleKey(e: KeyboardEvent) {
+            if (e.key === 'Escape') onClose?.()
+        }
+        window.addEventListener('keydown', handleKey)
+        return () => window.removeEventListener('keydown', handleKey)
+    }, [onClose])
+
     return createPortal(
         <div
             ref={ref}
+            role='menu'
+            aria-orientation='vertical'
             style={{ top: anchor.top, right: anchor.right }}
-            className='fixed bg-login-500 border border-login-600 rounded-lg shadow-lg z-9999 w-44'
+            className='fixed z-[9999] w-44 overflow-hidden rounded-lg border border-login-500/60 bg-login-600 shadow-xl shadow-black/40'
         >
-            <MenuContext.Provider value={{ onClose }}>
+            <MenuCtx.Provider value={{ onClose }}>
                 {children}
-            </MenuContext.Provider>
+            </MenuCtx.Provider>
         </div>,
         document.body
     )
@@ -30,47 +43,50 @@ export function MenuButton({
     text,
     hotKey,
     onClick,
-    className,
+    className = '',
 }: {
     icon: React.ReactNode
     text: string
     hotKey?: string
     onClick: () => void
     className?: string
-}
-){
-    const { onClose } = useContext(MenuContext)
+}) {
+    const { onClose } = useContext(MenuCtx)
 
     useEffect(() => {
         if (!hotKey) return
-
-        function handleKeyDown(e: KeyboardEvent) {
+        function handleKey(e: KeyboardEvent) {
+            const tag = (e.target as HTMLElement).tagName
+            if (tag === 'INPUT' || tag === 'TEXTAREA') return
             if (e.key.toLowerCase() === hotKey!.toLowerCase()) {
                 e.preventDefault()
                 onClick()
                 onClose?.()
             }
         }
-
-        window.addEventListener('keydown', handleKeyDown)
-        return () => window.removeEventListener('keydown', handleKeyDown)
+        window.addEventListener('keydown', handleKey)
+        return () => window.removeEventListener('keydown', handleKey)
     }, [hotKey, onClick, onClose])
 
     return (
         <button
-            onClick={() => {
-                onClick()
-                onClose?.()
-            }}
-            className={`flex items-center justify-between w-full px-3 py-2 text-sm hover:bg-login-600 cursor-pointer
-                ${className || ''}
+            role='menuitem'
+            onClick={() => { onClick(); onClose?.() }}
+            className={`
+                flex w-full items-center justify-between px-3 py-2 text-sm
+                text-login-75 transition-colors duration-100
+                hover:bg-login-500 focus:bg-login-500 focus:outline-none
+                first:rounded-t-lg last:rounded-b-lg
+                ${className}
             `}
         >
-            <div className='flex items-center'>
-                {React.cloneElement(icon as React.ReactElement<SVGProps<SVGSVGElement>>, { className: 'w-4 h-4 mr-2' })}
+            <span className='flex items-center gap-2'>
+                <span className='h-4 w-4 shrink-0 flex items-center justify-center'>{icon}</span>
                 {text}
-            </div>
-            <span className='text-xs opacity-50 font-mono'>{hotKey}</span>
+            </span>
+            {hotKey && (
+                <kbd className='font-mono text-xs opacity-40'>{hotKey}</kbd>
+            )}
         </button>
     )
 }