Realtime Components

Components for displaying realtime connection status and live data.

ConnectionStatus

Displays realtime connection status indicator.

Prop	Type	Default	Description
`status`	`'connected' \| 'connecting' \| 'disconnected'`	Required	Connection status
`mode`	`'realtime' \| 'polling' \| 'offline'`	-	Connection mode
`size`	`'sm' \| 'md'`	`'md'`	Size variant
`showLabel`	`boolean`	`true`	Show status label
`customLabels`	`Record<string, string>`	-	Custom status labels
`className`	`string`	-	Container class

tsx

<ConnectionStatus
  status="connected"
  mode="realtime"
  size="sm"
/>

Animated numeric counter with trend indicator.

Prop	Type	Default	Description
`value`	`number`	Required	Current value
`previousValue`	`number`	-	Previous value for trend
`duration`	`number`	`1000`	Animation duration (ms)
`prefix`	`string`	-	Value prefix
`suffix`	`string`	-	Value suffix
`decimals`	`number`	`0`	Decimal places
`showTrend`	`boolean`	`true`	Show trend indicator
`className`	`string`	-	Container class

tsx

<LiveCounter
  value={1234}
  previousValue={1200}
  prefix="$"
  showTrend
/>