@qafka/react-native 2.0.0

package/dist/cards/types.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Card schema types — these match the card definitions you author in your
+ * Qafka project configuration.
+ */
+export type CardPrimitiveName = "QView" | "QText" | "QImage" | "QIcon" | "QDivider" | "QButton";
+export type CardStyle = Record<string, string | number | undefined>;
+export type FieldName = string;
+export type CardActionType = "external_navigation" | "deep_link" | "suggest_message" | "copy" | "dismiss" | "share" | "tool_trigger";
+export interface ExternalNavigationAction {
+    type: "external_navigation";
+    channel: string;
+    payload?: Record<string, unknown>;
+}
+export interface DeepLinkAction {
+    type: "deep_link";
+    path: string;
+}
+export interface SuggestMessageAction {
+    type: "suggest_message";
+    text: string;
+}
+export interface CopyAction {
+    type: "copy";
+    value: string;
+    toastMessage?: string;
+}
+export interface DismissAction {
+    type: "dismiss";
+}
+export interface ShareAction {
+    type: "share";
+    text?: string;
+    url?: string;
+}
+export interface ToolTriggerAction {
+    type: "tool_trigger";
+    toolName: string;
+    params?: Record<string, unknown>;
+    ctaDisplayMode?: "user_message" | "silent";
+}
+export type CardAction = ExternalNavigationAction | DeepLinkAction | SuggestMessageAction | CopyAction | DismissAction | ShareAction | ToolTriggerAction;
+export interface ActionConfig {
+    action: CardAction;
+    requiresConfirmation?: boolean;
+    confirmationTitle?: string;
+    confirmationMessage?: string;
+}
+export interface CardNodeBase {
+    component: CardPrimitiveName;
+    fieldName?: FieldName;
+    showIf?: FieldName;
+    style?: CardStyle;
+    children?: CardNode[];
+}
+export interface QViewNode extends CardNodeBase {
+    component: "QView";
+    direction?: "row" | "column";
+    gap?: number;
+    padding?: number;
+    background?: string;
+    borderRadius?: number;
+}
+export interface QTextNode extends CardNodeBase {
+    component: "QText";
+    variant?: "title" | "body" | "caption";
+    align?: "left" | "center" | "right";
+    color?: string;
+    text?: string;
+    /** Cap text to N lines; overflow truncates per `ellipsizeMode`. */
+    numberOfLines?: number;
+    /** Where to place the ellipsis when truncated. RN default is "tail". */
+    ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+}
+export interface QImageNode extends CardNodeBase {
+    component: "QImage";
+    src?: string;
+    srcFieldName?: FieldName;
+    aspectRatio?: number;
+    fit?: "cover" | "contain" | "stretch";
+}
+export interface QIconNode extends CardNodeBase {
+    component: "QIcon";
+    name?: string;
+    nameFieldName?: FieldName;
+    size?: number;
+    color?: string;
+}
+export interface QDividerNode extends CardNodeBase {
+    component: "QDivider";
+    thickness?: number;
+    color?: string;
+}
+export interface QButtonNode extends CardNodeBase {
+    component: "QButton";
+    label?: string;
+    labelFieldName?: FieldName;
+    variant?: "primary" | "secondary" | "ghost" | "destructive";
+    action?: ActionConfig;
+}
+export type CardNode = QViewNode | QTextNode | QImageNode | QIconNode | QDividerNode | QButtonNode;
+export interface CardDefinition {
+    schemaVersion: 1;
+    root: CardNode;
+}
+export interface CardEnvelope {
+    templateId: string;
+    templateSlug: string;
+    data: Record<string, unknown>;
+}
+export type UITemplateType = "simple" | "card" | null;

package/dist/cards/types.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Card schema types — these match the card definitions you author in your
+ * Qafka project configuration.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ActionResultBadge.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Theme } from '../themes/types';
+interface ActionResultBadgeProps {
+    results: Array<{
+        actionType: string;
+        success: boolean;
+        message: string;
+    }>;
+    theme: Theme;
+}
+export declare function ActionResultBadge({ results, theme }: ActionResultBadgeProps): React.JSX.Element | null;
+export {};

