@compsych/mobile-ui 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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/Card.tsx

@@ -1,152 +1,335 @@
 import React from 'react';
-import { Pressable, StyleSheet, View, type PressableProps, type ViewProps } from 'react-native';
+import {
+  Image,
+  type ImageSourcePropType,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import { sys } from './tokens';
+import { BodyText } from './BodyText';
 
-export type CardVariant = 'outlined' | 'filled' | 'gradient';
-export type CardSize = 'sm' | 'md' | 'lg' | 'xl';
+export type CardVariant = 'outlined' | 'tonal' | 'filled' | 'doubled' | 'image';
+export type CardSize = 'sm' | 'md' | 'lg';
 
 export interface CardProps {
   variant?: CardVariant;
   size?: CardSize;
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  image?: ImageSourcePropType;
   interactive?: boolean;
   disabled?: boolean;
-  current?: boolean;
-  fullWidth?: boolean;
   onPress?: () => void;
   children?: React.ReactNode;
   accessibilityLabel?: string;
+  fullWidth?: boolean;
 }
 
 const { colorRoles: cr, dimensions: dim } = sys;
 
-const VARIANT_TOKENS = {
+// ── Variant tokens ────────────────────────────────────────────────────────────
+
+const VARIANT_TOKENS: Record<
+  CardVariant,
+  {
+    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,
+    bg: cr.accent.primary.sysPrimary,
     borderColor: 'transparent',
     borderWidth: 0,
     elevated: true,
+    titleColor: cr.accent.primary.sysOnPrimary,
+    descColor: cr.accent.primary.sysOnPrimary,
+    chevronColor: cr.accent.primary.sysOnPrimary,
   },
-  gradient: {
-    // Approximates the gradient variant with a tinted surface; expo-linear-gradient not required.
+  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: '#ffffff',
+    descColor: cr.transparent.neutral.sysWhite80,
+    chevronColor: '#ffffff',
   },
 };
 
+// ── Size tokens ───────────────────────────────────────────────────────────────
+
 const SIZE_TOKENS = {
   sm: {
-    padding: dim.spacing.padding.sysPadding24,
-    borderRadius: dim.borderRadius.sysRadiusLg,
+    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,
+    titleVariant: 'medium' as const,
+    showChevron: true,
   },
   md: {
-    padding: dim.spacing.padding.sysPadding32,
+    layout: 'column' as const,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding16,
+    gap: dim.spacing.padding.sysPadding24,
     borderRadius: dim.borderRadius.sysRadiusLg,
-    gap: dim.spacing.padding.sysPadding16,
+    iconSize: 32,
+    titleVariant: 'medium' as const,
+    showChevron: false,
   },
   lg: {
-    padding: dim.spacing.padding.sysPadding32,
+    layout: 'column' as const,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding16,
+    gap: dim.spacing.padding.sysPadding32,
     borderRadius: dim.borderRadius.sysRadiusLg,
-    gap: dim.spacing.padding.sysPadding24,
-  },
-  xl: {
-    padding: dim.spacing.padding.sysPadding48,
-    borderRadius: dim.borderRadius.sysRadiusXl,
-    gap: dim.spacing.padding.sysPadding24,
+    iconSize: 32,
+    titleVariant: 'large' as const,
+    showChevron: false,
   },
 };
 
+const ELEVATION = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.08,
+  shadowRadius: 8,
+  elevation: 2,
+};
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
 export function Card({
   variant = 'outlined',
-  size = 'md',
+  size = 'lg',
+  title,
+  description,
+  icon,
+  image,
   interactive = false,
   disabled = false,
-  current = false,
-  fullWidth = false,
   onPress,
   children,
   accessibilityLabel,
+  fullWidth = false,
 }: CardProps) {
   const v = VARIANT_TOKENS[variant];
   const s = SIZE_TOKENS[size];
+  const isRow = s.layout === 'row';
+
+  const outerStyle = [
+    {
+      backgroundColor: variant === 'doubled' ? v.bg : v.bg,
+      borderColor: v.borderColor,
+      borderWidth: v.borderWidth,
+      borderRadius: variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,
+      paddingHorizontal: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,
+      paddingVertical: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,
+      opacity: disabled ? 0.48 : 1,
+    },
+    v.elevated && ELEVATION,
+    fullWidth && { alignSelf: 'stretch' as const },
+    isRow ? styles.rowRoot : styles.colRoot,
+    !isRow && { gap: s.gap },
+  ];
+
+  // ── Text block ──────────────────────────────────────────────────────────────
+  const textBlock = (title || description) ? (
+    <View style={isRow ? styles.rowTextBlock : undefined}>
+      {title && (
+        <BodyText variant={s.titleVariant} color={v.titleColor}>
+          {title}
+        </BodyText>
+      )}
+      {!isRow && description && (
+        <BodyText variant="small" color={v.descColor}>
+          {description}
+        </BodyText>
+      )}
+    </View>
+  ) : null;
+
+  // ── Inner content by variant ────────────────────────────────────────────────
+  let inner: React.ReactNode;
 
-  const borderColor = current ? cr.accent.primary.sysPrimary : v.borderColor;
-  const borderWidth = current ? dim.borderWidth.sysStrokeThick : v.borderWidth;
-
-  const baseStyle = {
-    backgroundColor: v.bg,
-    borderColor,
-    borderWidth,
-    borderRadius: s.borderRadius,
-    padding: s.padding,
-    gap: s.gap,
-    ...(fullWidth ? { alignSelf: 'stretch' as const } : {}),
-    ...(v.elevated
-      ? {
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.06,
-          shadowRadius: 4,
-          elevation: 1,
-        }
-      : {}),
-    opacity: disabled ? 0.48 : 1,
-  };
-
-  // Gradient variant: overlay a subtle primary tint over the content area
-  const gradientOverlay =
-    variant === 'gradient' ? (
+  if (variant === 'doubled') {
+    inner = (
       <View
         style={[
-          StyleSheet.absoluteFillObject,
+          styles.colRoot,
           {
+            backgroundColor: v.innerBg,
             borderRadius: s.borderRadius,
-            backgroundColor: cr.transparent.primary.sysPrimary08,
+            paddingHorizontal: s.paddingH,
+            paddingVertical: s.paddingV,
+            gap: s.gap,
           },
         ]}
-        pointerEvents="none"
-      />
-    ) : null;
+      >
+        {icon && (
+          <View
+            style={[
+              styles.doubledIconBadge,
+              {
+                backgroundColor: v.iconBadgeBg,
+                borderRadius: dim.borderRadius.sysRadiusFull,
+              },
+            ]}
+          >
+            {icon}
+          </View>
+        )}
+        {textBlock}
+        {children}
+      </View>
+    );
+  } else if (variant === 'image') {
+    inner = (
+      <>
+        {image && (
+          <>
+            <Image
+              source={image}
+              style={[StyleSheet.absoluteFillObject, { borderRadius: s.borderRadius }]}
+              resizeMode="cover"
+              accessible={false}
+            />
+            <View
+              style={[
+                StyleSheet.absoluteFillObject,
+                { borderRadius: s.borderRadius, backgroundColor: 'rgba(0,0,0,0.30)' },
+              ]}
+              pointerEvents="none"
+            />
+          </>
+        )}
+        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {textBlock}
+        {children}
+      </>
+    );
+  } else if (isRow) {
+    // sm — horizontal row
+    inner = (
+      <>
+        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {textBlock}
+        {s.showChevron && (
+          <Ionicons
+            name="chevron-forward"
+            size={20}
+            color={v.chevronColor}
+            accessible={false}
+          />
+        )}
+        {children}
+      </>
+    );
+  } else {
+    // md / lg — vertical column
+    inner = (
+      <>
+        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {textBlock}
+        {children}
+      </>
+    );
+  }
 
+  // ── Wrapper ─────────────────────────────────────────────────────────────────
   if (interactive || onPress) {
     return (
       <Pressable
         onPress={disabled ? undefined : onPress}
         accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ disabled, selected: current }}
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityState={{ disabled }}
         style={({ pressed }) => [
-          styles.root,
-          baseStyle,
-          pressed && !disabled
-            ? { opacity: 0.84 }
-            : {},
+          styles.overflow,
+          ...outerStyle,
+          pressed && !disabled && styles.pressed,
         ]}
       >
-        {gradientOverlay}
-        {children}
+        {inner}
       </Pressable>
     );
   }
 
   return (
-    <View style={[styles.root, baseStyle]}>
-      {gradientOverlay}
-      {children}
+    <View style={[styles.overflow, ...outerStyle]}>
+      {inner}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  root: {
+  overflow: {
     overflow: 'hidden',
   },
+  colRoot: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  rowRoot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  rowTextBlock: {
+    flex: 1,
+    minWidth: 0,
+  },
+  doubledIconBadge: {
+    width: 48,
+    height: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    opacity: 0.84,
+  },
 });

package/src/tokens.ts

@@ -65,7 +65,9 @@ export const sys = {
     transparent: {
       neutral: {
         sysBlack10: '#0000001a',
+        sysWhite10: '#ffffff1a',
         sysWhite20: '#ffffff33',
+        sysWhite80: 'rgba(255,255,255,0.8)',
       },
       primary: {
         sysPrimary08: '#075cba14',