@experiaapp/webchat-react-native 2.0.1

package/lib/state/useWebchat.d.ts

@@ -0,0 +1 @@
+export declare function useWebchat(): import("./WebchatProvider").Ctx;

package/lib/state/useWebchat.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebchat = useWebchat;
+// src/state/useWebchat.ts
+const react_1 = require("react");
+const WebchatProvider_1 = require("./WebchatProvider");
+function useWebchat() {
+    const ctx = (0, react_1.useContext)(WebchatProvider_1.WebchatContext);
+    if (!ctx)
+        throw new Error("useWebchat must be used inside <WebChat>");
+    return ctx;
+}

package/lib/theme/dir.d.ts

@@ -0,0 +1,14 @@
+export type Dir = "ltr" | "rtl";
+export declare function dirStyles(dir: Dir): {
+    isRtl: boolean;
+    rowDirection: "row" | "row-reverse";
+    textAlign: "left" | "right";
+    start: string;
+    end: string;
+    mirror: {
+        transform: {
+            scaleX: number;
+        }[];
+    };
+    bubbleTail(sender: "user" | "response"): "bottomRight" | "bottomLeft";
+};

package/lib/theme/dir.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dirStyles = dirStyles;
+function dirStyles(dir) {
+    const isRtl = dir === "rtl";
+    return {
+        isRtl,
+        rowDirection: (isRtl ? "row-reverse" : "row"),
+        textAlign: (isRtl ? "right" : "left"),
+        start: isRtl ? "right" : "left",
+        end: isRtl ? "left" : "right",
+        mirror: { transform: [{ scaleX: isRtl ? -1 : 1 }] },
+        bubbleTail(sender) {
+            const onStart = sender === "response";
+            const startCorner = isRtl ? "bottomRight" : "bottomLeft";
+            const endCorner = isRtl ? "bottomLeft" : "bottomRight";
+            return onStart ? startCorner : endCorner;
+        },
+    };
+}

package/lib/theme/themeFactory.d.ts

