docs(realtimekit): added React Native RealtimeKit UI component references

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAudioVisualizer.mdx

@@ -0,0 +1,41 @@
+---
+pcx_content_type: reference
+title: RtkAudioVisualizer
+description: API reference for RtkAudioVisualizer component (React Native Library)
+---
+
+Displays an audio visualizer with animated bars representing a participant's audio levels.
+
+## Properties
+
+| Property        | Type                           | Required | Default           | Description                                    |
+| --------------- | ------------------------------ | -------- | ----------------- | ---------------------------------------------- |
+| `participant`   | `Peer \| RTKParticipant`       | ✅       | -                 | The participant whose audio to visualize       |
+| `iconPack`      | `IconPack`                     | ❌       | `defaultIconPack` | Custom icon pack for icons                     |
+| `isScreenshare` | `boolean`                      | ❌       | `false`           | Whether this is a screenshare audio visualizer |
+| `size`          | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌       | `'sm'`            | Size of the visualizer                         |
+| `variant`       | `'bar'`                        | ❌       | `'bar'`           | Visual variant of the visualizer               |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkAudioVisualizer participant={participant} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return (
+		<RtkAudioVisualizer participant={participant} size="md" variant="bar" />
+	);
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAvatar.mdx

@@ -0,0 +1,38 @@
+---
+pcx_content_type: reference
+title: RtkAvatar
+description: API reference for RtkAvatar component (React Native Library)
+---
+
+Displays a participant's avatar image or initials-based fallback avatar.
+
+## Properties
+
+| Property      | Type                                  | Required | Default           | Description                             |
+| ------------- | ------------------------------------- | -------- | ----------------- | --------------------------------------- |
+| `participant` | `RTKParticipant \| RTKSelf`           | ✅       | -                 | The participant whose avatar to display |
+| `iconPack`    | `IconPack`                            | ❌       | `defaultIconPack` | Custom icon pack                        |
+| `size`        | `'lg' \| 'md' \| 'sm' \| 'xl'`        | ❌       | `'sm'`            | Size of the avatar                      |
+| `variant`     | `'circular' \| 'hexagon' \| 'square'` | ❌       | `'circular'`      | Shape variant of the avatar             |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkAvatar participant={participant} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkAvatar participant={participant} size="lg" variant="circular" />;
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkButton.mdx

@@ -0,0 +1,51 @@
+---
+pcx_content_type: reference
+title: RtkButton
+description: API reference for RtkButton component (React Native Library)
+---
+
+A general-purpose button component with multiple variants and sizes.
+
+## Properties
+
+| Property   | Type                                              | Required | Default    | Description                      |
+| ---------- | ------------------------------------------------- | -------- | ---------- | -------------------------------- |
+| `children` | `ReactNode`                                       | ❌       | -          | Button content/label             |
+| `onClick`  | `any`                                             | ✅       | -          | Press handler callback           |
+| `kind`     | `'button' \| 'icon' \| 'wide'`                    | ❌       | `'button'` | Button kind                      |
+| `variant`  | `'danger' \| 'ghost' \| 'primary' \| 'secondary'` | ❌       | -          | Visual style variant             |
+| `size`     | `'lg' \| 'md' \| 'sm' \| 'xl'`                    | ❌       | -          | Button size                      |
+| `reverse`  | `boolean`                                         | ❌       | `false`    | Reverse the button content order |
+| `disabled` | `boolean`                                         | ❌       | -          | Whether the button is disabled   |
+| `style`    | `StyleProp<any>`                                  | ❌       | -          | Custom React Native styles       |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkButton } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkButton onClick={() => console.log("pressed")}>Press Me</RtkButton>;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkButton } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return (
+		<RtkButton
+			onClick={() => console.log("pressed")}
+			variant="primary"
+			size="md"
+			kind="wide"
+		>
+			Join Meeting
+		</RtkButton>
+	);
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkCameraToggle.mdx

@@ -0,0 +1,39 @@
+---
+pcx_content_type: reference
+title: RtkCameraToggle
+description: API reference for RtkCameraToggle component (React Native Library)
+---
+
+Toggle button to enable or disable the local participant's camera. Automatically hides if the participant lacks video production permissions.
+
+## Properties
+
+| Property   | Type                           | Required | Default           | Description                      |
+| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- |
+| `meeting`  | `RealtimeKitClient`            | ✅       | -                 | The RealtimeKit meeting instance |
+| `size`     | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌       | -                 | Icon size                        |
+| `variant`  | `'button' \| 'horizontal'`     | ❌       | -                 | Layout variant                   |
+| `iconPack` | `IconPack`                     | ❌       | `defaultIconPack` | Custom icon pack                 |
+| `t`        | `RtkI18n`                      | ❌       | -                 | i18n translation function        |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkCameraToggle meeting={meeting} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkCameraToggle meeting={meeting} size="md" variant="button" />;
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChat.mdx

@@ -0,0 +1,39 @@
+---
+pcx_content_type: reference
+title: RtkChat
+description: API reference for RtkChat component (React Native Library)
+---
+
+Full chat interface with message list, text input, image/file upload support, and pinned messages.
+
+## Properties
+
+| Property   | Type                           | Required | Default           | Description                      |
+| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- |
+| `meeting`  | `RealtimeKitClient`            | ✅       | -                 | The RealtimeKit meeting instance |
+| `config`   | `UIConfig`                     | ❌       | `defaultConfig`   | UI configuration object          |
+| `iconPack` | `IconPack`                     | ❌       | `defaultIconPack` | Custom icon pack                 |
+| `size`     | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌       | `'sm'`            | Size variant                     |
+| `t`        | `RtkI18n`                      | ❌       | -                 | i18n translation function        |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkChat } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkChat meeting={meeting} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkChat } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkChat meeting={meeting} size="md" config={customConfig} />;
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChatToggle.mdx

