@compsych/mobile-ui 1.0.10 → 1.0.13

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,
@@ -11,7 +11,7 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 
 import { ICON_MAP, type IconName } from '../../icons';
-import { sys } from '../../tokens';
+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,6 +40,19 @@ export function SelectionCard({
   accessibilityLabel,
   style,
 }: SelectionCardProps) {
+  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 IconComponent = icon ? ICON_MAP[icon] : null;
 
   const a11yState = {
@@ -80,6 +83,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,7 +97,7 @@ export function SelectionCard({
               : dim.borderWidth.sysStrokeThin,
             opacity: disabled ? 0.38 : 1,
           },
-          selected && SELECTED_RING,
+          selected && selectedRing,
           pressed && !disabled && styles.pressed,
           style,
         ]}
@@ -123,7 +132,16 @@ export function SelectionCard({
     : cr.surface.surface.sysOnSurface;
 
   const iconCircle = IconComponent ? (
-    <View style={[styles.mdIconCircle, { backgroundColor: iconBgColor }]}>
+    <View
+      style={[
+        styles.mdIconCircle,
+        {
+          padding: dim.spacing.padding.sysPadding12,
+          borderRadius: dim.borderRadius.sysRadiusFull,
+          backgroundColor: iconBgColor,
+        },
+      ]}
+    >
       <IconComponent size="small" color={iconColor} />
     </View>
   ) : null;
@@ -137,6 +155,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 +168,7 @@ export function SelectionCard({
             : dim.borderWidth.sysStrokeMedium,
           opacity: disabled ? 0.38 : 1,
         },
-        selected && SELECTED_RING,
+        selected && selectedRing,
         pressed && !disabled && styles.pressed,
         style,
       ]}
@@ -169,17 +192,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 +208,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,
@@ -13,7 +13,7 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 
 import { ICON_MAP, type IconName } from '../../icons';
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
 export type ServiceCardVariant =
@@ -41,114 +41,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,8 +67,118 @@ 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,
+        descVariant: 'small' 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,
+        descVariant: 'small' 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,
+        descVariant: 'small' 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;
@@ -187,7 +189,7 @@ export function ServiceCard({
 
   const outerStyle = [
     {
-      backgroundColor: variant === 'doubled' ? v.bg : v.bg,
+      backgroundColor: v.bg,
       borderColor: v.borderColor,
       borderWidth: v.borderWidth,
       borderRadius:
@@ -215,7 +217,7 @@ export function ServiceCard({
           </BodyText>
         )}
         {!isRow && description && (
-          <BodyText variant="small" color={v.descColor}>
+          <BodyText variant={s.descVariant} color={v.descColor}>
             {description}
           </BodyText>
         )}
@@ -264,7 +266,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 +274,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)',
@@ -287,7 +289,23 @@ export function ServiceCard({
             {renderedIcon}
           </View>
         )}
-        {textBlock}
+        <View style={styles.contentRow}>
+          {(title || description) && (
+            <View style={styles.contentText}>
+              {title && (
+                <BodyText variant={s.titleVariant} color={v.titleColor}>
+                  {title}
+                </BodyText>
+              )}
+              {description && (
+                <BodyText variant={s.descVariant} color={v.descColor}>
+                  {description}
+                </BodyText>
+              )}
+            </View>
+          )}
+          {buttonIcon}
+        </View>
         {children}
       </>
     );
@@ -321,20 +339,24 @@ export function ServiceCard({
             {renderedIcon}
           </View>
         )}
-        {textBlock}
+        <View style={styles.contentRow}>
+          {(title || description) && (
+            <View style={styles.contentText}>
+              {title && (
+                <BodyText variant={s.titleVariant} color={v.titleColor}>
+                  {title}
+                </BodyText>
+              )}
+              {description && (
+                <BodyText variant={s.descVariant} color={v.descColor}>
+                  {description}
+                </BodyText>
+              )}
+            </View>
+          )}
+          {buttonIcon}
+        </View>
         {children}
-        {buttonIcon && (
-          <View
-            style={{
-              position: 'absolute',
-              bottom: s.paddingV,
-              right: s.paddingH,
-            }}
-            pointerEvents="none"
-          >
-            {buttonIcon}
-          </View>
-        )}
       </>
     );
   }
@@ -380,6 +402,16 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
   },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    alignSelf: 'stretch',
+    gap: 16,
+  },
+  contentText: {
+    flex: 1,
+    minWidth: 0,
+  },
   doubledIconBadge: {
     width: 48,
     height: 48,