@compsych/mobile-ui 1.0.11 → 1.0.14

package/src/components/EmptyState/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Pressable,
@@ -11,7 +11,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type EmptyStateStyle = 'icon' | 'illustration';
 export type EmptyStateViewport = 'desktop' | 'mobile';
@@ -37,45 +37,6 @@ export interface EmptyStateProps {
   containerStyle?: StyleProp<ViewStyle>;
 }
 
-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).
@@ -94,7 +55,10 @@ function scaledPos(left: number, top: number) {
   };
 }
 
-function EmptyIllustration() {
+type ColorRoles = ReturnType<typeof useTheme>['colorRoles'];
+type Dimensions = ReturnType<typeof useTheme>['dimensions'];
+
+function EmptyIllustration({ cr, dim }: { cr: ColorRoles; dim: Dimensions }) {
   // Purely decorative — hidden from accessibility tree
   // Central active card
   const central = scaledPos(119, 63);
@@ -125,6 +89,8 @@ function EmptyIllustration() {
               top: pos.top,
               width: CARD_W,
               height: CARD_H,
+              borderWidth: dim.borderWidth.sysStrokeThin,
+              borderRadius: dim.borderRadius.sysRadiusMd,
               borderColor: cr.outline.sysOutlineVariant,
               backgroundColor:
                 cr.surface.surfaceContainer.sysSurfaceContainerLowest,
@@ -144,9 +110,12 @@ function EmptyIllustration() {
             top: central.top,
             width: CARD_W,
             height: CARD_H,
+            borderWidth: dim.borderWidth.sysStrokeThin,
+            borderRadius: dim.borderRadius.sysRadiusMd,
             borderColor: cr.accent.primary.sysPrimary,
             backgroundColor:
               cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            shadowColor: cr.accent.primary.sysPrimary,
           },
         ]}
       >
@@ -158,6 +127,7 @@ function EmptyIllustration() {
               top: Math.round(15 * SCALE),
               left: Math.round(15 * SCALE),
               width: Math.round(32 * SCALE),
+              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
             },
           ]}
         />
@@ -168,6 +138,7 @@ function EmptyIllustration() {
               top: Math.round(51 * SCALE),
               left: Math.round(15 * SCALE),
               width: Math.round(96 * SCALE),
+              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
             },
           ]}
         />
@@ -178,6 +149,7 @@ function EmptyIllustration() {
               top: Math.round(63 * SCALE),
               left: Math.round(15 * SCALE),
               width: Math.round(122 * SCALE),
+              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
             },
           ]}
         />
