Inline app/ (was an embedded git repo)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/src/components/ui.tsx

@@ -0,0 +1,94 @@
+import { Pressable, StyleSheet, Text, TextInput, View, type TextInputProps } from "react-native";
+import { C } from "../lib/theme";
+
+export function Field({ label, ...props }: TextInputProps & { label: string }) {
+  return (
+    <View style={{ marginBottom: 14 }}>
+      <Text style={u.label}>{label}</Text>
+      <TextInput style={u.input} placeholderTextColor={C.muted} {...props} />
+    </View>
+  );
+}
+
+export function Chips<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+  labels,
+}: {
+  label: string;
+  options: T[];
+  value: T | null;
+  onChange: (v: T) => void;
+  labels?: Record<string, string>;
+}) {
+  return (
+    <View style={{ marginBottom: 14 }}>
+      <Text style={u.label}>{label}</Text>
+      <View style={u.chipRow}>
+        {options.map((o) => (
+          <Pressable
+            key={o}
+            style={[u.chip, value === o && u.chipActive]}
+            onPress={() => onChange(o)}
+          >
+            <Text style={[u.chipText, value === o && { color: C.text }]}>{labels?.[o] ?? o}</Text>
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+export function Button({
+  title,
+  onPress,
+  danger,
+}: {
+  title: string;
+  onPress: () => void;
+  danger?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[u.button, danger && { backgroundColor: "transparent", borderColor: C.danger, borderWidth: 1 }]}
+      onPress={onPress}
+    >
+      <Text style={[u.buttonText, danger && { color: C.danger }]}>{title}</Text>
+    </Pressable>
+  );
+}
+
+const u = StyleSheet.create({
+  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
+  input: {
+    backgroundColor: C.surface,
+    color: C.text,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: C.border,
+    padding: 12,
+    fontSize: 16,
+  },
+  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  chip: {
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+    backgroundColor: C.surface,
+    borderWidth: 1,
+    borderColor: C.border,
+  },
+  chipActive: { backgroundColor: C.surface2, borderColor: C.accent },
+  chipText: { color: C.muted, fontSize: 14 },
+  button: {
+    backgroundColor: C.accent,
+    borderRadius: 10,
+    padding: 14,
+    alignItems: "center",
+    marginTop: 8,
+    marginBottom: 12,
+  },
+  buttonText: { color: C.text, fontSize: 16, fontWeight: "600" },
+});