@compsych/mobile-ui 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -13,7 +13,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "prepare": "husky"
+    "prepare": "husky",
+    "postinstall": "rm -rf node_modules/react-native node_modules/react node_modules/react-native-linear-gradient node_modules/react-native-svg node_modules/lucide-react-native"
   },
   "keywords": [
     "react-native",
@@ -32,17 +33,12 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "expo-font": ">=13.0.0",
-    "expo-linear-gradient": ">=13.0.0",
     "lucide-react-native": ">=0.400.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
+    "react-native-linear-gradient": ">=2.0.0",
     "react-native-svg": ">=15.0.0"
   },
-  "peerDependenciesMeta": {
-    "expo-linear-gradient": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/plugin-transform-flow-strip-types": "^7.27.1",

package/src/components/ChatBubble/index.tsx

@@ -39,19 +39,21 @@ export function ChatBubble({
   const tokenStyles = useMemo(
     () => ({
       bubble: {
-        maxWidth: '80%' as const,
-        paddingVertical: dim.spacing.padding.sysPadding8,
-        paddingHorizontal: dim.spacing.padding.sysPadding12,
-        borderRadius: dim.borderRadius.sysRadiusMd,
+        paddingVertical: dim.spacing.padding.sysPadding12,
+        paddingHorizontal: dim.spacing.padding.sysPadding16,
       },
       bubbleIncoming: {
-        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-        borderWidth: dim.borderWidth.sysStrokeThin,
-        borderColor: cr.outline.sysOutlineVariant,
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
+        borderTopLeftRadius: dim.borderRadius.sysRadiusLg,
+        borderTopRightRadius: dim.borderRadius.sysRadiusLg,
         borderBottomLeftRadius: dim.borderRadius.sysRadiusXs,
+        borderBottomRightRadius: dim.borderRadius.sysRadiusXs,
       },
       bubbleOutgoing: {
         backgroundColor: cr.accent.primary.sysPrimary,
+        borderTopLeftRadius: dim.borderRadius.sysRadiusXl,
+        borderTopRightRadius: dim.borderRadius.sysRadiusXl,
+        borderBottomLeftRadius: dim.borderRadius.sysRadiusXl,
         borderBottomRightRadius: dim.borderRadius.sysRadiusXs,
       },
       metaRow: {
@@ -84,7 +86,7 @@ export function ChatBubble({
         style,
       ]}
     >
-      <View>
+      <View style={styles.bubbleWrapper}>
         {/* Bubble */}
         <View
           style={[
@@ -94,11 +96,7 @@ export function ChatBubble({
               : tokenStyles.bubbleIncoming,
           ]}
         >
-          <BodyText
-            variant="medium"
-            color={textColor}
-            style={styles.messageText}
-          >
+          <BodyText variant="medium" color={textColor}>
             {message}
           </BodyText>
         </View>
@@ -168,9 +166,11 @@ const styles = StyleSheet.create({
   },
   rowIncoming: {
     justifyContent: 'flex-start',
+    paddingRight: 64,
   },
   rowOutgoing: {
     justifyContent: 'flex-end',
+    paddingLeft: 32,
   },
   metaIncoming: {
     justifyContent: 'flex-start',
@@ -178,9 +178,7 @@ const styles = StyleSheet.create({
   metaOutgoing: {
     justifyContent: 'flex-end',
   },
-  messageText: {
-    flexShrink: 1,
-  },
+  bubbleWrapper: {},
   pressed: {
     opacity: 0.6,
   },

package/src/components/ChatInput/index.tsx

@@ -32,6 +32,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>;
 }
 
@@ -44,6 +46,7 @@ export function ChatInput({
   attachments,
   onRemoveAttachment,
   disabled = false,
+  statusChip,
   style,
 }: ChatInputProps) {
   const { colorRoles: cr, dimensions: dim, iconography: ico } = useTheme();
@@ -111,128 +114,134 @@ export function ChatInput({
   );
 
   return (
-    <View style={[styles.wrapper, disabled && styles.disabled, style]}>
-      {/* Attachment strip */}
-      {hasAttachments && (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={styles.attachStrip}
-          contentContainerStyle={styles.attachStripContent}
+    <View style={[styles.wrapper, style]}>
+      {/* Status chip */}
+      {statusChip}
+
+      {/* Input row */}
+      <View style={[disabled && styles.disabled]}>
+        {/* Attachment strip */}
+        {hasAttachments && (
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={styles.attachStrip}
+            contentContainerStyle={styles.attachStripContent}
+          >
+            {attachments!.map((att, i) => (
+              <View key={i} style={styles.attachItem}>
+                <Image
+                  source={att.source ?? { uri: att.uri }}
+                  style={tokenStyles.attachThumb}
+                  resizeMode="cover"
+                  accessibilityLabel={`Attachment ${i + 1}`}
+                />
+                {onRemoveAttachment && (
+                  <Pressable
+                    onPress={() => onRemoveAttachment(i)}
+                    style={styles.removeBtn}
+                    accessibilityRole="button"
+                    accessibilityLabel={`Remove attachment ${i + 1}`}
+                  >
+                    <Ionicons
+                      name="close-circle"
+                      size={16}
+                      color={cr.surface.surface.sysOnSurfaceVariant}
+                    />
+                  </Pressable>
+                )}
+              </View>
+            ))}
+          </ScrollView>
+        )}
+
+        {/* Input row */}
+        <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,
+            },
+          ]}
         >
-          {attachments!.map((att, i) => (
-            <View key={i} style={styles.attachItem}>
-              <Image
-                source={att.source ?? { uri: att.uri }}
-                style={tokenStyles.attachThumb}
-                resizeMode="cover"
-                accessibilityLabel={`Attachment ${i + 1}`}
+          {/* Attach button */}
+          {onAttach && (
+            <Pressable
+              onPress={onAttach}
+              disabled={disabled}
+              style={({ pressed }) => [
+                tokenStyles.attachBtn,
+                pressed && styles.pressed,
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel="Add attachment"
+            >
+              <Ionicons
+                name="add"
+                size={ico.sysSizeSm}
+                color={
+                  disabled
+                    ? cr.surface.surface.sysOnSurfaceVariant
+                    : cr.surface.surface.sysOnSurface
+                }
               />
-              {onRemoveAttachment && (
-                <Pressable
-                  onPress={() => onRemoveAttachment(i)}
-                  style={styles.removeBtn}
-                  accessibilityRole="button"
-                  accessibilityLabel={`Remove attachment ${i + 1}`}
-                >
-                  <Ionicons
-                    name="close-circle"
-                    size={16}
-                    color={cr.surface.surface.sysOnSurfaceVariant}
-                  />
-                </Pressable>
-              )}
-            </View>
-          ))}
-        </ScrollView>
-      )}
+            </Pressable>
+          )}
 
-      {/* Input row */}
-      <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,
-          },
-        ]}
-      >
-        {/* Attach button */}
-        {onAttach && (
+          {/* Text field */}
+          <TextInput
+            ref={inputRef}
+            value={value}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            placeholderTextColor={cr.surface.surface.sysOnSurfaceVariant}
+            editable={!disabled}
+            multiline
+            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"
+          />
+
+          {/* Send button */}
           <Pressable
-            onPress={onAttach}
-            disabled={disabled}
+            onPress={canSend ? onSend : undefined}
+            disabled={!canSend}
             style={({ pressed }) => [
-              tokenStyles.attachBtn,
-              pressed && styles.pressed,
+              tokenStyles.sendBtn,
+              pressed && canSend && styles.pressed,
             ]}
             accessibilityRole="button"
-            accessibilityLabel="Add attachment"
+            accessibilityLabel="Send"
+            accessibilityState={{ disabled: !canSend }}
           >
             <Ionicons
-              name="add"
+              name="arrow-up"
               size={ico.sysSizeSm}
               color={
-                disabled
-                  ? cr.surface.surface.sysOnSurfaceVariant
-                  : cr.surface.surface.sysOnSurface
+                canSend
+                  ? cr.custom.warning.sysOnWarning
+                  : cr.surface.surface.sysOnSurfaceVariant
               }
             />
           </Pressable>
-        )}
-
-        {/* Text field */}
-        <TextInput
-          ref={inputRef}
-          value={value}
-          onChangeText={onChangeText}
-          placeholder={placeholder}
-          placeholderTextColor={cr.surface.surface.sysOnSurfaceVariant}
-          editable={!disabled}
-          multiline
-          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"
-        />
-
-        {/* Send button */}
-        <Pressable
-          onPress={canSend ? onSend : undefined}
-          disabled={!canSend}
-          style={({ pressed }) => [
-            tokenStyles.sendBtn,
-            pressed && canSend && styles.pressed,
-          ]}
-          accessibilityRole="button"
-          accessibilityLabel="Send"
-          accessibilityState={{ disabled: !canSend }}
-        >
-          <Ionicons
-            name="arrow-up"
-            size={ico.sysSizeSm}
-            color={
-              canSend
-                ? cr.custom.warning.sysOnWarning
-                : cr.surface.surface.sysOnSurfaceVariant
-            }
-          />
-        </Pressable>
+        </View>
       </View>
     </View>
   );
@@ -240,7 +249,7 @@ export function ChatInput({
 
 const styles = StyleSheet.create({
   wrapper: {
-    gap: 4,
+    gap: 12,
   },
   disabled: {
     opacity: 0.48,

package/src/components/ServiceCard/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 
 import {
+  I18nManager,
   Image,
   type ImageSourcePropType,
   Pressable,
@@ -10,7 +11,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { LinearGradient } from 'expo-linear-gradient';
+import LinearGradient from 'react-native-linear-gradient';
 
 import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
 import { useTheme } from '../../theme';
@@ -202,13 +203,14 @@ export function ServiceCard({
       borderWidth: v.borderWidth,
       borderRadius:
         variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,
-      paddingHorizontal:
-        variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,
-      paddingVertical:
-        variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,
+
       opacity: disabled ? 0.48 : 1,
     },
     v.elevated && ELEVATION,
+    variant !== 'doubled' && {
+      paddingHorizontal: s.paddingH,
+      paddingVertical: s.paddingV,
+    },
     fullWidth && { alignSelf: 'stretch' as const },
     isRow ? styles.rowRoot : styles.colRoot,
     !isRow && variant !== 'image' && { gap: s.gap },
@@ -240,10 +242,13 @@ export function ServiceCard({
     const doubledInnerStyle: StyleProp<ViewStyle> = [
       styles.colRoot,
       {
-        borderRadius: s.borderRadius,
-        paddingHorizontal: s.paddingH,
-        paddingVertical: s.paddingV,
-        gap: dim.spacing.padding.sysPadding24,
+        alignSelf: 'stretch',
+        borderRadius: dim.borderRadius.sysRadiusXl,
+        borderColor: cr.accent.primary.sysOnPrimary,
+        borderWidth: dim.spacing.padding.sysPadding8,
+        paddingHorizontal: dim.spacing.padding.sysPadding8,
+        paddingVertical: dim.spacing.padding.sysPadding16,
+        gap: dim.spacing.padding.sysPadding12,
       },
     ];
 
@@ -267,17 +272,21 @@ export function ServiceCard({
       </>
     );
 
-    inner = gradient ? (
-      <LinearGradient
-        colors={gradient}
-        start={gradientStart ?? { x: 0, y: 0 }}
-        end={gradientEnd ?? { x: 0, y: 1 }}
-        style={doubledInnerStyle}
+    inner = (
+      <View
+        style={[doubledInnerStyle, !gradient && { backgroundColor: v.innerBg }]}
       >
-        {doubledInnerContent}
-      </LinearGradient>
-    ) : (
-      <View style={[doubledInnerStyle, { backgroundColor: v.innerBg }]}>
+        {gradient && (
+          <LinearGradient
+            colors={gradient}
+            start={gradientStart ?? { x: 0, y: 0 }}
+            end={gradientEnd ?? { x: 0, y: 1 }}
+            style={[
+              StyleSheet.absoluteFillObject,
+              { borderRadius: dim.borderRadius.sysRadiusLg },
+            ]}
+          />
+        )}
         {doubledInnerContent}
       </View>
     );
@@ -296,7 +305,11 @@ export function ServiceCard({
               accessible={false}
             />
             <LinearGradient
-              colors={['rgba(0,0,0,0.4)', 'rgba(0,0,0,0.05)', 'rgba(0,0,0,0.5)']}
+              colors={[
+                'rgba(0,0,0,0.4)',
+                'rgba(0,0,0,0.05)',
+                'rgba(0,0,0,0.5)',
+              ]}
               locations={[0.012, 0.268, 1]}
               style={[
                 { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
@@ -313,7 +326,11 @@ export function ServiceCard({
           <View style={{ flex: 1 }}>{textBlock}</View>
           {onPress && ChevronRight && (
             <View style={styles.imageArrowButton}>
-              <ChevronRight size={16} color={cr.surface.surface.sysOnSurface} strokeWidth={1.5} />
+              <ChevronRight
+                size={16}
+                color={cr.surface.surface.sysOnSurface}
+                strokeWidth={1.5}
+              />
             </View>
           )}
         </View>
@@ -352,7 +369,9 @@ export function ServiceCard({
             style={{
               position: 'absolute',
               bottom: s.paddingV,
-              right: s.paddingH,
+              ...(I18nManager.isRTL
+                ? { left: s.paddingH }
+                : { right: s.paddingH }),
             }}
             pointerEvents="none"
           >

package/src/components/StatusChip/StatusChip.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../theme';
+import { StatusChip } from './index';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('StatusChip', () => {
+  it('renders the label', () => {
+    renderWithTheme(<StatusChip label="10 minutes remaining" />);
+    expect(screen.getByText('10 minutes remaining')).toBeTruthy();
+  });
+
+  it('renders warning variant by default', () => {
+    renderWithTheme(<StatusChip label="Warning" />);
+    expect(screen.getByText('Warning')).toBeTruthy();
+  });
+
+  it('renders error variant', () => {
+    renderWithTheme(<StatusChip label="Session ended" variant="error" />);
+    expect(screen.getByText('Session ended')).toBeTruthy();
+  });
+
+  it('accepts a custom icon', () => {
+    renderWithTheme(<StatusChip label="Custom" icon="TimerIcon" />);
+    expect(screen.getByText('Custom')).toBeTruthy();
+  });
+
+  it('renders with left alignment', () => {
+    renderWithTheme(<StatusChip label="Left" align="left" />);
+    expect(screen.getByText('Left')).toBeTruthy();
+  });
+
+  it('renders with right alignment', () => {
+    renderWithTheme(<StatusChip label="Right" align="right" />);
+    expect(screen.getByText('Right')).toBeTruthy();
+  });
+
+  it('renders fullWidth', () => {
+    renderWithTheme(<StatusChip label="Full" fullWidth />);
+    expect(screen.getByText('Full')).toBeTruthy();
+  });
+});

package/src/components/StatusChip/index.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
+import { useTheme } from '../../theme';
+import { BodyText } from '../BodyText';
+
+export type StatusChipVariant = 'warning' | 'error';
+export type StatusChipAlign = 'left' | 'center' | 'right';
+
+export interface StatusChipProps {
+  label: string;
+  variant?: StatusChipVariant;
+  /** Icon name — defaults to ClockFadingIcon (warning) or ClockAlertIcon (error) */
+  icon?: IconName;
+  align?: StatusChipAlign;
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_ICONS: Record<StatusChipVariant, IconName> = {
+  warning: 'ClockFadingIcon',
+  error: 'ClockAlertIcon',
+};
+
+const JUSTIFY: Record<StatusChipAlign, 'flex-start' | 'center' | 'flex-end'> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+export function StatusChip({
+  label,
+  variant = 'warning',
+  icon,
+  align = 'center',
+  fullWidth = false,
+  style,
+}: StatusChipProps) {
+  const { colorRoles: cr } = useTheme();
+
+  const colors =
+    variant === 'warning'
+      ? {
+          bg: cr.custom.warning.sysWarningContainer,
+          text: cr.custom.warning.sysOnWarningContainer,
+        }
+      : {
+          bg: cr.error.sysErrorContainer,
+          text: cr.error.sysOnErrorContainer,
+        };
+
+  const iconName = icon ?? DEFAULT_ICONS[variant];
+  const IconComponent = resolveIcon(iconName);
+  const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP['small'];
+
+  return (
+    <View
+      style={[
+        styles.chip,
+        {
+          backgroundColor: colors.bg,
+          justifyContent: JUSTIFY[align],
+          alignSelf: fullWidth ? ('stretch' as const) : ('flex-start' as const),
+        },
+        style,
+      ]}
+    >
+      {IconComponent && (
+        <IconComponent size={iconPx} strokeWidth={iconSW} color={colors.text} />
+      )}
+      <BodyText variant="labelMedium" color={colors.text} numberOfLines={1}>
+        {label}
+      </BodyText>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 9999,
+    paddingHorizontal: 16,
+    paddingVertical: 4,
+    gap: 8,
+    height: 32,
+  },
+});

package/src/index.ts

@@ -132,6 +132,13 @@ export type {
 export { ChatInput } from './components/ChatInput';
 export type { ChatInputProps, ChatAttachment } from './components/ChatInput';
 
+export { StatusChip } from './components/StatusChip';
+export type {
+  StatusChipProps,
+  StatusChipVariant,
+  StatusChipAlign,
+} from './components/StatusChip';
+
 export { BodyText } from './components/BodyText';
 export type { BodyTextProps, BodyVariant } from './components/BodyText';