@@ -200,14 +172,65 @@ export function EmptyState({
   showAction,
   containerStyle,
 }: EmptyStateProps) {
-  const vp = VIEWPORT[viewport];
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
+  const viewportTokens = useMemo(
+    () =>
+      ({
+        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,
+    [dim, ts],
+  );
+
+  const vp = viewportTokens[viewport];
   const hasAction = showAction !== undefined ? showAction : !!actionLabel;
 
   return (
-    <View style={[styles.root, containerStyle]}>
+    <View
+      style={[
+        styles.root,
+        {
+          padding: dim.spacing.padding.sysPadding24,
+          borderRadius: dim.borderRadius.sysRadiusLg,
+          gap: dim.spacing.padding.sysPadding24,
+        },
+        containerStyle,
+      ]}
+    >
       {/* ── Graphic ───────────────────────────────────────────────────────── */}
       {style === 'illustration' ? (
-        <EmptyIllustration />
+        <EmptyIllustration cr={cr} dim={dim} />
       ) : (
         <View
           style={[
@@ -233,7 +256,9 @@ export function EmptyState({
       {/* ── Content ───────────────────────────────────────────────────────── */}
       <View style={[styles.content, { gap: vp.contentGap }]}>
         {/* Text block */}
-        <View style={styles.textBlock}>
+        <View
+          style={[styles.textBlock, { gap: dim.spacing.padding.sysPadding4 }]}
+        >
           <Text
             style={{
               color: cr.surface.surface.sysOnSurface,
@@ -276,6 +301,7 @@ export function EmptyState({
                 paddingLeft: vp.btnPaddingL,
                 paddingRight: vp.btnPaddingR,
                 gap: vp.btnGap,
+                borderWidth: dim.borderWidth.sysStrokeThin,
                 borderColor: cr.outline.sysOutline,
               },
               pressed && { opacity: 0.76 },
@@ -307,10 +333,7 @@ export function EmptyState({
 
 const styles = StyleSheet.create({
   root: {
-    padding: dim.spacing.padding.sysPadding24,
-    borderRadius: dim.borderRadius.sysRadiusLg,
     alignItems: 'center',
-    gap: dim.spacing.padding.sysPadding24,
     alignSelf: 'center',
   },
 
@@ -329,7 +352,6 @@ const styles = StyleSheet.create({
   },
   textBlock: {
     alignSelf: 'stretch',
-    gap: dim.spacing.padding.sysPadding4,
     alignItems: 'center',
   },
 
@@ -338,7 +360,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: dim.borderWidth.sysStrokeThin,
     borderRadius: 9999,
     overflow: 'hidden',
   },
@@ -350,8 +371,6 @@ const styles = StyleSheet.create({
   },
   card: {
     position: 'absolute',
-    borderWidth: dim.borderWidth.sysStrokeThin,
-    borderRadius: dim.borderRadius.sysRadiusMd,
     overflow: 'hidden',
   },
   cardFaded: {
@@ -359,7 +378,6 @@ const styles = StyleSheet.create({
   },
   cardActive: {
     // Active ring: sysPrimary08 spread shadow
-    shadowColor: cr.accent.primary.sysPrimary,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.08,
     shadowRadius: 0,
@@ -369,6 +387,5 @@ const styles = StyleSheet.create({
     position: 'absolute',
     height: Math.round(6 * SCALE),
     borderRadius: 9999,
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
   },
 });

package/src/components/HeaderText/index.tsx

@@ -4,7 +4,7 @@ import { Text, type TextProps } from 'react-native';
 
 import { useFonts } from 'expo-font';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type HeaderVariant =
   | 'large'
@@ -29,7 +29,7 @@ const FONT_FAMILY: Record<string, string> = {
   semibold: 'GoogleSans_600SemiBold',
 };
 
-const VARIANT_TOKEN_KEY: Record<HeaderVariant, keyof typeof sys.typeScale> = {
+const VARIANT_TOKEN_KEY: Record<HeaderVariant, string> = {
   large: 'displayLarge',
   medium: 'displayMedium',
   small: 'displaySmall',
@@ -41,8 +41,6 @@ const VARIANT_TOKEN_KEY: Record<HeaderVariant, keyof typeof sys.typeScale> = {
   titleSmall: 'titleSmall',
 };
 
-const { typeScale: ts } = sys;
-
 export function HeaderText({
   variant = 'medium',
   emphasized = false,
@@ -50,13 +48,15 @@ export function HeaderText({
   style,
   ...rest
 }: HeaderTextProps) {
+  const { typeScale: ts } = useTheme();
+
   const [fontsLoaded] = useFonts({
     GoogleSans_400Regular: require('../../fonts/GoogleSans_400Regular.ttf'),
     GoogleSans_500Medium: require('../../fonts/GoogleSans_500Medium.ttf'),
     GoogleSans_600SemiBold: require('../../fonts/GoogleSans_600SemiBold.ttf'),
   });
 
-  const token = ts[VARIANT_TOKEN_KEY[variant]];
+  const token = ts[VARIANT_TOKEN_KEY[variant] as keyof typeof ts];
   const weight = emphasized
     ? token.sysFontWeightEmphasized
     : token.sysFontWeight;

package/src/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import {
   StyleSheet,
@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type InputSize = 'sm' | 'md' | 'lg';
 
@@ -22,41 +22,6 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
   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;
@@ -74,7 +39,45 @@ export function Input({
   onBlur,
   ...rest
 }: InputProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
+
+  const SIZE_TOKENS = useMemo(
+    () => ({
+      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,
+      },
+    }),
+    [dim, ts],
+  );
+
   const s = SIZE_TOKENS[size];
   const isDisabled = editable === false;
   const hasError = invalid || !!errorText;

package/src/components/List/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
 export type ListItemType = 'simple' | 'detailed';
@@ -31,8 +31,6 @@ export interface ListProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 // ── ListItem ──────────────────────────────────────────────────────────────────
 
 export function ListItem({
@@ -44,6 +42,7 @@ export function ListItem({
   disabled = false,
   showDivider = true,
 }: ListItemProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
   const isDetailed = type === 'detailed';
 
   const content = (

package/src/components/Pagination/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Pressable,
@@ -11,7 +11,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type PaginationSize = 'sm' | 'lg';
 
@@ -42,41 +42,6 @@ export interface PaginationProps {
   style?: StyleProp<ViewStyle>;
 }
 
-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(
@@ -122,10 +87,11 @@ interface PageItemProps {
   page: number;
   isActive: boolean;
   onPress: () => void;
+  cr: ReturnType<typeof useTheme>['colorRoles'];
 }
 
-function PageItem({ s, page, isActive, onPress }: PageItemProps) {
-  const borderWidth = isActive ? dim.borderWidth.sysStrokeMedium : 0;
+function PageItem({ s, page, isActive, onPress, cr }: PageItemProps) {
+  const borderWidth = isActive ? 1.5 : 0;
   const borderColor = isActive ? cr.accent.primary.sysPrimary : 'transparent';
   const textColor = isActive
     ? cr.custom.info.sysOnInfoContainer
@@ -186,7 +152,12 @@ function PageItem({ s, page, isActive, onPress }: PageItemProps) {
 
 // ── Ellipsis item ─────────────────────────────────────────────────────────────
 
-function EllipsisItem({ s }: { s: SizeTokens }) {
+interface EllipsisItemProps {
+  s: SizeTokens;
+  cr: ReturnType<typeof useTheme>['colorRoles'];
+}
+
+function EllipsisItem({ s, cr }: EllipsisItemProps) {
   return (
     <View
       accessible
@@ -220,9 +191,10 @@ interface NavButtonProps {
   direction: 'prev' | 'next';
   disabled: boolean;
   onPress: () => void;
+  cr: ReturnType<typeof useTheme>['colorRoles'];
 }
 
-function NavButton({ s, direction, disabled, onPress }: NavButtonProps) {
+function NavButton({ s, direction, disabled, onPress, cr }: NavButtonProps) {
   const iconName = direction === 'prev' ? 'chevron-back' : 'chevron-forward';
 
   return (
@@ -269,7 +241,43 @@ export function Pagination({
   compact = false,
   style,
 }: PaginationProps) {
-  const s = SIZE_TOKENS[size];
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
+  const sizeTokens = useMemo(
+    () => ({
+      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,
+      },
+    }),
+    [ts, dim],
+  );
+
+  const s = sizeTokens[size];
   const pages = buildPageRange(totalPages, currentPage, siblingCount);
 
   const prevDisabled = currentPage <= 1;
@@ -283,12 +291,14 @@ export function Pagination({
         direction="prev"
         disabled={prevDisabled}
         onPress={() => onPageChange(currentPage - 1)}
+        cr={cr}
       />
       <NavButton
         s={s}
         direction="next"
         disabled={nextDisabled}
         onPress={() => onPageChange(currentPage + 1)}
+        cr={cr}
       />
     </View>
   ) : (
@@ -299,12 +309,13 @@ export function Pagination({
         direction="prev"
         disabled={prevDisabled}
         onPress={() => onPageChange(currentPage - 1)}
+        cr={cr}
       />
 
       <View style={[styles.pages, { gap: s.hasPill ? 0 : s.gap }]}>
         {pages.map((p, i) =>
           p === '...' ? (
-            <EllipsisItem key={`ellipsis-${i}`} s={s} />
+            <EllipsisItem key={`ellipsis-${i}`} s={s} cr={cr} />
           ) : (
             <PageItem
               key={p}
@@ -312,6 +323,7 @@ export function Pagination({
               page={p}
               isActive={p === currentPage}
               onPress={() => onPageChange(p)}
+              cr={cr}
             />
           ),
         )}
@@ -322,6 +334,7 @@ export function Pagination({
         direction="next"
         disabled={nextDisabled}
         onPress={() => onPageChange(currentPage + 1)}
+        cr={cr}
       />
     </View>
   );