@ringg/react-native 0.0.1-alpha.10

package/lib/typescript/hooks/useRinggTheme.d.ts

@@ -0,0 +1,40 @@
+/**
+ * useRinggTheme — hook to access the resolved widget theme.
+ *
+ * Returns the fully resolved theme (all defaults filled in),
+ * plus utility functions for gradient-aware styling.
+ *
+ * Usage:
+ * ```tsx
+ * const { theme, getBackgroundStyle, getSolidColor } = useRinggTheme();
+ *
+ * <View style={{ backgroundColor: theme.backgroundColor }}>
+ *   <View style={getBackgroundStyle(theme.primaryColor)}>
+ *     <Text style={{ color: theme.primaryTextColor }}>Hello</Text>
+ *   </View>
+ * </View>
+ * ```
+ */
+import { type ResolvedWidgetTheme } from "@ringg/core";
+export interface UseRinggThemeReturn {
+    /** Fully resolved widget theme */
+    theme: ResolvedWidgetTheme;
+    /** Get a solid color from a potentially gradient color string */
+    getSolidColor: (color: string) => string;
+    /** Get the button border radius for the current theme */
+    buttonRadius: string;
+    /** Check if a color is light (for contrast decisions) */
+    isLight: (color: string) => boolean;
+    /** Get a contrasting text color (black or white) for a given background */
+    getContrastText: (bgColor: string) => string;
+    /**
+     * Get a RN-safe background style.
+     * Gradients are not natively supported in RN, so this returns
+     * the dominant solid color. For gradient support, use a LinearGradient component.
+     */
+    getBackgroundStyle: (color: string) => {
+        backgroundColor: string;
+    };
+}
+export declare function useRinggTheme(): UseRinggThemeReturn;
+//# sourceMappingURL=useRinggTheme.d.ts.map

package/lib/typescript/hooks/useRinggTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRinggTheme.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRinggTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAwE,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAI7H,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,KAAK,EAAE,mBAAmB,CAAC;IAE3B,iEAAiE;IACjE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEzC,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IAErB,yDAAyD;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAEpC,2EAA2E;IAC3E,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAE7C;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAE,eAAe,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE;AAED,wBAAgB,aAAa,IAAI,mBAAmB,CAgBnD"}

package/lib/typescript/hooks/useRinggTranscripts.d.ts

@@ -0,0 +1,30 @@
+/**
+ * useRinggTranscripts — headless hook for live audio transcription.
+ *
+ * During a voice call, the AI agent's speech and the user's speech
+ * are transcribed in real-time. This hook provides those transcripts
+ * as a sorted message list.
+ *
+ * Usage:
+ * ```tsx
+ * const { transcripts } = useRinggTranscripts();
+ *
+ * <FlatList
+ *   data={transcripts}
+ *   renderItem={({ item }) => (
+ *     <Text style={{ color: item.isSelf ? 'blue' : 'black' }}>
+ *       {item.name}: {item.message}
+ *     </Text>
+ *   )}
+ * />
+ * ```
+ */
+import type { ChatMessage } from "@ringg/core";
+export interface UseRinggTranscriptsReturn {
+    /** Live transcripts sorted chronologically */
+    transcripts: ChatMessage[];
+    /** Clear all transcripts (e.g., after call ends) */
+    clearTranscripts: () => void;
+}
+export declare function useRinggTranscripts(): UseRinggTranscriptsReturn;
+//# sourceMappingURL=useRinggTranscripts.d.ts.map

package/lib/typescript/hooks/useRinggTranscripts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRinggTranscripts.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRinggTranscripts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAyC,MAAM,aAAa,CAAC;AAItF,MAAM,WAAW,yBAAyB;IACxC,8CAA8C;IAC9C,WAAW,EAAE,WAAW,EAAE,CAAC;IAE3B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,mBAAmB,IAAI,yBAAyB,CAgD/D"}

package/lib/typescript/hooks/useRinggWidgetState.d.ts

@@ -0,0 +1,38 @@
+/**
+ * useRinggWidgetState — hook to observe the widget's open/close/feedback state.
+ *
+ * Subscribes to the WidgetStateController from @ringg/core and
+ * re-renders when the state changes.
+ *
+ * Usage:
+ * ```tsx
+ * const { isOpen, isShowingFeedback, toggle, open, close } = useRinggWidgetState();
+ *
+ * <TouchableOpacity onPress={toggle}>
+ *   <PhoneIcon />
+ * </TouchableOpacity>
+ *
+ * {isOpen && <WidgetPanel />}
+ * {isShowingFeedback && <FeedbackScreen />}
+ * ```
+ */
+export interface UseRinggWidgetStateReturn {
+    /** Whether the widget panel is currently visible */
+    isOpen: boolean;
+    /** Whether the feedback screen is showing */
+    isShowingFeedback: boolean;
+    /** Current call ID (null if not in a call) */
+    currentCallId: string | null;
+    /** Open the widget panel */
+    open: () => void;
+    /** Minimize (close) the widget panel */
+    minimize: () => void;
+    /** Close and reset (clears call ID, hides feedback) */
+    close: () => void;
+    /** Toggle the widget open/closed */
+    toggle: () => void;
+    /** Show the feedback screen */
+    showFeedback: () => void;
+}
+export declare function useRinggWidgetState(): UseRinggWidgetStateReturn;
+//# sourceMappingURL=useRinggWidgetState.d.ts.map

