@toolr/ui-design 0.1.0

package/components/ui/ai-execution-action-buttons.tsx

@@ -0,0 +1,106 @@
+import { IconButton, type IconName } from './icon-button.tsx'
+
+export type ExecutionStatus = 'running' | 'success' | 'partial' | 'error'
+
+export interface AiExecutionActionButtonsProps {
+  /** Whether execution is currently running */
+  isRunning: boolean
+  /** Whether all execution is complete */
+  allDone: boolean
+  /** Called when minimize/pin button clicked - hide modal, continue process */
+  onMinimize: () => void
+  /** Called when cancel/stop button clicked - kill process. If not provided, cancel button is hidden */
+  onCancel?: () => void
+  /** Called when done/close button clicked */
+  onClose: () => void
+  /** Completion status - affects done button icon/color */
+  status?: ExecutionStatus
+  /** Prefix for test IDs (e.g., 'scan-modal' results in 'scan-modal-minimize-btn') */
+  testIdPrefix?: string
+}
+
+export function AiExecutionActionButtons({
+  isRunning,
+  allDone,
+  onMinimize,
+  onCancel,
+  onClose,
+  status = 'success',
+  testIdPrefix,
+}: AiExecutionActionButtonsProps) {
+  const getDoneButtonConfig = (): { icon: IconName; color: 'neutral' | 'blue' | 'red' | 'amber'; tooltip: { title?: string; description: string } } => {
+    if (!allDone) {
+      return {
+        icon: 'check-circle',
+        color: 'neutral',
+        tooltip: { description: 'Waiting for completion' },
+      }
+    }
+    switch (status) {
+      case 'error':
+        return {
+          icon: 'x-circle',
+          color: 'red',
+          tooltip: { description: 'All scans failed. No changes will be applied.' },
+        }
+      case 'partial':
+        return {
+          icon: 'alert-triangle',
+          color: 'amber',
+          tooltip: { description: 'Successful scans will be applied. Failed scans will be skipped.' },
+        }
+      default:
+        return {
+          icon: 'check-circle',
+          color: 'blue',
+          tooltip: { description: 'All scans completed successfully' },
+        }
+    }
+  }
+
+  const doneConfig = getDoneButtonConfig()
+  return (
+    <div className="flex items-center gap-2">
+      {/* While running, show minimize and cancel buttons */}
+      {isRunning && !allDone && (
+        <>
+          {/* Minimize button - hide modal but process continues */}
+          <IconButton
+            icon="minus"
+            onClick={onMinimize}
+            size="sm"
+            color="neutral"
+            tooltip={{ description: 'Hide modal. Process will continue in background.' }}
+            tooltipPosition="top"
+            testId={testIdPrefix ? `${testIdPrefix}-minimize-btn` : undefined}
+          />
+
+          {/* Cancel button - stop and kill the process */}
+          {onCancel && (
+            <IconButton
+              icon="stop-circle"
+              onClick={onCancel}
+              size="sm"
+              color="red"
+              tooltip={{ description: 'Stop and kill the running process' }}
+              tooltipPosition="top"
+              testId={testIdPrefix ? `${testIdPrefix}-cancel-btn` : undefined}
+            />
+          )}
+        </>
+      )}
+
+      {/* Done button - always shown, enabled when complete */}
+      <IconButton
+        icon={doneConfig.icon}
+        onClick={onClose}
+        disabled={isRunning && !allDone}
+        size="sm"
+        color={doneConfig.color}
+        tooltip={doneConfig.tooltip}
+        tooltipPosition="top"
+        testId={testIdPrefix ? `${testIdPrefix}-close-btn` : undefined}
+      />
+    </div>
+  )
+}

package/components/ui/badge.tsx

