@titan-design/react-ui 0.5.0 → 0.7.0

package/src/components/ui/index.ts

@@ -36,3 +36,4 @@ export * from './surface'
 export * from './list-item'
 export * from './indicator'
 export * from './pill'
+export * from './tile'

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

@@ -3,12 +3,15 @@ import { View } from 'react-native'
 import { Indicator } from './Indicator'
 
 const meta: Meta<typeof Indicator> = {
-  title: 'Components/Indicator',
+  title: 'Components/Atoms/Indicator',
   component: Indicator,
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
-    color: { control: 'select', options: ['default', 'primary', 'success', 'error', 'warning', 'info'] },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'live', 'error', 'warning', 'info'],
+    },
     glow: { control: 'boolean' },
     ring: { control: 'boolean' },
   },
@@ -72,3 +75,36 @@ export const CustomColor: Story = {
     </View>
   ),
 }
+
+export const Pulse: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center">
+      <Indicator size="md" color="success" pulse />
+      <Indicator size="md" color="success" pulse="ping" />
+      <Indicator size="md" color="warning" />
+      <Indicator size="md" color="default" />
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Opacity pulse (default), expanding-ring pulse (`pulse="ping"`, green for live), solid, dim.',
+      },
+    },
+  },
+}
+
+export const Vivid: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="error" />
+      <Indicator size="md" color="error-vivid" />
+    </View>
+  ),
+  parameters: {
+    docs: { description: { story: 'Standard status vs the vivid palette (success/error).' } },
+  },
+}

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