package/dist/components/ActionResultBadge.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionResultBadge = ActionResultBadge;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function ActionResultBadge({ results, theme }) {
+    if (!results || results.length === 0)
+        return null;
+    return (<react_native_1.View style={styles.container}>
+ {results.map((result, index) => (<react_native_1.View key={index} style={[
+                styles.badge,
+                {
+                    backgroundColor: result.success
+                        ? theme.colors.success || '#22c55e'
+                        : theme.colors.error || '#ef4444',
+                    borderRadius: theme.borderRadius.sm,
+                },
+            ]}>
+ <react_native_1.Text style={styles.icon}>
+ {result.success ? '\u2713' : '\u2717'}
+ </react_native_1.Text>
+ <react_native_1.Text style={[
+                styles.text,
+                {
+                    color: '#ffffff',
+                    fontSize: theme.typography.fontSize.xs,
+                },
+            ]} numberOfLines={1}>
+ {result.message}
+ </react_native_1.Text>
+ </react_native_1.View>))}
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 4,
+    },
+    badge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        gap: 4,
+    },
+    icon: {
+        color: '#ffffff',
+        fontSize: 10,
+    },
+    text: {
+        fontWeight: '500',
+    },
+});

package/dist/components/ChatPage.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { Theme } from '../themes';
+import { ChatMessage } from '../types/chat';
+import { ComponentRegistry } from '../types/components';
+import { NavigationButtonProps } from './Qafka.types';
+import { ExternalSuggestion } from '../types/external-navigation';
+export interface ChatPageProps {
+    messages: ChatMessage[];
+    displayMessages: ChatMessage[];
+    isTyping: boolean;
+    isSending: boolean;
+    streamingMessage: string;
+    /** active tool status pill for server-managed tool modes */
+    toolStatus?: {
+        toolKey: string;
+        message: string;
+        stage: string;
+    } | null;
+    sdkReady: boolean;
+    sdkError: string | null;
+    theme: Theme;
+    handleSend: (text: string) => void;
+    handleActionClick: (action: any) => void;
+    handleExternalSuggestionPress: (suggestion: ExternalSuggestion) => void;
+    flatListRef: React.RefObject<FlatList<any> | null>;
+    placeholder: string;
+    maxMessageLength: number;
+    showTimestamps: boolean;
+    greetingMessage?: string;
+    apiGreeting?: string | null;
+    isInitialMessageEnabled?: boolean;
+    initialMessageText?: string | null;
+    componentRegistry: ComponentRegistry;
+    onBack?: () => void;
+    onClose?: () => void;
+    BackComponent?: React.ComponentType<any>;
+    CloseComponent?: React.ComponentType<any>;
+    NavigationButtonComponent?: React.ComponentType<NavigationButtonProps>;
+    /** Card Template host callbacks forwarded to MessageBubble. */
+    cardHostCallbacks?: import('../cards/cta/types').CardCTAHostCallbacks;
+    cardLifecycle?: import('../cards/cta/types').CardCTALifecycle;
+}
+export declare function ChatPage({ displayMessages, isTyping, isSending, streamingMessage, toolStatus, sdkReady, sdkError, theme, handleSend, handleActionClick, handleExternalSuggestionPress, flatListRef, placeholder, maxMessageLength, showTimestamps, greetingMessage, apiGreeting, isInitialMessageEnabled, initialMessageText, componentRegistry, onBack, onClose, BackComponent, CloseComponent, NavigationButtonComponent, cardHostCallbacks, cardLifecycle, }: ChatPageProps): React.JSX.Element;

