uibee 3.1.6 → 3.2.0

package/src/components/container/expandableCard.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { ElementType, ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
+import Card from './card'
+import IconBubble, { type IconBubbleTone } from './iconBubble'
+import PulseDot from './pulseDot'
+import Button from '@components/buttons/button'
+
+type PulseVariant = 'online' | 'offline' | 'warning' | 'unknown'
+
+type ExpandableCardProps = {
+    icon: ElementType
+    iconTone?: IconBubbleTone
+    title: string
+    subtitle?: ReactNode
+    pulse?: { variant: PulseVariant; label: string }
+    trailing?: ReactNode
+    isExpanded: boolean
+    onToggle: () => void
+    children?: ReactNode
+}
+
+export default function ExpandableCard({
+    icon,
+    iconTone = 'orange',
+    title,
+    subtitle,
+    pulse,
+    trailing,
+    isExpanded,
+    onToggle,
+    children,
+}: ExpandableCardProps) {
+    return (
+        <Card>
+            <div
+                role='button'
+                tabIndex={0}
+                onClick={onToggle}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle() }
+                }}
+                aria-expanded={isExpanded}
+                className='group flex cursor-pointer select-none items-center gap-4 px-5 py-4'
+            >
+                <IconBubble icon={icon} tone={iconTone} size='sm' />
+                <div className='min-w-0 flex-1'>
+                    <div className='flex flex-wrap items-center gap-3'>
+                        <span className='font-semibold text-login-50 transition group-hover:text-login'>{title}</span>
+                        {pulse && (
+                            <span className='flex items-center gap-2 text-xs text-login-300'>
+                                <span className='flex h-3 w-3 shrink-0 items-center justify-center'>
+                                    <PulseDot variant={pulse.variant} size='sm' />
+                                </span>
+                                {pulse.label}
+                            </span>
+                        )}
+                    </div>
+                    {subtitle && <div className='mt-0.5 text-xs text-login-300'>{subtitle}</div>}
+                </div>
+                {trailing && (
+                    <div className='flex shrink-0 items-center gap-3' onClick={(e) => e.stopPropagation()}>
+                        {trailing}
+                    </div>
+                )}
+                <Button
+                    variant='secondary'
+                    icon={<ChevronDown className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} />}
+                    onClick={(e) => { e.stopPropagation(); onToggle() }}
+                />
+            </div>
+            {isExpanded && children && (
+                <div className='border-t border-white/5 px-5 pb-5 pt-4'>
+                    {children}
+                </div>
+            )}
+        </Card>
+    )
+}

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 (
+        <div className={`rounded-xl border border-login-500/20 bg-login-800/60 backdrop-blur-sm ${className}`}>
+            {children}
+        </div>
+    )
+}

package/src/components/container/tabs.tsx

