From b0ff66027fdf47e3350d3405ebc185bca101dd2f Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Sat, 10 Oct 2026 18:38:43 -0400
Subject: [PATCH] feat: replace the name input with a size control

---
 App.js | 67 ++++++++++++++++++++++++++++++++++++----------------------
 1 file changed, 42 insertions(+), 25 deletions(-)

diff --git a/App.js b/App.js
index 4326264..155c553 100644
--- a/App.js
+++ b/App.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
 
 import {
   accentColor,
@@ -16,10 +16,17 @@ import {
 
 if (__DEV__) console.info('[stim:readiness] pending');
 
+const SIZES = [
+  { key: 'S', label: 'small', fontSize: 16, cardPadding: 12 },
+  { key: 'M', label: 'medium', fontSize: 28, cardPadding: 20 },
+  { key: 'L', label: 'large', fontSize: 44, cardPadding: 32 },
+];
+
 export default function App() {
   const [count, setCount] = useState(0);
   const [dark, setDark] = useState(false);
-  const [name, setName] = useState('');
+  const [size, setSize] = useState('M');
+  const { fontSize, cardPadding } = SIZES.find((s) => s.key === size);
 
   useEffect(() => {
     console.log(`[stim:tutorial] started title=${titleColor} background=${backgroundColor}`);
@@ -27,23 +34,17 @@ export default function App() {
   }, []);
 
   return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-      style={[styles.container, { backgroundColor }]}
-    >
+    <View style={[styles.container, { backgroundColor }]}>
       <Text style={[styles.title, { color: titleColor }]}>Stim Tutorial</Text>
       <Text style={[styles.subtitle, { color: mutedColor }]}>Edit theme.js and save.</Text>
 
       <View
         testID="accent-card"
-        style={[styles.card, { backgroundColor: dark ? darkAccentColor : accentColor }]}
+        style={[styles.card, { backgroundColor: dark ? darkAccentColor : accentColor, padding: cardPadding }]}
       >
-        <Text testID="tap-count" style={[styles.cardText, { color: dark ? darkTextColor : textColor }]}>
+        <Text testID="tap-count" style={[styles.cardText, { color: dark ? darkTextColor : textColor, fontSize }]}>
           Tapped {count} {count === 1 ? 'time' : 'times'}
         </Text>
-        <Text testID="greeting" style={[styles.cardText, { color: dark ? darkTextColor : textColor }]}>
-          Hello, {name.trim() || 'world'}
-        </Text>
       </View>
 
       <Pressable
@@ -67,18 +68,32 @@ export default function App() {
         />
       </View>
 
-      <TextInput
-        testID="name-input"
-        accessibilityLabel="Your name"
-        placeholder="Your name"
-        value={name}
-        onChangeText={setName}
-        autoCapitalize="words"
-        autoCorrect={false}
-        placeholderTextColor={mutedColor}
-        style={[styles.input, { borderColor: inputBorderColor, color: textColor }]}
-      />
-    </KeyboardAvoidingView>
+      <View
+        accessibilityRole="radiogroup"
+        accessibilityLabel="Size"
+        style={styles.sizeRow}
+      >
+        {SIZES.map(({ key, label }) => {
+          const selected = size === key;
+          return (
+            <Pressable
+              key={key}
+              testID={`size-${key.toLowerCase()}`}
+              accessibilityRole="radio"
+              accessibilityLabel={`Size ${label}`}
+              accessibilityState={{ selected }}
+              onPress={() => setSize(key)}
+              style={[
+                styles.chip,
+                { borderColor: selected ? buttonColor : inputBorderColor, backgroundColor: selected ? buttonColor : backgroundColor },
+              ]}
+            >
+              <Text style={[styles.chipText, { color: selected ? buttonTextColor : textColor }]}>{key}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
   );
 }
 
@@ -86,11 +101,13 @@ const styles = StyleSheet.create({
   container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
   title: { fontSize: 44, fontWeight: '700', marginBottom: 8 },
   subtitle: { fontSize: 16 },
-  card: { alignSelf: 'stretch', borderRadius: 12, padding: 16, marginTop: 32, gap: 4 },
+  card: { alignSelf: 'stretch', borderRadius: 12, marginTop: 32 },
   cardText: { fontSize: 18 },
   button: { alignSelf: 'stretch', borderRadius: 12, paddingVertical: 14, marginTop: 16, alignItems: 'center' },
   buttonText: { fontSize: 18, fontWeight: '600' },
   row: { alignSelf: 'stretch', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 },
   label: { fontSize: 18 },
-  input: { alignSelf: 'stretch', borderWidth: 1, borderRadius: 12, padding: 12, fontSize: 18, marginTop: 16 },
+  sizeRow: { alignSelf: 'stretch', flexDirection: 'row', gap: 8, marginTop: 16 },
+  chip: { flex: 1, borderWidth: 1, borderRadius: 12, paddingVertical: 12, alignItems: 'center' },
+  chipText: { fontSize: 18, fontWeight: '600' },
 });