@titan-design/react-ui 0.1.1 → 0.2.5

package/src/components/ui/indicator/Indicator.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Indicator } from './Indicator'
+
+describe('Indicator', () => {
+  it('renders with default props', () => {
+    const { container } = render(<Indicator />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Indicator size={size} />)
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['default', 'primary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Indicator color={color} />)
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Indicator className="custom-class" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports customColor via inline style', () => {
+    const { container } = render(<Indicator customColor="#FF0000" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports ring prop', () => {
+    const { container } = render(<Indicator ring />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports glow prop', () => {
+    const { container } = render(<Indicator glow color="success" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Indicator color="success" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/indicator/Indicator.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type IndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
+export type IndicatorColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'
+
+export interface IndicatorProps extends ViewProps {
+  /** Dot size */
+  size?: IndicatorSize
+  /** Semantic color */
+  color?: IndicatorColor
+  /** Custom hex color (overrides color prop) */
+  customColor?: string
+  /** Add a glow shadow effect */
+  glow?: boolean
+  /** Add a ring border */
+  ring?: boolean
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<IndicatorSize, string> = {
+  xs: 'w-1 h-1',
+  sm: 'w-1.5 h-1.5',
+  md: 'w-2 h-2',
+  lg: 'w-2.5 h-2.5',
+}
+
+const colorStyles: Record<IndicatorColor, string> = {
+  default: 'bg-text-tertiary',
+  primary: 'bg-brand-primary',
+  success: 'bg-status-success',
+  error: 'bg-status-error',
+  warning: 'bg-status-warning',
+  info: 'bg-status-info',
+}
+
+export function Indicator({
+  size = 'sm',
+  color = 'default',
+  customColor,
+  glow = false,
+  ring = false,
+  className,
+  style,
+  ...props
+}: IndicatorProps) {
+  const dynamicStyle = {
+    ...(typeof style === 'object' ? style : {}),
+    ...(customColor ? { backgroundColor: customColor } : {}),
+    ...(glow && !customColor ? {} : {}),
+    ...(glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}),
+  }
+
+  return (
+    <View
+      className={cn(
+        'rounded-full shrink-0',
+        sizeStyles[size],
+        !customColor && colorStyles[color],
+        ring && 'border-2 border-background-base',
+        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(20,184,166,0.6)]',
+        glow && !customColor && color === 'error' && 'shadow-[0_0_6px_rgba(239,68,68,0.6)]',
+        glow && !customColor && color === 'warning' && 'shadow-[0_0_6px_rgba(245,158,11,0.6)]',
+        glow && !customColor && color === 'primary' && 'shadow-[0_0_6px_rgba(255,121,0,0.6)]',
+        className
+      )}
+      style={Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Indicator } from './Indicator'
+export type { IndicatorProps, IndicatorSize, IndicatorColor } from './Indicator'

package/src/components/ui/pill/Pill.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Pill } from './Pill'
+import { Indicator } from '../indicator'
+
+const meta: Meta<typeof Pill> = {
+  title: 'Components/Pill',
+  component: Pill,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['subtle', 'outline'] },
+    color: { control: 'select', options: ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] },
+    size: { control: 'select', options: ['xs', 'sm', 'md'] },
+    rounded: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Pill>
+
+export const Default: Story = { args: { children: 'Label', color: 'primary' } }
+
+export const AllVariants: Story = {
+  render: () => (
+    <View className="flex-row gap-2">
+      <Pill variant="subtle" color="primary">Subtle</Pill>
+      <Pill variant="outline" color="primary">Outline</Pill>
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View className="flex-row gap-2 flex-wrap">
+      <Pill color="default">Default</Pill>
+      <Pill color="primary">Primary</Pill>
+      <Pill color="success">Success</Pill>
+      <Pill color="error">Error</Pill>
+      <Pill color="warning">Warning</Pill>
+      <Pill color="info">Info</Pill>
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View className="flex-row gap-2 items-center">
+      <Pill size="xs" color="primary">XS</Pill>
+      <Pill size="sm" color="primary">SM</Pill>
+      <Pill size="md" color="primary">MD</Pill>
+    </View>
+  ),
+}
+
+export const WithDot: Story = {
+  render: () => (
+    <View className="flex-row gap-2">
+      <Pill color="success" leftElement={<Indicator size="xs" color="success" />}>Active</Pill>
+      <Pill color="error" leftElement={<Indicator size="xs" color="error" />}>Failed</Pill>
+      <Pill color="warning" leftElement={<Indicator size="xs" color="warning" />}>Pending</Pill>
+    </View>
+  ),
+}
+
+export const SquareCorners: Story = {
+  render: () => (
+    <View className="flex-row gap-2">
+      <Pill rounded={false} color="primary">Tag</Pill>
+      <Pill rounded={false} color="success">Done</Pill>
+    </View>
+  ),
+}

package/src/components/ui/pill/Pill.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Pill } from './Pill'
+
+describe('Pill', () => {
+  it('renders string children', () => {
+    render(<Pill>Active</Pill>)
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('renders with all variants', () => {
+    const variants = ['subtle', 'outline'] as const
+    variants.forEach((variant) => {
+      const { unmount } = render(<Pill variant={variant}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all colors', () => {
+    const colors = ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Pill color={color}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all sizes', () => {
+    const sizes = ['xs', 'sm', 'md'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Pill size={size}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies rounded-full by default', () => {
+    const { container } = render(<Pill>Test</Pill>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports leftElement', () => {
+    render(<Pill leftElement={<span data-testid="dot" />}>Label</Pill>)
+    expect(screen.getByTestId('dot')).toBeInTheDocument()
+    expect(screen.getByText('Label')).toBeInTheDocument()
+  })
+
+  it('handles onPress', () => {
+    const handler = vi.fn()
+    render(<Pill onPress={handler}>Click</Pill>)
+    fireEvent.click(screen.getByText('Click'))
+    expect(handler).toHaveBeenCalled()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Pill className="custom">Test</Pill>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Pill>Active</Pill>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/pill/Pill.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type PillVariant = 'subtle' | 'outline'
+export type PillColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type PillSize = 'xs' | 'sm' | 'md'
+
+export interface PillProps extends ViewProps {
+  /** Pill content */
+  children: React.ReactNode
+  /** Visual variant */
+  variant?: PillVariant
+  /** Color scheme */
+  color?: PillColor
+  /** Size */
+  size?: PillSize
+  /** Fully rounded (default true) or slight radius */
+  rounded?: boolean
+  /** Element before the label (e.g., Indicator dot) */
+  leftElement?: React.ReactNode
+  /** Press handler (makes pill interactive) */
+  onPress?: () => void
+  /** Additional className */
+  className?: string
+}
+
+const variantColorStyles: Record<PillVariant, Record<PillColor, string>> = {
+  subtle: {
+    default: 'bg-surface-raised border-border-subtle text-text-secondary',
+    primary: 'bg-brand-primary/10 border-brand-primary/25 text-brand-primary',
+    secondary: 'bg-brand-secondary/10 border-brand-secondary/25 text-brand-secondary',
+    success: 'bg-status-success/10 border-status-success/25 text-status-success',
+    error: 'bg-status-error/10 border-status-error/25 text-status-error',
+    warning: 'bg-status-warning/10 border-status-warning/25 text-status-warning',
+    info: 'bg-status-info/10 border-status-info/25 text-status-info',
+  },
+  outline: {
+    default: 'border-border-default text-text-secondary',
+    primary: 'border-brand-primary text-brand-primary',
+    secondary: 'border-brand-secondary text-brand-secondary',
+    success: 'border-status-success text-status-success',
+    error: 'border-status-error text-status-error',
+    warning: 'border-status-warning text-status-warning',
+    info: 'border-status-info text-status-info',
+  },
+}
+
+const sizeStyles: Record<PillSize, { container: string; text: string }> = {
+  xs: { container: 'px-1 py-px', text: 'text-[9px]' },
+  sm: { container: 'px-2 py-0.5', text: 'text-[10px]' },
+  md: { container: 'px-2 py-1', text: 'text-[10px]' },
+}
+
+export function Pill({
+  children,
+  variant = 'subtle',
+  color = 'default',
+  size = 'sm',
+  rounded = true,
+  leftElement,
+  onPress,
+  className,
+  ...props
+}: PillProps) {
+  const containerClasses = cn(
+    'flex-row items-center gap-1 border self-start shrink-0',
+    rounded ? 'rounded-full' : 'rounded',
+    variantColorStyles[variant][color],
+    sizeStyles[size].container,
+    className
+  )
+
+  const textClasses = cn(
+    'font-heading font-semibold',
+    sizeStyles[size].text,
+    'text-inherit'
+  )
+
+  const content = (
+    <>
+      {leftElement}
+      {typeof children === 'string' ? (
+        <Text className={textClasses}>{children}</Text>
+      ) : (
+        children
+      )}
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} className={containerClasses} {...props}>
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View className={containerClasses} {...props}>
+      {content}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Pill } from './Pill'
+export type { PillProps, PillVariant, PillColor, PillSize } from './Pill'

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(