package/lib/typescript/hooks/useRinggWidgetState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRinggWidgetState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRinggWidgetState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAQH,MAAM,WAAW,yBAAyB;IACxC,oDAAoD;IACpD,MAAM,EAAE,OAAO,CAAC;IAEhB,6CAA6C;IAC7C,iBAAiB,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,wCAAwC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,uDAAuD;IACvD,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,oCAAoC;IACpC,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB,+BAA+B;IAC/B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,IAAI,yBAAyB,CA4B/D"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @ringg/react-native
+ *
+ * Ringg AI widget for React Native apps.
+ *
+ * Provides two consumption modes:
+ *
+ * 1. DROP-IN WIDGET — pre-built UI with FAB trigger + chat panel:
+ *    ```tsx
+ *    import { RinggWidget } from "@ringg/react-native";
+ *    <RinggWidget config={{ agentId: "...", xApiKey: "...", variables: {} }} />
+ *    ```
+ *
+ * 2. HEADLESS HOOKS — build your own UI:
+ *    ```tsx
+ *    import { RinggProvider, useRinggCall, useRinggChat } from "@ringg/react-native";
+ *
+ *    <RinggProvider config={{ agentId: "...", xApiKey: "...", variables: {} }}>
+ *      <YourCustomUI />
+ *    </RinggProvider>
+ *    ```
+ */
+export { RinggWidget } from "./components/RinggWidget";
+export type { RinggWidgetProps } from "./components/RinggWidget";
+export { RinggProvider, useRinggContext } from "./context";
+export type { RinggProviderProps, RinggContextValue } from "./context";
+export { useRinggCall, useRinggChat, useRinggTranscripts, useRinggComponents, useRinggWidgetState, useRinggFeedback, useRinggTheme } from "./hooks";
+export type { UseRinggCallReturn, UseRinggChatReturn, UseRinggTranscriptsReturn, UseRinggComponentsReturn, UseRinggWidgetStateReturn, UseRinggFeedbackReturn, UseRinggThemeReturn } from "./hooks";
+export { LiveKitRNAdapter } from "./adapters";
+export type { RinggWidgetConfig, MediaType, WidgetTheme, ResolvedWidgetTheme, ComponentTheme, ChatMessage, CalendarSlot, CalendarBookingPayload, FormPayload, ButtonsPayload, ConfirmationPayload, InteractiveFlowPayload, SimpleComponentPayload, ComponentPayload, ComponentActionResponse, SlashCommand, DiseaseOption, WidgetEventName, WidgetEventMap, ConnectionState, } from "@ringg/core";
+export { DEFAULT_CONFIG, DEFAULT_WIDGET_THEME, WIDGET_PRESET_THEMES, mergeWidgetTheme, getButtonRadius, colorToSolid, isGradient, formatTimestamp, groupSlotsByDate, formatSlotTime, formatSlotDate, isAgentIdentity, filterSlashCommands, } from "@ringg/core";
+export { MessageBubble } from "./components/ui/MessageBubble";
+export { WidgetHeader } from "./components/ui/WidgetHeader";
+export { ActionButton } from "./components/ui/ActionButton";
+export { CallControls } from "./components/ui/CallControls";
+export { FeedbackScreen } from "./components/ui/FeedbackScreen";
+export { TabSelector } from "./components/ui/TabSelector";
+export { InteractiveFlow } from "./components/steps/InteractiveFlow";
+export { CalendarStep } from "./components/steps/CalendarStep";
+export { FormStep } from "./components/steps/FormStep";
+export { ButtonsStep } from "./components/steps/ButtonsStep";
+export { ConfirmationStep } from "./components/steps/ConfirmationStep";
+export { PhoneCallRingIcon, PhoneCallIcon, PhoneEndCallIcon, MicrophoneIcon, MicOffIcon, ChatIcon, SendIcon, StarIcon, CloseIcon, MinusIcon, WidgetPhoneIcon } from "./components/ui/Icons";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpJ,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnM,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9C,YAAY,EACV,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,sBAAsB,EACtB,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,sBAAsB,EACtB,gBAAgB,EAChB,uBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,cAAc,EACd,eAAe,GAChB,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@ringg/react-native",
+  "version": "0.0.1-alpha.10",
+  "private": false,
+  "license": "MIT",
+  "description": "Ringg AI widget for React Native — drop-in component and headless hooks for voice/text AI agents",
+  "author": "Ringg AI <dev@ringg.ai>",
+  "homepage": "https://ringg.ai",
+  "keywords": [
+    "ringg",
+    "react-native",
+    "ai-agent",
+    "voice-agent",
+    "widget",
+    "conversational-ai",
+    "headless",
+    "expo"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "react-native": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./app.plugin.js": "./app.plugin.js",
+    "./app.plugin": "./app.plugin.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "app.plugin.js",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.70.0"
+  },
+  "dependencies": {
+    "@livekit/react-native": ">=2.0.0",
+    "@livekit/react-native-expo-plugin": ">=1.0.0",
+    "@config-plugins/react-native-webrtc": ">=9.0.0",
+    "livekit-client": ">=2.0.0",
+    "@ringg/core": "0.0.1-alpha.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.10",
+    "react": "^18.3.1",
+    "react-native": "^0.76.0",
+    "@livekit/react-native": "^2.4.0",
+    "livekit-client": "^2.17.2",
+    "react-native-builder-bob": "^0.40.0",
+    "typescript": "^5"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "bob build",
+    "lint": "eslint src/",
+    "release": "pnpm build && pnpm publish --access public --no-git-checks --tag alpha"
+  }
+}