@@ -0,0 +1,40 @@
+---
+pcx_content_type: reference
+title: RtkChatToggle
+description: API reference for RtkChatToggle component (React Native Library)
+---
+
+Toggle button to open the chat sidebar panel. Hides if chat permissions are not available.
+
+## Properties
+
+| Property   | Type                           | Required | Default | Description                      |
+| ---------- | ------------------------------ | -------- | ------- | -------------------------------- |
+| `meeting`  | `RealtimeKitClient`            | ✅       | -       | The RealtimeKit meeting instance |
+| `size`     | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌       | -       | Icon size                        |
+| `states`   | `States`                       | ❌       | -       | UI state object                  |
+| `variant`  | `'button' \| 'horizontal'`     | ❌       | -       | Layout variant                   |
+| `iconPack` | `IconPack`                     | ❌       | -       | Custom icon pack                 |
+| `t`        | `RtkI18n`                      | ❌       | -       | i18n translation function        |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkChatToggle meeting={meeting} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkChatToggle meeting={meeting} size="md" variant="button" />;
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkClock.mdx

@@ -0,0 +1,37 @@
+---
+pcx_content_type: reference
+title: RtkClock
+description: API reference for RtkClock component (React Native Library)
+---
+
+Displays elapsed meeting time as a running clock (HH:MM:SS or MM:SS).
+
+## Properties
+
+| Property   | Type                | Required | Default           | Description                      |
+| ---------- | ------------------- | -------- | ----------------- | -------------------------------- |
+| `meeting`  | `RealtimeKitClient` | ✅       | -                 | The RealtimeKit meeting instance |
+| `iconPack` | `IconPack`          | ❌       | `defaultIconPack` | Custom icon pack                 |
+| `t`        | `RtkI18n`           | ❌       | -                 | i18n translation function        |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkClock } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkClock meeting={meeting} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkClock } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkClock meeting={meeting} iconPack={customIconPack} />;
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbar.mdx

@@ -0,0 +1,48 @@
+---
+pcx_content_type: reference
+title: RtkControlbar
+description: API reference for RtkControlbar component (React Native Library)
+---
+
+The main control bar container that renders meeting controls (mic, camera, leave, and more) using the declarative UI config system.
+
+## Properties
+
+| Property   | Type                           | Required | Default         | Description                      |
+| ---------- | ------------------------------ | -------- | --------------- | -------------------------------- |
+| `meeting`  | `RealtimeKitClient`            | ✅       | -               | The RealtimeKit meeting instance |
+| `config`   | `UIConfig`                     | ❌       | `defaultConfig` | UI configuration object          |
+| `size`     | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌       | `'sm'`          | Size variant                     |
+| `variant`  | `'boxed' \| 'solid'`           | ❌       | `'solid'`       | Visual style variant             |
+| `iconPack` | `IconPack`                     | ❌       | -               | Custom icon pack                 |
+| `states`   | `States`                       | ❌       | -               | UI state object                  |
+| `t`        | `RtkI18n`                      | ❌       | -               | i18n translation function        |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkControlbar meeting={meeting} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return (
+		<RtkControlbar
+			meeting={meeting}
+			variant="solid"
+			size="md"
+			config={customConfig}
+		/>
+	);
+}
+```

src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbarButton.mdx

@@ -0,0 +1,51 @@
+---
+pcx_content_type: reference
+title: RtkControlbarButton
+description: API reference for RtkControlbarButton component (React Native Library)
+---
+
+A reusable button for the control bar with icon, label, loading state, and warning indicator support.
+
+## Properties
+
+| Property      | Type                           | Required | Default           | Description                          |
+| ------------- | ------------------------------ | -------- | ----------------- | ------------------------------------ |
+| `label`       | `string`                       | ✅       | `' '`             | Button label text                    |
+| `icon`        | `string`                       | ✅       | -                 | SVG icon string                      |
+| `iconPack`    | `IconPack`                     | ❌       | `defaultIconPack` | Custom icon pack                     |
+| `isLoading`   | `boolean`                      | ❌       | `false`           | Show loading spinner instead of icon |
+| `disabled`    | `boolean`                      | ❌       | `false`           | Whether the button is disabled       |
+| `onClick`     | `() => void`                   | ❌       | -                 | Press handler callback               |
+| `showWarning` | `boolean`                      | ❌       | `false`           | Show warning indicator               |
+| `variant`     | `'button' \| 'horizontal'`     | ❌       | `'button'`        | Layout variant                       |
+| `size`        | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌       | `'sm'`            | Icon size                            |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return <RtkControlbarButton label="Mute" icon={muteIcon} />;
+}
+```
+
+### With Properties
+
+```tsx
+import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";
+
+function MyComponent() {
+	return (
+		<RtkControlbarButton
+			label="Mute"
+			icon={muteIcon}
+			variant="horizontal"
+			size="md"
+			onClick={() => console.log("pressed")}
+		/>
+	);
+}
+```