@compsych-ui-components/react-native 7.0.5 → 7.0.7

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

@@ -1 +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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"}
+{"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        paddingVertical: dim.spacing.padding.sysPadding12,\r\n        paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n      },\r\n      bubbleIncoming: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n        borderTopLeftRadius: dim.borderRadius.sysRadiusLg,\r\n        borderTopRightRadius: dim.borderRadius.sysRadiusLg,\r\n        borderBottomLeftRadius: dim.borderRadius.sysRadiusXs,\r\n        borderBottomRightRadius: dim.borderRadius.sysRadiusXs,\r\n      },\r\n      bubbleOutgoing: {\r\n        backgroundColor: cr.accent.primary.sysPrimary,\r\n        borderTopLeftRadius: dim.borderRadius.sysRadiusXl,\r\n        borderTopRightRadius: dim.borderRadius.sysRadiusXl,\r\n        borderBottomLeftRadius: dim.borderRadius.sysRadiusXl,\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 style={styles.bubbleWrapper}>\r\n        {/* Bubble */}\r\n        <View\r\n          style={[\r\n            tokenStyles.bubble,\r\n            isOutgoing\r\n              ? tokenStyles.bubbleOutgoing\r\n              : tokenStyles.bubbleIncoming,\r\n          ]}\r\n        >\r\n          <BodyText variant=\"medium\" color={textColor}>\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    paddingRight: 64,\r\n  },\r\n  rowOutgoing: {\r\n    justifyContent: 'flex-end',\r\n    paddingLeft: 32,\r\n  },\r\n  metaIncoming: {\r\n    justifyContent: 'flex-start',\r\n  },\r\n  metaOutgoing: {\r\n    justifyContent: 'flex-end',\r\n  },\r\n  bubbleWrapper: {},\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","paddingVertical","spacing","padding","sysPadding12","paddingHorizontal","sysPadding16","bubbleIncoming","backgroundColor","surface","surfaceContainer","sysSurfaceContainer","borderTopLeftRadius","borderRadius","sysRadiusLg","borderTopRightRadius","borderBottomLeftRadius","sysRadiusXs","borderBottomRightRadius","bubbleOutgoing","accent","primary","sysPrimary","sysRadiusXl","metaRow","flexDirection","alignItems","gap","sysPadding8","marginTop","sysPadding4","reactionBtn","sysPadding2","textColor","sysOnPrimary","sysOnSurface","timestampColor","sysOnSurfaceVariant","iconColor","iconSize","sysSizeXs","View","styles","row","rowOutgoing","rowIncoming","bubbleWrapper","BodyText","color","metaOutgoing","metaIncoming","Pressable","onPress","pressed","accessibilityRole","accessibilityLabel","Ionicons","name","size","StyleSheet","create","width","justifyContent","paddingRight","paddingLeft","opacity"],"mappings":"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"}

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

