@compsych/mobile-ui 1.0.11 → 1.0.13

package/src/components/ChatInput/ChatInput.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ChatInput } from './index';
+
+jest.mock('@expo/vector-icons', () => ({
+  Ionicons: 'Ionicons',
+}));
+
+describe('ChatInput', () => {
+  it('renders placeholder text', () => {
+    const { getByPlaceholderText } = render(
+      <ChatInput
+        value=""
+        onChangeText={jest.fn()}
+        onSend={jest.fn()}
+        placeholder="Ask Sol Anything..."
+      />,
+    );
+    expect(getByPlaceholderText('Ask Sol Anything...')).toBeTruthy();
+  });
+
+  it('calls onChangeText when text is typed', () => {
+    const onChangeText = jest.fn();
+    const { getByPlaceholderText } = render(
+      <ChatInput
+        value=""
+        onChangeText={onChangeText}
+        onSend={jest.fn()}
+        placeholder="Type here"
+      />,
+    );
+    fireEvent.changeText(getByPlaceholderText('Type here'), 'Hello');
+    expect(onChangeText).toHaveBeenCalledWith('Hello');
+  });
+
+  it('calls onSend when send button is pressed and text is present', () => {
+    const onSend = jest.fn();
+    const { getByLabelText } = render(
+      <ChatInput value="Hello" onChangeText={jest.fn()} onSend={onSend} />,
+    );
+    fireEvent.press(getByLabelText('Send'));
+    expect(onSend).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onSend when text is empty', () => {
+    const onSend = jest.fn();
+    const { getByLabelText } = render(
+      <ChatInput value="" onChangeText={jest.fn()} onSend={onSend} />,
+    );
+    fireEvent.press(getByLabelText('Send'));
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it('renders attach button and calls onAttach when pressed', () => {
+    const onAttach = jest.fn();
+    const { getByLabelText } = render(
+      <ChatInput
+        value=""
+        onChangeText={jest.fn()}
+        onSend={jest.fn()}
+        onAttach={onAttach}
+      />,
+    );
+    fireEvent.press(getByLabelText('Add attachment'));
+    expect(onAttach).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render attach button when onAttach is not provided', () => {
+    const { queryByLabelText } = render(
+      <ChatInput value="" onChangeText={jest.fn()} onSend={jest.fn()} />,
+    );
+    expect(queryByLabelText('Add attachment')).toBeNull();
+  });
+
+  it('input is not editable when disabled', () => {
+    const { getByLabelText } = render(
+      <ChatInput
+        value=""
+        onChangeText={jest.fn()}
+        onSend={jest.fn()}
+        disabled
+        placeholder="Ask Sol Anything..."
+      />,
+    );
+    const input = getByLabelText('Ask Sol Anything...');
+    expect(input.props.editable).toBe(false);
+  });
+});

package/src/components/ChatInput/index.tsx

@@ -0,0 +1,263 @@
+import React, { useMemo, useRef, useState } from 'react';
+
+import {
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { useTheme } from '../../theme';
+
+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 function ChatInput({
+  value,
+  onChangeText,
+  onSend,
+  onAttach,
+  placeholder = 'Ask Sol Anything...',
+  attachments,
+  onRemoveAttachment,
+  disabled = false,
+  style,
+}: ChatInputProps) {
+  const { colorRoles: cr, dimensions: dim, iconography: ico } = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const hasText = value.trim().length > 0;
+  const hasAttachments = !!attachments && attachments.length > 0;
+  const canSend = (hasText || hasAttachments) && !disabled;
+
+  const tokenStyles = 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' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+      },
+      sendBtn: {
+        width: 32,
+        height: 32,
+        borderRadius: dim.borderRadius.sysRadiusFull,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        flexShrink: 0,
+        backgroundColor: canSend
+          ? cr.custom.warning.sysWarning
+          : cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+      },
+      attachThumb: {
+        width: 48,
+        height: 48,
+        borderRadius: dim.borderRadius.sysRadiusSm,
+        overflow: 'hidden' as const,
+      },
+    }),
+    [cr, dim, isFocused, canSend],
+  );
+
+  return (
+    <View style={[styles.wrapper, disabled && styles.disabled, style]}>
+      {/* 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,
+          },
+        ]}
+      >
+        {/* 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
+              }
+            />
+          </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)}
+          style={[
+            styles.textInput,
+            {
+              color: cr.surface.surface.sysOnSurface,
+              fontSize: 16,
+              lineHeight: 24,
+            },
+          ]}
+          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>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 4,
+  },
+  disabled: {
+    opacity: 0.48,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  textInput: {
+    flex: 1,
+    includeFontPadding: false,
+    padding: 0,
+    margin: 0,
+    maxHeight: 120,
+  },
+  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,
+  },
+});

package/src/components/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import {
   Pressable,
@@ -11,7 +11,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type CheckboxSize = 'sm' | 'md';
 export type CheckboxCheckedState = boolean | 'indeterminate';
@@ -28,25 +28,6 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
-const SIZE_TOKENS = {
-  sm: {
-    box: 20,
-    hitArea: 36,
-    fontSize: ts.bodySmall.sysFontSize,
-    lineHeight: ts.bodySmall.sysLineHeight,
-    iconSize: 13,
-  },
-  md: {
-    box: 24,
-    hitArea: 40,
-    fontSize: ts.bodyMedium.sysFontSize,
-    lineHeight: ts.bodyMedium.sysLineHeight,
-    iconSize: 16,
-  },
-};
-
 export function Checkbox({
   checked: checkedProp,
   defaultChecked = false,
@@ -58,8 +39,30 @@ export function Checkbox({
   invalid = false,
   style,
 }: CheckboxProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
   const [internalChecked, setInternalChecked] =
     useState<boolean>(defaultChecked);
+
+  const SIZE_TOKENS = useMemo(
+    () => ({
+      sm: {
+        box: 20,
+        hitArea: 36,
+        fontSize: ts.bodySmall.sysFontSize,
+        lineHeight: ts.bodySmall.sysLineHeight,
+        iconSize: 13,
+      },
+      md: {
+        box: 24,
+        hitArea: 40,
+        fontSize: ts.bodyMedium.sysFontSize,
+        lineHeight: ts.bodyMedium.sysLineHeight,
+        iconSize: 16,
+      },
+    }),
+    [ts],
+  );
+
   const isControlled = checkedProp !== undefined;
   const checkedState: CheckboxCheckedState = isControlled
     ? checkedProp

package/src/components/Chip/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Pressable,
@@ -11,7 +11,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type ChipSize = 'sm' | 'md' | 'lg' | 'xl';
 export type ChipUsage =
@@ -35,74 +35,7 @@ export interface ChipProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
-// ── Size tokens ───────────────────────────────────────────────────────────────
-
-const SIZE_TOKENS = {
-  sm: {
-    height: 20,
-    paddingH: dim.spacing.padding.sysPadding8,
-    paddingV: dim.spacing.padding.sysPadding4,
-    gap: dim.spacing.padding.sysPadding4,
-    fontSize: ts.labelSmall.sysFontSize,
-    lineHeight: ts.labelSmall.sysLineHeight,
-    letterSpacing: ts.labelSmall.sysTracking,
-    iconSize: 16,
-    closeBtnSize: 16,
-    closeIconSize: 12,
-    badgeSize: 16,
-    badgeFontSize: ts.labelSmall.sysFontSize,
-    badgeLineHeight: ts.labelSmall.sysLineHeight,
-  },
-  md: {
-    height: 24,
-    paddingH: dim.spacing.padding.sysPadding12,
-    paddingV: dim.spacing.padding.sysPadding4,
-    gap: dim.spacing.padding.sysPadding4,
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    letterSpacing: ts.labelMedium.sysTracking,
-    iconSize: 16,
-    closeBtnSize: 16,
-    closeIconSize: 12,
-    badgeSize: 16,
-    badgeFontSize: ts.labelSmall.sysFontSize,
-    badgeLineHeight: ts.labelSmall.sysLineHeight,
-  },
-  lg: {
-    height: 32,
-    paddingH: dim.spacing.padding.sysPadding16,
-    paddingV: dim.spacing.padding.sysPadding4,
-    gap: dim.spacing.padding.sysPadding8,
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    letterSpacing: ts.labelMedium.sysTracking,
-    iconSize: 20,
-    closeBtnSize: 20,
-    closeIconSize: 16,
-    badgeSize: 20,
-    badgeFontSize: ts.labelSmall.sysFontSize,
-    badgeLineHeight: ts.labelSmall.sysLineHeight,
-  },
-  xl: {
-    height: 40,
-    paddingH: dim.spacing.padding.sysPadding16,
-    paddingV: dim.spacing.padding.sysPadding8,
-    gap: dim.spacing.padding.sysPadding8,
-    fontSize: ts.bodyMedium.sysFontSize,
-    lineHeight: ts.bodyMedium.sysLineHeight,
-    letterSpacing: ts.bodyMedium.sysTracking,
-    iconSize: 20,
-    closeBtnSize: 24,
-    closeIconSize: 16,
-    badgeSize: 24,
-    badgeFontSize: ts.labelMedium.sysFontSize,
-    badgeLineHeight: ts.labelMedium.sysLineHeight,
-  },
-};
-
-// ── Usage/color tokens ────────────────────────────────────────────────────────
+// ── Usage/color types ─────────────────────────────────────────────────────────
 
 type UsageColors = {
   bg: string;
@@ -114,7 +47,9 @@ type UsageColors = {
   elevated: boolean;
 };
 
-function getUsageColors(usage: ChipUsage): UsageColors {
+type ColorRoles = ReturnType<typeof useTheme>['colorRoles'];
+
+function getUsageColors(usage: ChipUsage, cr: ColorRoles): UsageColors {
   switch (usage) {
     case 'neutral':
       return {
@@ -176,8 +111,76 @@ export function Chip({
   badge,
   style,
 }: ChipProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
+  const SIZE_TOKENS = useMemo(
+    () => ({
+      sm: {
+        height: 20,
+        paddingH: dim.spacing.padding.sysPadding8,
+        paddingV: dim.spacing.padding.sysPadding4,
+        gap: dim.spacing.padding.sysPadding4,
+        fontSize: ts.labelSmall.sysFontSize,
+        lineHeight: ts.labelSmall.sysLineHeight,
+        letterSpacing: ts.labelSmall.sysTracking,
+        iconSize: 16,
+        closeBtnSize: 16,
+        closeIconSize: 12,
+        badgeSize: 16,
+        badgeFontSize: ts.labelSmall.sysFontSize,
+        badgeLineHeight: ts.labelSmall.sysLineHeight,
+      },
+      md: {
+        height: 24,
+        paddingH: dim.spacing.padding.sysPadding12,
+        paddingV: dim.spacing.padding.sysPadding4,
+        gap: dim.spacing.padding.sysPadding4,
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        letterSpacing: ts.labelMedium.sysTracking,
+        iconSize: 16,
+        closeBtnSize: 16,
+        closeIconSize: 12,
+        badgeSize: 16,
+        badgeFontSize: ts.labelSmall.sysFontSize,
+        badgeLineHeight: ts.labelSmall.sysLineHeight,
+      },
+      lg: {
+        height: 32,
+        paddingH: dim.spacing.padding.sysPadding16,
+        paddingV: dim.spacing.padding.sysPadding4,
+        gap: dim.spacing.padding.sysPadding8,
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        letterSpacing: ts.labelMedium.sysTracking,
+        iconSize: 20,
+        closeBtnSize: 20,
+        closeIconSize: 16,
+        badgeSize: 20,
+        badgeFontSize: ts.labelSmall.sysFontSize,
+        badgeLineHeight: ts.labelSmall.sysLineHeight,
+      },
+      xl: {
+        height: 40,
+        paddingH: dim.spacing.padding.sysPadding16,
+        paddingV: dim.spacing.padding.sysPadding8,
+        gap: dim.spacing.padding.sysPadding8,
+        fontSize: ts.bodyMedium.sysFontSize,
+        lineHeight: ts.bodyMedium.sysLineHeight,
+        letterSpacing: ts.bodyMedium.sysTracking,
+        iconSize: 20,
+        closeBtnSize: 24,
+        closeIconSize: 16,
+        badgeSize: 24,
+        badgeFontSize: ts.labelMedium.sysFontSize,
+        badgeLineHeight: ts.labelMedium.sysLineHeight,
+      },
+    }),
+    [dim, ts],
+  );
+
   const s = SIZE_TOKENS[size];
-  const c = getUsageColors(usage);
+  const c = getUsageColors(usage, cr);
 
   return (
     <View

package/src/components/Divider/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { StyleProp, View, ViewStyle } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type DividerVariant = 'horizontal' | 'vertical';
 export type DividerWeight = 'thin' | 'thick';
@@ -14,14 +14,14 @@ export interface DividerProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 export function Divider({
   variant = 'horizontal',
   weight = 'thin',
   dashed = false,
   style,
 }: DividerProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
   const thickness =
     weight === 'thin'
       ? dim.borderWidth.sysStrokeThin