@toolr/ui-design 0.1.7 → 0.1.9

package/components/ui/navigation-bar.tsx

@@ -6,6 +6,7 @@ import type { LucideIcon } from 'lucide-react'
 import { iconMap, type IconName } from './icon-button.tsx'
 import type { BreadcrumbSegment } from './breadcrumb.tsx'
 import { ACCENT_NAV, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
 
@@ -21,6 +22,7 @@ export interface NavigationBarProps {
   leadingAction?: { icon: IconName; onClick?: () => void }
   separator?: 'chevron' | 'slash' | 'dot'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  accentColor?: AccentColor
   className?: string
 }
 
@@ -33,12 +35,32 @@ const sizeConfig = {
 }
 
 
-function NavButton({ icon: Icon, onClick, disabled, size, active }: {
+// Accent color classes for NavButton — same pattern as IconButton's colorClasses
+const navColorClasses: Record<AccentColor, { text: string; border: string; hover: string; active: string }> = {
+  green: { text: 'text-green-400', border: 'border-green-500/30', hover: 'hover:bg-green-500/20 hover:border-green-500/40 hover:text-green-300', active: 'bg-green-500/20 text-green-300 border-green-500/40' },
+  red: { text: 'text-red-400', border: 'border-red-500/30', hover: 'hover:bg-red-500/20 hover:border-red-500/40 hover:text-red-300', active: 'bg-red-500/20 text-red-300 border-red-500/40' },
+  blue: { text: 'text-blue-400', border: 'border-blue-500/30', hover: 'hover:bg-blue-500/20 hover:border-blue-500/40 hover:text-blue-300', active: 'bg-blue-500/20 text-blue-300 border-blue-500/40' },
+  orange: { text: 'text-orange-400', border: 'border-orange-500/30', hover: 'hover:bg-orange-500/20 hover:border-orange-500/40 hover:text-orange-300', active: 'bg-orange-500/20 text-orange-300 border-orange-500/40' },
+  cyan: { text: 'text-cyan-400', border: 'border-cyan-500/30', hover: 'hover:bg-cyan-500/20 hover:border-cyan-500/40 hover:text-cyan-300', active: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40' },
+  yellow: { text: 'text-yellow-400', border: 'border-yellow-500/30', hover: 'hover:bg-yellow-500/20 hover:border-yellow-500/40 hover:text-yellow-300', active: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/40' },
+  purple: { text: 'text-purple-400', border: 'border-purple-500/30', hover: 'hover:bg-purple-500/20 hover:border-purple-500/40 hover:text-purple-300', active: 'bg-purple-500/20 text-purple-300 border-purple-500/40' },
+  indigo: { text: 'text-indigo-400', border: 'border-indigo-500/30', hover: 'hover:bg-indigo-500/20 hover:border-indigo-500/40 hover:text-indigo-300', active: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40' },
+  emerald: { text: 'text-emerald-400', border: 'border-emerald-500/30', hover: 'hover:bg-emerald-500/20 hover:border-emerald-500/40 hover:text-emerald-300', active: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40' },
+  amber: { text: 'text-amber-400', border: 'border-amber-500/30', hover: 'hover:bg-amber-500/20 hover:border-amber-500/40 hover:text-amber-300', active: 'bg-amber-500/20 text-amber-300 border-amber-500/40' },
+  violet: { text: 'text-violet-400', border: 'border-violet-500/30', hover: 'hover:bg-violet-500/20 hover:border-violet-500/40 hover:text-violet-300', active: 'bg-violet-500/20 text-violet-300 border-violet-500/40' },
+  neutral: { text: 'text-neutral-400', border: 'border-neutral-500/30', hover: 'hover:bg-neutral-500/20 hover:border-neutral-500/40 hover:text-neutral-300', active: 'bg-neutral-500/20 text-neutral-300 border-neutral-500/40' },
+  sky: { text: 'text-sky-400', border: 'border-sky-500/30', hover: 'hover:bg-sky-500/20 hover:border-sky-500/40 hover:text-sky-300', active: 'bg-sky-500/20 text-sky-300 border-sky-500/40' },
+  pink: { text: 'text-pink-400', border: 'border-pink-500/30', hover: 'hover:bg-pink-500/20 hover:border-pink-500/40 hover:text-pink-300', active: 'bg-pink-500/20 text-pink-300 border-pink-500/40' },
+  teal: { text: 'text-teal-400', border: 'border-teal-500/30', hover: 'hover:bg-teal-500/20 hover:border-teal-500/40 hover:text-teal-300', active: 'bg-teal-500/20 text-teal-300 border-teal-500/40' },
+}
+
+function NavButton({ icon: Icon, onClick, disabled, size, active, colorStyle }: {
   icon: LucideIcon
   onClick?: () => void
   disabled?: boolean
   size: keyof typeof sizeConfig
   active?: boolean
+  colorStyle: typeof navColorClasses[AccentColor]
 }) {
   const s = sizeConfig[size]
   return (
@@ -52,8 +74,8 @@ function NavButton({ icon: Icon, onClick, disabled, size, active }: {
         disabled
           ? 'text-neutral-600 cursor-not-allowed'
           : active
-            ? 'text-white bg-neutral-700/50 border border-neutral-600 cursor-pointer'
-            : 'text-neutral-400 border border-neutral-700/50 hover:text-white hover:bg-neutral-700/50 cursor-pointer',
+            ? cn('border cursor-pointer', colorStyle.active)
+            : cn('border cursor-pointer', colorStyle.text, colorStyle.border, colorStyle.hover),
       )}
     >
       <Icon className={s.navIcon} />
@@ -95,8 +117,13 @@ export function NavigationBar({
   leadingAction,
   separator = 'chevron',
   size = 'sm',
+  accentColor,
   className,
 }: NavigationBarProps) {
+  const contextAccentColor = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccentColor ?? 'neutral'
+  const colorStyle = navColorClasses[effectiveColor]
+
   const s = sizeConfig[size]
   const hasNav = !!(onBack || onForward)
   const LeadIcon = leadingAction ? iconMap[leadingAction.icon] : null
@@ -110,10 +137,10 @@ export function NavigationBar({
 
   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')}>
+      <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-960/50 border rounded-lg', colorStyle.border)}>
         {leadingAction && LeadIcon && (
           <>
-            <NavButton icon={LeadIcon} onClick={leadingAction.onClick} size={size} />
+            <NavButton icon={LeadIcon} onClick={leadingAction.onClick} size={size} colorStyle={colorStyle} />
             <Divider size={size} />
           </>
         )}
@@ -121,8 +148,8 @@ export function NavigationBar({
         {hasNav && (
           <>
             <div className="flex items-center gap-0.5">
-              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} />
-              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} />
+              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} colorStyle={colorStyle} />
+              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} colorStyle={colorStyle} />
             </div>
             <Divider size={size} />
           </>
@@ -137,9 +164,10 @@ export function NavigationBar({
                 disabled={!hasHistoryEntries}
                 size={size}
                 active={historyOpen}
+                colorStyle={colorStyle}
               />
               {historyOpen && hasHistoryEntries && (
-                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50">
+                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-960 border border-neutral-700 rounded-lg shadow-lg z-50">
                   <div className="px-3 py-1.5 border-b border-neutral-700/50">
                     <p className="text-sm font-medium text-neutral-500">History</p>
                   </div>
@@ -152,7 +180,7 @@ export function NavigationBar({
                           onHistorySelect?.(i)
                           setHistoryOpen(false)
                         }}
-                        className="w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-800 transition-colors cursor-pointer"
+                        className="w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-960 transition-colors cursor-pointer"
                       >
                         {entry.map((seg, segIdx) => (
                           <span key={seg.id} className="flex items-center gap-1 min-w-0">
@@ -185,14 +213,14 @@ export function NavigationBar({
           const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
 
           return (
-            <div key={segment.id} className="flex items-center gap-1">
+            <div key={segment.id} className="flex items-center gap-1 min-w-0">
               {index > 0 && <SegmentSeparator 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',
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
                     s.text,
                     'font-medium hover:text-white',
                     colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
@@ -204,7 +232,7 @@ export function NavigationBar({
               ) : (
                 <div
                   className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md',
+                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
                     s.text,
                     isLast
                       ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']

package/components/ui/number-input.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useCallback, type KeyboardEvent } from 'react'
 import { ChevronUp, ChevronDown } from 'lucide-react'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface NumberInputProps {
   value: number
@@ -9,10 +10,12 @@ export interface NumberInputProps {
   max?: number
   step?: number
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   className?: string
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
 }
 
 const SIZE_CONFIG = {
@@ -24,7 +27,7 @@ const SIZE_CONFIG = {
 }
 
 const VARIANT_CLASSES = {
-  filled: 'bg-neutral-800',
+  filled: 'bg-neutral-960',
   outline: 'bg-transparent',
 }
 
@@ -35,10 +38,11 @@ export function NumberInput({
   max,
   step = 1,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   size = 'sm',
   disabled = false,
   className = '',
+  'aria-label': ariaLabel,
 }: NumberInputProps) {
   const [focused, setFocused] = useState(false)
   const [editText, setEditText] = useState<string | null>(null)
@@ -75,8 +79,11 @@ export function NumberInput({
     setFocused(false)
   }
 
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
+
   const sc = SIZE_CONFIG[size]
-  const fc = FORM_COLORS[color]
+  const fc = FORM_COLORS[effectiveColor]
 
   return (
     <div
@@ -92,6 +99,7 @@ export function NumberInput({
         ref={inputRef}
         type="text"
         inputMode="numeric"
+        aria-label={ariaLabel}
         value={editText ?? value}
         onChange={(e) => setEditText(e.target.value)}
         onFocus={() => {
@@ -128,6 +136,7 @@ export function NumberInput({
       >
         <button
           type="button"
+          aria-label="Increase value"
           tabIndex={-1}
           onMouseDown={(e) => e.preventDefault()}
           onClick={() => nudge(1)}
@@ -145,6 +154,7 @@ export function NumberInput({
         <div className={`border-t ${fc.border}`} />
         <button
           type="button"
+          aria-label="Decrease value"
           tabIndex={-1}
           onMouseDown={(e) => e.preventDefault()}
           onClick={() => nudge(-1)}