@compsych/mobile-ui 1.0.11 → 1.0.13

package/src/components/PlanCard/index.tsx

@@ -13,7 +13,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
 if (Platform.OS === 'android') {
@@ -36,8 +36,6 @@ interface DropdownItemProps extends PlanCardItemData {
   showDivider?: boolean;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 export function PlanCardDropdownItem({
   title,
   subtitle,
@@ -47,9 +45,19 @@ export function PlanCardDropdownItem({
   onOpen,
   showDivider = true,
 }: DropdownItemProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
   return (
     <View>
-      <View style={itemStyles.row}>
+      <View
+        style={[
+          itemStyles.row,
+          {
+            paddingVertical: dim.spacing.padding.sysPadding16,
+            gap: dim.spacing.padding.sysPadding12,
+          },
+        ]}
+      >
         {/* Check indicator */}
         <Pressable
           onPress={onToggle}
@@ -58,11 +66,27 @@ export function PlanCardDropdownItem({
           style={itemStyles.checkWrap}
         >
           {checked ? (
-            <View style={itemStyles.checkedCircle}>
+            <View
+              style={[
+                itemStyles.checkedCircle,
+                {
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  backgroundColor: cr.custom.success.sysSuccess,
+                },
+              ]}
+            >
               <Ionicons name="checkmark" size={12} color="#fff" />
             </View>
           ) : (
-            <View style={itemStyles.uncheckedCircle} />
+            <View
+              style={[
+                itemStyles.uncheckedCircle,
+                {
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  borderColor: cr.outline.sysOutlineFixed,
+                },
+              ]}
+            />
           )}
         </Pressable>
 
@@ -82,7 +106,9 @@ export function PlanCardDropdownItem({
         </View>
 
         {/* Action buttons */}
-        <View style={itemStyles.actions}>
+        <View
+          style={[itemStyles.actions, { gap: dim.spacing.padding.sysPadding8 }]}
+        >
           {onAudio && (
             <Pressable
               onPress={onAudio}
@@ -90,6 +116,11 @@ export function PlanCardDropdownItem({
               accessibilityLabel="Listen"
               style={({ pressed }) => [
                 itemStyles.actionBtn,
+                {
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  borderWidth: dim.borderWidth.sysStrokeThin,
+                  borderColor: cr.outline.sysOutline,
+                },
                 pressed && itemStyles.pressed,
               ]}
             >
@@ -107,6 +138,11 @@ export function PlanCardDropdownItem({
               accessibilityLabel="Open"
               style={({ pressed }) => [
                 itemStyles.actionBtn,
+                {
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  borderWidth: dim.borderWidth.sysStrokeThin,
+                  borderColor: cr.outline.sysOutline,
+                },
                 pressed && itemStyles.pressed,
               ]}
             >
@@ -120,7 +156,14 @@ export function PlanCardDropdownItem({
         </View>
       </View>
 
-      {showDivider && <View style={itemStyles.divider} />}
+      {showDivider && (
+        <View
+          style={[
+            itemStyles.divider,
+            { backgroundColor: cr.outline.sysOutline },
+          ]}
+        />
+      )}
     </View>
   );
 }
@@ -129,8 +172,6 @@ const itemStyles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: dim.spacing.padding.sysPadding16,
-    gap: dim.spacing.padding.sysPadding12,
   },
   checkWrap: {
     width: 20,
@@ -141,17 +182,13 @@ const itemStyles = StyleSheet.create({
   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,
@@ -159,14 +196,10 @@ const itemStyles = StyleSheet.create({
   },
   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',
   },
@@ -175,7 +208,6 @@ const itemStyles = StyleSheet.create({
   },
   divider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: cr.outline.sysOutline,
   },
 });
 
@@ -202,6 +234,8 @@ export function PlanCard({
   children,
   style,
 }: PlanCardProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
   function handleToggle() {
     if (Platform.OS !== 'web') {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
@@ -212,12 +246,37 @@ export function PlanCard({
   const hasContent = expanded && (children || (items && items.length > 0));
 
   return (
-    <View style={[cardStyles.card, style]}>
+    <View
+      style={[
+        cardStyles.card,
+        {
+          backgroundColor:
+            cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          borderRadius: dim.borderRadius.sysRadiusMd,
+          borderWidth: dim.borderWidth.sysStrokeThin,
+          borderColor: cr.outline.sysOutline,
+          padding: dim.spacing.padding.sysPadding16,
+        },
+        style,
+      ]}
+    >
       {/* Header */}
-      <View style={cardStyles.header}>
+      <View
+        style={[cardStyles.header, { gap: dim.spacing.padding.sysPadding12 }]}
+      >
         {/* Left: icon + title stacked */}
-        <View style={cardStyles.left}>
-          <View style={cardStyles.iconCircle}>
+        <View
+          style={[cardStyles.left, { gap: dim.spacing.padding.sysPadding8 }]}
+        >
+          <View
+            style={[
+              cardStyles.iconCircle,
+              {
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                backgroundColor: cr.accent.primary.sysPrimary,
+              },
+            ]}
+          >
             {icon ?? (
               <Ionicons
                 name="document-text-outline"
@@ -232,9 +291,21 @@ export function PlanCard({
         </View>
 
         {/* Right: tag chip + toggle */}
-        <View style={cardStyles.right}>
+        <View
+          style={[cardStyles.right, { gap: dim.spacing.padding.sysPadding8 }]}
+        >
           {tag && (
-            <View style={cardStyles.chip}>
+            <View
+              style={[
+                cardStyles.chip,
+                {
+                  backgroundColor: cr.custom.info.sysInfoContainer,
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  paddingHorizontal: dim.spacing.padding.sysPadding8,
+                  paddingVertical: dim.spacing.padding.sysPadding4,
+                },
+              ]}
+            >
               <BodyText
                 variant="small"
                 color={cr.custom.info.sysOnInfoContainer}
@@ -249,6 +320,11 @@ export function PlanCard({
             accessibilityLabel={expanded ? 'Collapse' : 'Expand'}
             style={({ pressed }) => [
               cardStyles.toggleBtn,
+              {
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                backgroundColor:
+                  cr.surface.surfaceContainer.sysSurfaceContainer,
+              },
               pressed && cardStyles.pressed,
             ]}
           >
@@ -263,8 +339,21 @@ export function PlanCard({
 
       {/* Expanded content */}
       {hasContent && (
-        <View style={cardStyles.content}>
-          <View style={cardStyles.contentDivider} />
+        <View
+          style={[
+            cardStyles.content,
+            { marginTop: dim.spacing.padding.sysPadding8 },
+          ]}
+        >
+          <View
+            style={[
+              cardStyles.contentDivider,
+              {
+                backgroundColor: cr.outline.sysOutline,
+                marginBottom: dim.spacing.padding.sysPadding4,
+              },
+            ]}
+          />
           {children
             ? children
             : items!.map((item, index) => (
@@ -282,60 +371,39 @@ export function PlanCard({
 
 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,
-  },
+  chip: {},
   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,
-  },
+  content: {},
   contentDivider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: cr.outline.sysOutline,
-    marginBottom: dim.spacing.padding.sysPadding4,
   },
 });

package/src/components/ProgressTracker/index.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import { sys } from '../../tokens';
-
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+import { useTheme } from '../../theme';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // ProgressBar — standalone horizontal fill bar (0–100)
@@ -16,6 +14,7 @@ export interface ProgressBarProps {
 }
 
 export function ProgressBar({ progress }: ProgressBarProps) {
+  const { colorRoles: cr } = useTheme();
   const clamped = Math.min(100, Math.max(0, progress));
 
   return (
@@ -23,9 +22,25 @@ export function ProgressBar({ progress }: ProgressBarProps) {
       accessible
       accessibilityRole="progressbar"
       accessibilityValue={{ min: 0, max: 100, now: clamped }}
-      style={styles.track}
+      style={[
+        styles.track,
+        {
+          backgroundColor:
+            cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+        },
+      ]}
     >
-      {clamped > 0 && <View style={[styles.fill, { width: `${clamped}%` }]} />}
+      {clamped > 0 && (
+        <View
+          style={[
+            styles.fill,
+            {
+              width: `${clamped}%`,
+              backgroundColor: cr.custom.success.sysSuccess,
+            },
+          ]}
+        />
+      )}
     </View>
   );
 }
@@ -56,23 +71,6 @@ export interface ProgressTrackerProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const SIZE_TOKENS = {
-  sm: {
-    fontSize: ts.labelSmall.sysFontSize,
-    lineHeight: ts.labelSmall.sysLineHeight,
-    letterSpacing: ts.labelSmall.sysTracking,
-    labelBarGap: dim.spacing.padding.sysPadding8,
-    stepGap: dim.spacing.padding.sysPadding4,
-  },
-  lg: {
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    letterSpacing: ts.labelMedium.sysTracking,
-    labelBarGap: dim.spacing.padding.sysPadding16,
-    stepGap: dim.spacing.padding.sysPadding8,
-  },
-};
-
 function stepProgress(state: StepState): number {
   return state === 'pending' ? 0 : 100;
 }
@@ -83,7 +81,29 @@ export function ProgressTracker({
   showLabels = false,
   style,
 }: ProgressTrackerProps) {
-  const s = SIZE_TOKENS[size];
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
+
+  const sizeTokens = useMemo(
+    () => ({
+      sm: {
+        fontSize: ts.labelSmall.sysFontSize,
+        lineHeight: ts.labelSmall.sysLineHeight,
+        letterSpacing: ts.labelSmall.sysTracking,
+        labelBarGap: dim.spacing.padding.sysPadding8,
+        stepGap: dim.spacing.padding.sysPadding4,
+      },
+      lg: {
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        letterSpacing: ts.labelMedium.sysTracking,
+        labelBarGap: dim.spacing.padding.sysPadding16,
+        stepGap: dim.spacing.padding.sysPadding8,
+      },
+    }),
+    [ts, dim],
+  );
+
+  const s = sizeTokens[size];
 
   return (
     <View style={[styles.row, { gap: s.stepGap }, style]}>
@@ -128,7 +148,6 @@ const styles = StyleSheet.create({
     height: 4,
     width: '100%',
     borderRadius: 9999,
-    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
     overflow: 'hidden',
   },
   fill: {
@@ -137,7 +156,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     left: 0,
     borderRadius: 9999,
-    backgroundColor: cr.custom.success.sysSuccess,
   },
   // ProgressTracker
   row: {