package/dist/components/ChatPage.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPage = ChatPage;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const MessageBubble_1 = require("./MessageBubble");
+const InputArea_1 = require("./InputArea");
+const TypingIndicator_1 = require("./TypingIndicator");
+const ToolStatusPill_1 = require("./ToolStatusPill");
+const Qafka_styles_1 = require("./Qafka.styles");
+function ChatPage({ displayMessages, isTyping, isSending, streamingMessage, toolStatus, sdkReady, sdkError, theme, handleSend, handleActionClick, handleExternalSuggestionPress, flatListRef, placeholder, maxMessageLength, showTimestamps, greetingMessage, apiGreeting, isInitialMessageEnabled, initialMessageText, componentRegistry, onBack, onClose, BackComponent, CloseComponent, NavigationButtonComponent, cardHostCallbacks, cardLifecycle, }) {
+    const styles = (0, Qafka_styles_1.getWidgetStyles)(theme);
+    const renderMessage = ({ item }) => (<MessageBubble_1.MessageBubble message={item.text || item.content} role={item.role === 'system' ? 'assistant' : item.role} timestamp={new Date(item.timestamp)} theme={theme} showTimestamp={showTimestamps} actions={item.actions} onActionPress={handleActionClick} componentRegistry={componentRegistry} toolDefinition={item.toolResponse?.tool} toolResultData={item.toolResponse?.data} NavigationButtonComponent={NavigationButtonComponent} actionResults={item.actionResults} completedSteps={item.completedSteps} externalSuggestions={item.externalSuggestions} onExternalPress={handleExternalSuggestionPress} card={item.card} cardHostCallbacks={cardHostCallbacks} cardLifecycle={cardLifecycle}/>);
+    const renderEmpty = () => {
+        if (isInitialMessageEnabled && initialMessageText) {
+            return null;
+        }
+        // Greeting is only shown when we actually have one (consumer prop or
+        // project-config response). The English fallback was removed because it
+        // flashed the wrong brand/language during cold-start; the TypingIndicator
+        // below carries the "loading" signal instead.
+        const finalGreeting = greetingMessage || apiGreeting;
+        return (<react_native_1.View style={[styles.emptyStateStyle, { flex: 1 }]}>
+ {finalGreeting && (<react_native_1.Text style={styles.emptyStateTextStyle}>{finalGreeting}</react_native_1.Text>)}
+ {!sdkReady && (<react_native_1.View style={{ marginTop: 16 }}>
+ <TypingIndicator_1.TypingIndicator theme={theme}/>
+ </react_native_1.View>)}
+ </react_native_1.View>);
+    };
+    return (<>
+ {/* Navigation Buttons */}
+ {(onBack || BackComponent || onClose || CloseComponent) && (<react_native_1.View style={[
+                {
+                    paddingHorizontal: 20,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                },
+            ]}>
+ {/* Back Button */}
+ <react_native_1.View>
+ {BackComponent ? (<BackComponent />) : onBack ? (<react_native_1.TouchableOpacity onPress={onBack} style={styles.navButton}>
+ <react_native_1.Text style={styles.navButtonText}>{'<'}</react_native_1.Text>
+ </react_native_1.TouchableOpacity>) : null}
+ </react_native_1.View>
+
+ {/* Close Button */}
+ <react_native_1.View>
+ {CloseComponent ? (<CloseComponent />) : onClose ? (<react_native_1.TouchableOpacity onPress={onClose} style={styles.navButton}>
+ <react_native_1.Text style={styles.navButtonText}>{'×'}</react_native_1.Text>
+ </react_native_1.TouchableOpacity>) : null}
+ </react_native_1.View>
+ </react_native_1.View>)}
+
+ {/* Error banner */}
+ {sdkError && (<react_native_1.View style={styles.errorStyle}>
+ <react_native_1.Text style={styles.errorTextStyle}>{sdkError}</react_native_1.Text>
+ </react_native_1.View>)}
+
+ {/* Message List */}
+ <react_native_1.FlatList ref={flatListRef} data={displayMessages} renderItem={renderMessage} keyExtractor={(item) => item.id} style={{ flex: 1, flexGrow: 1, flexShrink: 1 }} contentContainerStyle={styles.messageListStyle} ListEmptyComponent={renderEmpty} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled" onContentSizeChange={() => {
+            if (displayMessages.length > 0) {
+                flatListRef.current?.scrollToEnd({ animated: true });
+            }
+        }}/>
+
+ {/* Typing Indicator */}
+ {isTyping && !streamingMessage && (<react_native_1.View style={styles.typingIndicatorContainer}>
+ <TypingIndicator_1.TypingIndicator theme={theme}/>
+ </react_native_1.View>)}
+
+ {/* Tool Status Pill (server-managed modes) */}
+ {toolStatus && (<react_native_1.View style={{ paddingHorizontal: 8, alignItems: 'flex-start' }}>
+ <ToolStatusPill_1.ToolStatusPill message={toolStatus.message} theme={theme}/>
+ </react_native_1.View>)}
+
+ {/* Input Area — hidden until SDK is ready so users can't type a message
+        that would be rejected by an un-attested send. TypingIndicator in the
+        empty state carries the "still preparing" signal. */}
+ {sdkReady && (<InputArea_1.InputArea theme={theme} placeholder={placeholder} onSend={handleSend} isSending={isSending} maxLength={maxMessageLength}/>)}
+ </>);
+}

