@compsych/mobile-ui 1.0.10 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/ActionSheet/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Modal,
@@ -12,7 +12,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 import { Button } from '../Button';
 import { HeaderText } from '../HeaderText';
 
@@ -28,11 +28,17 @@ export interface ActionSheetProps {
   children?: React.ReactNode;
   primaryAction?: ActionSheetAction;
   secondaryAction?: ActionSheetAction;
+  /**
+   * `half`  — floats at the bottom with a 6 px inset gutter; all corners
+   *           rounded; content limited to maxHeight. Default.
+   * `full`  — fills the screen from 10 px below the top; only top corners
+   *           rounded; content expands to fill; close button appears on both
+   *           sides of the title for one-handed reachability.
+   */
+  variant?: 'half' | 'full';
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr } = sys;
-
 export function ActionSheet({
   visible,
   onClose,
@@ -40,8 +46,68 @@ export function ActionSheet({
   children,
   primaryAction,
   secondaryAction,
+  variant = 'half',
   style,
 }: ActionSheetProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+  const isFull = variant === 'full';
+
+  const dynamicStyles = useMemo(
+    () => ({
+      sheetWrapperHalf: {
+        paddingHorizontal: dim.spacing.padding.sysPadding6,
+        paddingBottom: dim.spacing.padding.sysPadding6,
+      },
+      sheetWrapperFull: {
+        marginTop: 10,
+      },
+      sheetHalf: {
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        borderRadius: dim.borderRadius.sysRadiusXxl,
+      },
+      sheetFull: {
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        borderTopLeftRadius: dim.borderRadius.sysRadiusXxl,
+        borderTopRightRadius: dim.borderRadius.sysRadiusXxl,
+      },
+      titleRow: {
+        paddingHorizontal: dim.spacing.padding.sysPadding16,
+        paddingVertical: dim.spacing.padding.sysPadding8,
+      },
+      closeButton: {
+        borderRadius: dim.borderRadius.sysRadiusFull,
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
+      },
+      contentInner: {
+        padding: dim.spacing.padding.sysPadding16,
+      },
+      actions: {
+        padding: dim.spacing.padding.sysPadding24,
+        gap: dim.spacing.padding.sysPadding12,
+      },
+    }),
+    [cr, dim],
+  );
+
+  const closeButton = (
+    <Pressable
+      onPress={onClose}
+      accessibilityRole="button"
+      accessibilityLabel="Close"
+      style={({ pressed }) => [
+        styles.closeButtonSize,
+        dynamicStyles.closeButton,
+        pressed && styles.closePressed,
+      ]}
+    >
+      <Ionicons
+        name="close"
+        size={20}
+        color={cr.surface.surface.sysOnSurface}
+      />
+    </Pressable>
+  );
+
   return (
     <Modal
       visible={visible}
@@ -53,9 +119,24 @@ export function ActionSheet({
       {/* Backdrop */}
       <Pressable style={styles.backdrop} onPress={onClose} accessible={false} />
 
-      {/* Sheet */}
-      <View style={[styles.sheetWrapper, style]} pointerEvents="box-none">
-        <View style={styles.sheet}>
+      {/* Sheet wrapper */}
+      <View
+        style={[
+          styles.sheetWrapper,
+          isFull
+            ? dynamicStyles.sheetWrapperFull
+            : dynamicStyles.sheetWrapperHalf,
+          style,
+        ]}
+        pointerEvents="box-none"
+      >
+        <View
+          style={[
+            styles.sheet,
+            isFull ? styles.sheetFull : styles.sheetHalf,
+            isFull ? dynamicStyles.sheetFull : dynamicStyles.sheetHalf,
+          ]}
+        >
           {/* Toolbar */}
           <View style={styles.toolbar}>
             {/* Grabber */}
@@ -64,9 +145,9 @@ export function ActionSheet({
             </View>
 
             {/* Title row */}
-            <View style={styles.titleRow}>
-              {/* Invisible spacer to balance the close button */}
-              <View style={styles.closeButton} />
+            <View style={[styles.titleRow, dynamicStyles.titleRow]}>
+              {/* Left slot: close button (full) or invisible spacer (half) */}
+              {isFull ? closeButton : <View style={styles.closeButtonSize} />}
 
               <HeaderText
                 variant="titleSmall"
@@ -77,34 +158,16 @@ export function ActionSheet({
                 {title ?? ''}
               </HeaderText>
 
-              {/* Close button */}
-              <Pressable
-                onPress={onClose}
-                accessibilityRole="button"
-                accessibilityLabel="Close"
-                style={({ pressed }) => [
-                  styles.closeButton,
-                  {
-                    backgroundColor:
-                      cr.surface.surfaceContainer.sysSurfaceContainer,
-                  },
-                  pressed && styles.closePresseed,
-                ]}
-              >
-                <Ionicons
-                  name="close"
-                  size={20}
-                  color={cr.surface.surface.sysOnSurface}
-                />
-              </Pressable>
+              {/* Right close button — always shown */}
+              {closeButton}
             </View>
           </View>
 
           {/* Content */}
           {children && (
             <ScrollView
-              style={styles.content}
-              contentContainerStyle={styles.contentInner}
+              style={isFull ? styles.contentFull : styles.contentHalf}
+              contentContainerStyle={dynamicStyles.contentInner}
               showsVerticalScrollIndicator={false}
             >
               {children}
@@ -113,7 +176,7 @@ export function ActionSheet({
 
           {/* Actions */}
           {(primaryAction || secondaryAction) && (
-            <View style={styles.actions}>
+            <View style={dynamicStyles.actions}>
               {primaryAction && (
                 <Button
                   label={primaryAction.label}
@@ -140,40 +203,57 @@ export function ActionSheet({
   );
 }
 
-const { colorRoles: cr2, dimensions: dim2 } = sys;
-
 const styles = StyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     backgroundColor: 'rgba(0,0,0,0.4)',
   },
   sheetWrapper: {
     flex: 1,
     justifyContent: 'flex-end',
-    paddingHorizontal: dim2.spacing.padding.sysPadding6,
-    paddingBottom: dim2.spacing.padding.sysPadding6,
   },
+  // ── half ────────────────────────────────────────────────────────────────────
   sheet: {
-    backgroundColor: cr2.surface.surfaceContainer.sysSurfaceContainerLowest,
-    borderRadius: dim2.borderRadius.sysRadiusXxl,
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.4)',
     overflow: 'hidden',
+  },
+  sheetHalf: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.1,
     shadowRadius: 16,
     elevation: 8,
   },
+  contentHalf: {
+    maxHeight: 400,
+  },
+  // ── full ────────────────────────────────────────────────────────────────────
+  sheetFull: {
+    flex: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 15 },
+    shadowOpacity: 0.18,
+    shadowRadius: 75,
+    elevation: 16,
+  },
+  contentFull: {
+    flex: 1,
+  },
+  // ── shared ──────────────────────────────────────────────────────────────────
   toolbar: {
     alignItems: 'center',
     width: '100%',
   },
   grabberRow: {
+    width: '100%',
     height: 16,
-    justifyContent: 'flex-end',
+    justifyContent: 'flex-start',
     alignItems: 'center',
-    paddingBottom: 0,
     paddingTop: 5,
   },
   grabber: {
@@ -186,32 +266,19 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: dim2.spacing.padding.sysPadding16,
-    paddingVertical: dim2.spacing.padding.sysPadding8,
     width: '100%',
   },
   titleText: {
     flex: 1,
     textAlign: 'center',
   },
-  closeButton: {
+  closeButtonSize: {
     width: 32,
     height: 32,
-    borderRadius: dim2.borderRadius.sysRadiusFull,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  closePresseed: {
+  closePressed: {
     opacity: 0.7,
   },
-  content: {
-    maxHeight: 400,
-  },
-  contentInner: {
-    padding: dim2.spacing.padding.sysPadding16,
-  },
-  actions: {
-    padding: dim2.spacing.padding.sysPadding24,
-    gap: dim2.spacing.padding.sysPadding12,
-  },
 });

package/src/components/Alert/index.tsx

@@ -11,7 +11,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type AlertVariant =
   | 'default'
@@ -43,8 +43,6 @@ export interface AlertProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
 // ── Variant color map ────────────────────────────────────────────────────────
 
 type VariantColors = {
@@ -55,7 +53,12 @@ type VariantColors = {
   actionBorder: boolean;
 };
 
-function getVariantColors(variant: AlertVariant): VariantColors {
+type ColorRoles = ReturnType<typeof useTheme>['colorRoles'];
+
+function getVariantColors(
+  variant: AlertVariant,
+  cr: ColorRoles,
+): VariantColors {
   switch (variant) {
     case 'default':
       return {
@@ -143,7 +146,8 @@ export function Alert({
   onDismiss,
   style,
 }: AlertProps) {
-  const c = getVariantColors(variant);
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+  const c = getVariantColors(variant, cr);
   const isLg = size === 'lg';
 
   const resolvedIcon =
@@ -246,7 +250,14 @@ export function Alert({
                 accessibilityLabel={actionLabel}
                 style={({ pressed }) => [
                   styles.actionLg,
-                  c.actionBorder && styles.actionLgBorder,
+                  {
+                    backgroundColor:
+                      cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                  },
+                  c.actionBorder && [
+                    styles.actionLgBorderBase,
+                    { borderColor: cr.outline.sysOutline },
+                  ],
                   pressed && { opacity: 0.84 },
                 ]}
               >
@@ -332,12 +343,11 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
   },
-  // lg action button — elevated pill
+  // lg action button — elevated pill (backgroundColor and borderColor applied inline)
   actionLg: {
     height: 40,
     paddingHorizontal: 24,
     borderRadius: 9999,
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
@@ -347,9 +357,8 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 1,
   },
-  actionLgBorder: {
+  actionLgBorderBase: {
     borderWidth: 1,
-    borderColor: cr.outline.sysOutline,
   },
   // sm action button — text only
   actionSm: {

package/src/components/Avatar/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Image,
@@ -12,7 +12,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 export type AvatarVariant = 'text' | 'image' | 'icon';
@@ -35,95 +35,6 @@ export interface AvatarProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
-const SIZE_TOKENS = {
-  xs: {
-    diameter: 24,
-    fontSize: ts.labelSmall.sysFontSize,
-    lineHeight: ts.labelSmall.sysLineHeight,
-    fontWeight: '400' as const,
-    iconSize: 12,
-    ringBorder: dim.borderWidth.sysStrokeMedium,
-    ringInset: -1,
-    badgeSize: 0, // xs has no presence badge
-    badgeIconSize: 0,
-    badgeOffset: 0,
-  },
-  sm: {
-    diameter: 32,
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    fontWeight: '400' as const,
-    iconSize: 16,
-    ringBorder: dim.borderWidth.sysStrokeMedium,
-    ringInset: -2,
-    badgeSize: 16,
-    badgeIconSize: 12,
-    badgeOffset: -4,
-  },
-  md: {
-    diameter: 40,
-    fontSize: ts.labelLarge.sysFontSize,
-    lineHeight: ts.labelLarge.sysLineHeight,
-    fontWeight: '500' as const,
-    iconSize: 20,
-    ringBorder: dim.borderWidth.sysStrokeThick,
-    ringInset: -2,
-    badgeSize: 20,
-    badgeIconSize: 16,
-    badgeOffset: -4,
-  },
-  lg: {
-    diameter: 48,
-    fontSize: ts.labelLarge.sysFontSize,
-    lineHeight: ts.labelLarge.sysLineHeight,
-    fontWeight: '500' as const,
-    iconSize: 24,
-    ringBorder: dim.borderWidth.sysStrokeThick,
-    ringInset: -2,
-    badgeSize: 20,
-    badgeIconSize: 16,
-    badgeOffset: -4,
-  },
-  xl: {
-    diameter: 64,
-    fontSize: ts.labelLarge.sysFontSize,
-    lineHeight: ts.labelLarge.sysLineHeight,
-    fontWeight: '500' as const,
-    iconSize: 32,
-    ringBorder: dim.borderWidth.sysStrokeThick,
-    ringInset: -2,
-    badgeSize: 24,
-    badgeIconSize: 20,
-    badgeOffset: -4,
-  },
-  '2xl': {
-    diameter: 88,
-    fontSize: ts.titleMedium.sysFontSize,
-    lineHeight: ts.titleMedium.sysLineHeight,
-    fontWeight: '400' as const,
-    iconSize: 44,
-    ringBorder: dim.borderWidth.sysStrokeBold,
-    ringInset: -2,
-    badgeSize: 32,
-    badgeIconSize: 24,
-    badgeOffset: 0,
-  },
-  '3xl': {
-    diameter: 120,
-    fontSize: ts.titleLarge.sysFontSize,
-    lineHeight: ts.titleLarge.sysLineHeight,
-    fontWeight: '500' as const,
-    iconSize: 60,
-    ringBorder: dim.borderWidth.sysStrokeBold,
-    ringInset: -2,
-    badgeSize: 32,
-    badgeIconSize: 24,
-    badgeOffset: 0,
-  },
-};
-
 export function Avatar({
   variant = 'text',
   size = 'md',
@@ -135,7 +46,99 @@ export function Avatar({
   accessibilityLabel,
   style,
 }: AvatarProps) {
-  const s = SIZE_TOKENS[size];
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
+  const sizeTokens = useMemo(
+    () => ({
+      xs: {
+        diameter: 24,
+        fontSize: ts.labelSmall.sysFontSize,
+        lineHeight: ts.labelSmall.sysLineHeight,
+        fontWeight: '400' as const,
+        iconSize: 12,
+        ringBorder: dim.borderWidth.sysStrokeMedium,
+        ringInset: -1,
+        badgeSize: 0,
+        badgeIconSize: 0,
+        badgeOffset: 0,
+      },
+      sm: {
+        diameter: 32,
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        fontWeight: '400' as const,
+        iconSize: 16,
+        ringBorder: dim.borderWidth.sysStrokeMedium,
+        ringInset: -2,
+        badgeSize: 16,
+        badgeIconSize: 12,
+        badgeOffset: -4,
+      },
+      md: {
+        diameter: 40,
+        fontSize: ts.labelLarge.sysFontSize,
+        lineHeight: ts.labelLarge.sysLineHeight,
+        fontWeight: '500' as const,
+        iconSize: 20,
+        ringBorder: dim.borderWidth.sysStrokeThick,
+        ringInset: -2,
+        badgeSize: 20,
+        badgeIconSize: 16,
+        badgeOffset: -4,
+      },
+      lg: {
+        diameter: 48,
+        fontSize: ts.labelLarge.sysFontSize,
+        lineHeight: ts.labelLarge.sysLineHeight,
+        fontWeight: '500' as const,
+        iconSize: 24,
+        ringBorder: dim.borderWidth.sysStrokeThick,
+        ringInset: -2,
+        badgeSize: 20,
+        badgeIconSize: 16,
+        badgeOffset: -4,
+      },
+      xl: {
+        diameter: 64,
+        fontSize: ts.labelLarge.sysFontSize,
+        lineHeight: ts.labelLarge.sysLineHeight,
+        fontWeight: '500' as const,
+        iconSize: 32,
+        ringBorder: dim.borderWidth.sysStrokeThick,
+        ringInset: -2,
+        badgeSize: 24,
+        badgeIconSize: 20,
+        badgeOffset: -4,
+      },
+      '2xl': {
+        diameter: 88,
+        fontSize: ts.titleMedium.sysFontSize,
+        lineHeight: ts.titleMedium.sysLineHeight,
+        fontWeight: '400' as const,
+        iconSize: 44,
+        ringBorder: dim.borderWidth.sysStrokeBold,
+        ringInset: -2,
+        badgeSize: 32,
+        badgeIconSize: 24,
+        badgeOffset: 0,
+      },
+      '3xl': {
+        diameter: 120,
+        fontSize: ts.titleLarge.sysFontSize,
+        lineHeight: ts.titleLarge.sysLineHeight,
+        fontWeight: '500' as const,
+        iconSize: 60,
+        ringBorder: dim.borderWidth.sysStrokeBold,
+        ringInset: -2,
+        badgeSize: 32,
+        badgeIconSize: 24,
+        badgeOffset: 0,
+      },
+    }),
+    [dim, ts],
+  );
+
+  const s = sizeTokens[size];
   const r = s.diameter / 2;
 
   const defaultLabel = variant === 'text' ? `Avatar: ${initials}` : 'Avatar';

package/src/components/Badge/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type BadgeSize = 'sm' | 'md' | 'lg';
 export type BadgeStyle =
@@ -21,37 +21,6 @@ export interface BadgeProps {
   style?: StyleProp<ViewStyle>;
 }
 
-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 = {
@@ -60,7 +29,9 @@ type StyleColors = {
   elevated: boolean;
 };
 
-function getStyleColors(style: BadgeStyle): StyleColors {
+type ColorRoles = ReturnType<typeof useTheme>['colorRoles'];
+
+function getStyleColors(style: BadgeStyle, cr: ColorRoles): StyleColors {
   switch (style) {
     case 'filled':
       return {
@@ -110,8 +81,40 @@ export function Badge({
   badgeStyle = 'filled',
   style,
 }: BadgeProps) {
-  const s = SIZE_TOKENS[size];
-  const c = getStyleColors(badgeStyle);
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
+  const sizeTokens = useMemo(
+    () => ({
+      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,
+      },
+    }),
+    [dim, ts],
+  );
+
+  const s = sizeTokens[size];
+  const c = getStyleColors(badgeStyle, cr);
 
   // Dot variant — render a solid filled circle inside a transparent wrapper
   if (badgeStyle === 'dot') {