@@ -42,9 +42,9 @@ export function Tabs({ tabs, defaultTab, activeTab: controlledTab, onTabChange,
                         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'
-                            }
+                        ? 'bg-login text-white shadow-sm'
+                        : 'text-login-200 hover:text-login-50 hover:bg-login-600'
+                    }
                         `}
                     >
                         {tab.label}

package/src/components/empty/emptyState.tsx

@@ -0,0 +1,26 @@
+import type { ElementType, ReactNode } from 'react'
+
+type EmptyStateProps = {
+    icon?: ElementType
+    title: string
+    description?: string
+    action?: ReactNode
+    className?: string
+}
+
+export default function EmptyState({ icon: Icon, title, description, action, className = '' }: EmptyStateProps) {
+    return (
+        <div className={`flex flex-col items-center justify-center gap-3 py-12 text-center ${className}`}>
+            {Icon && (
+                <div className='mb-1 rounded-xl bg-login-600/30 p-3 text-login-400'>
+                    <Icon className='h-7 w-7' />
+                </div>
+            )}
+            <p className='text-sm font-semibold text-login-100'>{title}</p>
+            {description && (
+                <p className='max-w-xs text-xs leading-relaxed text-login-400'>{description}</p>
+            )}
+            {action && <div className='mt-2'>{action}</div>}
+        </div>
+    )
+}

package/src/components/index.ts

@@ -55,3 +55,20 @@ export { default as ConfirmPopup } from './confirm/confirmPopup'
 export { default as SeverityPill } from './vulnerability/severityPill'
 
 export { default as Toggle } from './inputs/toggle'
+export { default as FileInput } from './inputs/fileInput'
+
+export { default as GlassCard } from './container/glassCard'
+export { default as ExpandableCard } from './container/expandableCard'
+
+export { default as Modal } from './modal/modal'
+
+export { default as Sidebar } from './sidebar/sidebar'
+export type { SidebarItem, SidebarSubItem } from './sidebar/sidebar'
+
+export { default as Badge } from './badge/badge'
+
+export { default as EmptyState } from './empty/emptyState'
+
+export { default as Spinner } from './spinner/spinner'
+
+export { Code, CodeBlock } from './code/code'

package/src/components/inputs/fileInput.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { useRef, useState, type DragEvent, type ChangeEvent } from 'react'
+import { UploadCloud, X, FileIcon } from 'lucide-react'
+
+type FileInputProps = {
+    name: string
+    label?: string
+    accept?: string
+    multiple?: boolean
+    onChange: (files: File[]) => void
+    className?: string
+}
+
+export default function FileInput({ name, label, accept, multiple = false, onChange, className = '' }: FileInputProps) {
+    const [files, setFiles] = useState<File[]>([])
+    const [dragging, setDragging] = useState(false)
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    function handleFiles(incoming: FileList | null) {
+        if (!incoming) return
+        const arr = multiple ? Array.from(incoming) : [incoming[0]]
+        setFiles(arr)
+        onChange(arr)
+    }
+
+    function removeFile(index: number) {
+        const next = files.filter((_, i) => i !== index)
+        setFiles(next)
+        onChange(next)
+        if (inputRef.current) inputRef.current.value = ''
+    }
+
+    function onDrop(e: DragEvent) {
+        e.preventDefault()
+        setDragging(false)
+        handleFiles(e.dataTransfer.files)
+    }
+
+    return (
+        <div className={`flex flex-col gap-2 ${className}`}>
+            {label && <label className='text-sm font-medium text-login-200'>{label}</label>}
+            <div
+                role='button'
+                tabIndex={0}
+                onClick={() => inputRef.current?.click()}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click() }}
+                onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={onDrop}
+                className={`
+                    flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6
+                    transition-all duration-150
+                    ${dragging
+            ? 'scale-[1.01] border-login bg-login/5'
+            : 'border-login-500/50 bg-login-800/30 hover:border-login/50 hover:bg-login/5'
+        }
+                `}
+            >
+                <input
+                    ref={inputRef}
+                    type='file'
+                    name={name}
+                    accept={accept}
+                    multiple={multiple}
+                    className='hidden'
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => handleFiles(e.target.files)}
+                />
+                <UploadCloud className='h-7 w-7 text-login-400' />
+                <div className='text-center'>
+                    <p className='text-sm text-login-200'>
+                        Drop files here or <span className='text-login'>browse</span>
+                    </p>
+                    {accept && <p className='mt-0.5 text-xs text-login-400'>{accept}</p>}
+                </div>
+            </div>
+            {files.length > 0 && (
+                <ul className='flex flex-col gap-1.5'>
+                    {files.map((file, i) => (
+                        <li key={i} className='
+                            flex items-center gap-2 rounded-lg
+                            border border-login-500/25 bg-login-800/50 px-3 py-2 text-sm
+                        '>
+                            <FileIcon className='h-4 w-4 shrink-0 text-login-400' />
+                            <span className='flex-1 truncate text-login-200'>{file.name}</span>
+                            <span className='shrink-0 text-xs text-login-400'>{(file.size / 1024).toFixed(1)} KB</span>
+                            <button
+                                type='button'
+                                onClick={(e) => { e.stopPropagation(); removeFile(i) }}
+                                className='cursor-pointer text-login-400 transition-colors hover:text-red-400'
+                            >
+                                <X className='h-3.5 w-3.5' />
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    )
+}

package/src/components/inputs/input.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type JSX, useRef, useState, useId } from 'react'
+import React, { type ChangeEvent, type JSX, useRef, useState, useId } from 'react'
 import { Calendar, Clock } from 'lucide-react'
 import { FieldWrapper } from './shared'
 import DateTimePickerPopup from './shared/dateTimePickerPopup'
@@ -158,7 +158,7 @@ export default function Input(props: InputProps) {
                     readOnly={isClickableType}
                     onClick={() => isClickableType && !inputProps.disabled && setIsOpen(true)}
                     aria-describedby={error ? `${name}-error` : undefined}
-                    style={{ anchorName } as any}
+                    style={{ anchorName } as React.CSSProperties & { anchorName?: string }}
                     className={`
                         w-full rounded-md bg-login-500/50 border border-login-500
                         text-login-text placeholder-login-200 text-sm