package/dist/components/DataChip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface DataChipProps {
+    label: string;
+    value: string;
+    copyable?: boolean;
+    theme?: any;
+}
+export declare function DataChip({ label, value, copyable, theme }: DataChipProps): React.JSX.Element;

package/dist/components/DataChip.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataChip = DataChip;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const QafkaClipboard_1 = require("../native/QafkaClipboard");
+function DataChip({ label, value, copyable = true, theme }) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const onCopy = (0, react_1.useCallback)(async () => {
+        try {
+            await (0, QafkaClipboard_1.setString)(value);
+        }
+        catch {
+            // Clipboard write can fail on locked devices or sandboxed contexts —
+            // swallow silently; the visual state below still reflects the attempt.
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    }, [value]);
+    return (<react_native_1.View style={[styles.row, { backgroundColor: theme?.surface ?? '#f5f5f7' }]}>
+      <react_native_1.View style={styles.textCol}>
+        <react_native_1.Text style={[styles.label, { color: theme?.muted ?? '#6b7280' }]}>{label}</react_native_1.Text>
+        <react_native_1.Text style={[styles.value, { color: theme?.text ?? '#111827' }]} numberOfLines={2}>
+          {value}
+        </react_native_1.Text>
+      </react_native_1.View>
+      {copyable ? (<react_native_1.Pressable onPress={onCopy} accessibilityRole="button" accessibilityLabel={`Copy ${label}`} style={({ pressed }) => [styles.copyBtn, pressed && { opacity: 0.6 }]}>
+          <react_native_1.Text style={[styles.copyText, { color: theme?.accent ?? '#2563eb' }]}>
+            {copied ? '✓' : 'Copy'}
+          </react_native_1.Text>
+        </react_native_1.Pressable>) : null}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        gap: 12,
+    },
+    textCol: { flex: 1 },
+    label: { fontSize: 12, marginBottom: 2 },
+    value: { fontSize: 16, fontWeight: '500' },
+    copyBtn: { paddingVertical: 6, paddingHorizontal: 10 },
+    copyText: { fontSize: 14, fontWeight: '600' },
+});

package/dist/components/DataChipList.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DataChipProps } from './DataChip';
+export interface DataChipItem {
+    label: string;
+    value: string;
+    copyable?: boolean;
+}
+export interface DataChipListProps {
+    items: DataChipItem[];
+    theme?: any;
+    ChipComponent?: React.ComponentType<DataChipProps>;
+}
+export declare function DataChipList({ items, theme, ChipComponent }: DataChipListProps): React.JSX.Element | null;

package/dist/components/DataChipList.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataChipList = DataChipList;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const DataChip_1 = require("./DataChip");
+const MAX_CHIPS = 5;
+function DataChipList({ items, theme, ChipComponent = DataChip_1.DataChip }) {
+    const visible = items.slice(0, MAX_CHIPS);
+    if (visible.length === 0)
+        return null;
+    return (<react_native_1.View style={styles.col}>
+      {visible.map((it, i) => (<ChipComponent key={`${it.label}_${i}`} label={it.label} value={it.value} copyable={it.copyable !== false} theme={theme}/>))}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    col: { gap: 8 },
+});

