@compsych/mobile-ui 1.0.0

package/src/Card.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { Pressable, StyleSheet, View, type PressableProps, type ViewProps } from 'react-native';
+import { sys } from './tokens';
+
+export type CardVariant = 'outlined' | 'filled' | 'gradient';
+export type CardSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface CardProps {
+  variant?: CardVariant;
+  size?: CardSize;
+  interactive?: boolean;
+  disabled?: boolean;
+  current?: boolean;
+  fullWidth?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+  accessibilityLabel?: string;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+const VARIANT_TOKENS = {
+  outlined: {
+    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    borderColor: cr.outline.sysOutline,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    elevated: false,
+  },
+  filled: {
+    bg: cr.accent.primary.sysPrimaryContainer,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    elevated: true,
+  },
+  gradient: {
+    // Approximates the gradient variant with a tinted surface; expo-linear-gradient not required.
+    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    borderColor: cr.outline.sysOutline,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    elevated: false,
+  },
+};
+
+const SIZE_TOKENS = {
+  sm: {
+    padding: dim.spacing.padding.sysPadding24,
+    borderRadius: dim.borderRadius.sysRadiusLg,
+    gap: dim.spacing.padding.sysPadding12,
+  },
+  md: {
+    padding: dim.spacing.padding.sysPadding32,
+    borderRadius: dim.borderRadius.sysRadiusLg,
+    gap: dim.spacing.padding.sysPadding16,
+  },
+  lg: {
+    padding: 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,
+  },
+};
+
+export function Card({
+  variant = 'outlined',
+  size = 'md',
+  interactive = false,
+  disabled = false,
+  current = false,
+  fullWidth = false,
+  onPress,
+  children,
+  accessibilityLabel,
+}: CardProps) {
+  const v = VARIANT_TOKENS[variant];
+  const s = SIZE_TOKENS[size];
+
+  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' ? (
+      <View
+        style={[
+          StyleSheet.absoluteFillObject,
+          {
+            borderRadius: s.borderRadius,
+            backgroundColor: cr.transparent.primary.sysPrimary08,
+          },
+        ]}
+        pointerEvents="none"
+      />
+    ) : null;
+
+  if (interactive || onPress) {
+    return (
+      <Pressable
+        onPress={disabled ? undefined : onPress}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled, selected: current }}
+        style={({ pressed }) => [
+          styles.root,
+          baseStyle,
+          pressed && !disabled
+            ? { opacity: 0.84 }
+            : {},
+        ]}
+      >
+        {gradientOverlay}
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={[styles.root, baseStyle]}>
+      {gradientOverlay}
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    overflow: 'hidden',
+  },
+});

package/src/Checkbox.tsx

