@compsych/mobile-ui 1.0.25 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "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/ServiceCard/index.tsx

@@ -92,6 +92,7 @@ export function ServiceCard({
         innerBg: undefined,
         iconBadgeBg: undefined,
         iconBadgeColor: undefined,
+        buttonIconBg: cr.surface.surfaceContainer.sysSurfaceContainer,
       },
       tonal: {
         bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
@@ -104,6 +105,7 @@ export function ServiceCard({
         innerBg: undefined,
         iconBadgeBg: undefined,
         iconBadgeColor: undefined,
+        buttonIconBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
       },
       filled: {
         bg: cr.accent.primary.sysPrimaryContainer,
@@ -116,6 +118,7 @@ export function ServiceCard({
         innerBg: undefined,
         iconBadgeBg: undefined,
         iconBadgeColor: undefined,
+        buttonIconBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
       },
       doubled: {
         bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
@@ -128,6 +131,7 @@ export function ServiceCard({
         innerBg: cr.transparent.primary.sysPrimary08,
         iconBadgeBg: cr.accent.primary.sysPrimary,
         iconBadgeColor: cr.accent.primary.sysOnPrimary,
+        buttonIconBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
       },
       image: {
         bg: 'transparent',
@@ -140,6 +144,7 @@ export function ServiceCard({
         innerBg: undefined,
         iconBadgeBg: undefined,
         iconBadgeColor: undefined,
+        buttonIconBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
       },
     }),
     [cr, dim],
@@ -366,16 +371,25 @@ export function ServiceCard({
         {children}
         {buttonIcon && (
           <View
-            style={{
-              position: 'absolute',
-              bottom: s.paddingV,
-              ...(I18nManager.isRTL
-                ? { left: s.paddingH }
-                : { right: s.paddingH }),
-            }}
+            style={[
+              styles.buttonIconWrapper,
+              {
+                bottom: s.paddingV,
+                ...(I18nManager.isRTL
+                  ? { left: s.paddingH }
+                  : { right: s.paddingH }),
+              },
+            ]}
             pointerEvents="none"
           >
-            {buttonIcon}
+            <View
+              style={[
+                styles.buttonIconCircle,
+                { backgroundColor: v.buttonIconBg },
+              ]}
+            >
+              {buttonIcon}
+            </View>
           </View>
         )}
       </>
@@ -425,6 +439,16 @@ const styles = StyleSheet.create({
     width: '100%',
     gap: 16,
   },
+  buttonIconWrapper: {
+    position: 'absolute',
+  },
+  buttonIconCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   imageArrowButton: {
     width: 32,
     height: 32,

package/src/icons/index.ts

@@ -1,27 +1,16 @@
 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 or a custom icon.
+ * Resolves an icon name to a Lucide React Native component.
  * Accepts both "StethoscopeIcon" (trailing Icon suffix) and "Stethoscope".
- * Returns undefined if the icon name is not found.
+ * Returns undefined if the icon name is not found in lucide-react-native.
  */
 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, UserCall } from './icons';
+export { resolveIcon, SIZE_MAP, DEFAULT_ICON_COLOR } from './icons';
 export type { IconProps, IconSize, IconName } from './icons';

package/src/icons/UserCall.tsx

@@ -1,53 +0,0 @@
-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>
-  );
-}