@compsych/mobile-ui 1.0.0

package/src/Badge.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { sys } from './tokens';
+
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeStyle =
+  | 'filled'
+  | 'positive'
+  | 'danger'
+  | 'elevated'
+  | 'tonal'
+  | 'dot';
+
+export interface BadgeProps {
+  /** Number or short string to display — ignored for `dot` style */
+  label?: number | string;
+  size?: BadgeSize;
+  badgeStyle?: BadgeStyle;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ── Size tokens ───────────────────────────────────────────────────────────────
+
+const SIZE_TOKENS = {
+  sm: {
+    outerSize: 16,
+    paddingH: dim.spacing.padding.sysPadding4,
+    fontSize: ts.labelSmall.sysFontSize,
+    lineHeight: ts.labelSmall.sysLineHeight,
+    letterSpacing: ts.labelSmall.sysTracking,
+    dotInner: 6,
+  },
+  md: {
+    outerSize: 20,
+    paddingH: dim.spacing.padding.sysPadding8,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    letterSpacing: ts.labelMedium.sysTracking,
+    dotInner: 8,
+  },
+  lg: {
+    outerSize: 24,
+    paddingH: dim.spacing.padding.sysPadding8,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    letterSpacing: ts.labelMedium.sysTracking,
+    dotInner: 12,
+  },
+};
+
+// ── Style/color tokens ────────────────────────────────────────────────────────
+
+type StyleColors = {
+  bg: string;
+  text: string;
+  elevated: boolean;
+};
+
+function getStyleColors(style: BadgeStyle): StyleColors {
+  switch (style) {
+    case 'filled':
+      return {
+        bg: cr.accent.primary.sysPrimary,
+        text: cr.accent.primary.sysOnPrimary,
+        elevated: false,
+      };
+    case 'positive':
+      return {
+        bg: cr.custom.success.sysSuccess,
+        text: cr.custom.success.sysOnSuccess,
+        elevated: false,
+      };
+    case 'danger':
+      return {
+        bg: cr.error.sysError,
+        text: cr.error.sysOnError,
+        elevated: false,
+      };
+    case 'elevated':
+      return {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        text: cr.surface.surface.sysOnSurface,
+        elevated: true,
+      };
+    case 'tonal':
+      return {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainer,
+        text: cr.surface.surface.sysOnSurface,
+        elevated: false,
+      };
+    case 'dot':
+      // Container is transparent; the dot itself is sysPrimary
+      return {
+        bg: 'transparent',
+        text: 'transparent',
+        elevated: false,
+      };
+  }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function Badge({
+  label,
+  size = 'md',
+  badgeStyle = 'filled',
+}: BadgeProps) {
+  const s = SIZE_TOKENS[size];
+  const c = getStyleColors(badgeStyle);
+
+  // Dot variant — render a solid filled circle inside a transparent wrapper
+  if (badgeStyle === 'dot') {
+    return (
+      <View
+        accessible={false}
+        style={{
+          width: s.outerSize,
+          height: s.outerSize,
+          borderRadius: s.outerSize / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: s.dotInner,
+            height: s.dotInner,
+            borderRadius: s.dotInner / 2,
+            backgroundColor: cr.accent.primary.sysPrimary,
+          }}
+        />
+      </View>
+    );
+  }
+
+  // Number/text badge — pill that is at minimum a circle, grows wider for
+  // longer labels (e.g. "99+")
+  const displayLabel = label !== undefined ? String(label) : '';
+
+  return (
+    <View
+      accessible
+      accessibilityLabel={displayLabel ? `${displayLabel} badge` : 'Badge'}
+      style={[
+        styles.root,
+        {
+          minWidth: s.outerSize,
+          height: s.outerSize,
+          borderRadius: s.outerSize / 2,
+          paddingHorizontal: s.paddingH,
+          backgroundColor: c.bg,
+        },
+        c.elevated && styles.elevated,
+      ]}
+    >
+      <Text
+        style={{
+          color: c.text,
+          fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
+          letterSpacing: s.letterSpacing,
+          fontWeight: '500',
+          includeFontPadding: false,
+          textAlign: 'center',
+        }}
+        numberOfLines={1}
+      >
+        {displayLabel}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    // overflow visible so elevated shadow renders outside the pill
+    overflow: 'visible',
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+});

package/src/BodyText.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Text, type TextProps } from 'react-native';
+
+import { sys } from './tokens';
+
+export type BodyVariant =
+  | 'large'
+  | 'medium'
+  | 'small'
+  | 'labelLarge'
+  | 'labelMedium'
+  | 'labelSmall';
+
+export interface BodyTextProps extends TextProps {
+  variant?: BodyVariant;
+  emphasized?: boolean;
+  color?: string;
+}
+
+const FONT_FAMILY: Record<string, string> = {
+  regular: 'GoogleSans_400Regular',
+  medium: 'GoogleSans_500Medium',
+  semibold: 'GoogleSans_600SemiBold',
+};
+
+const VARIANT_TOKEN_KEY: Record<BodyVariant, string> = {
+  large: 'bodyLarge',
+  medium: 'bodyMedium',
+  small: 'bodySmall',
+  labelLarge: 'labelLarge',
+  labelMedium: 'labelMedium',
+  labelSmall: 'labelSmall',
+};
+
+const { typeScale: ts } = sys;
+
+export function BodyText({
+  variant = 'medium',
+  emphasized = false,
+  color,
+  style,
+  ...rest
+}: BodyTextProps) {
+  const token = ts[VARIANT_TOKEN_KEY[variant]];
+  const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
+
+  return (
+    <Text
+      style={[
+        {
+          fontFamily: FONT_FAMILY[weight],
+          fontSize: token.sysFontSize,
+          lineHeight: token.sysLineHeight,
+          letterSpacing: token.sysTracking,
+          color,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}

package/src/Breadcrumb.tsx

@@ -0,0 +1,192 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type BreadcrumbSize = 'sm' | 'lg';
+
+export interface BreadcrumbItem {
+  /** Display text. Omit when `isHome` is true. */
+  label?: string;
+  /** Renders the home icon instead of text */
+  isHome?: boolean;
+  /** Renders "…" — tap to expand hidden crumbs */
+  isOverflow?: boolean;
+  /** Reduces opacity; non-interactive */
+  disabled?: boolean;
+  /**
+   * Press handler. Omit (or leave undefined) for the current/last item —
+   * it will automatically render as non-interactive with `sysOnSurface` text.
+   */
+  onPress?: () => void;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  size?: BreadcrumbSize;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+const SIZE_TOKENS = {
+  sm: {
+    fontSize: ts.labelSmall.sysFontSize,
+    lineHeight: ts.labelSmall.sysLineHeight,
+    letterSpacing: ts.labelSmall.sysTracking,
+    paddingH: dim.spacing.padding.sysPadding8,
+    paddingV: dim.spacing.padding.sysPadding2,
+    iconSize: 16,
+    dividerWidth: 8,
+  },
+  lg: {
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    letterSpacing: ts.labelMedium.sysTracking,
+    paddingH: dim.spacing.padding.sysPadding8,
+    paddingV: dim.spacing.padding.sysPadding4,
+    iconSize: 16,
+    dividerWidth: 8,
+  },
+};
+
+export function Breadcrumb({ items, size = 'lg' }: BreadcrumbProps) {
+  const s = SIZE_TOKENS[size];
+
+  return (
+    // ScrollView lets a long breadcrumb scroll horizontally without clipping
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.row}
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        // Last item is always "current" regardless of whether onPress is set
+        const isCurrent = isLast;
+        const isInteractive = !isCurrent && !item.disabled;
+
+        const textColor = isCurrent
+          ? cr.surface.surface.sysOnSurface
+          : cr.surface.surface.sysOnSurfaceVariant;
+
+        const content = (
+          <View
+            style={[
+              styles.content,
+              {
+                paddingHorizontal: s.paddingH,
+                paddingVertical: item.isHome ? dim.spacing.padding.sysPadding2 : s.paddingV,
+                gap: item.isHome ? 0 : dim.spacing.padding.sysPadding4,
+              },
+              item.disabled && styles.disabled,
+            ]}
+          >
+            {item.isHome ? (
+              <Ionicons
+                name="home"
+                size={s.iconSize}
+                color={cr.surface.surface.sysOnSurfaceVariant}
+              />
+            ) : (
+              <Text
+                style={{
+                  color: textColor,
+                  fontSize: s.fontSize,
+                  lineHeight: s.lineHeight,
+                  letterSpacing: s.letterSpacing,
+                  includeFontPadding: false,
+                  fontWeight: isCurrent ? '500' : '400',
+                }}
+                numberOfLines={1}
+              >
+                {item.isOverflow ? '…' : item.label}
+              </Text>
+            )}
+          </View>
+        );
+
+        return (
+          <View key={index} style={styles.item}>
+            {/* Item — pressable if navigable, plain View if current/disabled */}
+            {isInteractive ? (
+              <Pressable
+                onPress={item.onPress}
+                accessibilityRole="link"
+                accessibilityLabel={item.isHome ? 'Home' : item.label}
+                style={({ pressed }) => [
+                  styles.pressable,
+                  pressed && styles.pressed,
+                ]}
+              >
+                {content}
+              </Pressable>
+            ) : (
+              <View
+                accessibilityRole={isCurrent ? 'text' : undefined}
+                accessibilityState={isCurrent ? { selected: true } : undefined}
+              >
+                {content}
+              </View>
+            )}
+
+            {/* Divider — shown after every item except the last */}
+            {!isLast && (
+              <View
+                accessible={false}
+                style={[styles.divider, { width: s.dividerWidth }]}
+              >
+                <Text
+                  style={{
+                    color: cr.surface.surface.sysOnSurfaceVariant,
+                    fontSize: s.fontSize,
+                    lineHeight: s.lineHeight,
+                    includeFontPadding: false,
+                    textAlign: 'center',
+                  }}
+                >
+                  /
+                </Text>
+              </View>
+            )}
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  pressable: {
+    borderRadius: 4,
+  },
+  pressed: {
+    backgroundColor: cr.transparent.neutral.sysBlack10,
+    borderRadius: 4,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.64,
+  },
+  divider: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Button.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type ButtonVariant =
+  | 'filled'
+  | 'tonal'
+  | 'outlined'
+  | 'elevated'
+  | 'text'
+  | 'danger'
+  | 'danger-outlined';
+
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  label: string;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  iconOnly?: boolean;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+const VARIANT_TOKENS: Record<
+  ButtonVariant,
+  { bg: string; label: string; borderColor: string; borderWidth: number }
+> = {
+  filled: {
+    bg: cr.accent.primary.sysPrimary,
+    label: cr.accent.primary.sysOnPrimary,
+    borderColor: 'transparent',
+    borderWidth: 0,
+  },
+  tonal: {
+    bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+    label: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+    borderColor: 'transparent',
+    borderWidth: 0,
+  },
+  outlined: {
+    bg: 'transparent',
+    label: cr.surface.surface.sysOnSurface,
+    borderColor: cr.outline.sysOutline,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+  },
+  elevated: {
+    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    label: cr.surface.surface.sysOnSurface,
+    borderColor: 'transparent',
+    borderWidth: 0,
+  },
+  text: {
+    bg: 'transparent',
+    label: cr.surface.surface.sysOnSurface,
+    borderColor: 'transparent',
+    borderWidth: 0,
+  },
+  danger: {
+    bg: cr.error.sysError,
+    label: cr.error.sysOnError,
+    borderColor: 'transparent',
+    borderWidth: 0,
+  },
+  'danger-outlined': {
+    bg: 'transparent',
+    label: cr.error.sysError,
+    borderColor: cr.error.sysErrorContainer,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+  },
+};
+
+const SIZE_TOKENS = {
+  sm: {
+    height: 32,
+    paddingH: dim.spacing.padding.sysPadding12,
+    paddingV: dim.spacing.padding.sysPadding4,
+    fontSize: ts.labelSmall.sysFontSize,
+    lineHeight: ts.labelSmall.sysLineHeight,
+    iconSize: sys.iconography.sysSizeXs,
+  },
+  md: {
+    height: 40,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding8,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    iconSize: sys.iconography.sysSizeXs,
+  },
+  lg: {
+    height: 48,
+    paddingH: dim.spacing.padding.sysPadding24,
+    paddingV: dim.spacing.padding.sysPadding12,
+    fontSize: ts.labelLarge.sysFontSize,
+    lineHeight: ts.labelLarge.sysLineHeight,
+    iconSize: sys.iconography.sysSizeSm,
+  },
+  xl: {
+    height: 56,
+    paddingH: dim.spacing.padding.sysPadding32,
+    paddingV: dim.spacing.padding.sysPadding16,
+    fontSize: ts.titleSmall.sysFontSize,
+    lineHeight: ts.titleSmall.sysLineHeight,
+    iconSize: sys.iconography.sysSizeMd,
+  },
+};
+
+export function Button({
+  variant = 'filled',
+  size = 'md',
+  label,
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  iconOnly = false,
+  leadingIcon,
+  trailingIcon,
+  onPress,
+  accessibilityLabel,
+  ...rest
+}: ButtonProps) {
+  const v = VARIANT_TOKENS[variant];
+  const s = SIZE_TOKENS[size];
+  const isDisabled = disabled || loading;
+  const paddingH = variant === 'text' ? 0 : s.paddingH;
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={isDisabled ? undefined : onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={({ pressed }) => [
+        styles.root,
+        {
+          backgroundColor: v.bg,
+          borderColor: v.borderColor,
+          borderWidth: v.borderWidth,
+          borderRadius: dim.borderRadius.sysRadiusFull,
+          ...(iconOnly
+            ? { width: s.height, height: s.height }
+            : variant === 'text'
+            ? {
+                // Text variant is content-height (no fixed container). Figma:
+                // sm=26px, md=28px, lg=31px, xl=32px — each resolves to
+                // lineHeight + 2×paddingV, not the standard fixed height.
+                paddingHorizontal: 0,
+                paddingVertical: s.paddingV,
+              }
+            : {
+                height: s.height,
+                paddingHorizontal: paddingH,
+                paddingVertical: s.paddingV,
+              }),
+          ...(fullWidth && !iconOnly ? { alignSelf: 'stretch' } : {}),
+          opacity: isDisabled ? 0.48 : pressed ? 0.82 : 1,
+          ...(variant === 'elevated'
+            ? {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.06,
+                shadowRadius: 4,
+                elevation: 1,
+              }
+            : {}),
+        },
+      ]}
+    >
+      <View style={[styles.content, { gap: dim.spacing.padding.sysPadding8 }]}>
+        {loading ? (
+          <ActivityIndicator size={s.iconSize} color={v.label} />
+        ) : leadingIcon ? (
+          <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center' }}>
+            {leadingIcon}
+          </View>
+        ) : null}
+
+        {!iconOnly && (
+          <Text
+            style={{
+              color: v.label,
+              fontSize: s.fontSize,
+              lineHeight: s.lineHeight,
+              fontWeight: '600',
+              includeFontPadding: false,
+            }}
+            numberOfLines={1}
+          >
+            {label}
+          </Text>
+        )}
+
+        {trailingIcon && (
+          <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center' }}>
+            {trailingIcon}
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});