@compsych/mobile-ui 1.0.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@compsych/mobile-ui",
+  "version": "1.0.0",
+  "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react-native",
+    "compsych",
+    "design-system",
+    "components",
+    "expo"
+  ],
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "@expo-google-fonts/google-sans": ">=0.4.0",
+    "@expo/vector-icons": ">=15.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+  }
+}

package/src/Alert.tsx

@@ -0,0 +1,372 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type AlertVariant =
+  | 'default'
+  | 'elevated'
+  | 'informative'
+  | 'warning'
+  | 'positive'
+  | 'danger';
+
+export type AlertSize = 'sm' | 'lg';
+
+export interface AlertProps {
+  variant?: AlertVariant;
+  size?: AlertSize;
+  /** Bold title — lg size only */
+  title?: string;
+  /** Body / description text */
+  description: string;
+  /** Custom leading icon — overrides the default per-variant icon */
+  icon?: React.ReactNode;
+  /** Hide the leading icon entirely */
+  hideIcon?: boolean;
+  /** Label for the optional action button */
+  actionLabel?: string;
+  onAction?: () => void;
+  /** Show dismiss (×) button */
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ── Variant color map ────────────────────────────────────────────────────────
+
+type VariantColors = {
+  bg: string;
+  text: string;
+  iconColor: string;
+  elevated: boolean;
+  actionBorder: boolean;
+};
+
+function getVariantColors(variant: AlertVariant): VariantColors {
+  switch (variant) {
+    case 'default':
+      return {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainerLow,
+        text: cr.surface.surface.sysOnSurface,
+        iconColor: cr.surface.surface.sysOnSurfaceVariant,
+        elevated: false,
+        actionBorder: false,
+      };
+    case 'elevated':
+      return {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        text: cr.surface.surface.sysOnSurface,
+        iconColor: cr.surface.surface.sysOnSurfaceVariant,
+        elevated: true,
+        actionBorder: true,
+      };
+    case 'informative':
+      return {
+        bg: cr.custom.info.sysInfoContainer,
+        text: cr.custom.info.sysOnInfoContainer,
+        iconColor: cr.custom.info.sysOnInfoContainer,
+        elevated: false,
+        actionBorder: false,
+      };
+    case 'warning':
+      return {
+        bg: cr.custom.warning.sysWarningContainer,
+        text: cr.custom.warning.sysOnWarningContainer,
+        iconColor: cr.custom.warning.sysOnWarningContainer,
+        elevated: false,
+        actionBorder: false,
+      };
+    case 'positive':
+      return {
+        bg: cr.custom.success.sysSuccessContainer,
+        text: cr.custom.success.sysOnSuccessContainer,
+        iconColor: cr.custom.success.sysOnSuccessContainer,
+        elevated: false,
+        actionBorder: false,
+      };
+    case 'danger':
+      return {
+        bg: cr.error.sysErrorContainer,
+        text: cr.error.sysOnErrorContainer,
+        iconColor: cr.error.sysOnErrorContainer,
+        elevated: false,
+        actionBorder: false,
+      };
+  }
+}
+
+// ── Default icon per variant ─────────────────────────────────────────────────
+
+function defaultIconName(
+  variant: AlertVariant,
+): React.ComponentProps<typeof Ionicons>['name'] {
+  switch (variant) {
+    case 'default':
+    case 'elevated':
+      return 'information-circle-outline';
+    case 'informative':
+      return 'information-circle';
+    case 'warning':
+      return 'warning';
+    case 'positive':
+      return 'checkmark-circle';
+    case 'danger':
+      return 'alert-circle';
+  }
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function Alert({
+  variant = 'default',
+  size = 'lg',
+  title,
+  description,
+  icon,
+  hideIcon = false,
+  actionLabel,
+  onAction,
+  dismissible = false,
+  onDismiss,
+}: AlertProps) {
+  const c = getVariantColors(variant);
+  const isLg = size === 'lg';
+
+  const resolvedIcon =
+    !hideIcon &&
+    (icon ?? (
+      <Ionicons
+        name={defaultIconName(variant)}
+        size={isLg ? 24 : 20}
+        color={c.iconColor}
+      />
+    ));
+
+  return (
+    <View
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+      style={[
+        styles.root,
+        {
+          backgroundColor: c.bg,
+          borderRadius: isLg
+            ? dim.borderRadius.sysRadiusLg
+            : dim.borderRadius.sysRadiusMd,
+        },
+        c.elevated && styles.elevated,
+      ]}
+    >
+      {/* ── Content row ─────────────────────────────────────────────────── */}
+      <View
+        style={[
+          styles.content,
+          {
+            paddingHorizontal: isLg
+              ? dim.spacing.padding.sysPadding24
+              : dim.spacing.padding.sysPadding16,
+            paddingVertical: isLg
+              ? dim.spacing.padding.sysPadding16
+              : dim.spacing.padding.sysPadding16,
+            gap: isLg
+              ? dim.spacing.padding.sysPadding16
+              : dim.spacing.padding.sysPadding12,
+            alignItems: isLg ? 'flex-start' : 'center',
+          },
+        ]}
+      >
+        {/* Leading icon */}
+        {resolvedIcon && (
+          <View
+            style={{
+              paddingTop: isLg ? dim.spacing.padding.sysPadding2 : 0,
+              flexShrink: 0,
+            }}
+          >
+            {resolvedIcon}
+          </View>
+        )}
+
+        {/* Text + action */}
+        <View style={styles.textAction}>
+          {/* Text block */}
+          <View style={[styles.textBlock, { gap: 4 }]}>
+            {isLg && title && (
+              <Text
+                style={{
+                  color: c.text,
+                  fontSize: ts.titleSmall.sysFontSize,
+                  lineHeight: ts.titleSmall.sysLineHeight,
+                  fontWeight: '500',
+                  includeFontPadding: false,
+                }}
+              >
+                {title}
+              </Text>
+            )}
+            <Text
+              style={{
+                color: c.text,
+                fontSize: isLg
+                  ? ts.bodyMedium.sysFontSize
+                  : ts.bodySmall.sysFontSize,
+                lineHeight: isLg
+                  ? ts.bodyMedium.sysLineHeight
+                  : ts.bodySmall.sysLineHeight,
+                fontWeight: '400',
+                includeFontPadding: false,
+              }}
+            >
+              {description}
+            </Text>
+          </View>
+
+          {/* Action button */}
+          {actionLabel && (
+            isLg ? (
+              // lg: pill button with white bg + shadow (or border for elevated)
+              <Pressable
+                onPress={onAction}
+                accessibilityRole="button"
+                accessibilityLabel={actionLabel}
+                style={({ pressed }) => [
+                  styles.actionLg,
+                  c.actionBorder && styles.actionLgBorder,
+                  pressed && { opacity: 0.84 },
+                ]}
+              >
+                <Text
+                  style={{
+                    color: cr.surface.surface.sysOnSurface,
+                    fontSize: ts.labelMedium.sysFontSize,
+                    lineHeight: ts.labelMedium.sysLineHeight,
+                    fontWeight: '400',
+                    includeFontPadding: false,
+                  }}
+                >
+                  {actionLabel}
+                </Text>
+              </Pressable>
+            ) : (
+              // sm: text-only button
+              <Pressable
+                onPress={onAction}
+                accessibilityRole="button"
+                accessibilityLabel={actionLabel}
+                style={styles.actionSm}
+              >
+                <Text
+                  style={{
+                    color: c.text,
+                    fontSize: ts.labelMedium.sysFontSize,
+                    lineHeight: ts.labelMedium.sysLineHeight,
+                    fontWeight: '500',
+                    includeFontPadding: false,
+                  }}
+                >
+                  {actionLabel}
+                </Text>
+              </Pressable>
+            )
+          )}
+        </View>
+
+        {/* Dismiss button */}
+        {dismissible && (
+          <Pressable
+            onPress={onDismiss}
+            accessibilityRole="button"
+            accessibilityLabel="Dismiss"
+            style={({ pressed }) => [
+              styles.closeBtn,
+              isLg ? styles.closeBtnLg : styles.closeBtnSm,
+              pressed && { opacity: 0.6 },
+            ]}
+          >
+            <Ionicons
+              name="close"
+              size={16}
+              color={c.iconColor}
+            />
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    overflow: 'hidden',
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 1,
+    overflow: 'visible',
+  },
+  content: {
+    flexDirection: 'row',
+  },
+  textAction: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minWidth: 0,
+    gap: 16,
+  },
+  textBlock: {
+    flex: 1,
+    minWidth: 0,
+  },
+  // lg action button — elevated pill
+  actionLg: {
+    height: 40,
+    paddingHorizontal: 24,
+    borderRadius: 9999,
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+  actionLgBorder: {
+    borderWidth: 1,
+    borderColor: cr.outline.sysOutline,
+  },
+  // sm action button — text only
+  actionSm: {
+    flexShrink: 0,
+  },
+  closeBtn: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+  },
+  closeBtnLg: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 32,
+    height: 32,
+  },
+  closeBtnSm: {
+    width: 32,
+    height: 32,
+    flexShrink: 0,
+  },
+});

package/src/Avatar.tsx

@@ -0,0 +1,255 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type AvatarVariant = 'text' | 'image' | 'icon';
+
+export interface AvatarProps {
+  variant?: AvatarVariant;
+  size?: AvatarSize;
+  /** Text variant — up to 2 initials, e.g. "CP" */
+  initials?: string;
+  /** Image variant — any React Native image source */
+  source?: ImageSourcePropType;
+  /** Icon variant — custom node; omit to use the default person icon */
+  icon?: React.ReactNode;
+  /** Renders a coloured ring around the avatar */
+  activityRing?: boolean;
+  /** Renders a shield-check badge at the bottom-right corner */
+  presenceBadge?: boolean;
+  /** Accessible label announced by screen readers */
+  accessibilityLabel?: string;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+const SIZE_TOKENS = {
+  xs: {
+    diameter: 24,
+    fontSize: ts.labelSmall.sysFontSize,
+    lineHeight: ts.labelSmall.sysLineHeight,
+    fontWeight: '400' as const,
+    iconSize: 12,
+    ringBorder: dim.borderWidth.sysStrokeMedium,
+    ringInset: -1,
+    badgeSize: 0, // xs has no presence badge
+    badgeIconSize: 0,
+    badgeOffset: 0,
+  },
+  sm: {
+    diameter: 32,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    fontWeight: '400' as const,
+    iconSize: 16,
+    ringBorder: dim.borderWidth.sysStrokeMedium,
+    ringInset: -2,
+    badgeSize: 16,
+    badgeIconSize: 12,
+    badgeOffset: -4,
+  },
+  md: {
+    diameter: 40,
+    fontSize: ts.labelLarge.sysFontSize,
+    lineHeight: ts.labelLarge.sysLineHeight,
+    fontWeight: '500' as const,
+    iconSize: 20,
+    ringBorder: dim.borderWidth.sysStrokeThick,
+    ringInset: -2,
+    badgeSize: 20,
+    badgeIconSize: 16,
+    badgeOffset: -4,
+  },
+  lg: {
+    diameter: 48,
+    fontSize: ts.labelLarge.sysFontSize,
+    lineHeight: ts.labelLarge.sysLineHeight,
+    fontWeight: '500' as const,
+    iconSize: 24,
+    ringBorder: dim.borderWidth.sysStrokeThick,
+    ringInset: -2,
+    badgeSize: 20,
+    badgeIconSize: 16,
+    badgeOffset: -4,
+  },
+  xl: {
+    diameter: 64,
+    fontSize: ts.labelLarge.sysFontSize,
+    lineHeight: ts.labelLarge.sysLineHeight,
+    fontWeight: '500' as const,
+    iconSize: 32,
+    ringBorder: dim.borderWidth.sysStrokeThick,
+    ringInset: -2,
+    badgeSize: 24,
+    badgeIconSize: 20,
+    badgeOffset: -4,
+  },
+  '2xl': {
+    diameter: 88,
+    fontSize: ts.titleMedium.sysFontSize,
+    lineHeight: ts.titleMedium.sysLineHeight,
+    fontWeight: '400' as const,
+    iconSize: 44,
+    ringBorder: dim.borderWidth.sysStrokeBold,
+    ringInset: -2,
+    badgeSize: 32,
+    badgeIconSize: 24,
+    badgeOffset: 0,
+  },
+  '3xl': {
+    diameter: 120,
+    fontSize: ts.titleLarge.sysFontSize,
+    lineHeight: ts.titleLarge.sysLineHeight,
+    fontWeight: '500' as const,
+    iconSize: 60,
+    ringBorder: dim.borderWidth.sysStrokeBold,
+    ringInset: -2,
+    badgeSize: 32,
+    badgeIconSize: 24,
+    badgeOffset: 0,
+  },
+};
+
+export function Avatar({
+  variant = 'text',
+  size = 'md',
+  initials = 'CP',
+  source,
+  icon,
+  activityRing = false,
+  presenceBadge = false,
+  accessibilityLabel,
+}: AvatarProps) {
+  const s = SIZE_TOKENS[size];
+  const r = s.diameter / 2;
+
+  const defaultLabel =
+    variant === 'text' ? `Avatar: ${initials}` : 'Avatar';
+
+  return (
+    // Outer wrapper — same footprint as avatar, does NOT clip so ring/badge
+    // can overflow its bounds freely.
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel ?? defaultLabel}
+      style={{ width: s.diameter, height: s.diameter }}
+    >
+
+      {/* ── Avatar circle ─────────────────────────────────────────────── */}
+      <View
+        style={[
+          styles.circle,
+          {
+            width: s.diameter,
+            height: s.diameter,
+            borderRadius: r,
+            backgroundColor:
+              variant !== 'image'
+                ? cr.custom.info.sysInfoContainer
+                : undefined,
+          },
+        ]}
+      >
+        {variant === 'text' && (
+          <Text
+            style={{
+              color: cr.custom.info.sysOnInfoContainer,
+              fontSize: s.fontSize,
+              lineHeight: s.lineHeight,
+              fontWeight: s.fontWeight,
+              includeFontPadding: false,
+              textAlign: 'center',
+            }}
+            numberOfLines={1}
+          >
+            {initials}
+          </Text>
+        )}
+
+        {variant === 'image' && source && (
+          <Image
+            source={source}
+            style={{ width: s.diameter, height: s.diameter }}
+            resizeMode="cover"
+          />
+        )}
+
+        {variant === 'icon' && (
+          icon ?? (
+            <Ionicons
+              name="person"
+              size={s.iconSize}
+              color={cr.custom.info.sysOnInfoContainer}
+            />
+          )
+        )}
+      </View>
+
+      {/* ── Activity ring ─────────────────────────────────────────────── */}
+      {activityRing && (
+        <View
+          accessible={false}
+          style={{
+            position: 'absolute',
+            top: s.ringInset,
+            left: s.ringInset,
+            right: s.ringInset,
+            bottom: s.ringInset,
+            borderRadius: r + Math.abs(s.ringInset),
+            borderWidth: s.ringBorder,
+            borderColor: cr.accent.primary.sysPrimary,
+          }}
+          pointerEvents="none"
+        />
+      )}
+
+      {/* ── Presence badge ────────────────────────────────────────────── */}
+      {presenceBadge && s.badgeSize > 0 && (
+        <View
+          accessible={false}
+          style={[
+            styles.badge,
+            {
+              width: s.badgeSize,
+              height: s.badgeSize,
+              borderRadius: s.badgeSize / 2,
+              bottom: s.badgeOffset,
+              right: s.badgeOffset,
+              backgroundColor:
+                cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            },
+          ]}
+        >
+          <Ionicons
+            name="shield-checkmark"
+            size={s.badgeIconSize}
+            color={cr.custom.info.sysOnInfoContainer}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  circle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden', // clips images to the circle
+  },
+  badge: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});