@@ -13,6 +13,8 @@ export interface ChatInputProps {
     attachments?: ChatAttachment[];
     onRemoveAttachment?: (index: number) => void;
     disabled?: boolean;
+    /** Optional status banner rendered above the input (e.g. <StatusChip />) */
+    statusChip?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function ChatInput({ value, onChangeText, onSend, onAttach, placeholder, attachments, onRemoveAttachment, disabled, style, }: ChatInputProps): React.JSX.Element;
+export declare function ChatInput({ value, onChangeText, onSend, onAttach, placeholder, attachments, onRemoveAttachment, disabled, statusChip, style, }: ChatInputProps): React.JSX.Element;

package/src/components/ChatInput/index.js

@@ -54,11 +54,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function ChatInput({ value, onChangeText, onSend, onAttach, placeholder = 'Ask Sol Anything...', attachments, onRemoveAttachment, disabled = false, style }) {
+function ChatInput({ value, onChangeText, onSend, onAttach, placeholder = 'Ask Sol Anything...', attachments, onRemoveAttachment, disabled = false, statusChip, 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 [inputHeight, setInputHeight] = (0, _react.useState)(24);
     const handleContentSizeChange = (0, _react.useCallback)((e)=>{
         const newHeight = Math.max(24, Math.min(120, e.nativeEvent.contentSize.height));
         setInputHeight(newHeight);
@@ -108,112 +108,119 @@ function ChatInput({ value, onChangeText, onSend, onAttach, placeholder = 'Ask S
     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))
-            }),
+            statusChip,
             /*#__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
-                    }
+                    disabled && styles.disabled
                 ],
                 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
-                        })
+                    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.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),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
                         style: [
-                            styles.textInput,
-                            {
-                                color: cr.surface.surface.sysOnSurface,
-                                fontSize: 16,
-                                lineHeight: 24,
-                                height: inputHeight
+                            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
                             }
                         ],
-                        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
-                        })
+                        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,
+                                onFocus: ()=>setIsFocused(true),
+                                onBlur: ()=>setIsFocused(false),
+                                onContentSizeChange: handleContentSizeChange,
+                                scrollEnabled: inputHeight >= 120,
+                                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
+                                })
+                            })
+                        ]
                     })
                 ]
             })
@@ -222,7 +229,7 @@ function ChatInput({ value, onChangeText, onSend, onAttach, placeholder = 'Ask S
 }
 const styles = _reactnative.StyleSheet.create({
     wrapper: {
-        gap: 4
+        gap: 12
     },
     disabled: {
         opacity: 0.48

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

@@ -1 +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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"}
+{"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\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  /** Optional status banner rendered above the input (e.g. <StatusChip />) */\r\n  statusChip?: React.ReactNode;\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  statusChip,\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 inputRef = useRef<TextInput>(null);\r\n  const [inputHeight, setInputHeight] = useState(24);\r\n\r\n  const handleContentSizeChange = useCallback(\r\n    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {\r\n      const newHeight = Math.max(\r\n        24,\r\n        Math.min(120, e.nativeEvent.contentSize.height),\r\n      );\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, style]}>\r\n      {/* Status chip */}\r\n      {statusChip}\r\n\r\n      {/* Input row */}\r\n      <View style={[disabled && styles.disabled]}>\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            onFocus={() => setIsFocused(true)}\r\n            onBlur={() => setIsFocused(false)}\r\n            onContentSizeChange={handleContentSizeChange}\r\n            scrollEnabled={inputHeight >= 120}\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    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  wrapper: {\r\n    gap: 12,\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","statusChip","style","colorRoles","cr","dimensions","dim","iconography","ico","useTheme","isFocused","setIsFocused","useState","inputRef","useRef","inputHeight","setInputHeight","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","onFocus","onBlur","onContentSizeChange","scrollEnabled","textInput","fontSize","lineHeight","returnKeyType","undefined","accessibilityState","sysOnWarning","StyleSheet","create","opacity","flexDirection","flex","includeFontPadding","margin","position","top","right"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../packages/react-native/src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\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\n\r\nexport type CheckboxSize = 'sm' | 'md';\r\nexport type CheckboxCheckedState = boolean | 'indeterminate';\r\n\r\nexport interface CheckboxProps {\r\n  checked?: CheckboxCheckedState;\r\n  defaultChecked?: boolean;\r\n  onChange?: (checked: boolean) => void;\r\n  size?: CheckboxSize;\r\n  label?: string;\r\n  description?: string;\r\n  disabled?: boolean;\r\n  invalid?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Checkbox({\r\n  checked: checkedProp,\r\n  defaultChecked = false,\r\n  onChange,\r\n  size = 'md',\r\n  label,\r\n  description,\r\n  disabled = false,\r\n  invalid = false,\r\n  style,\r\n}: CheckboxProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n  const [internalChecked, setInternalChecked] =\r\n    useState<boolean>(defaultChecked);\r\n\r\n  const SIZE_TOKENS = useMemo(\r\n    () => ({\r\n      sm: {\r\n        box: 20,\r\n        hitArea: 36,\r\n        fontSize: ts.bodySmall.sysFontSize,\r\n        lineHeight: ts.bodySmall.sysLineHeight,\r\n        iconSize: 13,\r\n      },\r\n      md: {\r\n        box: 24,\r\n        hitArea: 40,\r\n        fontSize: ts.bodyMedium.sysFontSize,\r\n        lineHeight: ts.bodyMedium.sysLineHeight,\r\n        iconSize: 16,\r\n      },\r\n    }),\r\n    [ts],\r\n  );\r\n\r\n  const isControlled = checkedProp !== undefined;\r\n  const checkedState: CheckboxCheckedState = isControlled\r\n    ? checkedProp\r\n    : internalChecked;\r\n\r\n  const isChecked = checkedState === true;\r\n  const isIndeterminate = checkedState === 'indeterminate';\r\n  const isSelected = isChecked || isIndeterminate;\r\n\r\n  const s = SIZE_TOKENS[size];\r\n  function handlePress() {\r\n    if (disabled) return;\r\n    // Indeterminate → true on activation (matches HTML spec)\r\n    const next = checkedState === true ? false : true;\r\n    if (!isControlled) setInternalChecked(next);\r\n    onChange?.(next);\r\n  }\r\n\r\n  const borderColor = invalid\r\n    ? cr.error.sysError\r\n    : isSelected\r\n      ? 'transparent'\r\n      : cr.outline.sysOutlineFixed;\r\n\r\n  const boxBg = isSelected\r\n    ? invalid\r\n      ? cr.error.sysError\r\n      : cr.accent.primary.sysPrimary\r\n    : 'transparent';\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={handlePress}\r\n      accessibilityRole=\"checkbox\"\r\n      accessibilityLabel={label}\r\n      accessibilityState={{\r\n        checked: isIndeterminate ? 'mixed' : isChecked,\r\n        disabled,\r\n      }}\r\n      style={() => [styles.root, disabled && styles.disabled, style]}\r\n    >\r\n      {({ pressed }: { pressed: boolean }) => (\r\n        <>\r\n          {/* Hit-area / state-layer circle */}\r\n          <View\r\n            style={[\r\n              styles.hitArea,\r\n              {\r\n                width: s.hitArea,\r\n                height: s.hitArea,\r\n                borderRadius: s.hitArea / 2,\r\n                backgroundColor:\r\n                  pressed && !disabled\r\n                    ? cr.transparent.neutral.sysBlack10\r\n                    : 'transparent',\r\n              },\r\n            ]}\r\n          >\r\n            {/* Checkbox box */}\r\n            <View\r\n              style={{\r\n                width: s.box,\r\n                height: s.box,\r\n                borderRadius: dim.borderRadius.sysRadiusXs,\r\n                borderWidth: isSelected ? 0 : dim.borderWidth.sysStrokeMedium,\r\n                borderColor,\r\n                backgroundColor: boxBg,\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n              }}\r\n            >\r\n              {isChecked && !isIndeterminate && (\r\n                <Ionicons\r\n                  name=\"checkmark\"\r\n                  size={s.iconSize}\r\n                  color={cr.accent.primary.sysOnPrimary}\r\n                />\r\n              )}\r\n              {isIndeterminate && (\r\n                <View\r\n                  style={{\r\n                    width: s.box * 0.5,\r\n                    height: 2,\r\n                    borderRadius: 1,\r\n                    backgroundColor: cr.accent.primary.sysOnPrimary,\r\n                  }}\r\n                />\r\n              )}\r\n            </View>\r\n          </View>\r\n\r\n          {(label || description) && (\r\n            <View style={[styles.textBlock, { gap: 2 }]}>\r\n              {label && (\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurface,\r\n                    fontSize: s.fontSize,\r\n                    lineHeight: s.lineHeight,\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {label}\r\n                </Text>\r\n              )}\r\n              {description && (\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurfaceVariant,\r\n                    fontSize: s.fontSize - 2,\r\n                    lineHeight: s.lineHeight - 2,\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {description}\r\n                </Text>\r\n              )}\r\n            </View>\r\n          )}\r\n        </>\r\n      )}\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  hitArea: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  textBlock: {\r\n    flex: 1,\r\n    flexDirection: 'column',\r\n  },\r\n  disabled: {\r\n    opacity: 0.48,\r\n  },\r\n});\r\n"],"names":["Checkbox","checked","checkedProp","defaultChecked","onChange","size","label","description","disabled","invalid","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","internalChecked","setInternalChecked","useState","SIZE_TOKENS","useMemo","sm","box","hitArea","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","iconSize","md","bodyMedium","isControlled","undefined","checkedState","isChecked","isIndeterminate","isSelected","s","handlePress","next","borderColor","error","sysError","outline","sysOutlineFixed","boxBg","accent","primary","sysPrimary","Pressable","onPress","accessibilityRole","accessibilityLabel","accessibilityState","styles","root","pressed","View","width","height","borderRadius","backgroundColor","transparent","neutral","sysBlack10","sysRadiusXs","borderWidth","sysStrokeMedium","alignItems","justifyContent","Ionicons","name","color","sysOnPrimary","textBlock","gap","Text","surface","sysOnSurface","includeFontPadding","sysOnSurfaceVariant","StyleSheet","create","flexDirection","flex","opacity"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  type PressableStateCallbackType,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\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\n\r\nexport type CheckboxSize = 'sm' | 'md';\r\nexport type CheckboxCheckedState = boolean | 'indeterminate';\r\n\r\nexport interface CheckboxProps {\r\n  checked?: CheckboxCheckedState;\r\n  defaultChecked?: boolean;\r\n  onChange?: (checked: boolean) => void;\r\n  size?: CheckboxSize;\r\n  label?: string;\r\n  description?: string;\r\n  disabled?: boolean;\r\n  invalid?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Checkbox({\r\n  checked: checkedProp,\r\n  defaultChecked = false,\r\n  onChange,\r\n  size = 'md',\r\n  label,\r\n  description,\r\n  disabled = false,\r\n  invalid = false,\r\n  style,\r\n}: CheckboxProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n  const [internalChecked, setInternalChecked] =\r\n    useState<boolean>(defaultChecked);\r\n\r\n  const SIZE_TOKENS = useMemo(\r\n    () => ({\r\n      sm: {\r\n        box: 20,\r\n        hitArea: 36,\r\n        fontSize: ts.bodySmall.sysFontSize,\r\n        lineHeight: ts.bodySmall.sysLineHeight,\r\n        iconSize: 13,\r\n      },\r\n      md: {\r\n        box: 24,\r\n        hitArea: 40,\r\n        fontSize: ts.bodyMedium.sysFontSize,\r\n        lineHeight: ts.bodyMedium.sysLineHeight,\r\n        iconSize: 16,\r\n      },\r\n    }),\r\n    [ts],\r\n  );\r\n\r\n  const isControlled = checkedProp !== undefined;\r\n  const checkedState: CheckboxCheckedState = isControlled\r\n    ? checkedProp\r\n    : internalChecked;\r\n\r\n  const isChecked = checkedState === true;\r\n  const isIndeterminate = checkedState === 'indeterminate';\r\n  const isSelected = isChecked || isIndeterminate;\r\n\r\n  const s = SIZE_TOKENS[size];\r\n  function handlePress() {\r\n    if (disabled) return;\r\n    // Indeterminate → true on activation (matches HTML spec)\r\n    const next = checkedState === true ? false : true;\r\n    if (!isControlled) setInternalChecked(next);\r\n    onChange?.(next);\r\n  }\r\n\r\n  const borderColor = invalid\r\n    ? cr.error.sysError\r\n    : isSelected\r\n      ? 'transparent'\r\n      : cr.outline.sysOutlineFixed;\r\n\r\n  const boxBg = isSelected\r\n    ? invalid\r\n      ? cr.error.sysError\r\n      : cr.accent.primary.sysPrimary\r\n    : 'transparent';\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={handlePress}\r\n      accessibilityRole=\"checkbox\"\r\n      accessibilityLabel={label}\r\n      accessibilityState={{\r\n        checked: isIndeterminate ? 'mixed' : isChecked,\r\n        disabled,\r\n      }}\r\n      style={() => [styles.root, disabled && styles.disabled, style]}\r\n    >\r\n      {({ pressed }: PressableStateCallbackType) => (\r\n        <>\r\n          {/* Hit-area / state-layer circle */}\r\n          <View\r\n            style={[\r\n              styles.hitArea,\r\n              {\r\n                width: s.hitArea,\r\n                height: s.hitArea,\r\n                borderRadius: s.hitArea / 2,\r\n                backgroundColor:\r\n                  pressed && !disabled\r\n                    ? cr.transparent.neutral.sysBlack10\r\n                    : 'transparent',\r\n              },\r\n            ]}\r\n          >\r\n            {/* Checkbox box */}\r\n            <View\r\n              style={{\r\n                width: s.box,\r\n                height: s.box,\r\n                borderRadius: dim.borderRadius.sysRadiusXs,\r\n                borderWidth: isSelected ? 0 : dim.borderWidth.sysStrokeMedium,\r\n                borderColor,\r\n                backgroundColor: boxBg,\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n              }}\r\n            >\r\n              {isChecked && !isIndeterminate && (\r\n                <Ionicons\r\n                  name=\"checkmark\"\r\n                  size={s.iconSize}\r\n                  color={cr.accent.primary.sysOnPrimary}\r\n                />\r\n              )}\r\n              {isIndeterminate && (\r\n                <View\r\n                  style={{\r\n                    width: s.box * 0.5,\r\n                    height: 2,\r\n                    borderRadius: 1,\r\n                    backgroundColor: cr.accent.primary.sysOnPrimary,\r\n                  }}\r\n                />\r\n              )}\r\n            </View>\r\n          </View>\r\n\r\n          {(label || description) && (\r\n            <View style={[styles.textBlock, { gap: 2 }]}>\r\n              {label && (\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurface,\r\n                    fontSize: s.fontSize,\r\n                    lineHeight: s.lineHeight,\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {label}\r\n                </Text>\r\n              )}\r\n              {description && (\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurfaceVariant,\r\n                    fontSize: s.fontSize - 2,\r\n                    lineHeight: s.lineHeight - 2,\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {description}\r\n                </Text>\r\n              )}\r\n            </View>\r\n          )}\r\n        </>\r\n      )}\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  hitArea: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  textBlock: {\r\n    flex: 1,\r\n    flexDirection: 'column',\r\n  },\r\n  disabled: {\r\n    opacity: 0.48,\r\n  },\r\n});\r\n"],"names":["Checkbox","checked","checkedProp","defaultChecked","onChange","size","label","description","disabled","invalid","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","internalChecked","setInternalChecked","useState","SIZE_TOKENS","useMemo","sm","box","hitArea","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","iconSize","md","bodyMedium","isControlled","undefined","checkedState","isChecked","isIndeterminate","isSelected","s","handlePress","next","borderColor","error","sysError","outline","sysOutlineFixed","boxBg","accent","primary","sysPrimary","Pressable","onPress","accessibilityRole","accessibilityLabel","accessibilityState","styles","root","pressed","View","width","height","borderRadius","backgroundColor","transparent","neutral","sysBlack10","sysRadiusXs","borderWidth","sysStrokeMedium","alignItems","justifyContent","Ionicons","name","color","sysOnPrimary","textBlock","gap","Text","surface","sysOnSurface","includeFontPadding","sysOnSurfaceVariant","StyleSheet","create","flexDirection","flex","opacity"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface DateTimePickerProps {
+    selectedDate: string | null;
+    onSelectDate: (date: string) => void;
+    selectedTime: string | null;
+    onSelectTime: (time: string) => void;
+    availableTimes: string[];
+    availableTimeLabel: string;
+    availableDates?: string[];
+    maxMonthsAhead?: number;
+    /** Display-only label for the user's current language, e.g. "English". Not interactive. */
+    languageLabel?: string;
+    /** Display-only label for the user's current timezone, e.g. "America/Chicago". Not interactive. */
+    timezoneLabel?: string;
+}
+export declare function DateTimePicker({ selectedDate, onSelectDate, selectedTime, onSelectTime, availableTimes, availableTimeLabel, availableDates, maxMonthsAhead, languageLabel, timezoneLabel, }: DateTimePickerProps): React.JSX.Element;