@@ -0,0 +1,67 @@
+/**
+ * Badge - Outline-styled pill badge for displaying counts or short labels
+ *
+ * Used by:
+ * - TabBar, BottomPanelHeader - tab count badges
+ * - NavCard - card count badges
+ * - Any UI that needs a small inline indicator
+ *
+ * Features:
+ * - Outline variant matching IconButton outline style (border + text, no fill)
+ * - Accepts numbers (auto-caps at 99+) or short strings ("New")
+ * - 13 color variants
+ * - 5 size variants (xss, xs, sm, md, lg)
+ */
+
+export type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+
+export interface BadgeProps {
+  value: number | string
+  color?: BadgeColor
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  className?: string
+  testId?: string
+}
+
+const colorClasses: Record<BadgeColor, string> = {
+  green: 'border-green-500/30 text-green-400',
+  red: 'border-red-500/30 text-red-400',
+  blue: 'border-blue-500/30 text-blue-400',
+  orange: 'border-orange-500/30 text-orange-400',
+  cyan: 'border-cyan-500/30 text-cyan-400',
+  yellow: 'border-yellow-500/30 text-yellow-400',
+  purple: 'border-purple-500/30 text-purple-400',
+  indigo: 'border-indigo-500/30 text-indigo-400',
+  emerald: 'border-emerald-500/30 text-emerald-400',
+  amber: 'border-amber-500/30 text-amber-400',
+  violet: 'border-violet-500/30 text-violet-400',
+  neutral: 'border-neutral-500/30 text-neutral-400',
+  sky: 'border-sky-500/30 text-sky-400',
+}
+
+const sizeClasses = {
+  xss: 'min-w-[14px] h-[14px] px-0.5 text-[9px]',
+  xs: 'min-w-[16px] h-[16px] px-1 text-[10px]',
+  sm: 'min-w-[18px] h-[18px] px-1 text-[10px]',
+  md: 'min-w-[20px] h-[20px] px-1.5 text-[11px]',
+  lg: 'min-w-[22px] h-[22px] px-1.5 text-xs',
+}
+
+export function Badge({
+  value,
+  color = 'neutral',
+  size = 'sm',
+  className = '',
+  testId,
+}: BadgeProps) {
+  const display = typeof value === 'number' && value > 99 ? '99+' : value
+
+  return (
+    <span
+      data-testid={testId}
+      className={`inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums ${colorClasses[color]} ${sizeClasses[size]} ${className}`}
+    >
+      {display}
+    </span>
+  )
+}

package/components/ui/bottom-panel-header.tsx

