@toolr/ui-design 0.1.0

package/components/ui/tab-bar.tsx

@@ -0,0 +1,340 @@
+/** 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 { 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
+  icon?: IconName
+  color?: string
+  closable?: boolean
+  badge?: number | string
+  badgeColor?: BadgeColor
+}
+
+export interface TabBarProps {
+  tabs: Tab[]
+  activeId: string
+  onSelect: (id: string) => void
+  onClose?: (id: string) => void
+  variant?: 'underline' | 'pill' | 'card'
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeConfig = {
+  xss: { text: 'text-[10px]', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
+  xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
+  sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
+  md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-4', py: 'py-2', close: 'w-3.5 h-3.5', badgeSize: 'md' as const, gap: 'gap-2' },
+  lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-5', py: 'py-2.5', close: 'w-4 h-4', badgeSize: 'lg' as const, gap: 'gap-2' },
+}
+
+const colorMap: Record<string, { active: string; icon: string; indicator: string }> = {
+  blue: { active: 'text-blue-400', icon: 'text-blue-400', indicator: 'bg-blue-400' },
+  green: { active: 'text-green-400', icon: 'text-green-400', indicator: 'bg-green-400' },
+  purple: { active: 'text-purple-400', icon: 'text-purple-400', indicator: 'bg-purple-400' },
+  red: { active: 'text-red-400', icon: 'text-red-400', indicator: 'bg-red-400' },
+  orange: { active: 'text-orange-400', icon: 'text-orange-400', indicator: 'bg-orange-400' },
+  cyan: { active: 'text-cyan-400', icon: 'text-cyan-400', indicator: 'bg-cyan-400' },
+  yellow: { active: 'text-yellow-400', icon: 'text-yellow-400', indicator: 'bg-yellow-400' },
+  amber: { active: 'text-amber-400', icon: 'text-amber-400', indicator: 'bg-amber-400' },
+  emerald: { active: 'text-emerald-400', icon: 'text-emerald-400', indicator: 'bg-emerald-400' },
+  indigo: { active: 'text-indigo-400', icon: 'text-indigo-400', indicator: 'bg-indigo-400' },
+  violet: { active: 'text-violet-400', icon: 'text-violet-400', indicator: 'bg-violet-400' },
+  sky: { active: 'text-sky-400', icon: 'text-sky-400', indicator: 'bg-sky-400' },
+  neutral: { active: 'text-neutral-200', icon: 'text-neutral-400', indicator: 'bg-neutral-200' },
+}
+
+function getColors(color?: string) {
+  return color && colorMap[color] ? colorMap[color] : colorMap.neutral
+}
+
+// Width estimation for auto-collapse
+const tabWidthEstimates = {
+  xss: { base: 12, icon: 14, charW: 5.5, badge: 20, close: 14 },
+  xs:  { base: 16, icon: 16, charW: 6.5, badge: 24, close: 16 },
+  sm:  { base: 24, icon: 20, charW: 7.5, badge: 28, close: 18 },
+  md:  { base: 32, icon: 24, charW: 8.5, badge: 32, close: 22 },
+  lg:  { base: 40, icon: 28, charW: 9.5, badge: 36, close: 24 },
+}
+
+function estimateTabsWidth(tabs: Tab[], size: keyof typeof sizeConfig): number {
+  const est = tabWidthEstimates[size]
+  return tabs.reduce((sum, tab) => {
+    let w = est.base + tab.label.length * est.charW
+    if (tab.icon) w += est.icon
+    if (tab.badge !== undefined) w += est.badge
+    if (tab.closable) w += est.close
+    return sum + w
+  }, 0)
+}
+
+function TabIcon({ icon, size, color }: { icon: IconName; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; color?: string }) {
+  const Icon = iconSubset[icon]
+  if (!Icon) return null
+  const s = sizeConfig[size]
+  const c = getColors(color)
+  return <Icon className={cn(s.icon, c.icon, 'flex-shrink-0')} />
+}
+
+function TabBadge({ badge, size, badgeColor }: { badge: number | string; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; badgeColor?: BadgeColor }) {
+  const s = sizeConfig[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 }) {
+  const s = sizeConfig[size]
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick()
+      }}
+      className="p-0.5 rounded hover:bg-neutral-600 transition-colors cursor-pointer flex-shrink-0 opacity-0 group-hover:opacity-100 group-[.is-active]:opacity-100"
+    >
+      <X className={cn(s.close, 'text-neutral-500 hover:text-neutral-200')} />
+    </button>
+  )
+}
+
+function CompactTab({
+  tab, isActive, size, variant, onSelect,
+}: { tab: Tab; isActive: boolean; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; variant: 'underline' | 'pill' | 'card'; onSelect: () => void }) {
+  const s = sizeConfig[size]
+  const c = getColors(tab.color)
+
+  const variantClass = {
+    underline: isActive ? c.active : 'text-neutral-500 hover:text-neutral-400',
+    pill: isActive
+      ? cn('bg-neutral-700 font-medium', c.active)
+      : 'text-neutral-500 hover:text-neutral-400 hover:bg-neutral-700/50',
+    card: isActive
+      ? cn('bg-neutral-800 border-neutral-700', c.active)
+      : 'bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-900',
+  }[variant]
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'relative flex items-center justify-center transition-colors cursor-pointer',
+        s.py, 'px-3',
+        variant === 'pill' && 'rounded-md',
+        variant === 'card' && 'rounded-t-lg border border-b-0',
+        variantClass,
+      )}
+    >
+      <span className="relative flex items-center justify-center">
+        {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
+        {tab.badge !== undefined && (
+          <span className="absolute -top-1.5 -right-2.5">
+            <Badge value={tab.badge} color={tab.badgeColor} size="xss" />
+          </span>
+        )}
+      </span>
+      {isActive && variant === 'underline' && (
+        <span className={cn('absolute bottom-0 left-0 right-0 h-0.5 rounded-full', c.indicator)} />
+      )}
+      {isActive && variant === 'card' && (
+        <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-800" />
+      )}
+    </button>
+  )
+}
+
+function UnderlineTab({
+  tab, isActive, size, onSelect, onClose,
+}: { tab: Tab; isActive: boolean; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onSelect: () => void; onClose?: () => void }) {
+  const s = sizeConfig[size]
+  const c = getColors(tab.color)
+  const showClose = tab.closable && onClose
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer',
+        s.text, s.px, s.py, s.gap,
+        isActive && 'is-active',
+        isActive ? c.active : 'text-neutral-500 hover:text-neutral-400',
+      )}
+    >
+      {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!} />}
+      {isActive && (
+        <span className={cn('absolute bottom-0 left-0 right-0 h-0.5 rounded-full', c.indicator)} />
+      )}
+    </button>
+  )
+}
+
+function PillTab({
+  tab, isActive, size, onSelect, onClose,
+}: { tab: Tab; isActive: boolean; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onSelect: () => void; onClose?: () => void }) {
+  const s = sizeConfig[size]
+  const c = getColors(tab.color)
+  const showClose = tab.closable && onClose
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'group flex items-center whitespace-nowrap rounded-md transition-colors cursor-pointer',
+        s.text, s.px, s.py, s.gap,
+        isActive && 'is-active',
+        isActive
+          ? cn('bg-neutral-700 font-medium', c.active)
+          : 'text-neutral-500 hover:text-neutral-400 hover:bg-neutral-700/50',
+      )}
+    >
+      {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!} />}
+    </button>
+  )
+}
+
+function CardTab({
+  tab, isActive, size, onSelect, onClose,
+}: { tab: Tab; isActive: boolean; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onSelect: () => void; onClose?: () => void }) {
+  const s = sizeConfig[size]
+  const c = getColors(tab.color)
+  const showClose = tab.closable && onClose
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer rounded-t-lg border border-b-0',
+        s.text, s.px, s.py, s.gap,
+        isActive && 'is-active',
+        isActive
+          ? cn('bg-neutral-800 border-neutral-700', c.active)
+          : 'bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-900',
+      )}
+    >
+      {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!} />}
+      {isActive && (
+        <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-800" />
+      )}
+    </button>
+  )
+}
+
+const tabComponents = {
+  underline: UnderlineTab,
+  pill: PillTab,
+  card: CardTab,
+} as const
+
+export function TabBar({
+  tabs,
+  activeId,
+  onSelect,
+  onClose,
+  variant = 'underline',
+  size = 'sm',
+  className,
+}: TabBarProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [compact, setCompact] = useState(false)
+  const TabComponent = tabComponents[variant]
+
+  const computeLayout = useCallback(() => {
+    const el = containerRef.current
+    if (!el) return
+    const available = el.clientWidth
+    const needed = estimateTabsWidth(tabs, size)
+    setCompact(needed > available)
+  }, [tabs, size])
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    computeLayout()
+    const observer = new ResizeObserver(computeLayout)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [computeLayout])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'flex items-end',
+        variant === 'underline' && 'border-b border-neutral-700',
+        variant === 'card' && 'border-b border-neutral-700',
+        className,
+      )}
+    >
+      {tabs.map((tab) => {
+        if (compact) {
+          return (
+            <Tooltip key={tab.id} content={{ description: tab.label }} position="bottom">
+              <CompactTab
+                tab={tab}
+                isActive={tab.id === activeId}
+                size={size}
+                variant={variant}
+                onSelect={() => onSelect(tab.id)}
+              />
+            </Tooltip>
+          )
+        }
+        return (
+          <TabComponent
+            key={tab.id}
+            tab={tab}
+            isActive={tab.id === activeId}
+            size={size}
+            onSelect={() => onSelect(tab.id)}
+            onClose={onClose ? () => onClose(tab.id) : undefined}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/components/ui/toggle.tsx

@@ -0,0 +1,142 @@
+/**
+ * Toggle - iOS-style switch toggle
+ *
+ * Used by:
+ * - Settings pages - boolean preferences
+ * - Feature flags - enable/disable features
+ * - List items - inline toggle controls
+ */
+
+export type ToggleColor =
+  | 'blue'
+  | 'green'
+  | 'red'
+  | 'orange'
+  | 'cyan'
+  | 'yellow'
+  | 'purple'
+  | 'indigo'
+  | 'emerald'
+  | 'amber'
+  | 'violet'
+  | 'neutral'
+  | 'sky'
+  | 'pink'
+  | 'teal'
+
+// Border colors per accent
+const BORDER_COLORS: Record<ToggleColor, { idle: string; active: string }> = {
+  blue: { idle: 'rgba(59,130,246,0.3)', active: 'rgba(59,130,246,0.4)' },
+  green: { idle: 'rgba(34,197,94,0.3)', active: 'rgba(34,197,94,0.4)' },
+  red: { idle: 'rgba(239,68,68,0.3)', active: 'rgba(239,68,68,0.4)' },
+  orange: { idle: 'rgba(249,115,22,0.3)', active: 'rgba(249,115,22,0.4)' },
+  cyan: { idle: 'rgba(6,182,212,0.3)', active: 'rgba(6,182,212,0.4)' },
+  yellow: { idle: 'rgba(234,179,8,0.3)', active: 'rgba(234,179,8,0.4)' },
+  purple: { idle: 'rgba(168,85,247,0.3)', active: 'rgba(168,85,247,0.4)' },
+  indigo: { idle: 'rgba(99,102,241,0.3)', active: 'rgba(99,102,241,0.4)' },
+  emerald: { idle: 'rgba(16,185,129,0.3)', active: 'rgba(16,185,129,0.4)' },
+  amber: { idle: 'rgba(245,158,11,0.3)', active: 'rgba(245,158,11,0.4)' },
+  violet: { idle: 'rgba(139,92,246,0.3)', active: 'rgba(139,92,246,0.4)' },
+  neutral: { idle: 'rgba(156,163,175,0.3)', active: 'rgba(156,163,175,0.4)' },
+  sky: { idle: 'rgba(14,165,233,0.3)', active: 'rgba(14,165,233,0.4)' },
+  pink: { idle: 'rgba(236,72,153,0.3)', active: 'rgba(236,72,153,0.4)' },
+  teal: { idle: 'rgba(20,184,166,0.3)', active: 'rgba(20,184,166,0.4)' },
+}
+
+// Knob colors: checked = accent color, unchecked = gray
+const KNOB_COLORS: Record<ToggleColor, { on: string; off: string }> = {
+  blue: { on: '#60a5fa', off: 'rgba(96,165,250,0.35)' },
+  green: { on: '#4ade80', off: 'rgba(74,222,128,0.35)' },
+  red: { on: '#f87171', off: 'rgba(248,113,113,0.35)' },
+  orange: { on: '#fb923c', off: 'rgba(251,146,60,0.35)' },
+  cyan: { on: '#22d3ee', off: 'rgba(34,211,238,0.35)' },
+  yellow: { on: '#facc15', off: 'rgba(250,204,21,0.35)' },
+  purple: { on: '#c084fc', off: 'rgba(192,132,252,0.35)' },
+  indigo: { on: '#818cf8', off: 'rgba(129,140,248,0.35)' },
+  emerald: { on: '#34d399', off: 'rgba(52,211,153,0.35)' },
+  amber: { on: '#fbbf24', off: 'rgba(251,191,36,0.35)' },
+  violet: { on: '#a78bfa', off: 'rgba(167,139,250,0.35)' },
+  neutral: { on: '#9ca3af', off: 'rgba(156,163,175,0.35)' },
+  sky: { on: '#38bdf8', off: 'rgba(56,189,248,0.35)' },
+  pink: { on: '#f472b6', off: 'rgba(244,114,182,0.35)' },
+  teal: { on: '#2dd4bf', off: 'rgba(45,212,191,0.35)' },
+}
+
+// Checked = IconButton hovered/active style
+const TOGGLE_CHECKED_TRACK: Record<ToggleColor, string> = {
+  blue: 'bg-blue-500/20', green: 'bg-green-500/20', red: 'bg-red-500/20',
+  orange: 'bg-orange-500/20', cyan: 'bg-cyan-500/20', yellow: 'bg-yellow-500/20',
+  purple: 'bg-purple-500/20', indigo: 'bg-indigo-500/20', emerald: 'bg-emerald-500/20',
+  amber: 'bg-amber-500/20', violet: 'bg-violet-500/20', neutral: 'bg-neutral-500/20',
+  sky: 'bg-sky-500/20', pink: 'bg-pink-500/20', teal: 'bg-teal-500/20',
+}
+
+// Unchecked = IconButton idle style
+const TOGGLE_UNCHECKED_TRACK: Record<ToggleColor, string> = {
+  blue: 'hover:bg-blue-500/20', green: 'hover:bg-green-500/20', red: 'hover:bg-red-500/20',
+  orange: 'hover:bg-orange-500/20', cyan: 'hover:bg-cyan-500/20', yellow: 'hover:bg-yellow-500/20',
+  purple: 'hover:bg-purple-500/20', indigo: 'hover:bg-indigo-500/20', emerald: 'hover:bg-emerald-500/20',
+  amber: 'hover:bg-amber-500/20', violet: 'hover:bg-violet-500/20', neutral: 'hover:bg-neutral-500/20',
+  sky: 'hover:bg-sky-500/20', pink: 'hover:bg-pink-500/20', teal: 'hover:bg-teal-500/20',
+}
+
+export type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+
+const TOGGLE_SIZES: Record<ToggleSize, { track: string; knob: string; translate: string }> = {
+  xss: { track: 'w-6 h-3', knob: 'w-2 h-2', translate: 'translate-x-3' },
+  xs: { track: 'w-7 h-3.5', knob: 'w-2.5 h-2.5', translate: 'translate-x-3.5' },
+  sm: { track: 'w-8 h-[18px]', knob: 'w-3.5 h-3.5', translate: 'translate-x-3.5' },
+  md: { track: 'w-11 h-6', knob: 'w-5 h-5', translate: 'translate-x-5' },
+  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
+  disabled?: boolean
+  size?: ToggleSize
+  className?: string
+  color?: ToggleColor
+  variant?: ToggleVariant
+  /** Test ID for E2E testing */
+  testId?: string
+}
+
+export function Toggle({
+  checked,
+  onChange,
+  disabled = false,
+  size = 'sm',
+  className = '',
+  color = 'blue',
+  testId,
+}: ToggleProps) {
+  const s = TOGGLE_SIZES[size]
+  const bc = BORDER_COLORS[color]
+  const kc = KNOB_COLORS[color]
+  return (
+    <button
+      type="button"
+      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}
+      `}
+    >
+      <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'}
+        `}
+      />
+    </button>
+  )
+}