@compsych/mobile-ui 1.0.11 → 1.0.14

package/src/components/SegmentedControl/index.tsx

@@ -8,13 +8,14 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { sys } from '../../tokens';
+import { ICON_MAP, type IconName } from '../../icons';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
 export interface SegmentedControlOption {
   value: string;
   label: string;
-  icon?: React.ReactNode;
+  icon?: IconName;
   disabled?: boolean;
 }
 
@@ -26,8 +27,6 @@ export interface SegmentedControlProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 export function SegmentedControl({
   options,
   value,
@@ -35,12 +34,34 @@ export function SegmentedControl({
   fullWidth = false,
   style,
 }: SegmentedControlProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
   return (
-    <View style={[styles.container, fullWidth && styles.fullWidth, style]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor:
+            cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          borderWidth: dim.borderWidth.sysStrokeThin,
+          borderColor: cr.outline.sysOutline,
+          borderRadius: dim.borderRadius.sysRadiusFull,
+          padding: dim.spacing.padding.sysPadding4,
+          gap: dim.spacing.padding.sysPadding4,
+        },
+        fullWidth && styles.fullWidth,
+        style,
+      ]}
+    >
       {options.map((option) => {
         const isActive = option.value === value;
         const isDisabled = option.disabled ?? false;
 
+        const iconColor = isActive
+          ? cr.accent.primary.sysOnPrimary
+          : cr.surface.surface.sysOnSurfaceVariant;
+        const IconComponent = option.icon ? ICON_MAP[option.icon] : null;
+
         return (
           <Pressable
             key={option.value}
@@ -57,19 +78,19 @@ export function SegmentedControl({
                 borderRadius: dim.borderRadius.sysRadiusFull,
               },
               isActive && { backgroundColor: cr.accent.primary.sysPrimary },
-              !isActive && pressed && !isDisabled && styles.pressed,
+              !isActive &&
+                pressed &&
+                !isDisabled && {
+                  backgroundColor: cr.transparent.neutral.sysBlack10,
+                },
               isDisabled && styles.disabled,
             ]}
           >
-            {option.icon && <View style={styles.iconSlot}>{option.icon}</View>}
+            {IconComponent && <IconComponent size="xsmall" color={iconColor} />}
             <BodyText
               variant="small"
               emphasized={isActive}
-              color={
-                isActive
-                  ? cr.accent.primary.sysOnPrimary
-                  : cr.surface.surface.sysOnSurfaceVariant
-              }
+              color={iconColor}
               numberOfLines={1}
             >
               {option.label}
@@ -86,17 +107,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     alignSelf: 'flex-start',
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-    borderWidth: dim.borderWidth.sysStrokeThin,
-    borderColor: cr.outline.sysOutline,
-    borderRadius: dim.borderRadius.sysRadiusFull,
-    padding: dim.spacing.padding.sysPadding4,
-    gap: dim.spacing.padding.sysPadding4,
+    // Elevation/lv1: two Figma drop shadows combined into one RN shadow
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 4,
-    elevation: 1,
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 2,
   },
   fullWidth: {
     alignSelf: 'stretch',
@@ -107,15 +123,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  iconSlot: {
-    width: 16,
-    height: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  pressed: {
-    backgroundColor: cr.transparent.neutral.sysBlack10,
-  },
   disabled: {
     opacity: 0.48,
   },

package/src/components/SelectionCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Pressable,
@@ -10,8 +10,8 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { ICON_MAP, type IconName } from '../../icons';
-import { sys } from '../../tokens';
+import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 import { HeaderText } from '../HeaderText';
 
@@ -29,16 +29,6 @@ export interface SelectionCardProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
-const SELECTED_RING = {
-  shadowColor: cr.accent.primary.sysPrimary,
-  shadowOffset: { width: 1, height: 2 },
-  shadowOpacity: 1,
-  shadowRadius: 0,
-  elevation: 2,
-};
-
 export function SelectionCard({
   title,
   icon,
@@ -50,7 +40,21 @@ export function SelectionCard({
   accessibilityLabel,
   style,
 }: SelectionCardProps) {
-  const IconComponent = icon ? ICON_MAP[icon] : null;
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
+  const selectedRing = useMemo(
+    () => ({
+      shadowColor: cr.accent.primary.sysPrimary,
+      shadowOffset: { width: 1, height: 2 },
+      shadowOpacity: 1,
+      shadowRadius: 0,
+      elevation: 2,
+    }),
+    [cr],
+  );
+
+  const LucideIcon = icon ? resolveIcon(icon) : null;
+  const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP['small'];
 
   const a11yState = {
     disabled,
@@ -80,6 +84,12 @@ export function SelectionCard({
         style={({ pressed }) => [
           styles.smRoot,
           {
+            gap: dim.spacing.padding.sysPadding12,
+            paddingHorizontal: dim.spacing.padding.sysPadding20,
+            paddingVertical: dim.spacing.padding.sysPadding16,
+            borderRadius: dim.borderRadius.sysRadiusMd,
+            backgroundColor:
+              cr.surface.surfaceContainer.sysSurfaceContainerLowest,
             borderColor: selected
               ? cr.accent.primary.sysPrimary
               : cr.outline.sysOutline,
@@ -88,14 +98,14 @@ export function SelectionCard({
               : dim.borderWidth.sysStrokeThin,
             opacity: disabled ? 0.38 : 1,
           },
-          selected && SELECTED_RING,
+          selected && selectedRing,
           pressed && !disabled && styles.pressed,
           style,
         ]}
       >
-        {IconComponent && (
+        {LucideIcon && (
           <View style={styles.smIconWrap}>
-            <IconComponent size="small" color={iconColor} />
+            <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />
           </View>
         )}
         <BodyText
@@ -122,9 +132,18 @@ export function SelectionCard({
     ? cr.accent.primary.sysPrimary
     : cr.surface.surface.sysOnSurface;
 
-  const iconCircle = IconComponent ? (
-    <View style={[styles.mdIconCircle, { backgroundColor: iconBgColor }]}>
-      <IconComponent size="small" color={iconColor} />
+  const iconCircle = LucideIcon ? (
+    <View
+      style={[
+        styles.mdIconCircle,
+        {
+          padding: dim.spacing.padding.sysPadding12,
+          borderRadius: dim.borderRadius.sysRadiusFull,
+          backgroundColor: iconBgColor,
+        },
+      ]}
+    >
+      <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />
     </View>
   ) : null;
 
@@ -137,6 +156,11 @@ export function SelectionCard({
       style={({ pressed }) => [
         styles.mdRoot,
         {
+          padding: dim.spacing.padding.sysPadding24,
+          gap: dim.spacing.padding.sysPadding24,
+          borderRadius: dim.borderRadius.sysRadiusLg,
+          backgroundColor:
+            cr.surface.surfaceContainer.sysSurfaceContainerLowest,
           borderColor: selected
             ? cr.accent.primary.sysPrimary
             : cr.outline.sysOutline,
@@ -145,7 +169,7 @@ export function SelectionCard({
             : dim.borderWidth.sysStrokeMedium,
           opacity: disabled ? 0.38 : 1,
         },
-        selected && SELECTED_RING,
+        selected && selectedRing,
         pressed && !disabled && styles.pressed,
         style,
       ]}
@@ -169,17 +193,11 @@ const styles = StyleSheet.create({
   mdRoot: {
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: dim.spacing.padding.sysPadding24,
-    gap: dim.spacing.padding.sysPadding24,
-    borderRadius: dim.borderRadius.sysRadiusLg,
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
     overflow: 'hidden',
   },
   mdIconCircle: {
     alignItems: 'center',
     justifyContent: 'center',
-    padding: dim.spacing.padding.sysPadding12,
-    borderRadius: dim.borderRadius.sysRadiusFull,
     overflow: 'hidden',
   },
   mdIconCheckboxRow: {
@@ -191,11 +209,6 @@ const styles = StyleSheet.create({
   smRoot: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: dim.spacing.padding.sysPadding12,
-    paddingHorizontal: dim.spacing.padding.sysPadding20,
-    paddingVertical: dim.spacing.padding.sysPadding16,
-    borderRadius: dim.borderRadius.sysRadiusMd,
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
     overflow: 'hidden',
   },
   smIconWrap: {

package/src/components/ServiceCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Image,
@@ -10,10 +10,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { Ionicons } from '@expo/vector-icons';
-
-import { ICON_MAP, type IconName } from '../../icons';
-import { sys } from '../../tokens';
+import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
 export type ServiceCardVariant =
@@ -41,114 +39,6 @@ export interface ServiceCardProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
-// ── Variant tokens ────────────────────────────────────────────────────────────
-
-const VARIANT_TOKENS: Record<
-  ServiceCardVariant,
-  {
-    bg: string;
-    borderColor: string;
-    borderWidth: number;
-    elevated: boolean;
-    titleColor: string;
-    descColor: string;
-    chevronColor: string;
-    // doubled inner gradient overlay color
-    innerBg?: string;
-    iconBadgeBg?: string;
-    iconBadgeColor?: string;
-  }
-> = {
-  outlined: {
-    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-    borderColor: cr.outline.sysOutline,
-    borderWidth: dim.borderWidth.sysStrokeThin,
-    elevated: true,
-    titleColor: cr.surface.surface.sysOnSurface,
-    descColor: cr.surface.surface.sysOnSurfaceVariant,
-    chevronColor: cr.outline.sysOutlineFixed,
-  },
-  tonal: {
-    bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    elevated: false,
-    titleColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-    descColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-    chevronColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-  },
-  filled: {
-    bg: cr.accent.primary.sysPrimaryContainer,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    elevated: false,
-    titleColor: cr.accent.primary.sysOnPrimary,
-    descColor: cr.transparent.neutral.sysWhite80,
-    chevronColor: cr.accent.primary.sysOnPrimary,
-  },
-  doubled: {
-    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-    borderColor: cr.outline.sysOutline,
-    borderWidth: dim.borderWidth.sysStrokeThin,
-    elevated: false,
-    titleColor: cr.surface.surface.sysOnSurface,
-    descColor: cr.surface.surface.sysOnSurfaceVariant,
-    chevronColor: cr.outline.sysOutlineFixed,
-    innerBg: cr.transparent.primary.sysPrimary08,
-    iconBadgeBg: cr.accent.primary.sysPrimary,
-    iconBadgeColor: cr.accent.primary.sysOnPrimary,
-  },
-  image: {
-    bg: 'transparent',
-    borderColor: 'transparent',
-    borderWidth: 0,
-    elevated: false,
-    titleColor: cr.surface.surface.sysInverseOnSurface,
-    descColor: cr.transparent.neutral.sysWhite80,
-    chevronColor: cr.surface.surface.sysInverseOnSurface,
-  },
-};
-
-// ── Size tokens ───────────────────────────────────────────────────────────────
-
-const SIZE_TOKENS = {
-  sm: {
-    layout: 'row' as const,
-    paddingH: dim.spacing.padding.sysPadding16,
-    paddingV: dim.spacing.padding.sysPadding12,
-    gap: dim.spacing.padding.sysPadding12,
-    borderRadius: dim.borderRadius.sysRadiusMd,
-    iconSize: 24,
-    iconSizeName: 'small' as const,
-    titleVariant: 'medium' as const,
-    showChevron: true,
-  },
-  md: {
-    layout: 'column' as const,
-    paddingH: dim.spacing.padding.sysPadding16,
-    paddingV: dim.spacing.padding.sysPadding16,
-    gap: dim.spacing.padding.sysPadding24,
-    borderRadius: dim.borderRadius.sysRadiusLg,
-    iconSize: 32,
-    iconSizeName: 'medium' as const,
-    titleVariant: 'medium' as const,
-    showChevron: false,
-  },
-  lg: {
-    layout: 'column' as const,
-    paddingH: dim.spacing.padding.sysPadding16,
-    paddingV: dim.spacing.padding.sysPadding16,
-    gap: dim.spacing.padding.sysPadding32,
-    borderRadius: dim.borderRadius.sysRadiusLg,
-    iconSize: 32,
-    iconSizeName: 'large' as const,
-    titleVariant: 'large' as const,
-    showChevron: false,
-  },
-};
-
 const ELEVATION = {
   shadowColor: '#000',
   shadowOffset: { width: 0, height: 2 },
@@ -175,19 +65,128 @@ export function ServiceCard({
   fullWidth = false,
   style,
 }: ServiceCardProps) {
-  const v = VARIANT_TOKENS[variant];
-  const s = SIZE_TOKENS[size];
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
+  const variantTokens = useMemo(
+    () => ({
+      outlined: {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        borderColor: cr.outline.sysOutline,
+        borderWidth: dim.borderWidth.sysStrokeThin,
+        elevated: true,
+        titleColor: cr.surface.surface.sysOnSurface,
+        descColor: cr.surface.surface.sysOnSurfaceVariant,
+        chevronColor: cr.outline.sysOutlineFixed,
+        innerBg: undefined,
+        iconBadgeBg: undefined,
+        iconBadgeColor: undefined,
+      },
+      tonal: {
+        bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        elevated: false,
+        titleColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+        descColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+        chevronColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+        innerBg: undefined,
+        iconBadgeBg: undefined,
+        iconBadgeColor: undefined,
+      },
+      filled: {
+        bg: cr.accent.primary.sysPrimaryContainer,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        elevated: false,
+        titleColor: cr.accent.primary.sysOnPrimary,
+        descColor: cr.transparent.neutral.sysWhite80,
+        chevronColor: cr.accent.primary.sysOnPrimary,
+        innerBg: undefined,
+        iconBadgeBg: undefined,
+        iconBadgeColor: undefined,
+      },
+      doubled: {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        borderColor: cr.outline.sysOutline,
+        borderWidth: dim.borderWidth.sysStrokeThin,
+        elevated: false,
+        titleColor: cr.surface.surface.sysOnSurface,
+        descColor: cr.surface.surface.sysOnSurfaceVariant,
+        chevronColor: cr.outline.sysOutlineFixed,
+        innerBg: cr.transparent.primary.sysPrimary08,
+        iconBadgeBg: cr.accent.primary.sysPrimary,
+        iconBadgeColor: cr.accent.primary.sysOnPrimary,
+      },
+      image: {
+        bg: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 0,
+        elevated: false,
+        titleColor: cr.surface.inverse.sysInverseOnSurface,
+        descColor: cr.transparent.neutral.sysWhite80,
+        chevronColor: cr.surface.inverse.sysInverseOnSurface,
+        innerBg: undefined,
+        iconBadgeBg: undefined,
+        iconBadgeColor: undefined,
+      },
+    }),
+    [cr, dim],
+  );
+
+  const sizeTokens = useMemo(
+    () => ({
+      sm: {
+        layout: 'row' as const,
+        paddingH: dim.spacing.padding.sysPadding16,
+        paddingV: dim.spacing.padding.sysPadding12,
+        gap: dim.spacing.padding.sysPadding12,
+        borderRadius: dim.borderRadius.sysRadiusMd,
+        iconSize: 24,
+        iconSizeName: 'small' as const,
+        titleVariant: 'medium' as const,
+        showChevron: true,
+      },
+      md: {
+        layout: 'column' as const,
+        paddingH: dim.spacing.padding.sysPadding16,
+        paddingV: dim.spacing.padding.sysPadding16,
+        gap: dim.spacing.padding.sysPadding24,
+        borderRadius: dim.borderRadius.sysRadiusLg,
+        iconSize: 32,
+        iconSizeName: 'medium' as const,
+        titleVariant: 'medium' as const,
+        showChevron: false,
+      },
+      lg: {
+        layout: 'column' as const,
+        paddingH: dim.spacing.padding.sysPadding16,
+        paddingV: dim.spacing.padding.sysPadding16,
+        gap: dim.spacing.padding.sysPadding32,
+        borderRadius: dim.borderRadius.sysRadiusLg,
+        iconSize: 32,
+        iconSizeName: 'large' as const,
+        titleVariant: 'large' as const,
+        showChevron: false,
+      },
+    }),
+    [dim],
+  );
+
+  const v = variantTokens[variant];
+  const s = sizeTokens[size];
   const isRow = s.layout === 'row';
 
-  const IconComponent = icon ? ICON_MAP[icon] : null;
+  const LucideIcon = icon ? resolveIcon(icon) : null;
+  const ChevronRight = resolveIcon('ChevronRight');
   const iconColor = v.iconBadgeColor ?? v.titleColor;
-  const renderedIcon = IconComponent ? (
-    <IconComponent size={s.iconSizeName} color={iconColor} />
+  const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP[s.iconSizeName];
+  const renderedIcon = LucideIcon ? (
+    <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />
   ) : null;
 
   const outerStyle = [
     {
-      backgroundColor: variant === 'doubled' ? v.bg : v.bg,
+      backgroundColor: v.bg,
       borderColor: v.borderColor,
       borderWidth: v.borderWidth,
       borderRadius:
@@ -264,7 +263,7 @@ export function ServiceCard({
             <Image
               source={image}
               style={[
-                StyleSheet.absoluteFillObject,
+                { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
                 { borderRadius: s.borderRadius },
               ]}
               resizeMode="cover"
@@ -272,7 +271,7 @@ export function ServiceCard({
             />
             <View
               style={[
-                StyleSheet.absoluteFillObject,
+                { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
                 {
                   borderRadius: s.borderRadius,
                   backgroundColor: 'rgba(0,0,0,0.30)',
@@ -288,6 +287,9 @@ export function ServiceCard({
           </View>
         )}
         {textBlock}
+        {isRow && ChevronRight && (
+          <ChevronRight size={20} color="#ffffff" strokeWidth={1.5} />
+        )}
         {children}
       </>
     );
@@ -301,13 +303,8 @@ export function ServiceCard({
           </View>
         )}
         {textBlock}
-        {s.showChevron && (
-          <Ionicons
-            name="chevron-forward"
-            size={20}
-            color={v.chevronColor}
-            accessible={false}
-          />
+        {s.showChevron && ChevronRight && (
+          <ChevronRight size={20} color={v.chevronColor} strokeWidth={1.5} />
         )}
         {children}
       </>