@@ -0,0 +1,240 @@
+import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react'
+import { RefreshCw } from 'lucide-react'
+import { IconButton, type IconName, type ActionItem, iconMap } from './icon-button.tsx'
+import { Badge, type BadgeColor } from './badge.tsx'
+import { Tooltip } from './tooltip.tsx'
+
+/** Status banner configuration for outdated/info messages */
+export interface StatusBanner {
+  /** Message to display */
+  message: string
+  /** Banner type affects styling */
+  type: 'warning' | 'info'
+  /** Optional action button label */
+  actionLabel?: string
+  /** Optional action callback */
+  onAction?: () => void
+}
+
+// Tab configuration with icon, label, count badge, and color
+export interface PanelTab<T extends string = string> {
+  /** Unique identifier for the tab */
+  id: T
+  /** Display label */
+  label: string
+  /** Icon name from iconMap */
+  icon?: IconName
+  /** Custom icon component (should accept className for sizing) */
+  IconComponent?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
+  /** Optional count badge */
+  count?: number
+  /** Color for the count badge */
+  countColor?: BadgeColor
+  /** Tailwind classes for active text/border color (e.g., 'text-orange-400') */
+  activeTextClass?: string
+  /** Tailwind classes for active border color (e.g., 'border-orange-400'). Defaults to 'border-current' */
+  activeBorderClass?: string
+  /** Hide label on small screens */
+  hideLabel?: boolean
+  /** Test ID for E2E testing */
+  testId?: string
+}
+
+export interface BottomPanelHeaderProps<T extends string = string> {
+  /** Array of tab configurations */
+  tabs: PanelTab<T>[]
+  /** Currently active tab ID */
+  activeTab: T
+  /** Callback when tab changes */
+  onTabChange: (tabId: T) => void
+  /** Action buttons to render (right side, before collapse button) */
+  actions?: ActionItem[]
+  /** Escape hatch: arbitrary ReactNode actions (e.g. AiActionButton) */
+  customActions?: ReactNode
+  /** Custom class name for the header container */
+  className?: string
+  /** Custom left content to replace tabs (e.g., for "ignored" mode) */
+  customLeftContent?: ReactNode
+  /** Optional status banner (e.g., "Results may be outdated") */
+  statusBanner?: StatusBanner
+  /** Callback when collapse button is clicked */
+  onCollapse?: () => void
+}
+
+// Default styling classes
+const DEFAULT_ACTIVE_TEXT = 'text-neutral-300'
+const DEFAULT_INACTIVE_CLASSES = 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30'
+
+// Layout mode: full → compact banner → compact tabs
+type LayoutMode = 'full' | 'compact-banner' | 'compact-all'
+
+// Width estimates for layout calculation
+const TAB_ICON_PADDING = 56    // icon(16) + gap(8) + px-4(32)
+const CHAR_WIDTH = 7.5         // approximate char width at text-sm
+const COUNT_BADGE_WIDTH = 40   // badge with count
+const BANNER_FULL_WIDTH = 200  // icon + text + padding
+const BANNER_COMPACT_WIDTH = 36 // icon only
+
+function estimateTabsFullWidth<T extends string>(tabs: PanelTab<T>[]): number {
+  return tabs.reduce((sum, tab) => {
+    const labelWidth = tab.label.length * CHAR_WIDTH
+    const badge = tab.count !== undefined ? COUNT_BADGE_WIDTH : 0
+    return sum + TAB_ICON_PADDING + labelWidth + badge
+  }, 0)
+}
+
+export function BottomPanelHeader<T extends string = string>({
+  tabs,
+  activeTab,
+  onTabChange,
+  actions,
+  customActions,
+  className = '',
+  customLeftContent,
+  statusBanner,
+  onCollapse,
+}: BottomPanelHeaderProps<T>) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const actionsRef = useRef<HTMLDivElement>(null)
+  const [layoutMode, setLayoutMode] = useState<LayoutMode>('full')
+
+  const computeLayout = useCallback(() => {
+    const container = containerRef.current
+    const actionsEl = actionsRef.current
+    if (!container) return
+
+    const containerWidth = container.clientWidth
+    const actionsWidth = actionsEl?.offsetWidth ?? 0
+    const available = containerWidth - actionsWidth
+
+    const tabsFull = estimateTabsFullWidth(tabs)
+    const bannerFull = statusBanner ? BANNER_FULL_WIDTH : 0
+    const bannerCompact = statusBanner ? BANNER_COMPACT_WIDTH : 0
+
+    if (tabsFull + bannerFull <= available) {
+      setLayoutMode('full')
+    } else if (tabsFull + bannerCompact <= available) {
+      setLayoutMode('compact-banner')
+    } else {
+      setLayoutMode('compact-all')
+    }
+  }, [tabs, statusBanner])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    computeLayout()
+    const observer = new ResizeObserver(computeLayout)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [computeLayout])
+
+  const compactTabs = layoutMode === 'compact-all'
+  const compactBanner = layoutMode === 'compact-banner' || layoutMode === 'compact-all'
+
+  // Banner styling based on type
+  const bannerStyles = statusBanner?.type === 'warning'
+    ? 'bg-amber-500/10 border-amber-500/30 text-amber-300'
+    : 'bg-blue-500/10 border-blue-500/30 text-blue-300'
+
+  return (
+    <div
+      ref={containerRef}
+      className={`flex-shrink-0 h-[41px] flex justify-between bg-neutral-900 border-b border-neutral-800 ${className}`}
+    >
+      {/* Tabs or custom content - left aligned */}
+      <div className="flex flex-shrink-0">
+        {customLeftContent ?? tabs.map((tab) => {
+          const isActive = activeTab === tab.id
+          const TabIcon = tab.IconComponent || (tab.icon ? iconMap[tab.icon] : undefined)
+
+          // Determine classes based on active state
+          const textClass = isActive
+            ? tab.activeTextClass || DEFAULT_ACTIVE_TEXT
+            : ''
+          const borderClass = isActive
+            ? tab.activeBorderClass || 'border-current'
+            : ''
+          const baseClasses = isActive
+            ? `${textClass} ${borderClass} bg-neutral-800/50`
+            : DEFAULT_INACTIVE_CLASSES
+          const tabButton = (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              data-testid={tab.testId}
+              className={`h-[41px] flex items-center justify-center gap-2 ${compactTabs ? 'px-3' : 'px-4'} text-sm border-b-2 transition-colors cursor-pointer ${baseClasses}`}
+            >
+              {compactTabs ? (
+                <span className="relative flex items-center justify-center w-[18px] h-[18px] flex-shrink-0">
+                  {TabIcon && <TabIcon className="w-[18px] h-[18px]" />}
+                  {tab.count !== undefined && (
+                    <span className="absolute -top-1.5 -right-2">
+                      <Badge value={tab.count} color={tab.countColor} size="xss" />
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <>
+                  <span className="flex items-center justify-center w-4 h-4 flex-shrink-0">
+                    {TabIcon && <TabIcon className="w-4 h-4" />}
+                  </span>
+                  {tab.hideLabel ? (
+                    <span className="hidden sm:inline">{tab.label}</span>
+                  ) : (
+                    <span>{tab.label}</span>
+                  )}
+                  {tab.count !== undefined && (
+                    <Badge value={tab.count} color={tab.countColor} size="xss" />
+                  )}
+                </>
+              )}
+            </button>
+          )
+
+          if (compactTabs) {
+            return (
+              <Tooltip key={tab.id} content={{ description: tab.label }} position="bottom">
+                {tabButton}
+              </Tooltip>
+            )
+          }
+
+          return tabButton
+        })}
+      </div>
+
+      {/* Center: Status banner */}
+      <div className="flex-1 min-w-0 flex items-center justify-center overflow-hidden">
+        {statusBanner && (
+          compactBanner ? (
+            <Tooltip content={{ description: statusBanner.message }} position="bottom">
+              <div className={`flex items-center px-2 py-1.5 ${bannerStyles} rounded text-xs`}>
+                <RefreshCw className="w-3 h-3 flex-shrink-0" />
+              </div>
+            </Tooltip>
+          ) : (
+            <div className={`flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-xs max-w-full`}>
+              <RefreshCw className="w-3 h-3 flex-shrink-0" />
+              <span className="truncate">{statusBanner.message}</span>
+            </div>
+          )
+        )}
+      </div>
+
+      {/* Actions + Collapse - right aligned */}
+      <div ref={actionsRef} className="flex items-center gap-1.5 pr-3 flex-shrink-0">
+        {actions?.map((a, i) => <IconButton key={i} {...a} />)}
+        {customActions}
+        {onCollapse && (
+          <IconButton
+            icon="panel-bottom-close"
+            onClick={onCollapse}
+            size="sm"
+            tooltip={{ description: 'Collapse panel' }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/components/ui/breadcrumb.tsx

@@ -0,0 +1,168 @@
+/** Breadcrumb navigation with clickable segments, color-coded icons, and configurable separators. */
+
+import {
+  ChevronRight,
+  Settings, Folder, File, Code, Terminal, Database,
+  Globe, Star, Users, User, Tag, Search, Heart,
+  Zap, Shield, ShieldCheck, Sparkles, Eye, Lock,
+  Cloud, Wand2, Bell, Bookmark, Pin, Mail, Send,
+  Image, Bot, Puzzle, Plug, Webhook,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { IconName } from './icon-button.tsx'
+import { cn } from '../lib/cn.ts'
+
+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,
+  'shield-check': ShieldCheck,
+  sparkles: Sparkles,
+  eye: Eye,
+  lock: Lock,
+  search: Search,
+  heart: Heart,
+  cloud: Cloud,
+  wand: Wand2,
+  bell: Bell,
+  bookmark: Bookmark,
+  pin: Pin,
+  mail: Mail,
+  send: Send,
+  image: Image,
+  bot: Bot,
+  puzzle: Puzzle,
+  plug: Plug,
+  webhook: Webhook,
+}
+
+export interface BreadcrumbSegment {
+  id: string
+  label: string
+  icon?: IconName
+  color?: string
+  onClick?: () => void
+}
+
+export interface BreadcrumbProps {
+  segments: BreadcrumbSegment[]
+  separator?: 'chevron' | 'slash' | 'dot'
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeConfig = {
+  xss: { text: 'text-[10px]', icon: 'w-2.5 h-2.5', px: 'px-1', py: 'py-0.5', gap: 'gap-0.5', sep: 'w-2 h-2' },
+  xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-1.5', py: 'py-0.5', gap: 'gap-1', sep: 'w-2.5 h-2.5' },
+  sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-2', py: 'py-1', gap: 'gap-1.5', sep: 'w-3 h-3' },
+  md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-2.5', py: 'py-1', gap: 'gap-1.5', sep: 'w-3.5 h-3.5' },
+  lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-3', py: 'py-1.5', gap: 'gap-2', sep: 'w-4 h-4' },
+}
+
+const colorMap: Record<string, { bg: string; text: string }> = {
+  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
+  green: { bg: 'bg-green-500/10', text: 'text-green-400' },
+  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
+  red: { bg: 'bg-red-500/10', text: 'text-red-400' },
+  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
+  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
+  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
+  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
+  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
+  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400' },
+  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400' },
+  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400' },
+  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400' },
+  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400' },
+  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400' },
+}
+
+function SegmentIcon({ icon, color, size }: { icon: IconName; color?: string; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg' }) {
+  const Icon = iconSubset[icon]
+  if (!Icon) return null
+  const s = sizeConfig[size]
+  const c = color && colorMap[color] ? colorMap[color] : null
+
+  return (
+    <span className={c?.text || ''}>
+      <Icon className={s.icon} />
+    </span>
+  )
+}
+
+function Separator({ type, size }: { type: 'chevron' | 'slash' | 'dot'; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg' }) {
+  const s = sizeConfig[size]
+
+  if (type === 'chevron') {
+    return <ChevronRight className={cn(s.sep, 'text-neutral-600 flex-shrink-0')} />
+  }
+  if (type === 'slash') {
+    return <span className={cn(s.text, 'text-neutral-600 flex-shrink-0')}>/</span>
+  }
+  return <span className={cn(s.text, 'text-neutral-600 flex-shrink-0')}>&middot;</span>
+}
+
+export function Breadcrumb({
+  segments,
+  separator = 'chevron',
+  size = 'sm',
+  className,
+}: BreadcrumbProps) {
+  const s = sizeConfig[size]
+
+  return (
+    <nav className={cn('flex items-center', className)}>
+      <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-800/50 border border-neutral-700/50 rounded-lg')}>
+        {segments.map((segment, index) => {
+          const isLast = index === segments.length - 1
+          const isClickable = !isLast && !!segment.onClick
+          const colors = segment.color && colorMap[segment.color] ? colorMap[segment.color] : null
+
+          return (
+            <div key={segment.id} className="flex items-center gap-1">
+              {index > 0 && <Separator type={separator} size={size} />}
+              {isClickable ? (
+                <button
+                  type="button"
+                  onClick={segment.onClick}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    s.text,
+                    'font-medium hover:text-white',
+                    colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
+                  )}
+                >
+                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+                  <span>{segment.label}</span>
+                </button>
+              ) : (
+                <div
+                  className={cn(
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md',
+                    s.text,
+                    isLast
+                      ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
+                      : ['font-medium', colors ? colors.text : 'text-neutral-300'],
+                  )}
+                >
+                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+                  <span className="truncate max-w-[200px]">{segment.label}</span>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}

package/components/ui/checkbox.tsx

@@ -0,0 +1,102 @@
+/**
+ * Checkbox - Controlled checkbox input with check icon
+ *
+ * Used by:
+ * - Settings forms - boolean preference toggles
+ * - Filter panels - multi-select filters
+ * - List items - selection state
+ */
+
+import { Check } from 'lucide-react'
+
+export type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+
+export type CheckboxColor =
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'orange'
+  | 'cyan'
+  | 'yellow'
+  | 'purple'
+  | 'indigo'
+  | 'emerald'
+  | 'amber'
+  | 'violet'
+  | 'neutral'
+  | 'sky'
+  | 'pink'
+  | 'teal'
+
+const CHECKBOX_COLORS: Record<CheckboxColor, { bg: string; border: string; icon: string; hover: string }> = {
+  blue: { bg: 'bg-blue-500/20', border: 'border-blue-500/40', icon: 'text-blue-300', hover: 'hover:bg-blue-500/15 hover:border-blue-500/30' },
+  green: { bg: 'bg-green-500/20', border: 'border-green-500/40', icon: 'text-green-300', hover: 'hover:bg-green-500/15 hover:border-green-500/30' },
+  red: { bg: 'bg-red-500/20', border: 'border-red-500/40', icon: 'text-red-300', hover: 'hover:bg-red-500/15 hover:border-red-500/30' },
+  orange: { bg: 'bg-orange-500/20', border: 'border-orange-500/40', icon: 'text-orange-300', hover: 'hover:bg-orange-500/15 hover:border-orange-500/30' },
+  cyan: { bg: 'bg-cyan-500/20', border: 'border-cyan-500/40', icon: 'text-cyan-300', hover: 'hover:bg-cyan-500/15 hover:border-cyan-500/30' },
+  yellow: { bg: 'bg-yellow-500/20', border: 'border-yellow-500/40', icon: 'text-yellow-300', hover: 'hover:bg-yellow-500/15 hover:border-yellow-500/30' },
+  purple: { bg: 'bg-purple-500/20', border: 'border-purple-500/40', icon: 'text-purple-300', hover: 'hover:bg-purple-500/15 hover:border-purple-500/30' },
+  indigo: { bg: 'bg-indigo-500/20', border: 'border-indigo-500/40', icon: 'text-indigo-300', hover: 'hover:bg-indigo-500/15 hover:border-indigo-500/30' },
+  emerald: { bg: 'bg-emerald-500/20', border: 'border-emerald-500/40', icon: 'text-emerald-300', hover: 'hover:bg-emerald-500/15 hover:border-emerald-500/30' },
+  amber: { bg: 'bg-amber-500/20', border: 'border-amber-500/40', icon: 'text-amber-300', hover: 'hover:bg-amber-500/15 hover:border-amber-500/30' },
+  violet: { bg: 'bg-violet-500/20', border: 'border-violet-500/40', icon: 'text-violet-300', hover: 'hover:bg-violet-500/15 hover:border-violet-500/30' },
+  neutral: { bg: 'bg-neutral-500/20', border: 'border-neutral-500/40', icon: 'text-neutral-300', hover: 'hover:bg-neutral-500/15 hover:border-neutral-500/30' },
+  sky: { bg: 'bg-sky-500/20', border: 'border-sky-500/40', icon: 'text-sky-300', hover: 'hover:bg-sky-500/15 hover:border-sky-500/30' },
+  pink: { bg: 'bg-pink-500/20', border: 'border-pink-500/40', icon: 'text-pink-300', hover: 'hover:bg-pink-500/15 hover:border-pink-500/30' },
+  teal: { bg: 'bg-teal-500/20', border: 'border-teal-500/40', icon: 'text-teal-300', hover: 'hover:bg-teal-500/15 hover:border-teal-500/30' },
+}
+
+const CHECKBOX_SIZES: Record<CheckboxSize, { box: string; icon: string }> = {
+  xss: { box: 'w-3 h-3', icon: 'w-2 h-2' },
+  xs: { box: 'w-3.5 h-3.5', icon: 'w-2 h-2' },
+  sm: { box: 'w-4 h-4', icon: 'w-2.5 h-2.5' },
+  md: { box: 'w-5 h-5', icon: 'w-3 h-3' },
+  lg: { box: 'w-6 h-6', icon: 'w-3.5 h-3.5' },
+}
+
+export type CheckboxVariant = 'outline' | 'filled'
+
+export interface CheckboxProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+  size?: CheckboxSize
+  color?: CheckboxColor
+  variant?: CheckboxVariant
+  className?: string
+  /** Test ID for E2E testing */
+  testId?: string
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  disabled = false,
+  size = 'sm',
+  color = 'blue',
+  variant = 'outline',
+  className = '',
+  testId,
+}: CheckboxProps) {
+  const s = CHECKBOX_SIZES[size]
+  const c = CHECKBOX_COLORS[color]
+  const uncheckedStyle = variant === 'outline'
+    ? `${c.border} ${c.hover}`
+    : `bg-neutral-700 ${c.border} ${c.hover}`
+  return (
+    <button
+      type="button"
+      onClick={() => !disabled && onChange(!checked)}
+      disabled={disabled}
+      data-testid={testId}
+      className={`
+        ${s.box} rounded border flex items-center justify-center transition-colors flex-shrink-0
+        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
+        ${checked ? `${c.bg} ${c.border}` : uncheckedStyle}
+        ${className}
+      `}
+    >
+      {checked && <Check className={`${s.icon} ${c.icon}`} />}
+    </button>
+  )
+}