@titan-design/react-ui 0.1.1 → 0.2.6

package/src/components/ui/popover/Popover.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, act } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import {
   Popover,
@@ -240,6 +240,148 @@ describe('Popover', () => {
     })
   })
 
+  describe('hover mode', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('opens popover on mouseEnter of trigger', () => {
+      render(
+        <Popover triggerMode="hover">
+          <PopoverTrigger>
+            <button>Hover me</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Hover content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      expect(screen.queryByText('Hover content')).not.toBeInTheDocument()
+      fireEvent.mouseEnter(screen.getByText('Hover me'))
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+    })
+
+    it('closes popover on mouseLeave after closeDelay', () => {
+      render(
+        <Popover triggerMode="hover" closeDelay={200}>
+          <PopoverTrigger>
+            <button>Hover me</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Hover content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.mouseEnter(screen.getByText('Hover me'))
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+
+      fireEvent.mouseLeave(screen.getByText('Hover me'))
+      // Still visible before delay expires
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+
+      act(() => {
+        vi.advanceTimersByTime(200)
+      })
+      expect(screen.queryByText('Hover content')).not.toBeInTheDocument()
+    })
+
+    it('cancels close when hovering back onto trigger', () => {
+      render(
+        <Popover triggerMode="hover" closeDelay={150}>
+          <PopoverTrigger>
+            <button>Hover me</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Hover content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.mouseEnter(screen.getByText('Hover me'))
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+
+      fireEvent.mouseLeave(screen.getByText('Hover me'))
+      act(() => {
+        vi.advanceTimersByTime(50)
+      })
+
+      // Re-enter trigger before delay expires
+      fireEvent.mouseEnter(screen.getByText('Hover me'))
+      act(() => {
+        vi.advanceTimersByTime(150)
+      })
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+    })
+
+    it('cancels close when hovering onto content', () => {
+      render(
+        <Popover triggerMode="hover" closeDelay={150}>
+          <PopoverTrigger>
+            <button>Hover me</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Hover content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.mouseEnter(screen.getByText('Hover me'))
+      fireEvent.mouseLeave(screen.getByText('Hover me'))
+
+      // Hover onto the content text (inside PopoverContent)
+      fireEvent.mouseEnter(screen.getByText('Hover content'))
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+    })
+
+    it('still closes on click outside in hover mode', () => {
+      render(
+        <Popover triggerMode="hover">
+          <PopoverTrigger>
+            <button>Hover me</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Hover content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.mouseEnter(screen.getByText('Hover me'))
+      expect(screen.getByText('Hover content')).toBeInTheDocument()
+
+      // The backdrop is the click-outside mechanism
+      fireEvent.click(screen.getByText('Hover content').parentElement!.previousSibling as Element)
+      expect(screen.queryByText('Hover content')).not.toBeInTheDocument()
+    })
+
+    it('defaults to click mode when triggerMode is not specified', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>
+            <button>Click me</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Click content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.mouseEnter(screen.getByText('Click me'))
+      expect(screen.queryByText('Click content')).not.toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('Click me'))
+      expect(screen.getByText('Click content')).toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations when closed', async () => {
       const { container } = render(

package/src/components/ui/popover/Popover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useContext } from 'react'
+import React, { useState, useRef, useCallback, createContext, useContext } from 'react'
 import { View, Pressable, Modal, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 
@@ -8,12 +8,18 @@ interface PopoverContextType {
   isOpen: boolean
   setIsOpen: (open: boolean) => void
   placement: PopoverPlacement
+  triggerMode: 'click' | 'hover'
+  handleHoverIn: () => void
+  handleHoverOut: () => void
 }
 
 const PopoverContext = createContext<PopoverContextType>({
   isOpen: false,
   setIsOpen: () => {},
   placement: 'bottom',
+  triggerMode: 'click',
+  handleHoverIn: () => {},
+  handleHoverOut: () => {},
 })
 
 export interface PopoverProps extends ViewProps {
@@ -25,6 +31,10 @@ export interface PopoverProps extends ViewProps {
   onOpenChange?: (isOpen: boolean) => void
   /** Whether clicking outside closes the popover */
   closeOnClickOutside?: boolean
+  /** Trigger mode: 'click' opens on click, 'hover' opens on hover */
+  triggerMode?: 'click' | 'hover'
+  /** Delay in ms before closing in hover mode (default 150) */
+  closeDelay?: number
   /** Additional className */
   className?: string
   children?: React.ReactNode
@@ -48,22 +58,44 @@ export function Popover({
   isOpen: controlledIsOpen,
   onOpenChange,
   closeOnClickOutside = true,
+  triggerMode = 'click',
+  closeDelay = 150,
   className,
   children,
   ...props
 }: PopoverProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false)
   const isOpen = controlledIsOpen ?? internalIsOpen
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  const setIsOpen = (open: boolean) => {
+  const setIsOpen = useCallback((open: boolean) => {
     if (controlledIsOpen === undefined) {
       setInternalIsOpen(open)
     }
     onOpenChange?.(open)
-  }
+  }, [controlledIsOpen, onOpenChange])
+
+  const handleHoverIn = useCallback(() => {
+    if (triggerMode !== 'hover') return
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+    setIsOpen(true)
+  }, [triggerMode, setIsOpen])
+
+  const handleHoverOut = useCallback(() => {
+    if (triggerMode !== 'hover') return
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false)
+      closeTimerRef.current = null
+    }, closeDelay)
+  }, [triggerMode, closeDelay, setIsOpen])
 
   return (
-    <PopoverContext.Provider value={{ isOpen, setIsOpen, placement }}>
+    <PopoverContext.Provider
+      value={{ isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut }}
+    >
       <View className={cn('relative', className)} {...props}>
         {children}
       </View>
@@ -80,7 +112,18 @@ export interface PopoverTriggerProps {
  * Trigger element for the popover.
  */
 export function PopoverTrigger({ children, className }: PopoverTriggerProps) {
-  const { isOpen, setIsOpen } = useContext(PopoverContext)
+  const { isOpen, setIsOpen, triggerMode, handleHoverIn, handleHoverOut } =
+    useContext(PopoverContext)
+
+  const hoverProps =
+    triggerMode === 'hover'
+      ? {
+          onHoverIn: handleHoverIn,
+          onHoverOut: handleHoverOut,
+          onMouseEnter: handleHoverIn,
+          onMouseLeave: handleHoverOut,
+        }
+      : {}
 
   return (
     <Pressable
@@ -88,6 +131,7 @@ export function PopoverTrigger({ children, className }: PopoverTriggerProps) {
       accessibilityRole="button"
       accessibilityState={{ expanded: isOpen }}
       className={className}
+      {...hoverProps}
     >
       {children}
     </Pressable>
@@ -99,11 +143,19 @@ export interface PopoverContentProps {
   className?: string
 }
 
+const SPACER_STYLES: Record<PopoverPlacement, React.CSSProperties> = {
+  top: { left: 0, right: 0, bottom: 0, height: 8, transform: 'translateY(100%)' },
+  bottom: { left: 0, right: 0, top: 0, height: 8, transform: 'translateY(-100%)' },
+  left: { top: 0, bottom: 0, right: 0, width: 8, transform: 'translateX(100%)' },
+  right: { top: 0, bottom: 0, left: 0, width: 8, transform: 'translateX(-100%)' },
+}
+
 /**
  * Content container for the popover.
  */
 export function PopoverContent({ children, className }: PopoverContentProps) {
-  const { isOpen, setIsOpen, placement } = useContext(PopoverContext)
+  const { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut } =
+    useContext(PopoverContext)
 
   if (!isOpen) return null
 
@@ -114,6 +166,16 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
     right: 'left-full top-0 ml-2',
   }
 
+  const hoverProps =
+    triggerMode === 'hover'
+      ? {
+          onHoverIn: handleHoverIn,
+          onHoverOut: handleHoverOut,
+          onMouseEnter: handleHoverIn,
+          onMouseLeave: handleHoverOut,
+        }
+      : {}
+
   return (
     <>
       {/* Backdrop */}
@@ -131,7 +193,20 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
           placementStyles[placement],
           className
         )}
+        {...hoverProps}
       >
+        {triggerMode === 'hover' && (
+          <div
+            style={{
+              position: 'absolute',
+              pointerEvents: 'auto',
+              background: 'transparent',
+              ...SPACER_STYLES[placement],
+            }}
+            onMouseEnter={handleHoverIn}
+            onMouseLeave={handleHoverOut}
+          />
+        )}
         {children}
       </View>
     </>

package/src/components/ui/progress/Progress.test.tsx

@@ -79,6 +79,23 @@ describe('Progress', () => {
     expect(container.firstChild).toBeInTheDocument()
   })
 
+  describe('trackWidth and customColor', () => {
+    it('supports fixed trackWidth', () => {
+      const { container } = render(<Progress value={50} trackWidth={60} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('supports customColor', () => {
+      const { container } = render(<Progress value={50} customColor="#FF6B6B" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders correctly without trackWidth or customColor', () => {
+      render(<Progress value={75} />)
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    })
+  })
+
   describe('CircularProgress', () => {
     it('renders correctly', () => {
       render(<CircularProgress value={50} />)
@@ -115,6 +132,18 @@ describe('Progress', () => {
         unmount()
       })
     })
+
+    it('renders SVG circles', () => {
+      const { container } = render(<CircularProgress value={50} />)
+      const circles = container.querySelectorAll('circle')
+      expect(circles.length).toBe(2) // track + progress
+    })
+
+    it('applies custom color to SVG progress circle', () => {
+      const { container } = render(<CircularProgress value={50} color="success" />)
+      const progressCircle = container.querySelectorAll('circle')[1]
+      expect(progressCircle?.getAttribute('stroke')).toBe('var(--color-status-success)')
+    })
   })
 
   describe('ProgressSteps', () => {

package/src/components/ui/progress/Progress.tsx

@@ -33,6 +33,10 @@ export interface ProgressProps extends ViewProps {
   formatValue?: (value: number, max: number) => string
   /** Label text */
   label?: string
+  /** Fixed track width in pixels (default: full width) */
+  trackWidth?: number
+  /** Custom hex color override for the fill bar */
+  customColor?: string
   /** Additional className */
   className?: string
 }
@@ -85,6 +89,8 @@ export function Progress({
   showValue = false,
   formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
   label,
+  trackWidth,
+  customColor,
   className,
   ...props
 }: ProgressProps) {
@@ -109,10 +115,12 @@ export function Progress({
       {/* Progress Track */}
       <View
         className={cn(
-          'w-full rounded-full overflow-hidden',
+          'rounded-full overflow-hidden',
+          trackWidth ? undefined : 'w-full',
           trackColorStyles[color],
           sizeStyles[size]
         )}
+        style={trackWidth ? { width: trackWidth } : undefined}
         accessibilityRole="progressbar"
         accessibilityValue={{
           min: 0,
@@ -124,10 +132,13 @@ export function Progress({
         <View
           className={cn(
             'h-full rounded-full',
-            colorStyles[color],
+            !customColor && colorStyles[color],
             isIndeterminate && 'animate-pulse w-1/3'
           )}
-          style={isIndeterminate ? undefined : { width: `${percentage}%` }}
+          style={{
+            ...(isIndeterminate ? {} : { width: `${percentage}%` }),
+            ...(customColor ? { backgroundColor: customColor } : {}),
+          }}
         />
       </View>
     </View>
@@ -177,8 +188,8 @@ export function CircularProgress({
   const radius = (size - strokeWidth) / 2
   const circumference = 2 * Math.PI * radius
   const strokeDashoffset = circumference - (percentage / 100) * circumference
+  const center = size / 2
 
-  // For web, we use SVG. For native, we use a simplified view-based approach.
   return (
     <View
       className={cn('items-center justify-center', className)}
@@ -191,41 +202,49 @@ export function CircularProgress({
       }}
       {...props}
     >
-      {/* Background circle */}
+      {/* SVG implementation for web */}
       <View
-        className={cn(
-          'absolute rounded-full border-4',
-          'border-border-default'
-        )}
-        style={{
-          width: size,
-          height: size,
-          borderWidth: strokeWidth,
-        }}
-      />
-
-      {/* Progress arc (simplified) */}
-      <View
-        className={cn(
-          'absolute rounded-full',
-          colorStyles[color],
-          isIndeterminate && 'animate-spin'
-        )}
-        style={{
-          width: size,
-          height: size,
-          borderWidth: strokeWidth,
-          borderColor: 'transparent',
-          borderTopColor: colorVarMap[color],
-          borderRightColor: percentage > 25 ? colorVarMap[color] : 'transparent',
-          borderBottomColor: percentage > 50 ? colorVarMap[color] : 'transparent',
-          borderLeftColor: percentage > 75 ? colorVarMap[color] : 'transparent',
-        }}
-      />
+        className={cn(isIndeterminate && 'animate-spin')}
+        style={{ width: size, height: size }}
+      >
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          style={{ position: 'absolute' }}
+        >
+          {/* Background track */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke="var(--color-border-default)"
+            strokeWidth={strokeWidth}
+          />
+          {/* Progress arc */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke={colorVarMap[color]}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={isIndeterminate ? circumference * 0.75 : strokeDashoffset}
+            transform={`rotate(-90 ${center} ${center})`}
+            style={{ transition: 'stroke-dashoffset 300ms cubic-bezier(0.22, 1, 0.36, 1)' }}
+          />
+        </svg>
+      </View>
 
       {/* Center value */}
       {showValue && !isIndeterminate && (
-        <Text className="text-xs font-semibold text-text-primary">
+        <Text
+          className="text-xs font-semibold text-text-primary absolute"
+          style={{ fontSize: Math.max(size * 0.22, 10) }}
+        >
           {formatValue(value, max)}
         </Text>
       )}

package/src/components/ui/select/Select.test.tsx

@@ -141,6 +141,26 @@ describe('Select', () => {
     })
   })
 
+  describe('filled variant', () => {
+    it('renders with filled variant without errors', () => {
+      render(<Select options={defaultOptions} variant="filled" />)
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('renders with default variant when omitted', () => {
+      render(<Select options={defaultOptions} />)
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('supports selection in filled variant', () => {
+      const onChange = vi.fn()
+      render(<Select options={defaultOptions} variant="filled" onChange={onChange} />)
+      fireEvent.click(screen.getByRole('combobox'))
+      fireEvent.click(screen.getByText('Option 2'))
+      expect(onChange).toHaveBeenCalledWith('2')
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(

package/src/components/ui/select/Select.tsx

@@ -45,6 +45,8 @@ export interface SelectProps<T = string> extends ViewProps {
   isInvalid?: boolean
   /** Options to display */
   options: SelectOption<T>[]
+  /** Visual variant — use 'filled' on dark/elevated surfaces */
+  variant?: 'default' | 'filled'
   /** Additional className */
   className?: string
 }
@@ -81,6 +83,7 @@ export function Select<T extends string = string>({
   isDisabled = false,
   isInvalid = false,
   options,
+  variant = 'default',
   className,
   ...props
 }: SelectProps<T>) {
@@ -138,8 +141,12 @@ export function Select<T extends string = string>({
           accessibilityState={{ expanded: isOpen, disabled: isDisabled }}
           className={cn(
             'flex-row items-center justify-between px-4 py-2.5 rounded-md border',
-            'bg-surface-base',
-            isInvalid ? 'border-border-input-error' : 'border-border-input',
+            variant === 'filled' ? 'bg-black/30' : 'bg-surface-base',
+            isInvalid
+              ? 'border-border-input-error'
+              : variant === 'filled'
+                ? 'border-border-subtle'
+                : 'border-border-input',
             !isDisabled && !isInvalid && 'web:hover:border-border-input-hover',
             isOpen && 'border-border-input-focus',
             isDisabled && 'opacity-50 cursor-not-allowed'

package/src/components/ui/toast/index.ts

@@ -6,3 +6,4 @@ export type {
   ToastStatus,
   ToastPosition,
 } from './Toast'
+

package/src/components/ui/tooltip/Tooltip.test.tsx

@@ -60,6 +60,32 @@ describe('Tooltip', () => {
     expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument()
   })
 
+  describe('rich content', () => {
+    it('renders content prop instead of label', () => {
+      render(
+        <Tooltip content={<span data-testid="rich">Rich content</span>}>
+          <button>Hover me</button>
+        </Tooltip>
+      )
+
+      hoverTrigger('Hover me')
+      expect(screen.getByTestId('rich')).toBeInTheDocument()
+      expect(screen.getByText('Rich content')).toBeInTheDocument()
+    })
+
+    it('content takes precedence over label', () => {
+      render(
+        <Tooltip label="Plain label" content={<em>Rich wins</em>}>
+          <button>Hover me</button>
+        </Tooltip>
+      )
+
+      hoverTrigger('Hover me')
+      expect(screen.getByText('Rich wins')).toBeInTheDocument()
+      expect(screen.queryByText('Plain label')).not.toBeInTheDocument()
+    })
+  })
+
   describe('disabled state', () => {
     it('does not show tooltip when isDisabled is true', () => {
       render(
@@ -165,6 +191,63 @@ describe('Tooltip', () => {
     })
   })
 
+  describe('portal mode', () => {
+    it('renders tooltip into document.body when usePortal is true', () => {
+      render(
+        <Tooltip label="Portal tooltip" usePortal>
+          <button>Hover me</button>
+        </Tooltip>
+      )
+
+      hoverTrigger('Hover me')
+      expect(screen.getByText('Portal tooltip')).toBeInTheDocument()
+      expect(screen.getByTestId('tooltip-portal')).toBeInTheDocument()
+      expect(screen.getByTestId('tooltip-portal').parentElement).toBe(
+        document.body
+      )
+    })
+
+    it('applies fixed positioning and z-index to portal tooltip', () => {
+      render(
+        <Tooltip label="Styled portal" usePortal>
+          <button>Hover me</button>
+        </Tooltip>
+      )
+
+      hoverTrigger('Hover me')
+      const portal = screen.getByTestId('tooltip-portal')
+      expect(portal.style.position).toBe('fixed')
+      expect(portal.style.zIndex).toBe('10000')
+      expect(portal.style.pointerEvents).toBe('none')
+    })
+
+    it('hides portal tooltip on hover out', () => {
+      render(
+        <Tooltip label="Portal hide" usePortal>
+          <button>Hover me</button>
+        </Tooltip>
+      )
+
+      hoverTrigger('Hover me')
+      expect(screen.getByText('Portal hide')).toBeInTheDocument()
+
+      unhoverTrigger('Hover me')
+      expect(screen.queryByText('Portal hide')).not.toBeInTheDocument()
+    })
+
+    it('does not render portal when usePortal is false (default)', () => {
+      render(
+        <Tooltip label="Inline tooltip">
+          <button>Hover me</button>
+        </Tooltip>
+      )
+
+      hoverTrigger('Hover me')
+      expect(screen.getByText('Inline tooltip')).toBeInTheDocument()
+      expect(screen.queryByTestId('tooltip-portal')).not.toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(