@compsych/mobile-ui 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,11 +32,17 @@
   "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-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",
@@ -52,6 +58,7 @@
     "babel-jest": "^29.7.0",
     "eslint": "^9.39.4",
     "eslint-plugin-unused-imports": "^4.4.1",
+    "expo-linear-gradient": "^56.0.4",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-expo": "^55.0.17",

package/src/components/ChatInput/index.tsx

@@ -1,13 +1,15 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import {
   Image,
   ImageSourcePropType,
+  NativeSyntheticEvent,
   Pressable,
   ScrollView,
   StyleProp,
   StyleSheet,
   TextInput,
+  TextInputContentSizeChangeEventData,
   View,
   ViewStyle,
 } from 'react-native';
@@ -47,6 +49,18 @@ export function ChatInput({
   const { colorRoles: cr, dimensions: dim, iconography: ico } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
   const inputRef = useRef<TextInput>(null);
+  const [inputHeight, setInputHeight] = useState(24);
+
+  const handleContentSizeChange = useCallback(
+    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      const newHeight = Math.max(
+        24,
+        Math.min(120, e.nativeEvent.contentSize.height),
+      );
+      setInputHeight(newHeight);
+    },
+    [],
+  );
 
   const hasText = value.trim().length > 0;
   const hasAttachments = !!attachments && attachments.length > 0;
@@ -182,12 +196,15 @@ export function ChatInput({
           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}
@@ -237,7 +254,6 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     padding: 0,
     margin: 0,
-    maxHeight: 120,
   },
   attachStrip: {
     flexShrink: 0,

package/src/components/Input/index.tsx

@@ -149,7 +149,6 @@ export function Input({
             paddingHorizontal: s.paddingH,
             paddingVertical: s.paddingV,
             gap: s.gap,
-            overflow: 'hidden',
           }}
         >
           {/* Leading icon */}

package/src/components/ServiceCard/index.tsx

@@ -10,6 +10,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import { LinearGradient } from 'expo-linear-gradient';
+
 import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
@@ -37,6 +39,12 @@ export interface ServiceCardProps {
   accessibilityLabel?: string;
   fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
+  /** Gradient colors for the "doubled" variant inner card (e.g. ['#a855f7', '#6366f1']). Falls back to the solid token color when omitted. */
+  gradient?: readonly [string, string, ...string[]];
+  /** Start point of the gradient in 0–1 coordinate space. Defaults to { x: 0, y: 0 } (top). */
+  gradientStart?: { x: number; y: number };
+  /** End point of the gradient in 0–1 coordinate space. Defaults to { x: 0, y: 1 } (bottom). */
+  gradientEnd?: { x: number; y: number };
 }
 
 const ELEVATION = {
@@ -64,6 +72,9 @@ export function ServiceCard({
   accessibilityLabel,
   fullWidth = false,
   style,
+  gradient,
+  gradientStart,
+  gradientEnd,
 }: ServiceCardProps) {
   const { colorRoles: cr, dimensions: dim } = useTheme();
 
@@ -225,19 +236,18 @@ export function ServiceCard({
   let inner: React.ReactNode;
 
   if (variant === 'doubled') {
-    inner = (
-      <View
-        style={[
-          styles.colRoot,
-          {
-            backgroundColor: v.innerBg,
-            borderRadius: s.borderRadius,
-            paddingHorizontal: s.paddingH,
-            paddingVertical: s.paddingV,
-            gap: dim.spacing.padding.sysPadding24,
-          },
-        ]}
-      >
+    const doubledInnerStyle: StyleProp<ViewStyle> = [
+      styles.colRoot,
+      {
+        borderRadius: s.borderRadius,
+        paddingHorizontal: s.paddingH,
+        paddingVertical: s.paddingV,
+        gap: dim.spacing.padding.sysPadding24,
+      },
+    ];
+
+    const doubledInnerContent = (
+      <>
         {renderedIcon && (
           <View
             style={[
@@ -253,6 +263,21 @@ export function ServiceCard({
         )}
         {textBlock}
         {children}
+      </>
+    );
+
+    inner = gradient ? (
+      <LinearGradient
+        colors={gradient}
+        start={gradientStart ?? { x: 0, y: 0 }}
+        end={gradientEnd ?? { x: 0, y: 1 }}
+        style={doubledInnerStyle}
+      >
+        {doubledInnerContent}
+      </LinearGradient>
+    ) : (
+      <View style={[doubledInnerStyle, { backgroundColor: v.innerBg }]}>
+        {doubledInnerContent}
       </View>
     );
   } else if (variant === 'image') {