@@ -18,7 +18,16 @@ describe('Indicator', () => {
   })
 
   it('renders with all color options', () => {
-    const colors = ['default', 'primary', 'success', 'error', 'warning', 'info'] as const
+    const colors = [
+      'default',
+      'primary',
+      'success',
+      'live',
+      'error',
+      'warning',
+      'info',
+      'error-vivid',
+    ] as const
     colors.forEach((color) => {
       const { unmount } = render(<Indicator color={color} />)
       unmount()
@@ -45,6 +54,16 @@ describe('Indicator', () => {
     expect(container.firstChild).toBeInTheDocument()
   })
 
+  it('supports pulse prop (opacity)', () => {
+    const { container } = render(<Indicator pulse color="success" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports the ping pulse variant', () => {
+    const { container } = render(<Indicator pulse="ping" color="success" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<Indicator color="success" />)

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

@@ -1,9 +1,19 @@
-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 type IndicatorColor =
+  | 'default'
+  | 'primary'
+  | 'success'
+  | 'live'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'error-vivid'
+
+/** How a pulsing indicator animates: a subtle opacity fade, or an expanding ring. */
+export type IndicatorPulse = 'opacity' | 'ping'
 
 export interface IndicatorProps extends ViewProps {
   /** Dot size */
@@ -16,6 +26,8 @@ export interface IndicatorProps extends ViewProps {
   glow?: boolean
   /** Add a ring border */
   ring?: boolean
+  /** Animate for live/active status. `true` = opacity fade; `'ping'` = expanding ring. */
+  pulse?: boolean | IndicatorPulse
   /** Additional className */
   className?: string
 }
@@ -31,9 +43,11 @@ const colorStyles: Record<IndicatorColor, string> = {
   default: 'bg-text-tertiary',
   primary: 'bg-brand-primary',
   success: 'bg-status-success',
+  live: 'bg-status-live',
   error: 'bg-status-error',
   warning: 'bg-status-warning',
   info: 'bg-status-info',
+  'error-vivid': 'bg-status-error-vivid',
 }
 
 export function Indicator({
@@ -42,14 +56,39 @@ export function Indicator({
   customColor,
   glow = false,
   ring = false,
+  pulse = false,
   className,
   style,
   ...props
 }: IndicatorProps) {
+  const pulseMode: IndicatorPulse | false = pulse === true ? 'opacity' : pulse || false
+  const colorClass = !customColor ? colorStyles[color] : undefined
+  const colorStyle = customColor ? { backgroundColor: customColor } : undefined
+
+  // Expanding-ring pulse: a ping layer behind the solid dot (for live/active status).
+  if (pulseMode === 'ping') {
+    return (
+      <View className={cn('relative', sizeStyles[size], className)} style={style} {...props}>
+        <View
+          className={cn('absolute inset-0 rounded-full animate-ping', colorClass)}
+          style={colorStyle}
+        />
+        <View
+          className={cn(
+            'relative rounded-full',
+            sizeStyles[size],
+            colorClass,
+            ring && 'border-2 border-background-base'
+          )}
+          style={colorStyle}
+        />
+      </View>
+    )
+  }
+
   const dynamicStyle = {
     ...(typeof style === 'object' ? style : {}),
-    ...(customColor ? { backgroundColor: customColor } : {}),
-    ...(glow && !customColor ? {} : {}),
+    ...(colorStyle ?? {}),
     ...(glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}),
   }
 
@@ -58,12 +97,17 @@ export function Indicator({
       className={cn(
         'rounded-full shrink-0',
         sizeStyles[size],
-        !customColor && colorStyles[color],
+        colorClass,
+        pulseMode === 'opacity' && 'animate-pulse',
         ring && 'border-2 border-background-base',
-        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(20,184,166,0.6)]',
+        glow &&
+          !customColor &&
+          (color === 'success' || color === 'live') &&
+          'shadow-[0_0_6px_rgba(46,213,115,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)]',
+        glow && !customColor && color === 'error-vivid' && 'shadow-[0_0_6px_rgba(255,71,87,0.6)]',
         className
       )}
       style={Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style}

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

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

package/src/components/ui/input/Input.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Input, InputGroup, PasswordInput } from './Input'
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
+  title: 'Components/Molecules/Input',
   component: Input,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/link/Link.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Link } from './Link'
 
 const meta: Meta<typeof Link> = {
-  title: 'Components/Link',
+  title: 'Components/Atoms/Link',
   component: Link,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/list-item/ListItem.stories.tsx

@@ -45,7 +45,7 @@ function ChevronRight({ size = 16 }: { size?: number }) {
 }
 
 const meta: Meta<typeof ListItem> = {
-  title: 'Components/ListItem',
+  title: 'Components/Molecules/ListItem',
   component: ListItem,
   tags: ['autodocs'],
 }

package/src/components/ui/menu/Menu.stories.tsx

@@ -4,7 +4,7 @@ import { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from '.
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Menu> = {
-  title: 'Components/Menu',
+  title: 'Components/Molecules/Menu',
   component: Menu,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/modal/Modal.stories.tsx

@@ -13,7 +13,7 @@ import {
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
+  title: 'Components/Organisms/Modal',
   component: Modal,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,7 +4,7 @@ import { Pill } from './Pill'
 import { Indicator } from '../indicator'
 
 const meta: Meta<typeof Pill> = {
-  title: 'Components/Pill',
+  title: 'Components/Atoms/Pill',
   component: Pill,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,7 +4,7 @@ import { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './P
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Popover> = {
-  title: 'Components/Popover',
+  title: 'Components/Molecules/Popover',
   component: Popover,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Progress, CircularProgress, ProgressSteps } from './Progress'
 
 const meta: Meta<typeof Progress> = {
-  title: 'Components/Progress',
+  title: 'Components/Molecules/Progress',
   component: Progress,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/radio/Radio.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { Radio, RadioGroup } from './Radio'
 
 const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/Radio',
+  title: 'Components/Molecules/Radio',
   component: RadioGroup,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/section/Section.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Section, SectionHeader, SectionContent } from './Section'
 
 const meta: Meta<typeof Section> = {
-  title: 'Components/Section',
+  title: 'Components/Atoms/Section',
   component: Section,
   tags: ['autodocs'],
 }

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

@@ -12,7 +12,7 @@ const basicOptions: SelectOption[] = [
 ]
 
 const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
+  title: 'Components/Molecules/Select',
   component: Select,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/skeleton/Skeleton.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from './Skeleton'
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Components/Skeleton',
+  title: 'Components/Atoms/Skeleton',
   component: Skeleton,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/spinner/Spinner.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Spinner } from './Spinner'
 
 const meta: Meta<typeof Spinner> = {
-  title: 'Components/Spinner',
+  title: 'Components/Atoms/Spinner',
   component: Spinner,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/spinner/Spinner.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { ActivityIndicator, View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { SPINNER_PRIMARY, SPINNER_SECONDARY } from '../../../theme/extracted-colors-ui'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
 export type SpinnerColor = 'primary' | 'secondary' | 'white' | 'default'
@@ -24,8 +25,8 @@ const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
 }
 
 const colorMap: Record<SpinnerColor, string> = {
-  primary: '#5048E5',
-  secondary: '#10B981',
+  primary: SPINNER_PRIMARY,
+  secondary: SPINNER_SECONDARY,
   white: '#FFFFFF',
   default: '#6B7280',
 }

package/src/components/ui/stack/Stack.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Stack, HStack, VStack } from './Stack'
 
 const meta: Meta<typeof Stack> = {
-  title: 'Components/Stack',
+  title: 'Components/Atoms/Stack',
   component: Stack,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/surface/Surface.stories.tsx

@@ -4,7 +4,7 @@ import { Surface } from './Surface'
 import type { ElevationLevel } from '../../../theme/elevation'
 
 const meta: Meta<typeof Surface> = {
-  title: 'Components/Surface',
+  title: 'Components/Atoms/Surface',
   component: Surface,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/switch/Switch.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Switch } from './Switch'
 
 const meta: Meta<typeof Switch> = {
-  title: 'Components/Switch',
+  title: 'Components/Molecules/Switch',
   component: Switch,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/tabs/Tabs.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'
 
 const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
+  title: 'Components/Molecules/Tabs',
   component: Tabs,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/tile/Tile.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Tile } from './Tile'
+import { getSemanticColors } from '../../../theme'
+
+const ACCENT = getSemanticColors('dark')['status-warning']
+const SUCCESS = getSemanticColors('dark')['status-success']
+
+const meta: Meta<typeof Tile> = {
+  title: 'Components/Atoms/Tile',
+  component: Tile,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '**Atom.** A compact card preset; grouped by SessionMetrics / ScheduleTiles.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Uppercase micro-label' },
+    value: { control: 'text', description: 'Primary mono value' },
+    valueColor: { control: 'color', description: 'Tints the value' },
+    align: {
+      control: 'radio',
+      options: ['center', 'start'],
+      description: 'Content alignment',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tile>
+
+export const Default: Story = {
+  args: {
+    label: 'Volume',
+    value: '76%',
+    align: 'center',
+  },
+}
+
+export const Row: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Volume" value="76%" />
+      <Tile label="Load" value="7.3k" />
+      <Tile label="Fatigue" value="MOD" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const ScheduleTiles: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Date" value="Jul 10" />
+      <Tile label="Time" value="6:30 PM" />
+      <Tile label="Until" value="5h" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const ValueColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Default" value="12" />
+      <Tile label="Success" value="OK" valueColor={SUCCESS} />
+      <Tile label="Warning" value="MOD" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const StartAligned: Story = {
+  args: {
+    label: 'Program',
+    value: 'Pull A',
+    align: 'start',
+  },
+}

package/src/components/ui/tile/Tile.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Tile } from './Tile'
+
+describe('Tile', () => {
+  it('renders label and value', () => {
+    render(<Tile label="Volume" value="76%" />)
+    expect(screen.getByText('Volume')).toBeInTheDocument()
+    expect(screen.getByText('76%')).toBeInTheDocument()
+  })
+
+  it('applies valueColor to the value text', () => {
+    render(<Tile label="Fatigue" value="MOD" valueColor="#F5A623" />)
+    const value = screen.getByText('MOD')
+    expect(value).toHaveStyle({ color: '#F5A623' })
+  })
+
+  it('does not set an inline color when valueColor is omitted', () => {
+    render(<Tile label="Volume" value="76%" />)
+    const value = screen.getByText('76%')
+    expect(value.style.color).toBe('')
+  })
+
+  it('renders with start alignment', () => {
+    render(<Tile label="Program" value="Pull A" align="start" />)
+    expect(screen.getByText('Program')).toBeInTheDocument()
+    expect(screen.getByText('Pull A')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Tile label="Load" value="7.3k" className="custom-class" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('passes additional props through', () => {
+    render(<Tile label="Load" value="7.3k" testID="tile-test" />)
+    expect(screen.getByText('7.3k')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Tile label="Volume" value="76%" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/tile/Tile.tsx

@@ -0,0 +1,64 @@
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface TileProps extends ViewProps {
+  /** Uppercase micro-label shown above the value */
+  label: string
+  /** Primary value, rendered in a bold mono face */
+  value: string
+  /** Tints the value (status/accent hex or CSS color); defaults to primary text */
+  valueColor?: string
+  /** Content alignment within the tile (default: 'center') */
+  align?: 'center' | 'start'
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Tile — a compact label-over-value stat card.
+ *
+ * A rounded raised box with an uppercase micro-label stacked over a bold mono
+ * value. Fills its flex slot so a row of Tiles reads as an even HStack.
+ *
+ * @example
+ * <Tile label="Volume" value="76%" />
+ * <Tile label="Fatigue" value="MOD" valueColor="#F5A623" />
+ */
+export function Tile({
+  label,
+  value,
+  valueColor,
+  align = 'center',
+  className,
+  ...props
+}: TileProps) {
+  const isCenter = align === 'center'
+  return (
+    <View
+      className={cn(
+        'flex-1 rounded-md bg-surface-raised px-1.5 py-2',
+        isCenter ? 'items-center' : 'items-start',
+        className
+      )}
+      {...props}
+    >
+      <Text
+        className={cn(
+          'text-[10px] font-bold uppercase tracking-wider text-text-tertiary',
+          isCenter ? 'text-center' : 'text-left'
+        )}
+      >
+        {label}
+      </Text>
+      <Text
+        className={cn(
+          'mt-0.5 font-mono text-sm font-bold text-text-primary',
+          isCenter ? 'text-center' : 'text-left'
+        )}
+        style={valueColor ? { color: valueColor } : undefined}
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Tile } from './Tile'
+export type { TileProps } from './Tile'

package/src/components/ui/toast/Toast.stories.tsx

@@ -4,7 +4,7 @@ import { Toast, ToastProvider, useToast } from './Toast'
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Toast> = {
-  title: 'Components/Toast',
+  title: 'Components/Molecules/Toast',
   component: Toast,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { ToolbarButton, ToolbarButtonGroup } from './ToolbarButton'
 
 const meta: Meta<typeof ToolbarButton> = {
-  title: 'Components/ToolbarButton',
+  title: 'Components/Molecules/ToolbarButton',
   component: ToolbarButton,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/toolbar-button/ToolbarButton.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, createContext, useContext } from 'react'
 import { View, Text, Pressable, type ViewProps, StyleSheet, Platform } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { neumorphicShadows, getHoverColors } from '../../../theme'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type ToolbarButtonVariant = 'default' | 'neumorphic'
 export type ToolbarButtonSize = 'sm' | 'md' | 'lg'
@@ -129,7 +130,7 @@ export function ToolbarButton({
 
   // Determine icon color based on state
   const getIconColor = () => {
-    if (isActive === true) return '#FF7900' // brand-primary
+    if (isActive === true) return resolveColor('brand-primary')
     return showActive ? '#FFFFFF' : '#D1D1D1'
   }
 

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

@@ -4,7 +4,7 @@ import { Tooltip } from './Tooltip'
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Tooltip> = {
-  title: 'Components/Tooltip',
+  title: 'Components/Molecules/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
   argTypes: {

package/src/examples/react-hook-form/ReactHookForm.stories.tsx

@@ -10,7 +10,7 @@ import { RhfContactForm, type ContactFormValues } from './RhfContactForm'
  * `Controller` render-prop idiom. See `ControlledFields.tsx` for the adapters.
  */
 const meta: Meta<typeof RhfContactForm> = {
-  title: 'Examples/React Hook Form',
+  title: 'Lab/Recipes/React Hook Form',
   component: RhfContactForm,
   tags: ['autodocs'],
   parameters: {

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useTimer, formatDuration } from './useTimer'
+export type { UseTimerOptions, TimerState, TimerMode } from './useTimer'