@compsych/mobile-ui 1.0.5 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "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/ActionSheet.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { sys } from './tokens';
+import { HeaderText } from './HeaderText';
+import { Button } from './Button';
+
+export interface ActionSheetAction {
+  label: string;
+  onPress: () => void;
+}
+
+export interface ActionSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: React.ReactNode;
+  primaryAction?: ActionSheetAction;
+  secondaryAction?: ActionSheetAction;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+export function ActionSheet({
+  visible,
+  onClose,
+  title,
+  children,
+  primaryAction,
+  secondaryAction,
+}: ActionSheetProps) {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      {/* Backdrop */}
+      <Pressable style={styles.backdrop} onPress={onClose} accessible={false} />
+
+      {/* Sheet */}
+      <View style={styles.sheetWrapper} pointerEvents="box-none">
+        <View style={styles.sheet}>
+
+          {/* Toolbar */}
+          <View style={styles.toolbar}>
+            {/* Grabber */}
+            <View style={styles.grabberRow}>
+              <View style={styles.grabber} />
+            </View>
+
+            {/* Title row */}
+            <View style={styles.titleRow}>
+              {/* Invisible spacer to balance the close button */}
+              <View style={styles.closeButton} />
+
+              <HeaderText
+                variant="titleSmall"
+                emphasized
+                color={cr.surface.surface.sysOnSurface}
+                style={styles.titleText}
+              >
+                {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>
+            </View>
+          </View>
+
+          {/* Content */}
+          {children && (
+            <ScrollView
+              style={styles.content}
+              contentContainerStyle={styles.contentInner}
+              showsVerticalScrollIndicator={false}
+            >
+              {children}
+            </ScrollView>
+          )}
+
+          {/* Actions */}
+          {(primaryAction || secondaryAction) && (
+            <View style={styles.actions}>
+              {primaryAction && (
+                <Button
+                  label={primaryAction.label}
+                  variant="filled"
+                  size="xl"
+                  fullWidth
+                  onPress={primaryAction.onPress}
+                />
+              )}
+              {secondaryAction && (
+                <Button
+                  label={secondaryAction.label}
+                  variant="outlined"
+                  size="xl"
+                  fullWidth
+                  onPress={secondaryAction.onPress}
+                />
+              )}
+            </View>
+          )}
+
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const { colorRoles: cr2, dimensions: dim2 } = sys;
+
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  sheetWrapper: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingHorizontal: dim2.spacing.padding.sysPadding6,
+    paddingBottom: dim2.spacing.padding.sysPadding6,
+  },
+  sheet: {
+    backgroundColor: cr2.surface.surfaceContainer.sysSurfaceContainerLowest,
+    borderRadius: dim2.borderRadius.sysRadiusXxl,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.4)',
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  toolbar: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  grabberRow: {
+    height: 16,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: 0,
+    paddingTop: 5,
+  },
+  grabber: {
+    width: 36,
+    height: 5,
+    borderRadius: 100,
+    backgroundColor: '#ccc',
+  },
+  titleRow: {
+    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: {
+    width: 32,
+    height: 32,
+    borderRadius: dim2.borderRadius.sysRadiusFull,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closePresseed: {
+    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/Card.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import { sys } from './tokens';
 import { BodyText } from './BodyText';
 
@@ -29,58 +30,107 @@ export interface CardProps {
 
 const { colorRoles: cr, dimensions: dim } = sys;
 
-const VARIANT_TOKENS = {
+// ── Variant tokens ────────────────────────────────────────────────────────────
+
+const VARIANT_TOKENS: Record<
+  CardVariant,
+  {
+    bg: string;
+    borderColor: string;
+    borderWidth: number;
+    elevated: boolean;
+    titleColor: string;
+    descColor: string;
+    chevronColor: string;
+    // doubled inner gradient overlay color
+    innerBg?: string;
+    iconBadgeBg?: string;
+    iconBadgeColor?: string;
+  }
+> = {
   outlined: {
-    outerBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
     borderColor: cr.outline.sysOutline,
     borderWidth: dim.borderWidth.sysStrokeThin,
-    outerRadius: dim.borderRadius.sysRadiusLg,
     elevated: true,
     titleColor: cr.surface.surface.sysOnSurface,
     descColor: cr.surface.surface.sysOnSurfaceVariant,
+    chevronColor: cr.outline.sysOutlineFixed,
   },
   tonal: {
-    outerBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+    bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
     borderColor: 'transparent',
     borderWidth: 0,
-    outerRadius: dim.borderRadius.sysRadiusLg,
     elevated: false,
     titleColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
     descColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+    chevronColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
   },
   filled: {
-    outerBg: cr.accent.primary.sysPrimaryContainer,
+    bg: cr.accent.primary.sysPrimary,
     borderColor: 'transparent',
     borderWidth: 0,
-    outerRadius: dim.borderRadius.sysRadiusLg,
     elevated: true,
-    titleColor: cr.surface.surface.sysOnSurface,
-    descColor: cr.surface.surface.sysOnSurfaceVariant,
+    titleColor: cr.accent.primary.sysOnPrimary,
+    descColor: cr.accent.primary.sysOnPrimary,
+    chevronColor: cr.accent.primary.sysOnPrimary,
   },
   doubled: {
-    outerBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
     borderColor: cr.outline.sysOutline,
     borderWidth: dim.borderWidth.sysStrokeThin,
-    outerRadius: dim.borderRadius.sysRadiusXl,
     elevated: false,
     titleColor: cr.surface.surface.sysOnSurface,
     descColor: cr.surface.surface.sysOnSurfaceVariant,
+    chevronColor: cr.outline.sysOutlineFixed,
+    innerBg: cr.transparent.primary.sysPrimary08,
+    iconBadgeBg: cr.accent.primary.sysPrimary,
+    iconBadgeColor: cr.accent.primary.sysOnPrimary,
   },
   image: {
-    outerBg: 'transparent',
+    bg: 'transparent',
     borderColor: 'transparent',
     borderWidth: 0,
-    outerRadius: dim.borderRadius.sysRadiusLg,
     elevated: false,
     titleColor: '#ffffff',
     descColor: cr.transparent.neutral.sysWhite80,
+    chevronColor: '#ffffff',
   },
 };
 
-const SIZE_PADDING: Record<CardSize, number> = {
-  sm: dim.spacing.padding.sysPadding8,
-  md: dim.spacing.padding.sysPadding12,
-  lg: dim.spacing.padding.sysPadding16,
+// ── Size tokens ───────────────────────────────────────────────────────────────
+
+const SIZE_TOKENS = {
+  sm: {
+    layout: 'row' as const,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding12,
+    gap: dim.spacing.padding.sysPadding12,
+    borderRadius: dim.borderRadius.sysRadiusMd,
+    iconSize: 24,
+    titleVariant: 'medium' as const,
+    showChevron: true,
+  },
+  md: {
+    layout: 'column' as const,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding16,
+    gap: dim.spacing.padding.sysPadding24,
+    borderRadius: dim.borderRadius.sysRadiusLg,
+    iconSize: 32,
+    titleVariant: 'medium' as const,
+    showChevron: false,
+  },
+  lg: {
+    layout: 'column' as const,
+    paddingH: dim.spacing.padding.sysPadding16,
+    paddingV: dim.spacing.padding.sysPadding16,
+    gap: dim.spacing.padding.sysPadding32,
+    borderRadius: dim.borderRadius.sysRadiusLg,
+    iconSize: 32,
+    titleVariant: 'large' as const,
+    showChevron: false,
+  },
 };
 
 const ELEVATION = {
@@ -91,6 +141,8 @@ const ELEVATION = {
   elevation: 2,
 };
 
+// ── Component ─────────────────────────────────────────────────────────────────
+
 export function Card({
   variant = 'outlined',
   size = 'lg',
@@ -106,30 +158,34 @@ export function Card({
   fullWidth = false,
 }: CardProps) {
   const v = VARIANT_TOKENS[variant];
-  const padding = SIZE_PADDING[size];
+  const s = SIZE_TOKENS[size];
+  const isRow = s.layout === 'row';
 
   const outerStyle = [
-    styles.root,
     {
-      backgroundColor: v.outerBg,
+      backgroundColor: variant === 'doubled' ? v.bg : v.bg,
       borderColor: v.borderColor,
       borderWidth: v.borderWidth,
-      borderRadius: v.outerRadius,
-      padding: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : padding,
+      borderRadius: variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,
+      paddingHorizontal: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,
+      paddingVertical: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,
       opacity: disabled ? 0.48 : 1,
     },
     v.elevated && ELEVATION,
     fullWidth && { alignSelf: 'stretch' as const },
+    isRow ? styles.rowRoot : styles.colRoot,
+    !isRow && { gap: s.gap },
   ];
 
+  // ── Text block ──────────────────────────────────────────────────────────────
   const textBlock = (title || description) ? (
-    <View style={styles.textBlock}>
+    <View style={isRow ? styles.rowTextBlock : undefined}>
       {title && (
-        <BodyText variant="large" color={v.titleColor}>
+        <BodyText variant={s.titleVariant} color={v.titleColor}>
           {title}
         </BodyText>
       )}
-      {description && (
+      {!isRow && description && (
         <BodyText variant="small" color={v.descColor}>
           {description}
         </BodyText>
@@ -137,17 +193,20 @@ export function Card({
     </View>
   ) : null;
 
+  // ── Inner content by variant ────────────────────────────────────────────────
   let inner: React.ReactNode;
 
   if (variant === 'doubled') {
     inner = (
       <View
         style={[
-          styles.doubledInner,
+          styles.colRoot,
           {
-            backgroundColor: cr.transparent.primary.sysPrimary08,
-            borderRadius: dim.borderRadius.sysRadiusLg,
-            padding,
+            backgroundColor: v.innerBg,
+            borderRadius: s.borderRadius,
+            paddingHorizontal: s.paddingH,
+            paddingVertical: s.paddingV,
+            gap: s.gap,
           },
         ]}
       >
@@ -156,7 +215,7 @@ export function Card({
             style={[
               styles.doubledIconBadge,
               {
-                backgroundColor: cr.accent.primary.sysPrimary,
+                backgroundColor: v.iconBadgeBg,
                 borderRadius: dim.borderRadius.sysRadiusFull,
               },
             ]}
@@ -175,34 +234,53 @@ export function Card({
           <>
             <Image
               source={image}
-              style={[StyleSheet.absoluteFillObject, { borderRadius: v.outerRadius }]}
+              style={[StyleSheet.absoluteFillObject, { borderRadius: s.borderRadius }]}
               resizeMode="cover"
               accessible={false}
             />
             <View
               style={[
                 StyleSheet.absoluteFillObject,
-                { borderRadius: v.outerRadius, backgroundColor: 'rgba(0,0,0,0.30)' },
+                { borderRadius: s.borderRadius, backgroundColor: 'rgba(0,0,0,0.30)' },
               ]}
               pointerEvents="none"
             />
           </>
         )}
-        {icon && <View style={styles.iconSlot}>{icon}</View>}
+        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
         {textBlock}
         {children}
       </>
     );
+  } else if (isRow) {
+    // sm — horizontal row
+    inner = (
+      <>
+        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {textBlock}
+        {s.showChevron && (
+          <Ionicons
+            name="chevron-forward"
+            size={20}
+            color={v.chevronColor}
+            accessible={false}
+          />
+        )}
+        {children}
+      </>
+    );
   } else {
+    // md / lg — vertical column
     inner = (
       <>
-        {icon && <View style={styles.iconSlot}>{icon}</View>}
+        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
         {textBlock}
         {children}
       </>
     );
   }
 
+  // ── Wrapper ─────────────────────────────────────────────────────────────────
   if (interactive || onPress) {
     return (
       <Pressable
@@ -210,33 +288,40 @@ export function Card({
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? title}
         accessibilityState={{ disabled }}
-        style={({ pressed }) => [outerStyle, pressed && !disabled && styles.pressed]}
+        style={({ pressed }) => [
+          styles.overflow,
+          ...outerStyle,
+          pressed && !disabled && styles.pressed,
+        ]}
       >
         {inner}
       </Pressable>
     );
   }
 
-  return <View style={outerStyle}>{inner}</View>;
+  return (
+    <View style={[styles.overflow, ...outerStyle]}>
+      {inner}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-  root: {
+  overflow: {
     overflow: 'hidden',
-    gap: 32,
-  },
-  pressed: {
-    opacity: 0.84,
   },
-  iconSlot: {
-    width: 32,
-    height: 32,
+  colRoot: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
   },
-  textBlock: {
-    gap: 0,
+  rowRoot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
   },
-  doubledInner: {
-    gap: 24,
+  rowTextBlock: {
+    flex: 1,
+    minWidth: 0,
   },
   doubledIconBadge: {
     width: 48,
@@ -244,4 +329,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  pressed: {
+    opacity: 0.84,
+  },
 });

package/src/List.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { sys } from './tokens';
+import { BodyText } from './BodyText';
+
+export type ListItemType = 'simple' | 'detailed';
+
+export interface ListItemProps {
+  type?: ListItemType;
+  label: string;
+  subLabel?: string;
+  icon?: React.ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  showDivider?: boolean;
+}
+
+export interface ListProps {
+  items: Omit<ListItemProps, 'showDivider'>[];
+  type?: ListItemType;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+// ── ListItem ──────────────────────────────────────────────────────────────────
+
+export function ListItem({
+  type = 'simple',
+  label,
+  subLabel,
+  icon,
+  onPress,
+  disabled = false,
+  showDivider = true,
+}: ListItemProps) {
+  const isDetailed = type === 'detailed';
+
+  const content = (
+    <View style={[styles.itemRow, { gap: dim.spacing.padding.sysPadding12 }]}>
+      {isDetailed ? (
+        // Detailed: icon inside circular badge
+        <View
+          style={[
+            styles.iconBadge,
+            { backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLow },
+          ]}
+        >
+          {icon}
+        </View>
+      ) : (
+        // Simple: bare icon
+        icon && <View style={styles.simpleIcon}>{icon}</View>
+      )}
+
+      <View style={styles.textBlock}>
+        <BodyText
+          variant="medium"
+          emphasized={isDetailed}
+          color={cr.surface.surface.sysOnSurface}
+        >
+          {label}
+        </BodyText>
+        {isDetailed && subLabel && (
+          <BodyText variant="small" color={cr.surface.surface.sysOnSurfaceVariant}>
+            {subLabel}
+          </BodyText>
+        )}
+      </View>
+
+      <Ionicons
+        name="chevron-forward"
+        size={20}
+        color={cr.outline.sysOutlineFixed}
+        accessible={false}
+      />
+    </View>
+  );
+
+  const divider = showDivider ? (
+    <View
+      style={[
+        styles.divider,
+        {
+          // Indent past icon + gap: 24px (simple) or 48px+16px (detailed)
+          marginLeft: isDetailed ? 64 : 36,
+          borderBottomColor: cr.outline.sysOutline,
+        },
+      ]}
+    />
+  ) : null;
+
+  if (onPress) {
+    return (
+      <View style={disabled && styles.disabled}>
+        <Pressable
+          onPress={disabled ? undefined : onPress}
+          accessibilityRole="button"
+          accessibilityLabel={label}
+          accessibilityState={{ disabled }}
+          style={({ pressed }) => [
+            isDetailed
+              ? { paddingTop: dim.spacing.padding.sysPadding12 }
+              : {
+                  paddingVertical: dim.spacing.padding.sysPadding16,
+                },
+            pressed && !disabled && styles.pressed,
+          ]}
+        >
+          {content}
+        </Pressable>
+        {divider}
+      </View>
+    );
+  }
+
+  return (
+    <View style={disabled && styles.disabled}>
+      <View
+        style={
+          isDetailed
+            ? { paddingTop: dim.spacing.padding.sysPadding12 }
+            : { paddingVertical: dim.spacing.padding.sysPadding16 }
+        }
+      >
+        {content}
+      </View>
+      {divider}
+    </View>
+  );
+}
+
+// ── List ──────────────────────────────────────────────────────────────────────
+
+export function List({ items, type = 'simple' }: ListProps) {
+  return (
+    <View>
+      {items.map((item, index) => (
+        <ListItem
+          key={index}
+          {...item}
+          type={item.type ?? type}
+          showDivider={index < items.length - 1}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  itemRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  simpleIcon: {
+    width: 24,
+    height: 24,
+  },
+  iconBadge: {
+    width: 48,
+    height: 48,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textBlock: {
+    flex: 1,
+    minWidth: 0,
+  },
+  divider: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  pressed: {
+    backgroundColor: 'rgba(0,0,0,0.04)',
+  },
+  disabled: {
+    opacity: 0.48,
+  },
+});

package/src/PlanCard.tsx

@@ -0,0 +1,312 @@
+import React, { useRef } from 'react';
+import {
+  Animated,
+  LayoutAnimation,
+  Platform,
+  Pressable,
+  StyleSheet,
+  UIManager,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { sys } from './tokens';
+import { BodyText } from './BodyText';
+
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental?.(true);
+}
+
+// ─── Dropdown Item ───────────────────────────────────────────────────────────
+
+export interface PlanCardItemData {
+  id: string;
+  title: string;
+  subtitle?: string;
+  checked?: boolean;
+  onToggle?: () => void;
+  onAudio?: () => void;
+  onOpen?: () => void;
+}
+
+interface DropdownItemProps extends PlanCardItemData {
+  showDivider?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+export function PlanCardDropdownItem({
+  title,
+  subtitle,
+  checked = false,
+  onToggle,
+  onAudio,
+  onOpen,
+  showDivider = true,
+}: DropdownItemProps) {
+  return (
+    <View>
+      <View style={itemStyles.row}>
+        {/* Check indicator */}
+        <Pressable
+          onPress={onToggle}
+          accessibilityRole="checkbox"
+          accessibilityState={{ checked }}
+          style={itemStyles.checkWrap}
+        >
+          {checked ? (
+            <View style={itemStyles.checkedCircle}>
+              <Ionicons name="checkmark" size={12} color="#fff" />
+            </View>
+          ) : (
+            <View style={itemStyles.uncheckedCircle} />
+          )}
+        </Pressable>
+
+        {/* Text */}
+        <View style={itemStyles.textCol}>
+          <BodyText variant="small" color={cr.surface.surface.sysOnSurface}>
+            {title}
+          </BodyText>
+          {subtitle && (
+            <BodyText variant="small" color={cr.surface.surface.sysOnSurfaceVariant}>
+              {subtitle}
+            </BodyText>
+          )}
+        </View>
+
+        {/* Action buttons */}
+        <View style={itemStyles.actions}>
+          {onAudio && (
+            <Pressable
+              onPress={onAudio}
+              accessibilityRole="button"
+              accessibilityLabel="Listen"
+              style={({ pressed }) => [itemStyles.actionBtn, pressed && itemStyles.pressed]}
+            >
+              <Ionicons name="headset-outline" size={16} color={cr.surface.surface.sysOnSurface} />
+            </Pressable>
+          )}
+          {onOpen && (
+            <Pressable
+              onPress={onOpen}
+              accessibilityRole="button"
+              accessibilityLabel="Open"
+              style={({ pressed }) => [itemStyles.actionBtn, pressed && itemStyles.pressed]}
+            >
+              <Ionicons name="arrow-up-circle-outline" size={16} color={cr.surface.surface.sysOnSurface} />
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      {showDivider && <View style={itemStyles.divider} />}
+    </View>
+  );
+}
+
+const itemStyles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: dim.spacing.padding.sysPadding16,
+    gap: dim.spacing.padding.sysPadding12,
+  },
+  checkWrap: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkedCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    backgroundColor: cr.custom.success.sysSuccess,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  uncheckedCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    borderWidth: 1.5,
+    borderColor: cr.outline.sysOutlineFixed,
+  },
+  textCol: {
+    flex: 1,
+    gap: 2,
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: dim.spacing.padding.sysPadding8,
+  },
+  actionBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    borderColor: cr.outline.sysOutline,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: cr.outline.sysOutline,
+  },
+});
+
+// ─── Plan Card ────────────────────────────────────────────────────────────────
+
+export interface PlanCardProps {
+  title: string;
+  icon?: React.ReactNode;
+  tag?: string;
+  items?: PlanCardItemData[];
+  expanded?: boolean;
+  onToggle?: () => void;
+  children?: React.ReactNode;
+}
+
+export function PlanCard({
+  title,
+  icon,
+  tag,
+  items,
+  expanded = false,
+  onToggle,
+  children,
+}: PlanCardProps) {
+  function handleToggle() {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    onToggle?.();
+  }
+
+  const hasContent = expanded && (children || (items && items.length > 0));
+
+  return (
+    <View style={cardStyles.card}>
+      {/* Header */}
+      <View style={cardStyles.header}>
+        {/* Left: icon + title stacked */}
+        <View style={cardStyles.left}>
+          <View style={cardStyles.iconCircle}>
+            {icon ?? (
+              <Ionicons name="document-text-outline" size={16} color={cr.accent.primary.sysOnPrimary} />
+            )}
+          </View>
+          <BodyText
+            variant="medium"
+            color={cr.surface.surface.sysOnSurface}
+          >
+            {title}
+          </BodyText>
+        </View>
+
+        {/* Right: tag chip + toggle */}
+        <View style={cardStyles.right}>
+          {tag && (
+            <View style={cardStyles.chip}>
+              <BodyText variant="small" color={cr.custom.info.sysOnInfoContainer}>
+                {tag}
+              </BodyText>
+            </View>
+          )}
+          <Pressable
+            onPress={handleToggle}
+            accessibilityRole="button"
+            accessibilityLabel={expanded ? 'Collapse' : 'Expand'}
+            style={({ pressed }) => [
+              cardStyles.toggleBtn,
+              pressed && cardStyles.pressed,
+            ]}
+          >
+            <Ionicons
+              name={expanded ? 'remove' : 'add'}
+              size={16}
+              color={cr.surface.surface.sysOnSurfaceVariant}
+            />
+          </Pressable>
+        </View>
+      </View>
+
+      {/* Expanded content */}
+      {hasContent && (
+        <View style={cardStyles.content}>
+          <View style={cardStyles.contentDivider} />
+          {children
+            ? children
+            : items!.map((item, index) => (
+                <PlanCardDropdownItem
+                  key={item.id}
+                  {...item}
+                  showDivider={index < items!.length - 1}
+                />
+              ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const cardStyles = StyleSheet.create({
+  card: {
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    borderRadius: dim.borderRadius.sysRadiusMd,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    borderColor: cr.outline.sysOutline,
+    padding: dim.spacing.padding.sysPadding16,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: dim.spacing.padding.sysPadding12,
+  },
+  left: {
+    flex: 1,
+    gap: dim.spacing.padding.sysPadding8,
+  },
+  iconCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    backgroundColor: cr.accent.primary.sysPrimary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: dim.spacing.padding.sysPadding8,
+    alignSelf: 'flex-start',
+  },
+  chip: {
+    backgroundColor: cr.custom.info.sysInfoContainer,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    paddingHorizontal: dim.spacing.padding.sysPadding8,
+    paddingVertical: dim.spacing.padding.sysPadding4,
+  },
+  toggleBtn: {
+    width: 20,
+    height: 20,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+  content: {
+    marginTop: dim.spacing.padding.sysPadding8,
+  },
+  contentDivider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: cr.outline.sysOutline,
+    marginBottom: dim.spacing.padding.sysPadding4,
+  },
+});

package/src/SegmentedControl.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { sys } from './tokens';
+import { BodyText } from './BodyText';
+
+export interface SegmentedControlOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps {
+  options: SegmentedControlOption[];
+  value: string;
+  onChange: (value: string) => void;
+  fullWidth?: boolean;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+export function SegmentedControl({
+  options,
+  value,
+  onChange,
+  fullWidth = false,
+}: SegmentedControlProps) {
+  return (
+    <View style={[styles.container, fullWidth && styles.fullWidth]}>
+      {options.map((option) => {
+        const isActive = option.value === value;
+        const isDisabled = option.disabled ?? false;
+
+        return (
+          <Pressable
+            key={option.value}
+            onPress={isDisabled ? undefined : () => onChange(option.value)}
+            accessibilityRole="tab"
+            accessibilityLabel={option.label}
+            accessibilityState={{ selected: isActive, disabled: isDisabled }}
+            style={({ pressed }) => [
+              styles.item,
+              {
+                paddingHorizontal: dim.spacing.padding.sysPadding12,
+                paddingVertical: dim.spacing.padding.sysPadding6,
+                gap: dim.spacing.padding.sysPadding4,
+                borderRadius: dim.borderRadius.sysRadiusFull,
+              },
+              isActive && { backgroundColor: cr.accent.primary.sysPrimary },
+              !isActive && pressed && !isDisabled && styles.pressed,
+              isDisabled && styles.disabled,
+            ]}
+          >
+            {option.icon && (
+              <View style={styles.iconSlot}>{option.icon}</View>
+            )}
+            <BodyText
+              variant="small"
+              emphasized={isActive}
+              color={
+                isActive
+                  ? cr.accent.primary.sysOnPrimary
+                  : cr.surface.surface.sysOnSurfaceVariant
+              }
+              numberOfLines={1}
+            >
+              {option.label}
+            </BodyText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    borderColor: cr.outline.sysOutline,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    padding: dim.spacing.padding.sysPadding4,
+    gap: dim.spacing.padding.sysPadding4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 1,
+  },
+  fullWidth: {
+    alignSelf: 'stretch',
+  },
+  item: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconSlot: {
+    width: 16,
+    height: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    backgroundColor: cr.transparent.neutral.sysBlack10,
+  },
+  disabled: {
+    opacity: 0.48,
+  },
+});

package/src/Snackbar.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { sys } from './tokens';
+import { BodyText } from './BodyText';
+
+export type SnackbarVariant = 'filled' | 'outlined';
+
+export interface SnackbarProps {
+  visible: boolean;
+  message: string;
+  variant?: SnackbarVariant;
+  actionLabel?: string;
+  onAction?: () => void;
+  onClose?: () => void;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+export function Snackbar({
+  visible,
+  message,
+  variant = 'filled',
+  actionLabel,
+  onAction,
+  onClose,
+}: SnackbarProps) {
+  const translateY = useRef(new Animated.Value(100)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          damping: 20,
+          stiffness: 300,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: 100,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible]);
+
+  const isFilled = variant === 'filled';
+
+  const containerStyle = isFilled ? styles.containerFilled : styles.containerOutlined;
+  const labelColor = isFilled
+    ? cr.accent.primary.sysOnPrimary
+    : cr.surface.surface.sysOnSurface;
+  const actionColor = isFilled
+    ? cr.accent.primary.sysOnPrimary
+    : cr.accent.primary.sysPrimary;
+  const closeBg = isFilled
+    ? cr.transparent.neutral.sysWhite10
+    : cr.surface.surfaceContainer.sysSurfaceContainer;
+  const closeIconColor = isFilled
+    ? cr.accent.primary.sysOnPrimary
+    : cr.surface.surface.sysOnSurfaceVariant;
+
+  return (
+    <Animated.View
+      style={[
+        styles.wrapper,
+        { opacity, transform: [{ translateY }] },
+      ]}
+      pointerEvents={visible ? 'box-none' : 'none'}
+    >
+      <View style={[styles.container, containerStyle]}>
+        <BodyText
+          variant="medium"
+          color={labelColor}
+          style={styles.label}
+          numberOfLines={2}
+        >
+          {message}
+        </BodyText>
+
+        <View style={styles.actionSlot}>
+          {actionLabel && onAction && (
+            <Pressable
+              onPress={onAction}
+              accessibilityRole="button"
+              accessibilityLabel={actionLabel}
+              style={({ pressed }) => [
+                styles.actionButton,
+                pressed && styles.pressed,
+              ]}
+            >
+              <BodyText variant="small" emphasized color={actionColor}>
+                {actionLabel}
+              </BodyText>
+            </Pressable>
+          )}
+
+          {onClose && (
+            <Pressable
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel="Dismiss"
+              style={({ pressed }) => [
+                styles.closeButton,
+                { backgroundColor: closeBg },
+                pressed && styles.pressed,
+              ]}
+            >
+              <Ionicons name="close" size={16} color={closeIconColor} />
+            </Pressable>
+          )}
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    bottom: dim.spacing.padding.sysPadding24,
+    left: dim.spacing.padding.sysPadding16,
+    right: dim.spacing.padding.sysPadding16,
+    alignItems: 'center',
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: dim.spacing.padding.sysPadding12,
+    paddingHorizontal: dim.spacing.padding.sysPadding16,
+    borderRadius: dim.borderRadius.sysRadiusMd,
+    gap: dim.spacing.padding.sysPadding16,
+    width: '100%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+  containerFilled: {
+    backgroundColor: cr.accent.primary.sysPrimaryContainer,
+  },
+  containerOutlined: {
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    borderWidth: dim.borderWidth.sysStrokeThin,
+    borderColor: cr.outline.sysOutline,
+  },
+  label: {
+    flex: 1,
+  },
+  actionSlot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: dim.spacing.padding.sysPadding12,
+  },
+  actionButton: {
+    paddingVertical: dim.spacing.padding.sysPadding4,
+  },
+  closeButton: {
+    width: 24,
+    height: 24,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+});

package/src/index.ts

@@ -31,9 +31,15 @@ export type { DividerProps, DividerVariant, DividerWeight } from './Divider';
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps, EmptyStateStyle, EmptyStateViewport } from './EmptyState';
 
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps, ListItemType } from './List';
+
 export { Input } from './Input';
 export type { InputProps, InputSize } from './Input';
 
+export { PlanCard, PlanCardDropdownItem } from './PlanCard';
+export type { PlanCardProps, PlanCardItemData } from './PlanCard';
+
 export { Pagination } from './Pagination';
 export type { PaginationProps, PaginationSize } from './Pagination';
 
@@ -43,15 +49,24 @@ export type { ProgressTrackerProps, ProgressTrackerSize, ProgressBarProps, Track
 export { RadioButton } from './RadioButton';
 export type { RadioButtonProps, RadioButtonSize } from './RadioButton';
 
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
+
 export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
 
+export { Snackbar } from './Snackbar';
+export type { SnackbarProps, SnackbarVariant } from './Snackbar';
+
 export { Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 
 export { Tooltip } from './Tooltip';
 export type { TooltipProps, TooltipVariant, TooltipDirection } from './Tooltip';
 
+export { ActionSheet } from './ActionSheet';
+export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';
+
 export { BodyText } from './BodyText';
 export type { BodyTextProps, BodyVariant } from './BodyText';
 

package/src/tokens.ts

@@ -88,6 +88,7 @@ export const sys = {
       sysRadiusMd: 12,
       sysRadiusLg: 16,
       sysRadiusXl: 24,
+      sysRadiusXxl: 32,
       sysRadiusFull: 999,
     },
     borderWidth: {
@@ -100,6 +101,7 @@ export const sys = {
       padding: {
         sysPadding2: 2,
         sysPadding4: 4,
+        sysPadding6: 6,
         sysPadding8: 8,
         sysPadding12: 12,
         sysPadding16: 16,