@@ -0,0 +1,182 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { sys } from './tokens';
+
+export type CheckboxSize = 'sm' | 'md';
+export type CheckboxCheckedState = boolean | 'indeterminate';
+
+export interface CheckboxProps {
+  checked?: CheckboxCheckedState;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: CheckboxSize;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+const SIZE_TOKENS = {
+  sm: { box: 20, hitArea: 36, fontSize: ts.bodySmall.sysFontSize, lineHeight: ts.bodySmall.sysLineHeight, iconSize: 13 },
+  md: { box: 24, hitArea: 40, fontSize: ts.bodyMedium.sysFontSize, lineHeight: ts.bodyMedium.sysLineHeight, iconSize: 16 },
+};
+
+export function Checkbox({
+  checked: checkedProp,
+  defaultChecked = false,
+  onChange,
+  size = 'md',
+  label,
+  description,
+  disabled = false,
+  invalid = false,
+}: CheckboxProps) {
+  const [internalChecked, setInternalChecked] = useState<boolean>(defaultChecked);
+  const isControlled = checkedProp !== undefined;
+  const checkedState: CheckboxCheckedState = isControlled ? checkedProp : internalChecked;
+
+  const isChecked = checkedState === true;
+  const isIndeterminate = checkedState === 'indeterminate';
+  const isSelected = isChecked || isIndeterminate;
+
+  const s = SIZE_TOKENS[size];
+  const hitPad = (s.hitArea - s.box) / 2;
+
+  function handlePress() {
+    if (disabled) return;
+    // Indeterminate → true on activation (matches HTML spec)
+    const next = checkedState === true ? false : true;
+    if (!isControlled) setInternalChecked(next);
+    onChange?.(next);
+  }
+
+  const borderColor = invalid
+    ? cr.error.sysError
+    : isSelected
+    ? 'transparent'
+    : cr.outline.sysOutlineFixed;
+
+  const boxBg = isSelected
+    ? invalid
+      ? cr.error.sysError
+      : cr.accent.primary.sysPrimary
+    : 'transparent';
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityRole="checkbox"
+      accessibilityLabel={label}
+      accessibilityState={{
+        checked: isIndeterminate ? 'mixed' : 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',
+              },
+            ]}
+          >
+            {/* Checkbox box */}
+            <View
+              style={{
+                width: s.box,
+                height: s.box,
+                borderRadius: dim.borderRadius.sysRadiusXs,
+                borderWidth: isSelected ? 0 : dim.borderWidth.sysStrokeMedium,
+                borderColor,
+                backgroundColor: boxBg,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {isChecked && !isIndeterminate && (
+                <Ionicons
+                  name="checkmark"
+                  size={s.iconSize}
+                  color={cr.accent.primary.sysOnPrimary}
+                />
+              )}
+              {isIndeterminate && (
+                <View
+                  style={{
+                    width: s.box * 0.5,
+                    height: 2,
+                    borderRadius: 1,
+                    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,
+  },
+});

package/src/Chip.tsx

@@ -0,0 +1,291 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { sys } from './tokens';
+
+export type ChipSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChipUsage = 'neutral' | 'informative' | 'positive' | 'danger' | 'warning';
+
+export interface ChipProps {
+  label: string;
+  size?: ChipSize;
+  usage?: ChipUsage;
+  /** Optional icon rendered before the label */
+  leadingIcon?: React.ReactNode;
+  /** Renders a close button — fires onDismiss when tapped */
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  /** Renders a small count badge after the label */
+  badge?: number | string;
+}
+
+const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+
+// ── Size tokens ───────────────────────────────────────────────────────────────
+
+const SIZE_TOKENS = {
+  sm: {
+    height: 20,
+    paddingH: dim.spacing.padding.sysPadding8,
+    paddingV: dim.spacing.padding.sysPadding4,
+    gap: dim.spacing.padding.sysPadding4,
+    fontSize: ts.labelSmall.sysFontSize,
+    lineHeight: ts.labelSmall.sysLineHeight,
+    letterSpacing: ts.labelSmall.sysTracking,
+    iconSize: 16,
+    closeBtnSize: 16,
+    closeIconSize: 12,
+    badgeSize: 16,
+    badgeFontSize: ts.labelSmall.sysFontSize,
+    badgeLineHeight: ts.labelSmall.sysLineHeight,
+  },
+  md: {
+    height: 24,
+    paddingH: dim.spacing.padding.sysPadding12,
+    paddingV: dim.spacing.padding.sysPadding4,
+    gap: dim.spacing.padding.sysPadding4,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    letterSpacing: ts.labelMedium.sysTracking,
+    iconSize: 16,
+    closeBtnSize: 16,
+    closeIconSize: 12,
+    badgeSize: 16,
+    badgeFontSize: ts.labelSmall.sysFontSize,
+    badgeLineHeight: ts.labelSmall.sysLineHeight,
+  },
+  lg: {
+    height: 32,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding4,
+    gap: dim.spacing.padding.sysPadding8,
+    fontSize: ts.labelMedium.sysFontSize,
+    lineHeight: ts.labelMedium.sysLineHeight,
+    letterSpacing: ts.labelMedium.sysTracking,
+    iconSize: 20,
+    closeBtnSize: 20,
+    closeIconSize: 16,
+    badgeSize: 20,
+    badgeFontSize: ts.labelSmall.sysFontSize,
+    badgeLineHeight: ts.labelSmall.sysLineHeight,
+  },
+  xl: {
+    height: 40,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding8,
+    gap: dim.spacing.padding.sysPadding8,
+    fontSize: ts.bodyMedium.sysFontSize,
+    lineHeight: ts.bodyMedium.sysLineHeight,
+    letterSpacing: ts.bodyMedium.sysTracking,
+    iconSize: 20,
+    closeBtnSize: 24,
+    closeIconSize: 16,
+    badgeSize: 24,
+    badgeFontSize: ts.labelMedium.sysFontSize,
+    badgeLineHeight: ts.labelMedium.sysLineHeight,
+  },
+};
+
+// ── Usage/color tokens ────────────────────────────────────────────────────────
+
+type UsageColors = {
+  bg: string;
+  text: string;
+  closeBg: string;
+  badgeBg: string;
+  badgeText: string;
+  /** true → render elevation shadow */
+  elevated: boolean;
+};
+
+function getUsageColors(usage: ChipUsage): UsageColors {
+  switch (usage) {
+    case 'neutral':
+      return {
+        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        text: cr.surface.surface.sysOnSurface,
+        closeBg: cr.surface.surfaceContainer.sysSurfaceContainerLow,
+        badgeBg: cr.surface.surfaceContainer.sysSurfaceContainer,
+        badgeText: cr.surface.surface.sysOnSurface,
+        elevated: true,
+      };
+    case 'informative':
+      return {
+        bg: cr.custom.info.sysInfo,
+        text: cr.accent.primary.sysOnPrimary,
+        closeBg: cr.transparent.neutral.sysWhite20,
+        badgeBg: cr.transparent.neutral.sysWhite20,
+        badgeText: cr.custom.info.sysOnInfo,
+        elevated: false,
+      };
+    case 'positive':
+      return {
+        bg: cr.custom.success.sysSuccess,
+        text: cr.custom.success.sysOnSuccess,
+        closeBg: cr.transparent.neutral.sysWhite20,
+        badgeBg: cr.transparent.neutral.sysWhite20,
+        badgeText: cr.custom.success.sysOnSuccess,
+        elevated: false,
+      };
+    case 'danger':
+      return {
+        bg: cr.error.sysError,
+        text: cr.error.sysOnError,
+        closeBg: cr.transparent.neutral.sysWhite20,
+        badgeBg: cr.transparent.neutral.sysWhite20,
+        badgeText: cr.error.sysOnError,
+        elevated: false,
+      };
+    case 'warning':
+      return {
+        bg: cr.custom.warning.sysWarning,
+        text: cr.custom.warning.sysOnWarning,
+        closeBg: cr.transparent.neutral.sysWhite20,
+        badgeBg: cr.transparent.neutral.sysWhite20,
+        badgeText: cr.custom.warning.sysOnWarning,
+        elevated: false,
+      };
+  }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function Chip({
+  label,
+  size = 'md',
+  usage = 'neutral',
+  leadingIcon,
+  dismissible = false,
+  onDismiss,
+  badge,
+}: ChipProps) {
+  const s = SIZE_TOKENS[size];
+  const c = getUsageColors(usage);
+
+  return (
+    <View
+      accessible
+      accessibilityRole="none"
+      accessibilityLabel={badge !== undefined ? `${label}, ${badge}` : label}
+      style={[
+        styles.root,
+        {
+          height: s.height,
+          paddingHorizontal: s.paddingH,
+          paddingVertical: s.paddingV,
+          gap: s.gap,
+          backgroundColor: c.bg,
+        },
+        c.elevated && styles.elevated,
+      ]}
+    >
+      {/* Leading icon */}
+      {leadingIcon && (
+        <View
+          style={{
+            width: s.iconSize,
+            height: s.iconSize,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          {leadingIcon}
+        </View>
+      )}
+
+      {/* Label */}
+      <Text
+        style={{
+          color: c.text,
+          fontSize: s.fontSize,
+          lineHeight: s.lineHeight,
+          letterSpacing: s.letterSpacing,
+          includeFontPadding: false,
+        }}
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+
+      {/* Badge */}
+      {badge !== undefined && (
+        <View
+          style={{
+            width: s.badgeSize,
+            height: s.badgeSize,
+            borderRadius: s.badgeSize / 2,
+            backgroundColor: c.badgeBg,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          <Text
+            style={{
+              color: c.badgeText,
+              fontSize: s.badgeFontSize,
+              lineHeight: s.badgeLineHeight,
+              includeFontPadding: false,
+              fontWeight: '500',
+            }}
+          >
+            {badge}
+          </Text>
+        </View>
+      )}
+
+      {/* Dismiss button */}
+      {dismissible && (
+        <Pressable
+          onPress={onDismiss}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          hitSlop={4}
+          style={({ pressed }) => ({
+            width: s.closeBtnSize,
+            height: s.closeBtnSize,
+            borderRadius: s.closeBtnSize / 2,
+            backgroundColor: pressed
+              ? cr.transparent.neutral.sysBlack10
+              : c.closeBg,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            overflow: 'hidden',
+          })}
+        >
+          <Ionicons
+            name="close"
+            size={s.closeIconSize}
+            color={c.text}
+          />
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: 9999,
+    overflow: 'hidden',
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.10,
+    shadowRadius: 8,
+    elevation: 2,
+    // overflow must be visible for shadow on iOS — override here
+    overflow: 'visible',
+  },
+});

package/src/Divider.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View } from 'react-native';
+import { sys } from './tokens';
+
+export type DividerVariant = 'horizontal' | 'vertical';
+export type DividerWeight = 'thin' | 'thick';
+
+export interface DividerProps {
+  variant?: DividerVariant;
+  weight?: DividerWeight;
+  dashed?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+export function Divider({
+  variant = 'horizontal',
+  weight = 'thin',
+  dashed = false,
+}: DividerProps) {
+  const thickness =
+    weight === 'thin'
+      ? dim.borderWidth.sysStrokeThin
+      : dim.borderWidth.sysStrokeThick;
+
+  const color = cr.outline.sysOutlineVariant;
+
+  if (variant === 'horizontal') {
+    return (
+      <View
+        style={{
+          // Zero height — the line is drawn as a top border
+          height: 0,
+          // Stretch to fill parent width
+          alignSelf: 'stretch',
+          borderTopWidth: thickness,
+          borderTopColor: color,
+          borderStyle: dashed ? 'dashed' : 'solid',
+        }}
+        accessible={false}
+      />
+    );
+  }
+
+  // Vertical
+  return (
+    <View
+      style={{
+        // Zero width — the line is drawn as a left border
+        width: 0,
+        // Stretch to fill parent height
+        alignSelf: 'stretch',
+        borderLeftWidth: thickness,
+        borderLeftColor: color,
+        borderStyle: dashed ? 'dashed' : 'solid',
+      }}
+      accessible={false}
+    />
+  );
+}