package/src/components/inputs/multiSelect.tsx

@@ -93,7 +93,10 @@ export default function MultiSelect({
                             return (
                                 <span
                                     key={val}
-                                    className='flex items-center gap-1 px-2 py-0.5 bg-login-600 text-login-100 border border-login-500 rounded text-sm'
+                                    className='
+                                        flex items-center gap-1 rounded px-2 py-0.5 text-sm
+                                        border border-login-500 bg-login-600 text-login-100
+                                    '
                                 >
                                     {option.label}
                                     {!disabled && (
@@ -116,7 +119,10 @@ export default function MultiSelect({
                 </div>
 
                 {open && options.length > 0 && (
-                    <div className='absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-md bg-login-800 border border-login-500/50 shadow-lg'>
+                    <div className='
+                        absolute z-50 mt-1 w-full max-h-60 overflow-auto
+                        rounded-md border border-login-500/50 bg-login-800 shadow-lg
+                    '>
                         {options.map((option) => {
                             const selected = value.includes(option.value)
                             return (

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

@@ -192,7 +192,7 @@ export default function ColorPickerPopup({ value, onChange, onClose, anchorName
     }
 
     return (
-        <div 
+        <div
             className='fixed z-50 bg-login-700 border border-login-500/50 rounded-md shadow-xl p-3 w-64 select-none anchor-popup'
             style={{
                 positionAnchor: anchorName,

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

@@ -220,7 +220,7 @@ export default function DateTimePickerPopup({
     }
 
     return (
-        <div 
+        <div
             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,

package/src/components/inputs/switch.tsx

@@ -39,7 +39,11 @@ export default function Switch(props: SwitchProps) {
                     ${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' />
+                    <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/modal/modal.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, type ReactNode } from 'react'
+import { X } from 'lucide-react'
+
+type ModalSize = 'sm' | 'md' | 'lg'
+
+type ModalProps = {
+    isOpen: boolean
+    onClose: () => void
+    title?: string
+    children: ReactNode
+    footer?: ReactNode
+    size?: ModalSize
+}
+
+const sizes: Record<ModalSize, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+}
+
+export default function Modal({ isOpen, onClose, title, children, footer, size = 'md' }: ModalProps) {
+    useEffect(() => {
+        if (!isOpen) return
+        const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+        document.addEventListener('keydown', handler)
+        return () => document.removeEventListener('keydown', handler)
+    }, [isOpen, onClose])
+
+    if (!isOpen) return null
+
+    return (
+        <div
+            role='dialog'
+            aria-modal='true'
+            className='fixed inset-0 z-50 flex items-center justify-center'
+            onClick={onClose}
+        >
+            <div className='absolute inset-0 bg-black/50 backdrop-blur-sm' />
+            <div
+                className={`
+                    relative z-10 mx-4 w-full ${sizes[size]}
+                    flex flex-col rounded-xl border border-login-500/50
+                    bg-login-800 shadow-2xl
+                `}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {title && (
+                    <div className='flex items-center justify-between px-6 pt-5 pb-4 border-b border-login-500/25'>
+                        <h2 className='text-login-50 text-base font-semibold leading-snug'>{title}</h2>
+                        <button
+                            type='button'
+                            onClick={onClose}
+                            className='
+                                cursor-pointer rounded-md p-1.5
+                                text-login-400 hover:text-login-100 hover:bg-login-600
+                                transition-colors
+                            '
+                        >
+                            <X className='w-4 h-4' />
+                        </button>
+                    </div>
+                )}
+                <div className='p-6'>{children}</div>
+                {footer && (
+                    <div className='px-6 pb-5 pt-4 border-t border-login-500/25'>
+                        {footer}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import { useState, type ElementType, type ReactNode } from 'react'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+export type SidebarSubItem = {
+    name: string
+    path: string
+}
+
+export type SidebarItem = {
+    name: string
+    path: string
+    icon: ElementType
+    status?: ReactNode
+    items?: SidebarSubItem[]
+}
+
+type SidebarProps = {
+    items: SidebarItem[]
+    header?: ReactNode
+    bottomAction?: (expanded: boolean) => ReactNode
+    mobile?: boolean
+    initialExpanded?: boolean
+}
+
+const ITEM_HEIGHT = 48
+const GAP = 4
+const SUB_STRIDE = 40
+
+export default function Sidebar({ items, header, bottomAction, mobile = false, initialExpanded = true }: SidebarProps) {
+    const [expanded, setExpanded] = useState(initialExpanded)
+    const pathname = usePathname()
+
+    function isItemActive(item: SidebarItem) {
+        return pathname === item.path ||
+            !!(item.items?.some(sub => pathname === sub.path || pathname.startsWith(sub.path + '/')))
+    }
+
+    const activeIndex = items.findIndex(isItemActive)
+    const activeOffset = items
+        .slice(0, Math.max(activeIndex, 0))
+        .reduce((acc, item) => acc + ITEM_HEIGHT + (item.items ? GAP : 0) + GAP, 0)
+
+    return (
+        <aside className={`
+            flex flex-col border-r border-login-100/10 bg-login-900
+            transition-all duration-300 ease-in-out
+            ${mobile ? 'w-full' : `h-full ${expanded ? 'w-64' : 'w-20'}`}
+        `}>
+            {!mobile && (
+                <div className={`relative mb-2 p-4 transition-all duration-300 ${expanded ? 'h-16' : 'h-20'}`}>
+                    {header && (
+                        <div className={`
+                            absolute top-4 flex items-center transition-all duration-300
+                            ${expanded ? 'left-4 gap-3' : 'left-1/2 -translate-x-1/2 gap-0'}
+                        `}>
+                            {header}
+                        </div>
+                    )}
+                    <button
+                        onClick={() => setExpanded(!expanded)}
+                        className={`
+                            absolute cursor-pointer rounded-lg p-1.5
+                            text-login-200 transition-all duration-300 hover:bg-login-800
+                            ${expanded ? 'right-4 top-4' : 'left-1/2 top-12 -translate-x-1/2'}
+                        `}
+                    >
+                        {expanded ? <ChevronLeft size={20} /> : <ChevronRight size={20} />}
+                    </button>
+                </div>
+            )}
+
+            {mobile && <div className='h-4' />}
+
+            <div className='relative flex flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto px-3'>
+                {activeIndex >= 0 && (
+                    <span
+                        aria-hidden
+                        className='absolute left-3 right-3 top-0 h-12 rounded-lg bg-login-800 transition-transform duration-300 ease-in-out'
+                        style={{ transform: `translateY(${activeOffset}px)` }}
+                    />
+                )}
+                {items.map((item, index) => {
+                    const isActive = isItemActive(item)
+                    const Icon = item.icon
+                    const activeSubIndex = item.items
+                        ? item.items.findIndex(sub => pathname === sub.path || pathname.startsWith(sub.path + '/'))
+                        : -1
+
+                    return (
+                        <div key={index} className='flex flex-col gap-1'>
+                            <Link
+                                href={item.path}
+                                title={!expanded ? item.name : undefined}
+                                className={`
+                                    group relative z-10 flex items-center
+                                    overflow-hidden rounded-lg p-3 transition-all duration-200
+                                    ${isActive ? 'text-login' : 'text-login-200 hover:bg-login-800/50 hover:text-login-100'}
+                                `}
+                            >
+                                <div className={`
+                                    flex min-w-6 w-6 items-center justify-center transition-all duration-300
+                                    ${expanded ? '' : 'translate-x-1'}
+                                    ${isActive ? '[&>svg]:stroke-login' : 'group-hover:[&>svg]:stroke-login-100'}
+                                `}>
+                                    <Icon className='h-5 w-5' />
+                                </div>
+                                <span className={`
+                                    whitespace-nowrap overflow-hidden transition-all duration-300
+                                    ${expanded ? 'ml-3 max-w-48 opacity-100' : 'ml-0 max-w-0 opacity-0'}
+                                `}>
+                                    {item.name}
+                                </span>
+                                {item.status && (
+                                    <div className={`
+                                        flex items-center justify-center
+                                        ${expanded ? 'ml-auto' : 'absolute right-1 top-1 scale-75'}
+                                    `}>
+                                        {item.status}
+                                    </div>
+                                )}
+                            </Link>
+
+                            {item.items && (
+                                <div className={`
+                                    relative ml-6 flex flex-col gap-1 overflow-hidden
+                                    border-l border-login-800 pl-2
+                                    transition-all duration-300 ease-in-out
+                                    ${expanded && isActive ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}
+                                `}>
+                                    {activeSubIndex >= 0 && (
+                                        <span
+                                            aria-hidden
+                                            className='
+                                                absolute left-2 right-0 top-0 h-9 rounded-lg
+                                                bg-login-800/50 transition-transform duration-300 ease-in-out
+                                            '
+                                            style={{ transform: `translateY(${activeSubIndex * SUB_STRIDE}px)` }}
+                                        />
+                                    )}
+                                    {item.items.map((sub, subIndex) => {
+                                        const isSubActive = pathname === sub.path || pathname.startsWith(sub.path + '/')
+                                        return (
+                                            <Link
+                                                key={`${index}-${subIndex}`}
+                                                href={sub.path}
+                                                className={`
+                                                    relative z-10 rounded-lg p-2 text-sm
+                                                    transition-all duration-200
+                                                    ${isSubActive
+                                                ? 'text-login'
+                                                : 'text-login-300 hover:bg-login-800/30 hover:text-login-100'
+                                            }
+                                                `}
+                                            >
+                                                {sub.name}
+                                            </Link>
+                                        )
+                                    })}
+                                </div>
+                            )}
+                        </div>
+                    )
+                })}
+            </div>
+
+            {bottomAction && (
+                <div className='border-t border-login-100/10 p-3'>
+                    {bottomAction(expanded)}
+                </div>
+            )}
+        </aside>
+    )
+}

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,20 @@
+type SpinnerProps = {
+    size?: 'sm' | 'md' | 'lg'
+    className?: string
+}
+
+const sizes = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-6 h-6 border-2',
+    lg: 'w-9 h-9 border-[3px]',
+}
+
+export default function Spinner({ size = 'md', className = '' }: SpinnerProps) {
+    return (
+        <div
+            role='status'
+            aria-label='Loading'
+            className={`rounded-full border-login-500 border-t-login animate-spin ${sizes[size]} ${className}`}
+        />
+    )
+}