@titan-design/react-ui 0.1.1 → 0.2.6

package/src/components/ui/card/Card.tsx

@@ -10,7 +10,7 @@ import {
 } from '../../../theme'
 import { useTheme } from '../../../utils/useTheme'
 
-export type CardVariant = 'elevated' | 'outline' | 'filled'
+export type CardVariant = 'elevated' | 'outline' | 'filled' | 'accent' | 'subtle'
 export type CardElevation = 1 | 2 | 3  // subtle, standard, prominent
 
 export interface CardProps extends ViewProps {
@@ -28,6 +28,10 @@ export interface CardProps extends ViewProps {
   borderColor?: string
   /** Custom background color (hex, rgb, or CSS color). Useful for colored cards. */
   bgColor?: string
+  /** Accent stripe color for accent variant (CSS color or hex) */
+  accentColor?: string
+  /** Accent stripe width for accent variant in pixels (default: 3) */
+  accentWidth?: number
   /** Additional className */
   className?: string
   children?: React.ReactNode
@@ -43,6 +47,8 @@ const variantStyles: Record<CardVariant, string> = {
   elevated: '', // Will be set dynamically via elevation system
   outline: 'border-2 border-border-strong',  // Thicker border with stronger contrast
   filled: '', // Will be set dynamically via elevation system
+  accent: 'border border-border-default',
+  subtle: 'border border-border-subtle',
 }
 
 /**
@@ -75,6 +81,8 @@ export function Card({
   onPress,
   borderColor,
   bgColor,
+  accentColor,
+  accentWidth,
   className,
   children,
   style,
@@ -91,8 +99,8 @@ export function Card({
   const elevationLevel = useMemo(() => {
     const validated = getValidatedElevation('card', elevation as ElevationLevel)
     // Map variant to elevation if needed
-    if (variant === 'outline') {
-      return 1 as ElevationLevel  // Outline uses subtle elevation
+    if (variant === 'outline' || variant === 'accent' || variant === 'subtle') {
+      return 1 as ElevationLevel  // These border variants use subtle elevation
     }
     return validated
   }, [variant, elevation])
@@ -103,9 +111,13 @@ export function Card({
   // Calculate surface color and shadow from elevation
   const surfaceColor = useMemo(() => {
     // Outline variant in light mode uses a specific off-white for clear visibility
-    if (variant === 'outline' && theme === 'light') {
+    if ((variant === 'outline' || variant === 'accent') && theme === 'light') {
       return '#FAFAFA'  // Matches --color-surface-elevated in light mode
     }
+    // Subtle variant uses the base surface color without elevation lift
+    if (variant === 'subtle') {
+      return getElevationSurface(baseColor, 0 as ElevationLevel, theme)
+    }
     return getElevationSurface(baseColor, elevationLevel, theme)
   }, [baseColor, elevationLevel, theme, variant])
 
@@ -148,8 +160,8 @@ export function Card({
   const baseClassName = cn(
     'rounded-lg overflow-hidden relative',
     // Apply variant styles, but only use default border color if no custom borderColor
-    variant === 'outline' 
-      ? borderColor 
+    variant === 'outline'
+      ? borderColor
         ? 'border-2'  // Just the border width, color via style
         : variantStyles[variant]  // Full variant styles including color
       : variantStyles[variant],
@@ -160,22 +172,31 @@ export function Card({
     className
   )
 
+  // Accent variant: left stripe via borderLeft override
+  const accentStyle = useMemo(() => variant === 'accent' ? {
+    borderLeftWidth: accentWidth ?? 3,
+    borderLeftColor: accentColor ?? 'var(--color-brand-primary)',
+  } : {}, [variant, accentWidth, accentColor])
+
   // Merge styles: background color from elevation + shadow style + custom colors + custom style
   const mergedStyle = useMemo(() => {
     const elevationStyle: Record<string, any> = {
       backgroundColor: bgColor || surfaceColor,
+      borderRadius: 8,
+      overflow: 'hidden' as const,
       ...shadowStyle,
+      ...accentStyle,
     }
-    
+
     // Add custom border color if provided
     if (borderColor) {
       elevationStyle.borderColor = borderColor
     }
-    
+
     if (!style) return elevationStyle
-    // Merge styles, with elevation style taking precedence for background/shadow
-    return [style, elevationStyle]
-  }, [style, surfaceColor, shadowStyle, borderColor, bgColor])
+    // User style takes precedence over elevation defaults (e.g. maxWidth, custom bg)
+    return [elevationStyle, style]
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle])
 
   if (isClickable) {
     return (

package/src/components/ui/index.ts

@@ -34,3 +34,5 @@ export * from './data-row'
 export * from './icon-box'
 export * from './surface'
 export * from './list-item'
+export * from './indicator'
+export * from './pill'

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Indicator } from './Indicator'
+
+const meta: Meta<typeof Indicator> = {
+  title: 'Components/Indicator',
+  component: Indicator,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['default', 'primary', 'success', 'error', 'warning', 'info'] },
+    glow: { control: 'boolean' },
+    ring: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Indicator>
+
+export const Default: Story = { args: { color: 'primary', size: 'md' } }
+
+export const AllSizes: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="xs" color="primary" />
+      <Indicator size="sm" color="primary" />
+      <Indicator size="md" color="primary" />
+      <Indicator size="lg" color="primary" />
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="default" />
+      <Indicator size="md" color="primary" />
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="error" />
+      <Indicator size="md" color="warning" />
+      <Indicator size="md" color="info" />
+    </View>
+  ),
+}
+
+export const WithGlow: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center p-4 bg-surface-base">
+      <Indicator size="md" color="success" glow />
+      <Indicator size="md" color="error" glow />
+      <Indicator size="md" color="warning" glow />
+      <Indicator size="md" color="primary" glow />
+    </View>
+  ),
+}
+
+export const WithRing: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="success" ring />
+      <Indicator size="md" color="error" ring />
+      <Indicator size="lg" color="primary" ring />
+    </View>
+  ),
+}
+
+export const CustomColor: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" customColor="#FF6B6B" />
+      <Indicator size="md" customColor="#4ECDC4" />
+      <Indicator size="md" customColor="#45B7D1" glow />
+    </View>
+  ),
+}

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'