@toolr/ui-design 0.1.6 → 0.1.8

package/components/ui/sort-dropdown.tsx

@@ -73,22 +73,25 @@ export function SortDropdown({
   return (
     <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
       <button
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
         onClick={() => setIsOpen(!isOpen)}
         className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
       >
-        <span
-          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`}
+        <button
+          type="button"
+          aria-label={ascending ? 'Sort descending' : 'Sort ascending'}
+          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors cursor-pointer`}
           onClick={(e) => { e.stopPropagation(); onToggleDirection() }}
-          role="button"
         >
           <DirIcon className="w-3 h-3" />
-        </span>
+        </button>
         <span className="whitespace-nowrap">{current.label}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} role="listbox" className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}>
           {fields.map((f, idx) => (
             <button
               key={f.value}

package/components/ui/status-card.tsx

@@ -1,19 +1,8 @@
 /** Status card displaying a list of labeled items with color-coded status indicators. */
 
-import {
-  Settings, Shield, Database, Globe, Zap, Code, Terminal,
-  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  settings: Settings, shield: Shield, database: Database, globe: Globe,
-  zap: Zap, code: Code, terminal: Terminal, star: Star, cloud: Cloud,
-  bell: Bell, heart: Heart, sparkles: Sparkles, bot: Bot, plug: Plug,
-}
-
 type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral'
 
 export interface StatusItem {
@@ -55,7 +44,7 @@ export function StatusCard({
   action,
   className,
 }: StatusCardProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden', className)}>

package/components/ui/tab-bar.tsx

@@ -1,38 +1,12 @@
 /** Tab bar with underline, pill, and card variants, closable tabs, color-coded icons, and auto-collapse to icon-only. */
 
 import { useRef, useState, useEffect, useCallback } from 'react'
-import {
-  Settings, Folder, File, Code, Terminal, Database,
-  Globe, Star, Users, User, Tag, X,
-  Zap, Shield, Sparkles, Eye, Lock, Search, Heart,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { X } from 'lucide-react'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { Tooltip } from './tooltip.tsx'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  settings: Settings,
-  code: Code,
-  terminal: Terminal,
-  database: Database,
-  globe: Globe,
-  star: Star,
-  users: Users,
-  user: User,
-  tag: Tag,
-  zap: Zap,
-  shield: Shield,
-  sparkles: Sparkles,
-  eye: Eye,
-  lock: Lock,
-  search: Search,
-  heart: Heart,
-}
-
 export interface Tab {
   id: string
   label: string
@@ -102,7 +76,7 @@ function estimateTabsWidth(tabs: Tab[], size: keyof typeof sizeConfig): number {
 }
 
 function TabIcon({ icon, size, color }: { icon: IconName; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; color?: string }) {
-  const Icon = iconSubset[icon]
+  const Icon = iconMap[icon]
   if (!Icon) return null
   const s = sizeConfig[size]
   const c = getColors(color)
@@ -114,11 +88,12 @@ function TabBadge({ badge, size, badgeColor }: { badge: number | string; size: '
   return <Badge value={badge} color={badgeColor} size={s.badgeSize} className="flex-shrink-0" />
 }
 
-function CloseButton({ size, onClick }: { size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onClick: () => void }) {
+function CloseButton({ size, onClick, tabLabel }: { size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onClick: () => void; tabLabel: string }) {
   const s = sizeConfig[size]
   return (
     <button
       type="button"
+      aria-label={`Close ${tabLabel}`}
       onClick={(e) => {
         e.stopPropagation()
         onClick()
@@ -149,6 +124,8 @@ function CompactTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'relative flex items-center justify-center transition-colors cursor-pointer',
@@ -186,6 +163,8 @@ function UnderlineTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer',
@@ -197,7 +176,7 @@ function UnderlineTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
       {isActive && (
         <span className={cn('absolute bottom-0 left-0 right-0 h-0.5 rounded-full', c.indicator)} />
       )}
@@ -215,6 +194,8 @@ function PillTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group flex items-center whitespace-nowrap rounded-md transition-colors cursor-pointer',
@@ -228,7 +209,7 @@ function PillTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
     </button>
   )
 }
@@ -243,6 +224,8 @@ function CardTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer rounded-t-lg border border-b-0',
@@ -256,7 +239,7 @@ function CardTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
       {isActive && (
         <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-800" />
       )}
@@ -303,6 +286,7 @@ export function TabBar({
   return (
     <div
       ref={containerRef}
+      role="tablist"
       className={cn(
         'flex items-end',
         variant === 'underline' && 'border-b border-neutral-700',

package/components/ui/toggle.tsx

@@ -7,22 +7,10 @@
  * - List items - inline toggle controls
  */
 
-export type ToggleColor =
-  | 'blue'
-  | 'green'
-  | 'red'
-  | 'orange'
-  | 'cyan'
-  | 'yellow'
-  | 'purple'
-  | 'indigo'
-  | 'emerald'
-  | 'amber'
-  | 'violet'
-  | 'neutral'
-  | 'sky'
-  | 'pink'
-  | 'teal'
+import { type AccentColor } from '../lib/form-colors.ts'
+import { cn } from '../lib/cn.ts'
+
+export type ToggleColor = AccentColor
 
 // Border colors per accent
 const BORDER_COLORS: Record<ToggleColor, { idle: string; active: string }> = {
@@ -90,8 +78,6 @@ const TOGGLE_SIZES: Record<ToggleSize, { track: string; knob: string; translate:
   lg: { track: 'w-14 h-7', knob: 'w-6 h-6', translate: 'translate-x-7' },
 }
 
-export type ToggleVariant = 'outline' | 'filled'
-
 export interface ToggleProps {
   checked: boolean
   onChange: (checked: boolean) => void
@@ -99,7 +85,8 @@ export interface ToggleProps {
   size?: ToggleSize
   className?: string
   color?: ToggleColor
-  variant?: ToggleVariant
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
   /** Test ID for E2E testing */
   testId?: string
 }
@@ -109,8 +96,9 @@ export function Toggle({
   onChange,
   disabled = false,
   size = 'sm',
-  className = '',
+  className,
   color = 'blue',
+  'aria-label': ariaLabel,
   testId,
 }: ToggleProps) {
   const s = TOGGLE_SIZES[size]
@@ -119,23 +107,27 @@ export function Toggle({
   return (
     <button
       type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
       onClick={() => !disabled && onChange(!checked)}
       disabled={disabled}
       data-testid={testId}
       style={{ boxShadow: `inset 0 0 0 1px ${checked ? bc.active : bc.idle}` }}
-      className={`
-        relative ${s.track} rounded-full transition-all flex-shrink-0
-        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-        ${checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color]}
-        ${className}
-      `}
+      className={cn(
+        'relative rounded-full transition-all flex-shrink-0 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
+        s.track,
+        checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color],
+        className,
+      )}
     >
       <span
         style={{ backgroundColor: checked ? kc.on : kc.off }}
-        className={`
-          block absolute top-0.5 left-0.5 ${s.knob} rounded-full transition-transform
-          ${checked ? s.translate : 'translate-x-0'}
-        `}
+        className={cn(
+          'block absolute top-0.5 left-0.5 rounded-full transition-transform',
+          s.knob,
+          checked ? s.translate : 'translate-x-0',
+        )}
       />
     </button>
   )

package/components/ui/tooltip.tsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useLayoutEffect, useEffect } from 'react'
+import { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+import { useClickOutside } from '../hooks/use-click-outside.ts'
 
 export interface TooltipContent {
   title?: string
@@ -201,37 +202,25 @@ export function Tooltip({
   }
 
   // Click-outside dismissal for click trigger mode
-  useEffect(() => {
-    if (trigger !== 'click' || !isVisible) return
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&
-        tooltipRef.current && !tooltipRef.current.contains(e.target as Node)
-      ) {
-        setIsVisible(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [trigger, isVisible])
+  const dismissClickTooltip = useCallback(() => setIsVisible(false), [])
+  useClickOutside([triggerRef, tooltipRef], isVisible && trigger === 'click', dismissClickTooltip)
 
   const updatePosition = () => {
     if (!triggerRef.current) return
     const triggerRect = triggerRef.current.getBoundingClientRect()
     const tooltipEl = tooltipRef.current
+    const tooltipRect = tooltipEl?.getBoundingClientRect()
 
     let resolvedPosition: ResolvedPosition = position === 'auto' ? 'top' : position
 
-    if (position === 'auto' && tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect()
+    if (position === 'auto' && tooltipRect) {
       resolvedPosition = resolveAutoPosition(triggerRect, tooltipRect)
       setActualPosition(resolvedPosition)
     }
 
     let newCoords = calculateBasePosition(triggerRect, resolvedPosition, align)
 
-    if (tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect()
+    if (tooltipRect) {
       newCoords = adjustForTooltipSize(newCoords, tooltipRect, resolvedPosition, align)
       newCoords = clampToViewport(newCoords, tooltipRect)
     }
@@ -258,13 +247,12 @@ export function Tooltip({
   const tooltipContent = (
     <div
       ref={tooltipRef}
-      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      role="tooltip"
+      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-lg z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
       style={{
         top: coords.top,
         left: coords.left,
-        opacity: isVisible ? 1 : 0,
-        visibility: isVisible ? 'visible' : 'hidden',
-        transition: 'opacity 150ms, visibility 150ms',
+        opacity: 1,
         ...(multiline ? { maxWidth: maxWidth ?? '80vw' } : {}),
         ...(maxHeight ? { maxHeight, overflowY: 'auto' as const } : {}),
       }}
@@ -290,7 +278,7 @@ export function Tooltip({
       >
         {children}
       </div>
-      {createPortal(tooltipContent, document.body)}
+      {isVisible && createPortal(tooltipContent, document.body)}
     </>
   )
 }