@compsych-ui-components/react-native 4.0.13 → 4.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych-ui-components/react-native",
-  "version": "4.0.13",
+  "version": "4.0.18",
   "description": "ComPsych React Native Design System — components, icons, tokens, and theming",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -23,9 +23,15 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "expo-font": ">=13.0.0",
+    "expo-linear-gradient": ">=13.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
     "react-native-svg": ">=15.0.0"
   },
+  "peerDependenciesMeta": {
+    "expo-linear-gradient": {
+      "optional": true
+    }
+  },
   "type": "commonjs"
 }

package/src/components/ActionSheet/index.js

@@ -189,9 +189,9 @@ function ActionSheet({ visible, onClose, title, children, primaryAction, seconda
 const styles = _reactnative.StyleSheet.create({
     backdrop: {
         position: 'absolute',
+        top: 0,
         left: 0,
         right: 0,
-        top: 0,
         bottom: 0,
         backgroundColor: 'rgba(0,0,0,0.4)'
     },

package/src/components/ActionSheet/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../packages/react-native/src/components/ActionSheet/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Modal,\r\n  Pressable,\r\n  ScrollView,\r\n  StyleProp,\r\n  StyleSheet,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { Button } from '../Button';\r\nimport { HeaderText } from '../HeaderText';\r\n\r\nexport interface ActionSheetAction {\r\n  label: string;\r\n  onPress: () => void;\r\n}\r\n\r\nexport interface ActionSheetProps {\r\n  visible: boolean;\r\n  onClose: () => void;\r\n  title?: string;\r\n  children?: React.ReactNode;\r\n  primaryAction?: ActionSheetAction;\r\n  secondaryAction?: ActionSheetAction;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function ActionSheet({\r\n  visible,\r\n  onClose,\r\n  title,\r\n  children,\r\n  primaryAction,\r\n  secondaryAction,\r\n  style,\r\n}: ActionSheetProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const dynamicStyles = useMemo(\r\n    () => ({\r\n      sheetWrapper: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding6,\r\n        paddingBottom: dim.spacing.padding.sysPadding6,\r\n      },\r\n      sheet: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderRadius: dim.borderRadius.sysRadiusXxl,\r\n      },\r\n      titleRow: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n        paddingVertical: dim.spacing.padding.sysPadding8,\r\n      },\r\n      closeButton: {\r\n        borderRadius: dim.borderRadius.sysRadiusFull,\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n      },\r\n      contentInner: {\r\n        padding: dim.spacing.padding.sysPadding16,\r\n      },\r\n      actions: {\r\n        padding: dim.spacing.padding.sysPadding24,\r\n        gap: dim.spacing.padding.sysPadding12,\r\n      },\r\n    }),\r\n    [cr, dim],\r\n  );\r\n\r\n  return (\r\n    <Modal\r\n      visible={visible}\r\n      transparent\r\n      animationType=\"slide\"\r\n      onRequestClose={onClose}\r\n      statusBarTranslucent\r\n    >\r\n      {/* Backdrop */}\r\n      <Pressable style={styles.backdrop} onPress={onClose} accessible={false} />\r\n\r\n      {/* Sheet */}\r\n      <View\r\n        style={[styles.sheetWrapper, dynamicStyles.sheetWrapper, style]}\r\n        pointerEvents=\"box-none\"\r\n      >\r\n        <View style={[styles.sheet, dynamicStyles.sheet]}>\r\n          {/* Toolbar */}\r\n          <View style={styles.toolbar}>\r\n            {/* Grabber */}\r\n            <View style={styles.grabberRow}>\r\n              <View style={styles.grabber} />\r\n            </View>\r\n\r\n            {/* Title row */}\r\n            <View style={[styles.titleRow, dynamicStyles.titleRow]}>\r\n              {/* Invisible spacer to balance the close button */}\r\n              <View style={styles.closeButtonSize} />\r\n\r\n              <HeaderText\r\n                variant=\"titleSmall\"\r\n                emphasized\r\n                color={cr.surface.surface.sysOnSurface}\r\n                style={styles.titleText}\r\n              >\r\n                {title ?? ''}\r\n              </HeaderText>\r\n\r\n              {/* Close button */}\r\n              <Pressable\r\n                onPress={onClose}\r\n                accessibilityRole=\"button\"\r\n                accessibilityLabel=\"Close\"\r\n                style={({ pressed }) => [\r\n                  styles.closeButtonSize,\r\n                  dynamicStyles.closeButton,\r\n                  pressed && styles.closePressed,\r\n                ]}\r\n              >\r\n                <Ionicons\r\n                  name=\"close\"\r\n                  size={20}\r\n                  color={cr.surface.surface.sysOnSurface}\r\n                />\r\n              </Pressable>\r\n            </View>\r\n          </View>\r\n\r\n          {/* Content */}\r\n          {children && (\r\n            <ScrollView\r\n              style={styles.content}\r\n              contentContainerStyle={dynamicStyles.contentInner}\r\n              showsVerticalScrollIndicator={false}\r\n            >\r\n              {children}\r\n            </ScrollView>\r\n          )}\r\n\r\n          {/* Actions */}\r\n          {(primaryAction || secondaryAction) && (\r\n            <View style={dynamicStyles.actions}>\r\n              {primaryAction && (\r\n                <Button\r\n                  label={primaryAction.label}\r\n                  variant=\"filled\"\r\n                  size=\"xl\"\r\n                  fullWidth\r\n                  onPress={primaryAction.onPress}\r\n                />\r\n              )}\r\n              {secondaryAction && (\r\n                <Button\r\n                  label={secondaryAction.label}\r\n                  variant=\"outlined\"\r\n                  size=\"xl\"\r\n                  fullWidth\r\n                  onPress={secondaryAction.onPress}\r\n                />\r\n              )}\r\n            </View>\r\n          )}\r\n        </View>\r\n      </View>\r\n    </Modal>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  backdrop: {\r\n    position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,\r\n    backgroundColor: 'rgba(0,0,0,0.4)',\r\n  },\r\n  sheetWrapper: {\r\n    flex: 1,\r\n    justifyContent: 'flex-end',\r\n  },\r\n  sheet: {\r\n    borderWidth: 1,\r\n    borderColor: 'rgba(255,255,255,0.4)',\r\n    overflow: 'hidden',\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 4 },\r\n    shadowOpacity: 0.1,\r\n    shadowRadius: 16,\r\n    elevation: 8,\r\n  },\r\n  toolbar: {\r\n    alignItems: 'center',\r\n    width: '100%',\r\n  },\r\n  grabberRow: {\r\n    height: 16,\r\n    justifyContent: 'flex-end',\r\n    alignItems: 'center',\r\n    paddingBottom: 0,\r\n    paddingTop: 5,\r\n  },\r\n  grabber: {\r\n    width: 36,\r\n    height: 5,\r\n    borderRadius: 100,\r\n    backgroundColor: '#ccc',\r\n  },\r\n  titleRow: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    width: '100%',\r\n  },\r\n  titleText: {\r\n    flex: 1,\r\n    textAlign: 'center',\r\n  },\r\n  closeButtonSize: {\r\n    width: 32,\r\n    height: 32,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  closePressed: {\r\n    opacity: 0.7,\r\n  },\r\n  content: {\r\n    maxHeight: 400,\r\n  },\r\n});\r\n"],"names":["ActionSheet","visible","onClose","title","children","primaryAction","secondaryAction","style","colorRoles","cr","dimensions","dim","useTheme","dynamicStyles","useMemo","sheetWrapper","paddingHorizontal","spacing","padding","sysPadding6","paddingBottom","sheet","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","borderRadius","sysRadiusXxl","titleRow","sysPadding16","paddingVertical","sysPadding8","closeButton","sysRadiusFull","sysSurfaceContainer","contentInner","actions","sysPadding24","gap","sysPadding12","Modal","transparent","animationType","onRequestClose","statusBarTranslucent","Pressable","styles","backdrop","onPress","accessible","View","pointerEvents","toolbar","grabberRow","grabber","closeButtonSize","HeaderText","variant","emphasized","color","sysOnSurface","titleText","accessibilityRole","accessibilityLabel","pressed","closePressed","Ionicons","name","size","ScrollView","content","contentContainerStyle","showsVerticalScrollIndicator","Button","label","fullWidth","StyleSheet","create","position","left","right","top","bottom","flex","justifyContent","borderWidth","borderColor","overflow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","alignItems","paddingTop","flexDirection","textAlign","opacity","maxHeight"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/ActionSheet/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Modal,\r\n  Pressable,\r\n  ScrollView,\r\n  StyleProp,\r\n  StyleSheet,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { Button } from '../Button';\r\nimport { HeaderText } from '../HeaderText';\r\n\r\nexport interface ActionSheetAction {\r\n  label: string;\r\n  onPress: () => void;\r\n}\r\n\r\nexport interface ActionSheetProps {\r\n  visible: boolean;\r\n  onClose: () => void;\r\n  title?: string;\r\n  children?: React.ReactNode;\r\n  primaryAction?: ActionSheetAction;\r\n  secondaryAction?: ActionSheetAction;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function ActionSheet({\r\n  visible,\r\n  onClose,\r\n  title,\r\n  children,\r\n  primaryAction,\r\n  secondaryAction,\r\n  style,\r\n}: ActionSheetProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const dynamicStyles = useMemo(\r\n    () => ({\r\n      sheetWrapper: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding6,\r\n        paddingBottom: dim.spacing.padding.sysPadding6,\r\n      },\r\n      sheet: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderRadius: dim.borderRadius.sysRadiusXxl,\r\n      },\r\n      titleRow: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n        paddingVertical: dim.spacing.padding.sysPadding8,\r\n      },\r\n      closeButton: {\r\n        borderRadius: dim.borderRadius.sysRadiusFull,\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n      },\r\n      contentInner: {\r\n        padding: dim.spacing.padding.sysPadding16,\r\n      },\r\n      actions: {\r\n        padding: dim.spacing.padding.sysPadding24,\r\n        gap: dim.spacing.padding.sysPadding12,\r\n      },\r\n    }),\r\n    [cr, dim],\r\n  );\r\n\r\n  return (\r\n    <Modal\r\n      visible={visible}\r\n      transparent\r\n      animationType=\"slide\"\r\n      onRequestClose={onClose}\r\n      statusBarTranslucent\r\n    >\r\n      {/* Backdrop */}\r\n      <Pressable style={styles.backdrop} onPress={onClose} accessible={false} />\r\n\r\n      {/* Sheet */}\r\n      <View\r\n        style={[styles.sheetWrapper, dynamicStyles.sheetWrapper, style]}\r\n        pointerEvents=\"box-none\"\r\n      >\r\n        <View style={[styles.sheet, dynamicStyles.sheet]}>\r\n          {/* Toolbar */}\r\n          <View style={styles.toolbar}>\r\n            {/* Grabber */}\r\n            <View style={styles.grabberRow}>\r\n              <View style={styles.grabber} />\r\n            </View>\r\n\r\n            {/* Title row */}\r\n            <View style={[styles.titleRow, dynamicStyles.titleRow]}>\r\n              {/* Invisible spacer to balance the close button */}\r\n              <View style={styles.closeButtonSize} />\r\n\r\n              <HeaderText\r\n                variant=\"titleSmall\"\r\n                emphasized\r\n                color={cr.surface.surface.sysOnSurface}\r\n                style={styles.titleText}\r\n              >\r\n                {title ?? ''}\r\n              </HeaderText>\r\n\r\n              {/* Close button */}\r\n              <Pressable\r\n                onPress={onClose}\r\n                accessibilityRole=\"button\"\r\n                accessibilityLabel=\"Close\"\r\n                style={({ pressed }) => [\r\n                  styles.closeButtonSize,\r\n                  dynamicStyles.closeButton,\r\n                  pressed && styles.closePressed,\r\n                ]}\r\n              >\r\n                <Ionicons\r\n                  name=\"close\"\r\n                  size={20}\r\n                  color={cr.surface.surface.sysOnSurface}\r\n                />\r\n              </Pressable>\r\n            </View>\r\n          </View>\r\n\r\n          {/* Content */}\r\n          {children && (\r\n            <ScrollView\r\n              style={styles.content}\r\n              contentContainerStyle={dynamicStyles.contentInner}\r\n              showsVerticalScrollIndicator={false}\r\n            >\r\n              {children}\r\n            </ScrollView>\r\n          )}\r\n\r\n          {/* Actions */}\r\n          {(primaryAction || secondaryAction) && (\r\n            <View style={dynamicStyles.actions}>\r\n              {primaryAction && (\r\n                <Button\r\n                  label={primaryAction.label}\r\n                  variant=\"filled\"\r\n                  size=\"xl\"\r\n                  fullWidth\r\n                  onPress={primaryAction.onPress}\r\n                />\r\n              )}\r\n              {secondaryAction && (\r\n                <Button\r\n                  label={secondaryAction.label}\r\n                  variant=\"outlined\"\r\n                  size=\"xl\"\r\n                  fullWidth\r\n                  onPress={secondaryAction.onPress}\r\n                />\r\n              )}\r\n            </View>\r\n          )}\r\n        </View>\r\n      </View>\r\n    </Modal>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  backdrop: {\r\n    position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,\r\n    backgroundColor: 'rgba(0,0,0,0.4)',\r\n  },\r\n  sheetWrapper: {\r\n    flex: 1,\r\n    justifyContent: 'flex-end',\r\n  },\r\n  sheet: {\r\n    borderWidth: 1,\r\n    borderColor: 'rgba(255,255,255,0.4)',\r\n    overflow: 'hidden',\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 4 },\r\n    shadowOpacity: 0.1,\r\n    shadowRadius: 16,\r\n    elevation: 8,\r\n  },\r\n  toolbar: {\r\n    alignItems: 'center',\r\n    width: '100%',\r\n  },\r\n  grabberRow: {\r\n    height: 16,\r\n    justifyContent: 'flex-end',\r\n    alignItems: 'center',\r\n    paddingBottom: 0,\r\n    paddingTop: 5,\r\n  },\r\n  grabber: {\r\n    width: 36,\r\n    height: 5,\r\n    borderRadius: 100,\r\n    backgroundColor: '#ccc',\r\n  },\r\n  titleRow: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    width: '100%',\r\n  },\r\n  titleText: {\r\n    flex: 1,\r\n    textAlign: 'center',\r\n  },\r\n  closeButtonSize: {\r\n    width: 32,\r\n    height: 32,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  closePressed: {\r\n    opacity: 0.7,\r\n  },\r\n  content: {\r\n    maxHeight: 400,\r\n  },\r\n});\r\n"],"names":["ActionSheet","visible","onClose","title","children","primaryAction","secondaryAction","style","colorRoles","cr","dimensions","dim","useTheme","dynamicStyles","useMemo","sheetWrapper","paddingHorizontal","spacing","padding","sysPadding6","paddingBottom","sheet","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","borderRadius","sysRadiusXxl","titleRow","sysPadding16","paddingVertical","sysPadding8","closeButton","sysRadiusFull","sysSurfaceContainer","contentInner","actions","sysPadding24","gap","sysPadding12","Modal","transparent","animationType","onRequestClose","statusBarTranslucent","Pressable","styles","backdrop","onPress","accessible","View","pointerEvents","toolbar","grabberRow","grabber","closeButtonSize","HeaderText","variant","emphasized","color","sysOnSurface","titleText","accessibilityRole","accessibilityLabel","pressed","closePressed","Ionicons","name","size","ScrollView","content","contentContainerStyle","showsVerticalScrollIndicator","Button","label","fullWidth","StyleSheet","create","position","top","left","right","bottom","flex","justifyContent","borderWidth","borderColor","overflow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","alignItems","paddingTop","flexDirection","textAlign","opacity","maxHeight"],"mappings":"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"}

package/src/components/ChatBubble/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type ChatBubbleVariant = 'incoming' | 'outgoing';
+export interface ChatBubbleProps {
+    variant: ChatBubbleVariant;
+    message: string;
+    timestamp?: string;
+    onThumbsUp?: () => void;
+    onThumbsDown?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ChatBubble({ variant, message, timestamp, onThumbsUp, onThumbsDown, style, }: ChatBubbleProps): React.JSX.Element;

package/src/components/ChatBubble/index.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChatBubble", {
+    enumerable: true,
+    get: function() {
+        return ChatBubble;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function ChatBubble({ variant, message, timestamp, onThumbsUp, onThumbsDown, style }) {
+    const { colorRoles: cr, dimensions: dim, iconography: ico } = (0, _theme.useTheme)();
+    const isOutgoing = variant === 'outgoing';
+    const tokenStyles = (0, _react.useMemo)(()=>({
+            bubble: {
+                maxWidth: '80%',
+                paddingVertical: dim.spacing.padding.sysPadding8,
+                paddingHorizontal: dim.spacing.padding.sysPadding12,
+                borderRadius: dim.borderRadius.sysRadiusMd
+            },
+            bubbleIncoming: {
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderWidth: dim.borderWidth.sysStrokeThin,
+                borderColor: cr.outline.sysOutlineVariant,
+                borderBottomLeftRadius: dim.borderRadius.sysRadiusXs
+            },
+            bubbleOutgoing: {
+                backgroundColor: cr.accent.primary.sysPrimary,
+                borderBottomRightRadius: dim.borderRadius.sysRadiusXs
+            },
+            metaRow: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: dim.spacing.padding.sysPadding8,
+                marginTop: dim.spacing.padding.sysPadding4
+            },
+            reactionBtn: {
+                padding: dim.spacing.padding.sysPadding2
+            }
+        }), [
+        cr,
+        dim
+    ]);
+    const textColor = isOutgoing ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurface;
+    const timestampColor = isOutgoing ? 'rgba(255,255,255,0.64)' : cr.surface.surface.sysOnSurfaceVariant;
+    const iconColor = cr.surface.surface.sysOnSurfaceVariant;
+    const iconSize = ico.sysSizeXs;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: [
+            styles.row,
+            isOutgoing ? styles.rowOutgoing : styles.rowIncoming,
+            style
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: [
+                        tokenStyles.bubble,
+                        isOutgoing ? tokenStyles.bubbleOutgoing : tokenStyles.bubbleIncoming
+                    ],
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                        variant: "medium",
+                        color: textColor,
+                        style: styles.messageText,
+                        children: message
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                    style: [
+                        tokenStyles.metaRow,
+                        isOutgoing ? styles.metaOutgoing : styles.metaIncoming
+                    ],
+                    children: [
+                        timestamp && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                            variant: "labelSmall",
+                            color: timestampColor,
+                            children: timestamp
+                        }),
+                        !isOutgoing && (onThumbsUp || onThumbsDown) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                onThumbsUp && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                    onPress: onThumbsUp,
+                                    style: ({ pressed })=>[
+                                            tokenStyles.reactionBtn,
+                                            pressed && styles.pressed
+                                        ],
+                                    accessibilityRole: "button",
+                                    accessibilityLabel: "Thumbs up",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                        name: "thumbs-up-outline",
+                                        size: iconSize,
+                                        color: iconColor
+                                    })
+                                }),
+                                onThumbsDown && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                    onPress: onThumbsDown,
+                                    style: ({ pressed })=>[
+                                            tokenStyles.reactionBtn,
+                                            pressed && styles.pressed
+                                        ],
+                                    accessibilityRole: "button",
+                                    accessibilityLabel: "Thumbs down",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                        name: "thumbs-down-outline",
+                                        size: iconSize,
+                                        color: iconColor
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        width: '100%'
+    },
+    rowIncoming: {
+        justifyContent: 'flex-start'
+    },
+    rowOutgoing: {
+        justifyContent: 'flex-end'
+    },
+    metaIncoming: {
+        justifyContent: 'flex-start'
+    },
+    metaOutgoing: {
+        justifyContent: 'flex-end'
+    },
+    messageText: {
+        flexShrink: 1
+    },
+    pressed: {
+        opacity: 0.6
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/ChatBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/ChatBubble/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport type ChatBubbleVariant = 'incoming' | 'outgoing';\r\n\r\nexport interface ChatBubbleProps {\r\n  variant: ChatBubbleVariant;\r\n  message: string;\r\n  timestamp?: string;\r\n  onThumbsUp?: () => void;\r\n  onThumbsDown?: () => void;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function ChatBubble({\r\n  variant,\r\n  message,\r\n  timestamp,\r\n  onThumbsUp,\r\n  onThumbsDown,\r\n  style,\r\n}: ChatBubbleProps) {\r\n  const { colorRoles: cr, dimensions: dim, iconography: ico } = useTheme();\r\n\r\n  const isOutgoing = variant === 'outgoing';\r\n\r\n  const tokenStyles = useMemo(\r\n    () => ({\r\n      bubble: {\r\n        maxWidth: '80%' as const,\r\n        paddingVertical: dim.spacing.padding.sysPadding8,\r\n        paddingHorizontal: dim.spacing.padding.sysPadding12,\r\n        borderRadius: dim.borderRadius.sysRadiusMd,\r\n      },\r\n      bubbleIncoming: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderWidth: dim.borderWidth.sysStrokeThin,\r\n        borderColor: cr.outline.sysOutlineVariant,\r\n        borderBottomLeftRadius: dim.borderRadius.sysRadiusXs,\r\n      },\r\n      bubbleOutgoing: {\r\n        backgroundColor: cr.accent.primary.sysPrimary,\r\n        borderBottomRightRadius: dim.borderRadius.sysRadiusXs,\r\n      },\r\n      metaRow: {\r\n        flexDirection: 'row' as const,\r\n        alignItems: 'center' as const,\r\n        gap: dim.spacing.padding.sysPadding8,\r\n        marginTop: dim.spacing.padding.sysPadding4,\r\n      },\r\n      reactionBtn: {\r\n        padding: dim.spacing.padding.sysPadding2,\r\n      },\r\n    }),\r\n    [cr, dim],\r\n  );\r\n\r\n  const textColor = isOutgoing\r\n    ? cr.accent.primary.sysOnPrimary\r\n    : cr.surface.surface.sysOnSurface;\r\n  const timestampColor = isOutgoing\r\n    ? 'rgba(255,255,255,0.64)'\r\n    : cr.surface.surface.sysOnSurfaceVariant;\r\n  const iconColor = cr.surface.surface.sysOnSurfaceVariant;\r\n  const iconSize = ico.sysSizeXs;\r\n\r\n  return (\r\n    <View\r\n      style={[\r\n        styles.row,\r\n        isOutgoing ? styles.rowOutgoing : styles.rowIncoming,\r\n        style,\r\n      ]}\r\n    >\r\n      <View>\r\n        {/* Bubble */}\r\n        <View\r\n          style={[\r\n            tokenStyles.bubble,\r\n            isOutgoing ? tokenStyles.bubbleOutgoing : tokenStyles.bubbleIncoming,\r\n          ]}\r\n        >\r\n          <BodyText variant=\"medium\" color={textColor} style={styles.messageText}>\r\n            {message}\r\n          </BodyText>\r\n        </View>\r\n\r\n        {/* Meta row: timestamp + reactions */}\r\n        <View\r\n          style={[\r\n            tokenStyles.metaRow,\r\n            isOutgoing ? styles.metaOutgoing : styles.metaIncoming,\r\n          ]}\r\n        >\r\n          {timestamp && (\r\n            <BodyText variant=\"labelSmall\" color={timestampColor}>\r\n              {timestamp}\r\n            </BodyText>\r\n          )}\r\n\r\n          {/* Reaction buttons — incoming only */}\r\n          {!isOutgoing && (onThumbsUp || onThumbsDown) && (\r\n            <>\r\n              {onThumbsUp && (\r\n                <Pressable\r\n                  onPress={onThumbsUp}\r\n                  style={({ pressed }) => [\r\n                    tokenStyles.reactionBtn,\r\n                    pressed && styles.pressed,\r\n                  ]}\r\n                  accessibilityRole=\"button\"\r\n                  accessibilityLabel=\"Thumbs up\"\r\n                >\r\n                  <Ionicons\r\n                    name=\"thumbs-up-outline\"\r\n                    size={iconSize}\r\n                    color={iconColor}\r\n                  />\r\n                </Pressable>\r\n              )}\r\n              {onThumbsDown && (\r\n                <Pressable\r\n                  onPress={onThumbsDown}\r\n                  style={({ pressed }) => [\r\n                    tokenStyles.reactionBtn,\r\n                    pressed && styles.pressed,\r\n                  ]}\r\n                  accessibilityRole=\"button\"\r\n                  accessibilityLabel=\"Thumbs down\"\r\n                >\r\n                  <Ionicons\r\n                    name=\"thumbs-down-outline\"\r\n                    size={iconSize}\r\n                    color={iconColor}\r\n                  />\r\n                </Pressable>\r\n              )}\r\n            </>\r\n          )}\r\n        </View>\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  row: {\r\n    flexDirection: 'row',\r\n    width: '100%',\r\n  },\r\n  rowIncoming: {\r\n    justifyContent: 'flex-start',\r\n  },\r\n  rowOutgoing: {\r\n    justifyContent: 'flex-end',\r\n  },\r\n  metaIncoming: {\r\n    justifyContent: 'flex-start',\r\n  },\r\n  metaOutgoing: {\r\n    justifyContent: 'flex-end',\r\n  },\r\n  messageText: {\r\n    flexShrink: 1,\r\n  },\r\n  pressed: {\r\n    opacity: 0.6,\r\n  },\r\n});\r\n"],"names":["ChatBubble","variant","message","timestamp","onThumbsUp","onThumbsDown","style","colorRoles","cr","dimensions","dim","iconography","ico","useTheme","isOutgoing","tokenStyles","useMemo","bubble","maxWidth","paddingVertical","spacing","padding","sysPadding8","paddingHorizontal","sysPadding12","borderRadius","sysRadiusMd","bubbleIncoming","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","borderWidth","sysStrokeThin","borderColor","outline","sysOutlineVariant","borderBottomLeftRadius","sysRadiusXs","bubbleOutgoing","accent","primary","sysPrimary","borderBottomRightRadius","metaRow","flexDirection","alignItems","gap","marginTop","sysPadding4","reactionBtn","sysPadding2","textColor","sysOnPrimary","sysOnSurface","timestampColor","sysOnSurfaceVariant","iconColor","iconSize","sysSizeXs","View","styles","row","rowOutgoing","rowIncoming","BodyText","color","messageText","metaOutgoing","metaIncoming","Pressable","onPress","pressed","accessibilityRole","accessibilityLabel","Ionicons","name","size","StyleSheet","create","width","justifyContent","flexShrink","opacity"],"mappings":"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"}

package/src/components/ChatInput/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+export interface ChatAttachment {
+    uri: string;
+    source?: ImageSourcePropType;
+}
+export interface ChatInputProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    onSend: () => void;
+    onAttach?: () => void;
+    placeholder?: string;
+    attachments?: ChatAttachment[];
+    onRemoveAttachment?: (index: number) => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ChatInput({ value, onChangeText, onSend, onAttach, placeholder, attachments, onRemoveAttachment, disabled, style, }: ChatInputProps): React.JSX.Element;

package/src/components/ChatInput/index.js

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChatInput", {
+    enumerable: true,
+    get: function() {
+        return ChatInput;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function ChatInput({ value, onChangeText, onSend, onAttach, placeholder = 'Ask Sol Anything...', attachments, onRemoveAttachment, disabled = false, style }) {
+    const { colorRoles: cr, dimensions: dim, iconography: ico } = (0, _theme.useTheme)();
+    const [isFocused, setIsFocused] = (0, _react.useState)(false);
+    const [inputHeight, setInputHeight] = (0, _react.useState)(24);
+    const inputRef = (0, _react.useRef)(null);
+    const handleContentSizeChange = (0, _react.useCallback)((e)=>{
+        const newHeight = Math.max(24, Math.min(120, e.nativeEvent.contentSize.height));
+        setInputHeight(newHeight);
+    }, []);
+    const hasText = value.trim().length > 0;
+    const hasAttachments = !!attachments && attachments.length > 0;
+    const canSend = (hasText || hasAttachments) && !disabled;
+    const tokenStyles = (0, _react.useMemo)(()=>({
+            container: {
+                borderRadius: dim.borderRadius.sysRadiusLg,
+                borderWidth: isFocused ? dim.borderWidth.sysStrokeMedium : dim.borderWidth.sysStrokeThin,
+                borderColor: isFocused ? cr.accent.primary.sysPrimary : cr.outline.sysOutlineVariant,
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                paddingVertical: dim.spacing.padding.sysPadding8,
+                paddingHorizontal: dim.spacing.padding.sysPadding12,
+                gap: dim.spacing.padding.sysPadding8
+            },
+            attachBtn: {
+                width: 32,
+                height: 32,
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0
+            },
+            sendBtn: {
+                width: 32,
+                height: 32,
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+                backgroundColor: canSend ? cr.custom.warning.sysWarning : cr.surface.surfaceContainer.sysSurfaceContainerHighest
+            },
+            attachThumb: {
+                width: 48,
+                height: 48,
+                borderRadius: dim.borderRadius.sysRadiusSm,
+                overflow: 'hidden'
+            }
+        }), [
+        cr,
+        dim,
+        isFocused,
+        canSend
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.wrapper,
+            disabled && styles.disabled,
+            style
+        ],
+        children: [
+            hasAttachments && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
+                horizontal: true,
+                showsHorizontalScrollIndicator: false,
+                style: styles.attachStrip,
+                contentContainerStyle: styles.attachStripContent,
+                children: attachments.map((att, i)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: styles.attachItem,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Image, {
+                                source: att.source ?? {
+                                    uri: att.uri
+                                },
+                                style: tokenStyles.attachThumb,
+                                resizeMode: "cover",
+                                accessibilityLabel: `Attachment ${i + 1}`
+                            }),
+                            onRemoveAttachment && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                onPress: ()=>onRemoveAttachment(i),
+                                style: styles.removeBtn,
+                                accessibilityRole: "button",
+                                accessibilityLabel: `Remove attachment ${i + 1}`,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                    name: "close-circle",
+                                    size: 16,
+                                    color: cr.surface.surface.sysOnSurfaceVariant
+                                })
+                            })
+                        ]
+                    }, i))
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    tokenStyles.container,
+                    styles.inputRow,
+                    isFocused && {
+                        // focus ring via transparent primary halo
+                        shadowColor: cr.accent.primary.sysPrimary,
+                        shadowOffset: {
+                            width: 0,
+                            height: 0
+                        },
+                        shadowOpacity: 0.08,
+                        shadowRadius: 4
+                    }
+                ],
+                children: [
+                    onAttach && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                        onPress: onAttach,
+                        disabled: disabled,
+                        style: ({ pressed })=>[
+                                tokenStyles.attachBtn,
+                                pressed && styles.pressed
+                            ],
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Add attachment",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                            name: "add",
+                            size: ico.sysSizeSm,
+                            color: disabled ? cr.surface.surface.sysOnSurfaceVariant : cr.surface.surface.sysOnSurface
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.TextInput, {
+                        ref: inputRef,
+                        value: value,
+                        onChangeText: onChangeText,
+                        placeholder: placeholder,
+                        placeholderTextColor: cr.surface.surface.sysOnSurfaceVariant,
+                        editable: !disabled,
+                        multiline: true,
+                        scrollEnabled: inputHeight >= 120,
+                        onContentSizeChange: handleContentSizeChange,
+                        onFocus: ()=>setIsFocused(true),
+                        onBlur: ()=>setIsFocused(false),
+                        style: [
+                            styles.textInput,
+                            {
+                                color: cr.surface.surface.sysOnSurface,
+                                fontSize: 16,
+                                lineHeight: 24,
+                                height: inputHeight
+                            }
+                        ],
+                        accessibilityLabel: placeholder,
+                        returnKeyType: "default"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                        onPress: canSend ? onSend : undefined,
+                        disabled: !canSend,
+                        style: ({ pressed })=>[
+                                tokenStyles.sendBtn,
+                                pressed && canSend && styles.pressed
+                            ],
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Send",
+                        accessibilityState: {
+                            disabled: !canSend
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                            name: "arrow-up",
+                            size: ico.sysSizeSm,
+                            color: canSend ? cr.custom.warning.sysOnWarning : cr.surface.surface.sysOnSurfaceVariant
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    wrapper: {
+        gap: 4
+    },
+    disabled: {
+        opacity: 0.48
+    },
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-end'
+    },
+    textInput: {
+        flex: 1,
+        includeFontPadding: false,
+        padding: 0,
+        margin: 0
+    },
+    attachStrip: {
+        flexShrink: 0
+    },
+    attachStripContent: {
+        flexDirection: 'row',
+        gap: 8,
+        paddingHorizontal: 4
+    },
+    attachItem: {
+        position: 'relative'
+    },
+    removeBtn: {
+        position: 'absolute',
+        top: -4,
+        right: -4,
+        backgroundColor: '#fff',
+        borderRadius: 8
+    },
+    pressed: {
+        opacity: 0.7
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/ChatInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/ChatInput/index.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\r\n\r\nimport {\r\n  Image,\r\n  ImageSourcePropType,\r\n  NativeSyntheticEvent,\r\n  Pressable,\r\n  ScrollView,\r\n  StyleProp,\r\n  StyleSheet,\r\n  TextInput,\r\n  TextInputContentSizeChangeEventData,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport interface ChatAttachment {\r\n  uri: string;\r\n  source?: ImageSourcePropType;\r\n}\r\n\r\nexport interface ChatInputProps {\r\n  value: string;\r\n  onChangeText: (text: string) => void;\r\n  onSend: () => void;\r\n  onAttach?: () => void;\r\n  placeholder?: string;\r\n  attachments?: ChatAttachment[];\r\n  onRemoveAttachment?: (index: number) => void;\r\n  disabled?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function ChatInput({\r\n  value,\r\n  onChangeText,\r\n  onSend,\r\n  onAttach,\r\n  placeholder = 'Ask Sol Anything...',\r\n  attachments,\r\n  onRemoveAttachment,\r\n  disabled = false,\r\n  style,\r\n}: ChatInputProps) {\r\n  const { colorRoles: cr, dimensions: dim, iconography: ico } = useTheme();\r\n  const [isFocused, setIsFocused] = useState(false);\r\n  const [inputHeight, setInputHeight] = useState(24);\r\n  const inputRef = useRef<TextInput>(null);\r\n\r\n  const handleContentSizeChange = useCallback(\r\n    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {\r\n      const newHeight = Math.max(24, Math.min(120, e.nativeEvent.contentSize.height));\r\n      setInputHeight(newHeight);\r\n    },\r\n    [],\r\n  );\r\n\r\n  const hasText = value.trim().length > 0;\r\n  const hasAttachments = !!attachments && attachments.length > 0;\r\n  const canSend = (hasText || hasAttachments) && !disabled;\r\n\r\n  const tokenStyles = useMemo(\r\n    () => ({\r\n      container: {\r\n        borderRadius: dim.borderRadius.sysRadiusLg,\r\n        borderWidth: isFocused\r\n          ? dim.borderWidth.sysStrokeMedium\r\n          : dim.borderWidth.sysStrokeThin,\r\n        borderColor: isFocused\r\n          ? cr.accent.primary.sysPrimary\r\n          : cr.outline.sysOutlineVariant,\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        paddingVertical: dim.spacing.padding.sysPadding8,\r\n        paddingHorizontal: dim.spacing.padding.sysPadding12,\r\n        gap: dim.spacing.padding.sysPadding8,\r\n      },\r\n      attachBtn: {\r\n        width: 32,\r\n        height: 32,\r\n        borderRadius: dim.borderRadius.sysRadiusFull,\r\n        alignItems: 'center' as const,\r\n        justifyContent: 'center' as const,\r\n        flexShrink: 0,\r\n      },\r\n      sendBtn: {\r\n        width: 32,\r\n        height: 32,\r\n        borderRadius: dim.borderRadius.sysRadiusFull,\r\n        alignItems: 'center' as const,\r\n        justifyContent: 'center' as const,\r\n        flexShrink: 0,\r\n        backgroundColor: canSend\r\n          ? cr.custom.warning.sysWarning\r\n          : cr.surface.surfaceContainer.sysSurfaceContainerHighest,\r\n      },\r\n      attachThumb: {\r\n        width: 48,\r\n        height: 48,\r\n        borderRadius: dim.borderRadius.sysRadiusSm,\r\n        overflow: 'hidden' as const,\r\n      },\r\n    }),\r\n    [cr, dim, isFocused, canSend],\r\n  );\r\n\r\n  return (\r\n    <View style={[styles.wrapper, disabled && styles.disabled, style]}>\r\n      {/* Attachment strip */}\r\n      {hasAttachments && (\r\n        <ScrollView\r\n          horizontal\r\n          showsHorizontalScrollIndicator={false}\r\n          style={styles.attachStrip}\r\n          contentContainerStyle={styles.attachStripContent}\r\n        >\r\n          {attachments!.map((att, i) => (\r\n            <View key={i} style={styles.attachItem}>\r\n              <Image\r\n                source={att.source ?? { uri: att.uri }}\r\n                style={tokenStyles.attachThumb}\r\n                resizeMode=\"cover\"\r\n                accessibilityLabel={`Attachment ${i + 1}`}\r\n              />\r\n              {onRemoveAttachment && (\r\n                <Pressable\r\n                  onPress={() => onRemoveAttachment(i)}\r\n                  style={styles.removeBtn}\r\n                  accessibilityRole=\"button\"\r\n                  accessibilityLabel={`Remove attachment ${i + 1}`}\r\n                >\r\n                  <Ionicons\r\n                    name=\"close-circle\"\r\n                    size={16}\r\n                    color={cr.surface.surface.sysOnSurfaceVariant}\r\n                  />\r\n                </Pressable>\r\n              )}\r\n            </View>\r\n          ))}\r\n        </ScrollView>\r\n      )}\r\n\r\n      {/* Input row */}\r\n      <View\r\n        style={[\r\n          tokenStyles.container,\r\n          styles.inputRow,\r\n          isFocused && {\r\n            // focus ring via transparent primary halo\r\n            shadowColor: cr.accent.primary.sysPrimary,\r\n            shadowOffset: { width: 0, height: 0 },\r\n            shadowOpacity: 0.08,\r\n            shadowRadius: 4,\r\n          },\r\n        ]}\r\n      >\r\n        {/* Attach button */}\r\n        {onAttach && (\r\n          <Pressable\r\n            onPress={onAttach}\r\n            disabled={disabled}\r\n            style={({ pressed }) => [\r\n              tokenStyles.attachBtn,\r\n              pressed && styles.pressed,\r\n            ]}\r\n            accessibilityRole=\"button\"\r\n            accessibilityLabel=\"Add attachment\"\r\n          >\r\n            <Ionicons\r\n              name=\"add\"\r\n              size={ico.sysSizeSm}\r\n              color={\r\n                disabled\r\n                  ? cr.surface.surface.sysOnSurfaceVariant\r\n                  : cr.surface.surface.sysOnSurface\r\n              }\r\n            />\r\n          </Pressable>\r\n        )}\r\n\r\n        {/* Text field */}\r\n        <TextInput\r\n          ref={inputRef}\r\n          value={value}\r\n          onChangeText={onChangeText}\r\n          placeholder={placeholder}\r\n          placeholderTextColor={cr.surface.surface.sysOnSurfaceVariant}\r\n          editable={!disabled}\r\n          multiline\r\n          scrollEnabled={inputHeight >= 120}\r\n          onContentSizeChange={handleContentSizeChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          style={[\r\n            styles.textInput,\r\n            {\r\n              color: cr.surface.surface.sysOnSurface,\r\n              fontSize: 16,\r\n              lineHeight: 24,\r\n              height: inputHeight,\r\n            },\r\n          ]}\r\n          accessibilityLabel={placeholder}\r\n          returnKeyType=\"default\"\r\n        />\r\n\r\n        {/* Send button */}\r\n        <Pressable\r\n          onPress={canSend ? onSend : undefined}\r\n          disabled={!canSend}\r\n          style={({ pressed }) => [\r\n            tokenStyles.sendBtn,\r\n            pressed && canSend && styles.pressed,\r\n          ]}\r\n          accessibilityRole=\"button\"\r\n          accessibilityLabel=\"Send\"\r\n          accessibilityState={{ disabled: !canSend }}\r\n        >\r\n          <Ionicons\r\n            name=\"arrow-up\"\r\n            size={ico.sysSizeSm}\r\n            color={\r\n              canSend\r\n                ? cr.custom.warning.sysOnWarning\r\n                : cr.surface.surface.sysOnSurfaceVariant\r\n            }\r\n          />\r\n        </Pressable>\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  wrapper: {\r\n    gap: 4,\r\n  },\r\n  disabled: {\r\n    opacity: 0.48,\r\n  },\r\n  inputRow: {\r\n    flexDirection: 'row',\r\n    alignItems: 'flex-end',\r\n  },\r\n  textInput: {\r\n    flex: 1,\r\n    includeFontPadding: false,\r\n    padding: 0,\r\n    margin: 0,\r\n  },\r\n  attachStrip: {\r\n    flexShrink: 0,\r\n  },\r\n  attachStripContent: {\r\n    flexDirection: 'row',\r\n    gap: 8,\r\n    paddingHorizontal: 4,\r\n  },\r\n  attachItem: {\r\n    position: 'relative',\r\n  },\r\n  removeBtn: {\r\n    position: 'absolute',\r\n    top: -4,\r\n    right: -4,\r\n    backgroundColor: '#fff',\r\n    borderRadius: 8,\r\n  },\r\n  pressed: {\r\n    opacity: 0.7,\r\n  },\r\n});\r\n"],"names":["ChatInput","value","onChangeText","onSend","onAttach","placeholder","attachments","onRemoveAttachment","disabled","style","colorRoles","cr","dimensions","dim","iconography","ico","useTheme","isFocused","setIsFocused","useState","inputHeight","setInputHeight","inputRef","useRef","handleContentSizeChange","useCallback","e","newHeight","Math","max","min","nativeEvent","contentSize","height","hasText","trim","length","hasAttachments","canSend","tokenStyles","useMemo","container","borderRadius","sysRadiusLg","borderWidth","sysStrokeMedium","sysStrokeThin","borderColor","accent","primary","sysPrimary","outline","sysOutlineVariant","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","paddingVertical","spacing","padding","sysPadding8","paddingHorizontal","sysPadding12","gap","attachBtn","width","sysRadiusFull","alignItems","justifyContent","flexShrink","sendBtn","custom","warning","sysWarning","sysSurfaceContainerHighest","attachThumb","sysRadiusSm","overflow","View","styles","wrapper","ScrollView","horizontal","showsHorizontalScrollIndicator","attachStrip","contentContainerStyle","attachStripContent","map","att","i","attachItem","Image","source","uri","resizeMode","accessibilityLabel","Pressable","onPress","removeBtn","accessibilityRole","Ionicons","name","size","color","sysOnSurfaceVariant","inputRow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","pressed","sysSizeSm","sysOnSurface","TextInput","ref","placeholderTextColor","editable","multiline","scrollEnabled","onContentSizeChange","onFocus","onBlur","textInput","fontSize","lineHeight","returnKeyType","undefined","accessibilityState","sysOnWarning","StyleSheet","create","opacity","flexDirection","flex","includeFontPadding","margin","position","top","right"],"mappings":"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"}