From 8071e76fc6a94b4cc0cca17d75c976ad5c07afd4 Mon Sep 17 00:00:00 2001
From: Gauvain <contact@uruk.dev>
Date: Thu, 4 Jun 2026 12:11:21 +0200
Subject: [PATCH] feat(settings): add typed switch/select/stepper setting rows

---
 .../settings/index/SettingsSelectRow.tsx      | 38 ++++++++++++++++++
 .../settings/index/SettingsStepperRow.tsx     | 39 +++++++++++++++++++
 .../settings/index/SettingsSwitchRow.tsx      | 23 +++++++++++
 3 files changed, 100 insertions(+)
 create mode 100644 components/settings/index/SettingsSelectRow.tsx
 create mode 100644 components/settings/index/SettingsStepperRow.tsx
 create mode 100644 components/settings/index/SettingsSwitchRow.tsx

diff --git a/components/settings/index/SettingsSelectRow.tsx b/components/settings/index/SettingsSelectRow.tsx
new file mode 100644
index 000000000..a2a60f43c
--- /dev/null
+++ b/components/settings/index/SettingsSelectRow.tsx
@@ -0,0 +1,38 @@
+import { Ionicons } from "@expo/vector-icons";
+import type React from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { ListItem } from "@/components/list/ListItem";
+import {
+  type OptionGroup,
+  PlatformDropdown,
+} from "@/components/PlatformDropdown";
+
+interface Props {
+  title: string;
+  valueLabel?: string;
+  groups: OptionGroup[];
+  dropdownTitle?: string;
+  disabled?: boolean;
+}
+
+export const SettingsSelectRow: React.FC<Props> = ({
+  title,
+  valueLabel,
+  groups,
+  dropdownTitle,
+  disabled,
+}) => (
+  <ListItem title={title} disabled={disabled}>
+    <PlatformDropdown
+      groups={groups}
+      title={dropdownTitle}
+      trigger={
+        <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+          <Text className='mr-1 text-[#8E8D91]'>{valueLabel}</Text>
+          <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+        </View>
+      }
+    />
+  </ListItem>
+);
diff --git a/components/settings/index/SettingsStepperRow.tsx b/components/settings/index/SettingsStepperRow.tsx
new file mode 100644
index 000000000..f75a5e344
--- /dev/null
+++ b/components/settings/index/SettingsStepperRow.tsx
@@ -0,0 +1,39 @@
+import type React from "react";
+import { Stepper } from "@/components/inputs/Stepper";
+import { ListItem } from "@/components/list/ListItem";
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  value: number;
+  step: number;
+  min: number;
+  max: number;
+  onUpdate: (value: number) => void;
+  appendValue?: string;
+  disabled?: boolean;
+}
+
+export const SettingsStepperRow: React.FC<Props> = ({
+  title,
+  subtitle,
+  value,
+  step,
+  min,
+  max,
+  onUpdate,
+  appendValue,
+  disabled,
+}) => (
+  <ListItem title={title} subtitle={subtitle} disabled={disabled}>
+    <Stepper
+      value={value}
+      step={step}
+      min={min}
+      max={max}
+      onUpdate={onUpdate}
+      appendValue={appendValue}
+      disabled={disabled}
+    />
+  </ListItem>
+);
diff --git a/components/settings/index/SettingsSwitchRow.tsx b/components/settings/index/SettingsSwitchRow.tsx
new file mode 100644
index 000000000..0477e657e
--- /dev/null
+++ b/components/settings/index/SettingsSwitchRow.tsx
@@ -0,0 +1,23 @@
+import type React from "react";
+import { Switch } from "react-native";
+import { ListItem } from "@/components/list/ListItem";
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+export const SettingsSwitchRow: React.FC<Props> = ({
+  title,
+  subtitle,
+  value,
+  onValueChange,
+  disabled,
+}) => (
+  <ListItem title={title} subtitle={subtitle} disabled={disabled}>
+    <Switch value={value} disabled={disabled} onValueChange={onValueChange} />
+  </ListItem>
+);