@compsych/mobile-ui 1.0.0

package/src/Pagination.tsx

@@ -0,0 +1,353 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { sys } from './tokens';
+
+export type PaginationSize = 'sm' | 'lg';
+
+// Shared token shape so sub-components accept either size
+type SizeTokens = {
+  itemSize: number;
+  iconSize: number;
+  fontSize: number;
+  lineHeight: number;
+  activeWeight: '500';
+  inactiveWeight: '400';
+  gap: number;
+  hasPill: boolean;
+  pillPaddingH: number;
+  pillPaddingV: number;
+  pillGap: number;
+};
+
+export interface PaginationProps {
+  size?: PaginationSize;
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  /** How many page numbers to show on each side of the current page */
+  siblingCount?: number;
+  /** On mobile/compact layouts — renders only prev + next arrows (no page numbers) */
+  compact?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ── Size tokens ───────────────────────────────────────────────────────────────
+
+const SIZE_TOKENS = {
+  sm: {
+    itemSize: 32,
+    iconSize: 20,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    activeWeight: '500' as const,
+    inactiveWeight: '400' as const,
+    gap: dim.spacing.padding.sysPadding8,
+    // Pill container: sm has NO outer pill
+    hasPill: false,
+    pillPaddingH: 0,
+    pillPaddingV: 0,
+    pillGap: dim.spacing.padding.sysPadding8,
+  },
+  lg: {
+    itemSize: 40,
+    iconSize: 24,
+    fontSize: ts.labelLarge.sysFontSize,
+    lineHeight: ts.labelLarge.sysLineHeight,
+    activeWeight: '500' as const,
+    inactiveWeight: '400' as const,
+    gap: dim.spacing.padding.sysPadding16,
+    // Pill container: lg wraps in pill border
+    hasPill: true,
+    pillPaddingH: dim.spacing.padding.sysPadding12,
+    pillPaddingV: dim.spacing.padding.sysPadding8,
+    pillGap: dim.spacing.padding.sysPadding16,
+  },
+};
+
+// ── Pagination range logic ────────────────────────────────────────────────────
+
+function buildPageRange(
+  total: number,
+  current: number,
+  siblings: number,
+): (number | '...')[] {
+  // Always show: 1, last, current, siblings
+  const range: (number | '...')[] = [];
+
+  if (total <= 1) return [1];
+
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+
+  // First page
+  range.push(1);
+
+  // Left ellipsis
+  if (left > 2) range.push('...');
+
+  // Middle range
+  for (let i = left; i <= right; i++) range.push(i);
+
+  // Right ellipsis
+  if (right < total - 1) range.push('...');
+
+  // Last page
+  if (total > 1) range.push(total);
+
+  return range;
+}
+
+// ── Active ring wrapper ───────────────────────────────────────────────────────
+// Mirrors the 4px padding + sysPrimary08 background pattern from Input.
+
+const RING_SIZE = 4;
+
+// ── Page item ────────────────────────────────────────────────────────────────
+
+interface PageItemProps {
+  s: SizeTokens;
+  page: number;
+  isActive: boolean;
+  onPress: () => void;
+}
+
+function PageItem({ s, page, isActive, onPress }: PageItemProps) {
+  const borderWidth = isActive ? dim.borderWidth.sysStrokeMedium : 0;
+  const borderColor = isActive ? cr.accent.primary.sysPrimary : 'transparent';
+  const textColor = isActive
+    ? cr.custom.info.sysOnInfoContainer
+    : cr.surface.surface.sysOnSurface;
+  const fontWeight = isActive ? s.activeWeight : s.inactiveWeight;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`Page ${page}`}
+      accessibilityState={{ selected: isActive }}
+    >
+      {({ pressed }) => (
+        // Ring wrapper — always RING_SIZE padding for layout stability;
+        // background only when active (or focused — handled via pressed state here)
+        <View
+          style={{
+            padding: RING_SIZE,
+            borderRadius: s.itemSize / 2 + RING_SIZE,
+            backgroundColor: isActive
+              ? cr.transparent.primary.sysPrimary08
+              : 'transparent',
+          }}
+        >
+          <View
+            style={{
+              width: s.itemSize,
+              height: s.itemSize,
+              borderRadius: s.itemSize / 2,
+              borderWidth,
+              borderColor,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: pressed && !isActive
+                ? cr.transparent.neutral.sysBlack10
+                : 'transparent',
+            }}
+          >
+            <Text
+              style={{
+                fontSize: s.fontSize,
+                lineHeight: s.lineHeight,
+                fontWeight,
+                color: textColor,
+                includeFontPadding: false,
+              }}
+            >
+              {page}
+            </Text>
+          </View>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+// ── Ellipsis item ─────────────────────────────────────────────────────────────
+
+function EllipsisItem({ s }: { s: SizeTokens }) {
+  return (
+    <View
+      accessible
+      accessibilityLabel="More pages"
+      style={{
+        width: s.itemSize + RING_SIZE * 2,
+        height: s.itemSize + RING_SIZE * 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text
+        style={{
+          fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
+          fontWeight: s.inactiveWeight,
+          color: cr.surface.surface.sysOnSurfaceVariant,
+          includeFontPadding: false,
+        }}
+      >
+        …
+      </Text>
+    </View>
+  );
+}
+
+// ── Prev / Next button ────────────────────────────────────────────────────────
+
+interface NavButtonProps {
+  s: SizeTokens;
+  direction: 'prev' | 'next';
+  disabled: boolean;
+  onPress: () => void;
+}
+
+function NavButton({ s, direction, disabled, onPress }: NavButtonProps) {
+  const iconName =
+    direction === 'prev' ? 'chevron-back' : 'chevron-forward';
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole="button"
+      accessibilityLabel={direction === 'prev' ? 'Previous page' : 'Next page'}
+      accessibilityState={{ disabled }}
+      style={{ opacity: disabled ? 0.38 : 1 }}
+    >
+      {({ pressed }) => (
+        <View
+          style={{
+            width: s.itemSize,
+            height: s.itemSize,
+            borderRadius: s.itemSize / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: pressed && !disabled
+              ? cr.transparent.neutral.sysBlack10
+              : 'transparent',
+          }}
+        >
+          <Ionicons
+            name={iconName}
+            size={s.iconSize}
+            color={cr.surface.surface.sysOnSurface}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export function Pagination({
+  size = 'lg',
+  totalPages,
+  currentPage,
+  onPageChange,
+  siblingCount = 1,
+  compact = false,
+}: PaginationProps) {
+  const s = SIZE_TOKENS[size];
+  const pages = buildPageRange(totalPages, currentPage, siblingCount);
+
+  const prevDisabled = currentPage <= 1;
+  const nextDisabled = currentPage >= totalPages;
+
+  // ── Compact (prev + next only) ────────────────────────────────────────────
+  const content = compact ? (
+    <View style={[styles.inner, { gap: dim.spacing.padding.sysPadding4 }]}>
+      <NavButton
+        s={s}
+        direction="prev"
+        disabled={prevDisabled}
+        onPress={() => onPageChange(currentPage - 1)}
+      />
+      <NavButton
+        s={s}
+        direction="next"
+        disabled={nextDisabled}
+        onPress={() => onPageChange(currentPage + 1)}
+      />
+    </View>
+  ) : (
+    // ── Full paginator ────────────────────────────────────────────────────
+    <View style={[styles.inner, { gap: s.gap }]}>
+      <NavButton
+        s={s}
+        direction="prev"
+        disabled={prevDisabled}
+        onPress={() => onPageChange(currentPage - 1)}
+      />
+
+      <View style={[styles.pages, { gap: s.hasPill ? 0 : s.gap }]}>
+        {pages.map((p, i) =>
+          p === '...' ? (
+            <EllipsisItem key={`ellipsis-${i}`} s={s} />
+          ) : (
+            <PageItem
+              key={p}
+              s={s}
+              page={p}
+              isActive={p === currentPage}
+              onPress={() => onPageChange(p)}
+            />
+          ),
+        )}
+      </View>
+
+      <NavButton
+        s={s}
+        direction="next"
+        disabled={nextDisabled}
+        onPress={() => onPageChange(currentPage + 1)}
+      />
+    </View>
+  );
+
+  // ── Pill wrapper (lg only) ────────────────────────────────────────────────
+  if (s.hasPill) {
+    return (
+      <View
+        style={[
+          styles.pill,
+          {
+            paddingHorizontal: s.pillPaddingH,
+            paddingVertical: s.pillPaddingV,
+            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            borderColor: cr.outline.sysOutline,
+            borderWidth: dim.borderWidth.sysStrokeThin,
+          },
+        ]}
+      >
+        {content}
+      </View>
+    );
+  }
+
+  return content;
+}
+
+const styles = StyleSheet.create({
+  pill: {
+    alignSelf: 'flex-start',
+    borderRadius: 9999,
+    overflow: 'hidden',
+  },
+  inner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  pages: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/ProgressTracker.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { sys } from './tokens';
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ProgressBar — standalone horizontal bar
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ProgressBarProps {
+  /** 0–100 */
+  progress: number;
+}
+
+export function ProgressBar({ progress }: ProgressBarProps) {
+  const clamped = Math.min(100, Math.max(0, progress));
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: 100, now: clamped }}
+      style={styles.track}
+    >
+      {clamped > 0 && (
+        <View
+          style={[
+            styles.fill,
+            // Use percentage width — relies on the parent having a defined
+            // width (which it always does as flex-stretch in the tracker).
+            { width: `${clamped}%` },
+          ]}
+        />
+      )}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ProgressTracker — multi-step labelled tracker
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type StepState = 'completed' | 'active' | 'pending';
+
+export interface TrackerStep {
+  label: string;
+  /**
+   * `completed` → full green bar
+   * `active`    → partial green bar (25 % fill — the "in-progress" indicator)
+   * `pending`   → empty track
+   */
+  state: StepState;
+}
+
+export type ProgressTrackerSize = 'sm' | 'lg';
+
+export interface ProgressTrackerProps {
+  steps: TrackerStep[];
+  size?: ProgressTrackerSize;
+  /** Show step labels — default true */
+  showLabels?: boolean;
+}
+
+const SIZE_TOKENS = {
+  sm: {
+    fontSize: ts.labelSmall.sysFontSize,
+    lineHeight: ts.labelSmall.sysLineHeight,
+    letterSpacing: ts.labelSmall.sysTracking,
+    labelBarGap: dim.spacing.padding.sysPadding8,
+    stepGap: dim.spacing.padding.sysPadding4,
+  },
+  lg: {
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    letterSpacing: ts.labelMedium.sysTracking,
+    labelBarGap: dim.spacing.padding.sysPadding16,
+    stepGap: dim.spacing.padding.sysPadding8,
+  },
+};
+
+function stepProgress(state: StepState): number {
+  switch (state) {
+    case 'completed': return 100;
+    case 'active':    return 25;
+    case 'pending':   return 0;
+  }
+}
+
+export function ProgressTracker({
+  steps,
+  size = 'lg',
+  showLabels = true,
+}: ProgressTrackerProps) {
+  const s = SIZE_TOKENS[size];
+
+  return (
+    <View style={[styles.row, { gap: s.stepGap }]}>
+      {steps.map((step, i) => {
+        const isActive = step.state !== 'pending';
+        const labelColor = isActive
+          ? cr.surface.surface.sysOnSurface
+          : cr.surface.surface.sysOnSurfaceVariant;
+
+        return (
+          <View key={i} style={styles.step}>
+            {showLabels && (
+              <Text
+                style={{
+                  color: labelColor,
+                  fontSize: s.fontSize,
+                  lineHeight: s.lineHeight,
+                  letterSpacing: s.letterSpacing,
+                  includeFontPadding: false,
+                  marginBottom: s.labelBarGap,
+                }}
+                numberOfLines={1}
+              >
+                {step.label}
+              </Text>
+            )}
+            <ProgressBar progress={stepProgress(step.state)} />
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared styles
+// ─────────────────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  // ProgressBar
+  track: {
+    height: 4,
+    width: '100%',
+    borderRadius: 9999,
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+    overflow: 'hidden',
+  },
+  fill: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 9999,
+    backgroundColor: cr.custom.success.sysSuccess,
+  },
+  // ProgressTracker
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  step: {
+    flex: 1,
+    minWidth: 0,
+  },
+});

package/src/RadioButton.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { sys } from './tokens';
+
+export type RadioButtonSize = 'sm' | 'md';
+
+export interface RadioButtonProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: RadioButtonSize;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+const SIZE_TOKENS = {
+  sm: {
+    // Container (overall hit area)
+    hitArea: 36,
+    // Visible circle
+    circle: 20,
+    // Inner dot when selected
+    dot: 8,
+    fontSize: ts.bodySmall.sysFontSize,
+    lineHeight: ts.bodySmall.sysLineHeight,
+  },
+  md: {
+    hitArea: 40,
+    circle: 24,
+    dot: 10,
+    fontSize: ts.bodyMedium.sysFontSize,
+    lineHeight: ts.bodyMedium.sysLineHeight,
+  },
+};
+
+export function RadioButton({
+  checked: checkedProp,
+  defaultChecked = false,
+  onChange,
+  size = 'md',
+  label,
+  description,
+  disabled = false,
+  invalid = false,
+}: RadioButtonProps) {
+  const [internalChecked, setInternalChecked] = useState<boolean>(defaultChecked);
+  const isControlled = checkedProp !== undefined;
+  const isChecked: boolean = isControlled ? (checkedProp as boolean) : internalChecked;
+
+  const s = SIZE_TOKENS[size];
+
+  function handlePress() {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) setInternalChecked(next);
+    onChange?.(next);
+  }
+
+  // Border/fill colours
+  const borderColor = invalid
+    ? cr.error.sysError
+    : isChecked
+    ? cr.accent.primary.sysPrimary
+    : cr.outline.sysOutlineFixed;
+
+  const circleBg = isChecked ? cr.accent.primary.sysPrimary : 'transparent';
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityRole="radio"
+      accessibilityLabel={label}
+      accessibilityState={{ checked: isChecked, disabled }}
+      style={({ pressed }) => [
+        styles.root,
+        disabled && styles.disabled,
+      ]}
+    >
+      {({ pressed }) => (
+        <>
+          {/* Hit-area / state-layer circle */}
+          <View
+            style={[
+              styles.hitArea,
+              {
+                width: s.hitArea,
+                height: s.hitArea,
+                borderRadius: s.hitArea / 2,
+                backgroundColor:
+                  pressed && !disabled
+                    ? cr.transparent.neutral.sysBlack10
+                    : 'transparent',
+              },
+            ]}
+          >
+            {/* Visible radio circle */}
+            <View
+              style={{
+                width: s.circle,
+                height: s.circle,
+                borderRadius: s.circle / 2,
+                borderWidth: dim.borderWidth.sysStrokeMedium,
+                borderColor,
+                backgroundColor: circleBg,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {/* Inner white dot — only visible when selected */}
+              {isChecked && (
+                <View
+                  style={{
+                    width: s.dot,
+                    height: s.dot,
+                    borderRadius: s.dot / 2,
+                    backgroundColor: cr.accent.primary.sysOnPrimary,
+                  }}
+                />
+              )}
+            </View>
+          </View>
+
+          {(label || description) && (
+            <View style={[styles.textBlock, { gap: 2 }]}>
+              {label && (
+                <Text
+                  style={{
+                    color: cr.surface.surface.sysOnSurface,
+                    fontSize: s.fontSize,
+                    lineHeight: s.lineHeight,
+                    includeFontPadding: false,
+                  }}
+                >
+                  {label}
+                </Text>
+              )}
+              {description && (
+                <Text
+                  style={{
+                    color: cr.surface.surface.sysOnSurfaceVariant,
+                    fontSize: s.fontSize - 2,
+                    lineHeight: s.lineHeight - 2,
+                    includeFontPadding: false,
+                  }}
+                >
+                  {description}
+                </Text>
+              )}
+            </View>
+          )}
+        </>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  hitArea: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textBlock: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  disabled: {
+    opacity: 0.48,
+  },
+});