@compsych/mobile-ui 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/BodyText/index.tsx

@@ -18,6 +18,7 @@ export interface BodyTextProps extends TextProps {
   variant?: BodyVariant;
   emphasized?: boolean;
   color?: string;
+  children?: React.ReactNode;
 }
 
 const FONT_FAMILY: Record<string, string> = {

package/src/components/ScreenContainer/index.tsx

@@ -7,6 +7,7 @@ import { useTheme } from '../../theme';
 export interface ScreenContainerProps extends ScrollViewProps {
   children?: React.ReactNode;
   noPadding?: boolean;
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled' | boolean;
 }
 
 /**

package/src/components/ServiceCard/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 
 import {
+  I18nManager,
   Image,
   type ImageSourcePropType,
   Pressable,
@@ -368,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/icons/UserCall.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { G, Path, Svg } from 'react-native-svg';
+
+interface UserCallProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  style?: object;
+}
+
+export function UserCall({
+  size = 24,
+  color = '#1a1a1a',
+  strokeWidth = 1.5,
+  style,
+}: UserCallProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      style={style}
+    >
+      <G transform="translate(3, 2)">
+        <Path
+          d="M 8 8 C 10.2091 8 12 6.20914 12 4 C 12 1.79086 10.2091 0 8 0 C 5.79086 0 4 1.79086 4 4 C 4 6.20914 5.79086 8 8 8 Z"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        <Path
+          d="M 15.2892 17.7358 L 16.4228 16.3183 L 19.5 17.6848 L 18.9014 19.9919 C 18.8136 20.329 18.4871 20.5469 18.1421 20.4994 C 13.6595 19.8701 10.1362 16.3469 9.5066 11.8641 C 9.4587 11.5191 9.6769 11.1927 10.0141 11.1044 L 12.322 10.5059 L 13.6888 13.5834 L 12.2709 14.7176"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        <Path
+          d="M 5.5 11.3984 C 2.3062 12.4483 0 15.455 0 19 C 3 19.7498 6 20.0779 9 19.9841"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </G>
+    </Svg>
+  );
+}

package/src/icons/index.ts

@@ -1,16 +1,27 @@
 import type { LucideIcon } from 'lucide-react-native';
 
+import { UserCall } from './UserCall';
+
 export type { IconProps, IconSize, IconName } from './types';
 export { DEFAULT_ICON_COLOR, SIZE_MAP } from './types';
+export { UserCall } from './UserCall';
+
+const CUSTOM_ICONS: Record<string, unknown> = {
+  UserCall,
+};
 
 /**
- * Resolves an icon name to a Lucide React Native component.
+ * Resolves an icon name to a Lucide React Native component or a custom icon.
  * Accepts both "StethoscopeIcon" (trailing Icon suffix) and "Stethoscope".
- * Returns undefined if the icon name is not found in lucide-react-native.
+ * Returns undefined if the icon name is not found.
  */
 export function resolveIcon(name: string): LucideIcon | undefined {
   const componentName = name.endsWith('Icon') ? name.slice(0, -4) : name;
 
+  if (CUSTOM_ICONS[componentName]) {
+    return CUSTOM_ICONS[componentName] as LucideIcon;
+  }
+
   const icons = require('lucide-react-native') as Record<string, unknown>;
   return icons[componentName] as LucideIcon | undefined;
 }

package/src/index.ts

@@ -153,5 +153,5 @@ export { ThemeProvider, useTheme, defaultTheme } from './theme';
 export type { ThemeProviderProps, Theme, ThemeOverride } from './theme';
 
 // Icons — resolved from lucide-react-native at runtime
-export { resolveIcon, SIZE_MAP, DEFAULT_ICON_COLOR } from './icons';
+export { resolveIcon, SIZE_MAP, DEFAULT_ICON_COLOR, UserCall } from './icons';
 export type { IconProps, IconSize, IconName } from './icons';