@@ -0,0 +1,219 @@
+export type Variant = "experia" | "digitalGovernment";
+export declare function resolveVariant(interfaceTheme?: string): Variant;
+export interface PublicStyle {
+    themeColor?: string;
+    defaultFontColor?: string;
+    defaultFontSize?: number;
+    defaultFontWeight?: string;
+    /**
+     * Tenant custom font (web `publicStyle.defaultFontFamily`). Kept structurally
+     * identical to core `PublicStyle.defaultFontFamily` so `buildTheme` consumes it
+     * without a cross-import. `fonts` is one remote TTF per weight (ExtraLight..Black).
+     */
+    defaultFontFamily?: {
+        name?: string;
+        fonts?: Array<{
+            url: string;
+            fontWeight?: string;
+            fontName?: string;
+        }>;
+    };
+}
+/**
+ * Weight -> RN-registered family-name map produced by the apply phase after
+ * `createExpoFontLoader().loadBrandFonts(...)` resolves. Keys are the font
+ * `fontWeight` strings ("200", "400", "700", …) carried on each font entry; the
+ * `name` key (when present) maps the family-level name. An empty/undefined map
+ * means no custom font loaded — `resolveFontFamily` then returns `undefined`
+ * (system font), preserving today's look.
+ */
+export type LoadedFontMap = Record<string, string> | undefined;
+/**
+ * Resolve the RN font family for a given weight from a loaded weight->family map.
+ * Returns `undefined` (caller falls back to the system font) when no map exists,
+ * the weight is absent, or the map has no entry for it. Pure — the apply phase
+ * passes the map produced by the loader plus the weight it wants to render.
+ */
+export declare function resolveFontFamily(map: LoadedFontMap, weight?: string | number): string | undefined;
+/** Server-driven chat-bubble overrides (web `chatSectionStyle`). All optional. */
+export interface ChatSectionStyle {
+    sentMsgBg?: string;
+    sentMsgFontColor?: string;
+    receivedMsgBg?: string;
+    receivedMsgFontColor?: string;
+    receivedMsgCornerRadius?: number;
+    sendMsgCornerRadius?: number;
+    msgPadding?: number;
+    msgFontSize?: number | string;
+    msgFontWeight?: string | number;
+    dateFontSize?: number | string;
+    dateFontWeight?: string | number;
+    quickReplyFontSize?: number | string;
+    quickReplyFontWeight?: string | number;
+    sentDateFontColor?: string;
+    receivedDateFontColor?: string;
+    quickReplyBg?: string;
+    quickReplyBorderWidth?: number;
+    quickReplyBorderRadius?: number;
+    quickReplyColor?: string;
+    quickReplyBorderColor?: string;
+    bgChatColor?: string;
+    sessionDateColor?: string;
+    avatarMsgWidth?: number | string;
+    avatarMsgHeight?: number | string;
+    [k: string]: any;
+}
+/** Server-driven header overrides (web `headerSectionStyle`). All optional. */
+export interface HeaderSectionStyle {
+    bgColor?: string;
+    titleColor?: string;
+    subTitleColor?: string;
+    fontWeightTitle?: string | number;
+    fontWeightSubTitle?: string | number;
+    fontSizeTitle?: number | string;
+    fontSizeSubTitle?: number | string;
+    closeBtnColor?: string;
+    videoCallBtnColor?: string;
+    avatarWidth?: number | string;
+    avatarHeight?: number | string;
+    avatarBorderRadius?: number | string;
+    avatarObjectFit?: string;
+    onlineStatusColor?: string;
+    offlineStatusColor?: string;
+    statusIndicatorPosition?: string;
+    connectingTextColor?: string;
+    connectingTextBgcolor?: string;
+    alignConnectingText?: string;
+    fontSizeConnectText?: number | string;
+    fontWeightConnectText?: string | number;
+    [k: string]: any;
+}
+/** Server-driven composer/send overrides (web `sendSectionStyle`). All optional. */
+export interface SendSectionStyle {
+    textFieldBg?: string;
+    textFeildColor?: string;
+    textFieldCornerRadius?: number;
+    hintFontColor?: string;
+    hintFontSize?: number | string;
+    hintFontWeight?: string | number;
+    sendBtnBg?: string;
+    sendBtnColor?: string;
+    sendBtnCornerRadius?: number;
+    uploadFileBtnColor?: string;
+    audioBtnColor?: string;
+    emojiBtnColor?: string;
+    uploadFileBtnBg?: string;
+    uploadFileBtnCornerRadius?: number;
+    [k: string]: any;
+}
+/** Server-driven launcher (FAB) overrides (web `wedgitSectionStyle`). All optional. */
+export interface WedgitSectionStyle {
+    buttonColor?: string;
+    buttonBg?: string;
+    buttonWidth?: number | string;
+    buttonHeight?: number | string;
+    buttonBorderRadius?: number | string;
+    [k: string]: any;
+}
+export declare function buildTheme(variant: Variant, ps?: PublicStyle, cs?: ChatSectionStyle, hs?: HeaderSectionStyle, ss?: SendSectionStyle, ws?: WedgitSectionStyle, fontMap?: LoadedFontMap): {
+    variant: Variant;
+    colors: {
+        primary: string;
+        surface: string;
+        text: string;
+    };
+    font: {
+        size: number;
+        weight: string;
+        family: string | undefined;
+        familyMap: LoadedFontMap;
+    };
+    bubble: {
+        sentBg: string;
+        sentText: string;
+        receivedBg: string;
+        receivedText: string;
+        radius: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        elevation: number;
+        marginX: number;
+        padding: number;
+        sentRadius: number;
+        receivedRadius: number;
+    };
+    header: {
+        bg: string;
+        titleColor: string;
+        subTitleColor: string;
+        titleWeight: string | number;
+        subTitleWeight: string | number;
+        titleSize: string | number | undefined;
+        subTitleSize: string | number | undefined;
+        closeColor: string;
+        videoColor: string;
+        avatarWidth: number;
+        avatarHeight: number;
+        avatarBorderRadius: number;
+        avatarObjectFit: string;
+        onlineStatus: string;
+        offlineStatus: string;
+        statusIndicatorPosition: string;
+        connectingColor: string;
+        connectingBg: string;
+        connectingAlign: string;
+        connectingFontSize: string | number | undefined;
+        connectingFontWeight: string | number | undefined;
+    };
+    chat: {
+        bg: string;
+        dateColor: string;
+        msgFontSize: string | number | undefined;
+        msgFontWeight: string | number | undefined;
+        dateFontSize: string | number | undefined;
+        dateFontWeight: string | number | undefined;
+        quickReplyFontSize: string | number | undefined;
+        quickReplyFontWeight: string | number | undefined;
+        sentDateColor: string;
+        receivedDateColor: string;
+        avatarMsgWidth: number;
+        avatarMsgHeight: number;
+    };
+    send: {
+        fieldBg: string;
+        fieldColor: string;
+        fieldRadius: number;
+        hintColor: string;
+        hintFontSize: string | number | undefined;
+        hintFontWeight: string | number | undefined;
+        sendBtnBg: string;
+        sendBtnColor: string;
+        sendBtnRadius: number;
+        iconColor: string;
+        uploadIconColor: string;
+        emojiIconColor: string;
+        audioIconColor: string;
+        uploadBtnBg: string | undefined;
+        uploadBtnRadius: number | undefined;
+    };
+    quickReply: {
+        bg: string;
+        borderColor: string;
+        color: string;
+        borderWidth: number;
+        borderRadius: number;
+    };
+    launcher: {
+        buttonColor: string;
+        buttonBg: string;
+        buttonWidth: string | number;
+        buttonHeight: string | number;
+        buttonBorderRadius: string | number;
+    };
+};
+export type WebChatTheme = ReturnType<typeof buildTheme>;

