@compsych/mobile-ui 1.0.0

package/src/EmptyState.tsx

@@ -0,0 +1,364 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type EmptyStateStyle = 'icon' | 'illustration';
+export type EmptyStateViewport = 'desktop' | 'mobile';
+
+export interface EmptyStateProps {
+  /** Visual style of the graphic area */
+  style?: EmptyStateStyle;
+  /** desktop = larger type + 60px icon circle; mobile = smaller type + 48px circle */
+  viewport?: EmptyStateViewport;
+  /** Heading text (default: "No results") */
+  title?: string;
+  /** Body copy below the title */
+  description?: string;
+  /** Hide the description even when `description` is provided */
+  showDescription?: boolean;
+  /** Custom icon rendered inside the icon circle (icon style only) */
+  icon?: React.ReactNode;
+  /** Label for the optional action button */
+  actionLabel?: string;
+  onAction?: () => void;
+  /** Whether the action button is shown (default: true when actionLabel is set) */
+  showAction?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ── Size tokens by viewport ───────────────────────────────────────────────────
+
+const VIEWPORT = {
+  desktop: {
+    iconCircle: 60,
+    iconSize: 32,
+    titleFontSize: ts.titleMedium.sysFontSize,
+    titleLineHeight: ts.titleMedium.sysLineHeight,
+    descFontSize: ts.bodyMedium.sysFontSize,
+    descLineHeight: ts.bodyMedium.sysLineHeight,
+    contentGap: dim.spacing.padding.sysPadding24,
+    btnHeight: 40,
+    btnPaddingL: dim.spacing.padding.sysPadding16,
+    btnPaddingR: dim.spacing.padding.sysPadding24,
+    btnGap: dim.spacing.padding.sysPadding8,
+    btnFontSize: ts.labelMedium.sysFontSize,
+    btnLineHeight: ts.labelMedium.sysLineHeight,
+    btnTracking: ts.labelMedium.sysTracking,
+  },
+  mobile: {
+    iconCircle: 48,
+    iconSize: 24,
+    titleFontSize: ts.labelLarge.sysFontSize,
+    titleLineHeight: ts.labelLarge.sysLineHeight,
+    descFontSize: ts.bodySmall.sysFontSize,
+    descLineHeight: ts.bodySmall.sysLineHeight,
+    contentGap: dim.spacing.padding.sysPadding16,
+    btnHeight: 32,
+    btnPaddingL: dim.spacing.padding.sysPadding12,
+    btnPaddingR: dim.spacing.padding.sysPadding16,
+    btnGap: dim.spacing.padding.sysPadding4,
+    btnFontSize: ts.labelSmall.sysFontSize,
+    btnLineHeight: ts.labelSmall.sysLineHeight,
+    btnTracking: ts.labelSmall.sysTracking,
+  },
+} as const;
+
+// ── Illustration ──────────────────────────────────────────────────────────────
+// A pure-View recreation of the Figma "collage of cards" illustration.
+// Built at 280×157 px (scaled from the Figma 398×224 desktop version).
+
+const ILLUS_W = 280;
+const ILLUS_H = 157;
+const SCALE = ILLUS_W / 398; // ≈ 0.703
+
+const CARD_W = Math.round(160 * SCALE); // 112
+const CARD_H = Math.round(98 * SCALE);  // 69
+
+function scaledPos(left: number, top: number) {
+  return {
+    left: Math.round(left * SCALE),
+    top: Math.round(top * SCALE),
+  };
+}
+
+function EmptyIllustration() {
+  // Purely decorative — hidden from accessibility tree
+  // Central active card
+  const central = scaledPos(119, 63);
+  // Surrounding faded cards
+  const positions = [
+    scaledPos(-53, 63),
+    scaledPos(291, 63),
+    scaledPos(33, 173),
+    scaledPos(205, 173),
+    scaledPos(33, -47),
+    scaledPos(205, -47),
+  ];
+
+  return (
+    <View
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={[styles.illusContainer, { width: ILLUS_W, height: ILLUS_H }]}
+    >
+      {/* Faded background cards */}
+      {positions.map((pos, i) => (
+        <View
+          key={i}
+          style={[
+            styles.card,
+            {
+              left: pos.left,
+              top: pos.top,
+              width: CARD_W,
+              height: CARD_H,
+              borderColor: cr.outline.sysOutlineVariant,
+              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            },
+            styles.cardFaded,
+          ]}
+        />
+      ))}
+
+      {/* Central focused card */}
+      <View
+        style={[
+          styles.card,
+          styles.cardActive,
+          {
+            left: central.left,
+            top: central.top,
+            width: CARD_W,
+            height: CARD_H,
+            borderColor: cr.accent.primary.sysPrimary,
+            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          },
+        ]}
+      >
+        {/* Skeleton content lines */}
+        <View
+          style={[
+            styles.skeletonLine,
+            {
+              top: Math.round(15 * SCALE),
+              left: Math.round(15 * SCALE),
+              width: Math.round(32 * SCALE),
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.skeletonLine,
+            {
+              top: Math.round(51 * SCALE),
+              left: Math.round(15 * SCALE),
+              width: Math.round(96 * SCALE),
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.skeletonLine,
+            {
+              top: Math.round(63 * SCALE),
+              left: Math.round(15 * SCALE),
+              width: Math.round(122 * SCALE),
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EmptyState({
+  style = 'icon',
+  viewport = 'mobile',
+  title = 'No results',
+  description = 'Description if needed',
+  showDescription = true,
+  icon,
+  actionLabel,
+  onAction,
+  showAction,
+}: EmptyStateProps) {
+  const vp = VIEWPORT[viewport];
+  const hasAction = showAction !== undefined ? showAction : !!actionLabel;
+
+  return (
+    <View style={styles.root}>
+      {/* ── Graphic ───────────────────────────────────────────────────────── */}
+      {style === 'illustration' ? (
+        <EmptyIllustration />
+      ) : (
+        <View
+          style={[
+            styles.iconCircle,
+            {
+              width: vp.iconCircle,
+              height: vp.iconCircle,
+              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLow,
+            },
+          ]}
+        >
+          {icon ?? (
+            <Ionicons
+              name="apps-outline"
+              size={vp.iconSize}
+              color={cr.surface.surface.sysOnSurfaceVariant}
+            />
+          )}
+        </View>
+      )}
+
+      {/* ── Content ───────────────────────────────────────────────────────── */}
+      <View style={[styles.content, { gap: vp.contentGap }]}>
+        {/* Text block */}
+        <View style={styles.textBlock}>
+          <Text
+            style={{
+              color: cr.surface.surface.sysOnSurface,
+              fontSize: vp.titleFontSize,
+              lineHeight: vp.titleLineHeight,
+              fontWeight: '400',
+              textAlign: 'center',
+              includeFontPadding: false,
+            }}
+          >
+            {title}
+          </Text>
+
+          {showDescription && description && (
+            <Text
+              style={{
+                color: cr.surface.surface.sysOnSurfaceVariant,
+                fontSize: vp.descFontSize,
+                lineHeight: vp.descLineHeight,
+                fontWeight: '400',
+                textAlign: 'center',
+                includeFontPadding: false,
+              }}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+
+        {/* Action button */}
+        {hasAction && actionLabel && (
+          <Pressable
+            onPress={onAction}
+            accessibilityRole="button"
+            accessibilityLabel={actionLabel}
+            style={({ pressed }) => [
+              styles.actionBtn,
+              {
+                height: vp.btnHeight,
+                paddingLeft: vp.btnPaddingL,
+                paddingRight: vp.btnPaddingR,
+                gap: vp.btnGap,
+                borderColor: cr.outline.sysOutline,
+              },
+              pressed && { opacity: 0.76 },
+            ]}
+          >
+            <Ionicons
+              name="add"
+              size={16}
+              color={cr.surface.surface.sysOnSurface}
+            />
+            <Text
+              style={{
+                color: cr.surface.surface.sysOnSurface,
+                fontSize: vp.btnFontSize,
+                lineHeight: vp.btnLineHeight,
+                letterSpacing: vp.btnTracking,
+                fontWeight: '400',
+                includeFontPadding: false,
+              }}
+            >
+              {actionLabel}
+            </Text>
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    padding: dim.spacing.padding.sysPadding24,
+    borderRadius: dim.borderRadius.sysRadiusLg,
+    alignItems: 'center',
+    gap: dim.spacing.padding.sysPadding24,
+    alignSelf: 'center',
+  },
+
+  // ── Icon circle ───────────────────────────────────────────────────────────
+  iconCircle: {
+    borderRadius: 9999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+
+  // ── Content block ─────────────────────────────────────────────────────────
+  content: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  textBlock: {
+    alignSelf: 'stretch',
+    gap: dim.spacing.padding.sysPadding4,
+    alignItems: 'center',
+  },
+
+  // ── Action button ─────────────────────────────────────────────────────────
+  actionBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    borderRadius: 9999,
+    overflow: 'hidden',
+  },
+
+  // ── Illustration ──────────────────────────────────────────────────────────
+  illusContainer: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  card: {
+    position: 'absolute',
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    borderRadius: dim.borderRadius.sysRadiusMd,
+    overflow: 'hidden',
+  },
+  cardFaded: {
+    opacity: 0.48,
+  },
+  cardActive: {
+    // Active ring: sysPrimary08 spread shadow
+    shadowColor: cr.accent.primary.sysPrimary,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.08,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  skeletonLine: {
+    position: 'absolute',
+    height: Math.round(6 * SCALE),
+    borderRadius: 9999,
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
+  },
+});

package/src/HeaderText.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text, type TextProps } from 'react-native';
+
+import { sys } from './tokens';
+
+export type HeaderVariant =
+  | 'large'
+  | 'medium'
+  | 'small'
+  | 'headlineLarge'
+  | 'headlineMedium'
+  | 'headlineSmall'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'titleSmall';
+
+export interface HeaderTextProps extends TextProps {
+  variant?: HeaderVariant;
+  emphasized?: boolean;
+  color?: string;
+}
+
+const FONT_FAMILY: Record<string, string> = {
+  regular: 'GoogleSans_400Regular',
+  medium: 'GoogleSans_500Medium',
+  semibold: 'GoogleSans_600SemiBold',
+};
+
+const VARIANT_TOKEN_KEY: Record<HeaderVariant, string> = {
+  large: 'displayLarge',
+  medium: 'displayMedium',
+  small: 'displaySmall',
+  headlineLarge: 'headlineLarge',
+  headlineMedium: 'headlineMedium',
+  headlineSmall: 'headlineSmall',
+  titleLarge: 'titleLarge',
+  titleMedium: 'titleMedium',
+  titleSmall: 'titleSmall',
+};
+
+const { typeScale: ts } = sys;
+
+export function HeaderText({
+  variant = 'medium',
+  emphasized = false,
+  color,
+  style,
+  ...rest
+}: HeaderTextProps) {
+  const token = ts[VARIANT_TOKEN_KEY[variant]];
+  const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
+
+  return (
+    <Text
+      accessibilityRole="header"
+      style={[
+        {
+          fontFamily: FONT_FAMILY[weight],
+          fontSize: token.sysFontSize,
+          lineHeight: token.sysLineHeight,
+          letterSpacing: token.sysTracking,
+          color,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,228 @@
+import React, { useState } from 'react';
+import {
+  TextInput,
+  TextInputProps,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  size?: InputSize;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  invalid?: boolean;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+const SIZE_TOKENS = {
+  sm: {
+    height: 40,
+    paddingH: dim.spacing.padding.sysPadding12,
+    paddingV: dim.spacing.padding.sysPadding8,
+    gap: dim.spacing.padding.sysPadding4,
+    fontSize: ts.bodySmall.sysFontSize,
+    lineHeight: ts.bodySmall.sysLineHeight,
+    radius: dim.borderRadius.sysRadiusSm,
+    iconSize: 20,
+  },
+  md: {
+    height: 48,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding12,
+    gap: dim.spacing.padding.sysPadding8,
+    fontSize: ts.bodyMedium.sysFontSize,
+    lineHeight: ts.bodyMedium.sysLineHeight,
+    radius: dim.borderRadius.sysRadiusSm,
+    iconSize: 20,
+  },
+  lg: {
+    height: 56,
+    paddingH: dim.spacing.padding.sysPadding20,
+    paddingV: dim.spacing.padding.sysPadding16,
+    gap: dim.spacing.padding.sysPadding8,
+    fontSize: ts.bodyMedium.sysFontSize,
+    lineHeight: ts.bodyMedium.sysLineHeight,
+    radius: dim.borderRadius.sysRadiusMd,
+    iconSize: 20,
+  },
+};
+
+// Focus-ring halo: 4px spread, sysPrimary08 colour — achieved with a fixed
+// 4px-padded wrapper whose background switches on focus.
+const RING_SIZE = 4;
+
+export function Input({
+  size = 'md',
+  label,
+  helperText,
+  errorText,
+  invalid = false,
+  leadingIcon,
+  trailingIcon,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...rest
+}: InputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const s = SIZE_TOKENS[size];
+  const isDisabled = editable === false;
+  const hasError = invalid || !!errorText;
+
+  // ── Border ──────────────────────────────────────────────────────────────
+  const borderWidth = isFocused || hasError
+    ? dim.borderWidth.sysStrokeMedium
+    : dim.borderWidth.sysStrokeThin;
+
+  const borderColor = hasError
+    ? cr.error.sysError
+    : isFocused
+    ? cr.accent.primary.sysPrimary
+    : cr.outline.sysOutlineVariant;
+
+  // ── Text colours ─────────────────────────────────────────────────────────
+  const textColor = cr.surface.surface.sysOnSurface;
+  const placeholderColor = cr.surface.surface.sysOnSurfaceVariant;
+
+  // ── Helper / error text ──────────────────────────────────────────────────
+  const supportingText = errorText ?? helperText;
+  const supportingColor = hasError
+    ? cr.error.sysError
+    : cr.surface.surface.sysOnSurfaceVariant;
+
+  return (
+    <View style={[styles.wrapper, isDisabled && styles.disabled]}>
+      {/* Label */}
+      {label && (
+        <Text
+          style={[
+            styles.label,
+            {
+              color: hasError
+                ? cr.error.sysError
+                : cr.surface.surface.sysOnSurfaceVariant,
+              fontSize: ts.labelMedium.sysFontSize,
+              lineHeight: ts.labelMedium.sysLineHeight,
+            },
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+
+      {/* Focus-ring halo wrapper — always 4px padding, bg appears on focus */}
+      <View
+        style={{
+          padding: RING_SIZE,
+          borderRadius: s.radius + RING_SIZE,
+          backgroundColor:
+            isFocused && !hasError
+              ? cr.transparent.primary.sysPrimary08
+              : 'transparent',
+        }}
+      >
+        {/* Input container */}
+        <View
+          style={{
+            height: s.height,
+            borderRadius: s.radius,
+            borderWidth,
+            borderColor,
+            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: s.paddingH,
+            paddingVertical: s.paddingV,
+            gap: s.gap,
+            overflow: 'hidden',
+          }}
+        >
+          {/* Leading icon */}
+          {leadingIcon && (
+            <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+              {leadingIcon}
+            </View>
+          )}
+
+          {/* Text input */}
+          <TextInput
+            {...rest}
+            editable={editable}
+            accessibilityLabel={label ?? rest.placeholder}
+            accessibilityHint={supportingText}
+            accessibilityState={{ disabled: isDisabled }}
+            onFocus={(e) => {
+              setIsFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              onBlur?.(e);
+            }}
+            style={{
+              flex: 1,
+              fontSize: s.fontSize,
+              lineHeight: s.lineHeight,
+              color: textColor,
+              includeFontPadding: false,
+              // Reset RN TextInput default padding/margin
+              padding: 0,
+              margin: 0,
+            }}
+            placeholderTextColor={placeholderColor}
+          />
+
+          {/* Trailing icon */}
+          {trailingIcon && (
+            <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+              {trailingIcon}
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Supporting text: error message or helper text */}
+      {supportingText && (
+        <Text
+          style={[
+            styles.supporting,
+            {
+              color: supportingColor,
+              fontSize: ts.bodySmall.sysFontSize,
+              lineHeight: ts.bodySmall.sysLineHeight,
+            },
+          ]}
+        >
+          {supportingText}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 4,
+  },
+  disabled: {
+    opacity: 0.48,
+  },
+  label: {
+    fontWeight: '500',
+    includeFontPadding: false,
+    // indent to align with the input text (ring padding + horizontal padding)
+    paddingLeft: RING_SIZE,
+  },
+  supporting: {
+    includeFontPadding: false,
+    paddingLeft: RING_SIZE,
+  },
+});