package/dist/components/FloatingButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Theme } from '../themes';
+interface FloatingButtonProps {
+    isOpen: boolean;
+    onPress: () => void;
+    unreadCount?: number;
+    theme: Theme;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+export declare function FloatingButton({ isOpen, onPress, unreadCount, theme, position, }: FloatingButtonProps): React.JSX.Element;
+export {};

package/dist/components/FloatingButton.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingButton = FloatingButton;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+function FloatingButton({ isOpen, onPress, unreadCount = 0, theme, position = 'bottom-right', }) {
+    const rotateAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        // Rotate animation when opening/closing
+        react_native_1.Animated.timing(rotateAnim, {
+            toValue: isOpen ? 1 : 0,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+    }, [isOpen, rotateAnim]);
+    const handlePress = () => {
+        // Scale animation on press
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(scaleAnim, {
+                toValue: 0.9,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        onPress();
+    };
+    const rotation = rotateAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '45deg'],
+    });
+    const positionStyle = getPositionStyle(position, theme);
+    return (<react_native_1.Animated.View style={[
+            styles.container,
+            positionStyle,
+            {
+                transform: [{ scale: scaleAnim }],
+            },
+        ]}>
+ <react_native_1.TouchableOpacity style={[
+            styles.button,
+            {
+                backgroundColor: theme.colors.primary,
+                ...react_native_1.Platform.select({
+                    ios: {
+                        shadowColor: '#000',
+                        shadowOffset: { width: 0, height: 4 },
+                        shadowOpacity: 0.3,
+                        shadowRadius: 8,
+                    },
+                    android: {
+                        elevation: 8,
+                    },
+                }),
+            },
+        ]} onPress={handlePress} activeOpacity={0.8}>
+ <react_native_1.Animated.View style={{ transform: [{ rotate: rotation }] }}>
+ {isOpen ? (<react_native_1.Text style={styles.closeIcon}>✕</react_native_1.Text>) : (<react_native_1.Text style={styles.chatIcon}>💬</react_native_1.Text>)}
+ </react_native_1.Animated.View>
+
+ {/* Unread badge */}
+ {!isOpen && unreadCount > 0 && (<react_native_1.View style={[
+                styles.badge,
+                { backgroundColor: theme.colors.error || '#FF3B30' },
+            ]}>
+ <react_native_1.Text style={styles.badgeText}>
+ {unreadCount > 99 ? '99+' : unreadCount}
+ </react_native_1.Text>
+ </react_native_1.View>)}
+ </react_native_1.TouchableOpacity>
+ </react_native_1.Animated.View>);
+}
+function getPositionStyle(position, theme) {
+    const spacing = theme.spacing.lg;
+    switch (position) {
+        case 'bottom-right':
+            return { bottom: spacing, right: spacing };
+        case 'bottom-left':
+            return { bottom: spacing, left: spacing };
+        case 'top-right':
+            return { top: spacing, right: spacing };
+        case 'top-left':
+            return { top: spacing, left: spacing };
+        default:
+            return { bottom: spacing, right: spacing };
+    }
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        zIndex: 9999,
+    },
+    button: {
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    chatIcon: {
+        fontSize: 28,
+    },
+    closeIcon: {
+        fontSize: 28,
+        color: '#FFFFFF',
+        fontWeight: '300',
+    },
+    badge: {
+        position: 'absolute',
+        top: -4,
+        right: -4,
+        minWidth: 20,
+        height: 20,
+        borderRadius: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 6,
+    },
+    badgeText: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+});

package/dist/components/InputArea.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Theme } from '../themes/types';
+export interface InputAreaProps {
+    /**
+    * Theme configuration
+    */
+    theme: Theme;
+    /**
+    * Placeholder text
+    */
+    placeholder?: string;
+    /**
+    * Callback when send button is pressed
+    */
+    onSend: (message: string) => void;
+    /**
+    * Whether sending is in progress
+    */
+    isSending?: boolean;
+    /**
+    * Maximum character limit
+    */
+    maxLength?: number;
+    /**
+    * Disable input
+    */
+    disabled?: boolean;
+    /**
+    * Show character count
+    */
+    showCharacterCount?: boolean;
+}
+/**
+ * InputArea Component
+ *
+ * Text input area with send button for chat messages.
+ *
+ * Features:
+ * - Multi-line text input
+ * - Character limit with counter
+ * - Send button with loading state
+ * - Auto-disable when empty or sending
+ * - Theme support
+ *
+ * @example
+ * ```tsx
+ * <InputArea
+ * theme={lightTheme}
+ * placeholder="Type a message..."
+ * onSend={(msg) => handleSend(msg)}
+ * isSending={loading}
+ * maxLength={500}
+ * showCharacterCount
+ * />
+ * ```
+ */
+export declare function InputArea({ theme, placeholder, onSend, isSending, maxLength, disabled, showCharacterCount, }: InputAreaProps): React.JSX.Element;