package/lib/theme/themeFactory.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveVariant = resolveVariant;
+exports.resolveFontFamily = resolveFontFamily;
+exports.buildTheme = buildTheme;
+function resolveVariant(interfaceTheme) {
+    return interfaceTheme === "digitalGovernment" ? "digitalGovernment" : "experia";
+}
+const BASE = {
+    experia: { primary: "#6C5CE7", surface: "#FFFFFF" },
+    digitalGovernment: { primary: "#0B7A4B", surface: "#FCFCFD" },
+};
+/**
+ * Resolve the RN font family for a given weight from a loaded weight->family map.
+ * Returns `undefined` (caller falls back to the system font) when no map exists,
+ * the weight is absent, or the map has no entry for it. Pure — the apply phase
+ * passes the map produced by the loader plus the weight it wants to render.
+ */
+function resolveFontFamily(map, weight) {
+    if (!map)
+        return undefined;
+    if (weight != null) {
+        const hit = map[String(weight)];
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+/**
+ * Coerce a web style dimension to an RN numeric dimension. Web sends sizes as
+ * strings (e.g. `"40"`, `"50"`) or numbers; RN style width/height/borderRadius
+ * want a number. A non-numeric value falls back to `fallback`.
+ */
+function dim(v, fallback) {
+    if (typeof v === "number" && Number.isFinite(v))
+        return v;
+    if (typeof v === "string") {
+        const n = parseFloat(v);
+        if (Number.isFinite(n))
+            return n;
+    }
+    return fallback;
+}
+function buildTheme(variant, ps = {}, cs = {}, hs = {}, ss = {}, ws = {}, 
+// Loaded weight->family map produced by the apply phase once the brand fonts
+// resolve (createExpoFontLoader().loadBrandFonts). Absent/undefined on the
+// pre-load build (and forever when no tenant font is configured / expo-font is
+// absent) => `font.family`/`font.familyMap` stay undefined and every component
+// omits `fontFamily` (system font, today's look). Passing the map once it
+// resolves promotes `font.family` to the base-weight family and exposes the
+// full map at `font.familyMap` so components can resolve per-weight families.
+fontMap) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39;
+    const primary = (_a = ps.themeColor) !== null && _a !== void 0 ? _a : BASE[variant].primary;
+    const text = (_b = ps.defaultFontColor) !== null && _b !== void 0 ? _b : "#1A1A1A";
+    const baseWeight = (_c = ps.defaultFontWeight) !== null && _c !== void 0 ? _c : "400";
+    return {
+        variant,
+        colors: { primary, surface: BASE[variant].surface, text },
+        // `family: undefined` => system font (back-compat: unchanged when no tenant
+        // font configured). The apply phase replaces it with a loaded RN family name
+        // (per weight) via `resolveFontFamily(loadedMap, weight)` once the brand fonts
+        // resolve; the static theme never carries a not-yet-loaded remote family.
+        // `family` resolves the BASE weight (font.weight); `familyMap` carries the full
+        // weight->family map so components can resolve the family for the weight THEY
+        // render (msg/date/quick-reply/title/subtitle), falling back to undefined
+        // (system font) for any weight the tenant didn't ship.
+        font: {
+            size: (_d = ps.defaultFontSize) !== null && _d !== void 0 ? _d : 14,
+            weight: baseWeight,
+            family: resolveFontFamily(fontMap, baseWeight),
+            familyMap: fontMap,
+        },
+        // Bubble palette (audit: sender differentiation). Server chatSectionStyle wins,
+        // then sensible defaults: sent = brand primary on white text, received = white.
+        // Web parity adds a soft drop shadow + structured spacing/radius tokens.
+        bubble: {
+            sentBg: (_e = cs.sentMsgBg) !== null && _e !== void 0 ? _e : primary,
+            sentText: (_f = cs.sentMsgFontColor) !== null && _f !== void 0 ? _f : "#FFFFFF",
+            receivedBg: (_g = cs.receivedMsgBg) !== null && _g !== void 0 ? _g : "#FFFFFF",
+            receivedText: (_h = cs.receivedMsgFontColor) !== null && _h !== void 0 ? _h : text,
+            radius: (_j = cs.receivedMsgCornerRadius) !== null && _j !== void 0 ? _j : 12,
+            // soft drop shadow (web uses theme.palette.general.boxShadow); RN needs
+            // shadow* + elevation for a comparable result on iOS + Android.
+            shadowColor: "#000",
+            shadowOpacity: 0.12,
+            shadowRadius: 6,
+            shadowOffset: { width: 0, height: 2 },
+            elevation: 2,
+            marginX: 15,
+            padding: (_k = cs.msgPadding) !== null && _k !== void 0 ? _k : 8,
+            sentRadius: (_l = cs.sendMsgCornerRadius) !== null && _l !== void 0 ? _l : 8,
+            receivedRadius: (_m = cs.receivedMsgCornerRadius) !== null && _m !== void 0 ? _m : 8,
+        },
+        header: {
+            bg: (_o = hs.bgColor) !== null && _o !== void 0 ? _o : primary,
+            titleColor: (_p = hs.titleColor) !== null && _p !== void 0 ? _p : "#FFFFFF",
+            // subtitle: distinct color falls back to titleColor (web reuses title when unset).
+            subTitleColor: (_r = (_q = hs.subTitleColor) !== null && _q !== void 0 ? _q : hs.titleColor) !== null && _r !== void 0 ? _r : "#FFFFFF",
+            titleWeight: ((_s = hs.fontWeightTitle) !== null && _s !== void 0 ? _s : "700"),
+            subTitleWeight: ((_u = (_t = hs.fontWeightSubTitle) !== null && _t !== void 0 ? _t : ps.defaultFontWeight) !== null && _u !== void 0 ? _u : "400"),
+            // explicit title/subtitle sizes override the component's derived size+offset.
+            titleSize: hs.fontSizeTitle,
+            subTitleSize: hs.fontSizeSubTitle,
+            closeColor: (_v = hs.closeBtnColor) !== null && _v !== void 0 ? _v : "#FFFFFF",
+            videoColor: (_w = hs.videoCallBtnColor) !== null && _w !== void 0 ? _w : "#FFFFFF",
+            // header avatar sizing/shape (web headerSectionStyle avatar*); defaults match
+            // the SDK's currently-hardcoded 32x32 logo with a 16px radius.
+            avatarWidth: dim(hs.avatarWidth, 32),
+            avatarHeight: dim(hs.avatarHeight, 32),
+            avatarBorderRadius: dim(hs.avatarBorderRadius, 16),
+            // RN <Image resizeMode>; web `object-fit` cover/contain map 1:1, default cover.
+            avatarObjectFit: ((_x = hs.avatarObjectFit) !== null && _x !== void 0 ? _x : "cover"),
+            onlineStatus: (_y = hs.onlineStatusColor) !== null && _y !== void 0 ? _y : primary,
+            offlineStatus: (_z = hs.offlineStatusColor) !== null && _z !== void 0 ? _z : "#EB5757",
+            // status-dot placement (web `statusIndicatorPosition`).
+            statusIndicatorPosition: (_0 = hs.statusIndicatorPosition) !== null && _0 !== void 0 ? _0 : "top-right",
+            // connecting banner (no SDK UI yet — tokens reserved for Phase 2 wiring).
+            connectingColor: (_1 = hs.connectingTextColor) !== null && _1 !== void 0 ? _1 : ((_2 = hs.titleColor) !== null && _2 !== void 0 ? _2 : "#FFFFFF"),
+            connectingBg: (_3 = hs.connectingTextBgcolor) !== null && _3 !== void 0 ? _3 : "#B5B5B5",
+            connectingAlign: (_4 = hs.alignConnectingText) !== null && _4 !== void 0 ? _4 : "center",
+            connectingFontSize: hs.fontSizeConnectText,
+            connectingFontWeight: hs.fontWeightConnectText,
+        },
+        chat: {
+            bg: (_5 = cs.bgChatColor) !== null && _5 !== void 0 ? _5 : "#FFFFFF",
+            dateColor: (_6 = cs.sessionDateColor) !== null && _6 !== void 0 ? _6 : "#384250",
+            // message/date/quick-reply typography (web chatSectionStyle); undefined =>
+            // consumers fall back to font.size / no explicit weight.
+            msgFontSize: cs.msgFontSize,
+            msgFontWeight: cs.msgFontWeight,
+            dateFontSize: cs.dateFontSize,
+            dateFontWeight: cs.dateFontWeight,
+            quickReplyFontSize: cs.quickReplyFontSize,
+            quickReplyFontWeight: cs.quickReplyFontWeight,
+            // per-bubble timestamp colors (web sent/receivedDateFontColor); fall back to
+            // the existing session date color when unset.
+            sentDateColor: (_7 = cs.sentDateFontColor) !== null && _7 !== void 0 ? _7 : ((_8 = cs.sessionDateColor) !== null && _8 !== void 0 ? _8 : "#384250"),
+            receivedDateColor: (_9 = cs.receivedDateFontColor) !== null && _9 !== void 0 ? _9 : ((_10 = cs.sessionDateColor) !== null && _10 !== void 0 ? _10 : "#384250"),
+            // per-message (received) avatar sizing (web chatSectionStyle avatarMsg*);
+            // default 32 — a compact in-thread avatar (web default is 50).
+            avatarMsgWidth: dim(cs.avatarMsgWidth, 32),
+            avatarMsgHeight: dim(cs.avatarMsgHeight, 32),
+        },
+        send: {
+            fieldBg: (_11 = ss.textFieldBg) !== null && _11 !== void 0 ? _11 : "#F3F4F6",
+            fieldColor: (_12 = ss.textFeildColor) !== null && _12 !== void 0 ? _12 : "#2d2d2d",
+            fieldRadius: (_13 = ss.textFieldCornerRadius) !== null && _13 !== void 0 ? _13 : 4,
+            hintColor: (_14 = ss.hintFontColor) !== null && _14 !== void 0 ? _14 : "#6C737F",
+            hintFontSize: ss.hintFontSize,
+            hintFontWeight: ss.hintFontWeight,
+            sendBtnBg: (_15 = ss.sendBtnBg) !== null && _15 !== void 0 ? _15 : primary,
+            sendBtnColor: (_16 = ss.sendBtnColor) !== null && _16 !== void 0 ? _16 : "#FFFFFF",
+            sendBtnRadius: (_17 = ss.sendBtnCornerRadius) !== null && _17 !== void 0 ? _17 : 4,
+            // back-compat: the single folded icon color (kept so existing consumers work).
+            iconColor: (_20 = (_19 = (_18 = ss.uploadFileBtnColor) !== null && _18 !== void 0 ? _18 : ss.emojiBtnColor) !== null && _19 !== void 0 ? _19 : ss.audioBtnColor) !== null && _20 !== void 0 ? _20 : primary,
+            // independent icon colors (each falls back to the folded iconColor chain).
+            uploadIconColor: (_23 = (_22 = (_21 = ss.uploadFileBtnColor) !== null && _21 !== void 0 ? _21 : ss.emojiBtnColor) !== null && _22 !== void 0 ? _22 : ss.audioBtnColor) !== null && _23 !== void 0 ? _23 : primary,
+            emojiIconColor: (_26 = (_25 = (_24 = ss.emojiBtnColor) !== null && _24 !== void 0 ? _24 : ss.uploadFileBtnColor) !== null && _25 !== void 0 ? _25 : ss.audioBtnColor) !== null && _26 !== void 0 ? _26 : primary,
+            audioIconColor: (_29 = (_28 = (_27 = ss.audioBtnColor) !== null && _27 !== void 0 ? _27 : ss.uploadFileBtnColor) !== null && _28 !== void 0 ? _28 : ss.emojiBtnColor) !== null && _29 !== void 0 ? _29 : primary,
+            // attach-button background + radius (web uploadFileBtnBg/CornerRadius).
+            uploadBtnBg: ss.uploadFileBtnBg,
+            uploadBtnRadius: ss.uploadFileBtnCornerRadius,
+        },
+        quickReply: {
+            bg: (_30 = cs.quickReplyBg) !== null && _30 !== void 0 ? _30 : "#FFFFFF",
+            borderColor: (_31 = cs.quickReplyBorderColor) !== null && _31 !== void 0 ? _31 : primary,
+            color: (_32 = cs.quickReplyColor) !== null && _32 !== void 0 ? _32 : primary,
+            borderWidth: (_33 = cs.quickReplyBorderWidth) !== null && _33 !== void 0 ? _33 : 1,
+            borderRadius: (_34 = cs.quickReplyBorderRadius) !== null && _34 !== void 0 ? _34 : 15,
+        },
+        // Launcher (FAB) tokens (web wedgitSectionStyle). Defaults match the SDK's
+        // currently-hardcoded Launcher dimensions so unset config keeps today's look.
+        launcher: {
+            buttonColor: (_35 = ws.buttonColor) !== null && _35 !== void 0 ? _35 : "#FFFFFF",
+            buttonBg: (_36 = ws.buttonBg) !== null && _36 !== void 0 ? _36 : primary,
+            buttonWidth: (_37 = ws.buttonWidth) !== null && _37 !== void 0 ? _37 : 56,
+            buttonHeight: (_38 = ws.buttonHeight) !== null && _38 !== void 0 ? _38 : 56,
+            buttonBorderRadius: (_39 = ws.buttonBorderRadius) !== null && _39 !== void 0 ? _39 : 28,
+        },
+    };
+}

package/lib/ui/AttachButton.d.ts

@@ -0,0 +1,35 @@
+/**
+ * A single attachment awaiting send. Mirrors the normalized picker `Asset`
+ * shape loosely (only the fields the chip needs); `name` labels the chip.
+ */
+export interface PendingAttachment {
+    /** stable id used as the cancel target and React key */
+    id: string;
+    /** display name shown in the chip */
+    name: string;
+    /** optional lifecycle hint shown next to the name (queued/encoding/…) */
+    status?: string;
+}
+export interface AttachButtonProps {
+    /**
+     * Injected picker trigger. Pressing the button calls this; the host wires it
+     * to a real PickerAdapter (or a fake in tests). It may be async.
+     */
+    onPick: () => void | Promise<void>;
+    /** pending attachments to render as cancellable chips */
+    pending?: PendingAttachment[];
+    /** cancel a pending attachment by id */
+    onCancel?: (id: string) => void;
+    /** disable the button (e.g. at the max-file cap or during a video call) */
+    disabled?: boolean;
+    theme: any;
+    /** accessible label override; defaults to "Attach file" */
+    accessibilityLabel?: string;
+    /** attach-button background (web `uploadFileBtnBg`); undefined => transparent. */
+    backgroundColor?: string;
+    /** attach-button corner radius (web `uploadFileBtnCornerRadius`). */
+    borderRadius?: number;
+    /** glyph tint (web `uploadFileBtnColor`); undefined => default glyph colour. */
+    iconColor?: string;
+}
+export declare function AttachButton({ onPick, pending, onCancel, disabled, theme, accessibilityLabel, backgroundColor, borderRadius, iconColor, }: AttachButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/AttachButton.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachButton = AttachButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+function AttachButton({ onPick, pending = [], onCancel, disabled = false, theme, accessibilityLabel = "Attach file", backgroundColor, borderRadius, iconColor, }) {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "attach-button", accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled }, disabled: disabled, onPress: () => {
+                    if (!disabled)
+                        onPick();
+                }, 
+                // web parity: optional themed background + corner radius (uploadFileBtnBg /
+                // uploadFileBtnCornerRadius); undefined keys leave the bare icon button.
+                style: { padding: 6, opacity: disabled ? 0.4 : 1, backgroundColor, borderRadius }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.font) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 14) + 4, color: iconColor }, children: "📎" }) }), pending.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "attach-pending", style: { flexDirection: "row", flexWrap: "wrap", gap: 6, padding: 4 }, children: pending.map((p) => {
+                    var _a, _b, _c, _d;
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: `attach-chip-${p.id}`, style: {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            gap: 6,
+                            paddingHorizontal: 8,
+                            paddingVertical: 4,
+                            borderRadius: 12,
+                            backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.surface,
+                        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: { color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text, fontSize: (_c = theme === null || theme === void 0 ? void 0 : theme.font) === null || _c === void 0 ? void 0 : _c.size, flexShrink: 1 }, children: p.status ? `${p.name} · ${p.status}` : p.name }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "attach-cancel", accessibilityRole: "button", accessibilityLabel: `Cancel ${p.name}`, onPress: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(p.id), style: { paddingHorizontal: 4 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.text }, children: "✕" }) })] }, p.id));
+                }) })) : null] }));
+}

package/lib/ui/AudioRecorder.d.ts

@@ -0,0 +1,25 @@
+import type { AudioAdapter, RecordingResult } from "../adapters/audio";
+export interface AudioRecorderProps {
+    /** injected capture surface (fake in tests, real recorder on device). When it
+     *  carries `recordingDelegated`, capture is driven via the expo-audio hook. */
+    adapter: AudioAdapter;
+    /** called with the completed recording once stop resolves */
+    onRecorded: (result: RecordingResult) => void;
+    /** optional typed-error sink for start/stop failures */
+    onError?: (err: unknown) => void;
+    /**
+     * suspend recording entirely (mic mutual-exclusion with a video call, §4.4).
+     * When true the toggle is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When true, begin recording on mount (one-shot). Used when the recorder is
+     * launched from the media-upload selector's "record audio" row, so the user
+     * lands directly on the live timer instead of having to tap once more.
+     */
+    autoStart?: boolean;
+    theme: any;
+    /** mic/record glyph tint (web `audioBtnColor`); undefined => default colour. */
+    iconColor?: string;
+}
+export declare function AudioRecorder({ adapter, onRecorded, onError, disabled, autoStart, theme, iconColor, }: AudioRecorderProps): import("react/jsx-runtime").JSX.Element | null;