beenvoice-app/components/ui/StepperInput.tsx

import { Ionicons } from "@expo/vector-icons";
import { Pressable, StyleSheet, Text, TextInput, View, type TextInputProps } from "react-native";

import { fonts, radii, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";

type StepperInputProps = Omit<TextInputProps, "value" | "onChangeText"> & {
  label: string;
  value: string;
  onChangeText: (value: string) => void;
  step?: number;
  min?: number;
};

export function StepperInput({
  label,
  value,
  onChangeText,
  step = 0.25,
  min = 0,
  ...props
}: StepperInputProps) {
  const { colors } = useAppTheme();

  function adjust(delta: number) {
    const current = Number.parseFloat(value) || 0;
    const next = Math.max(min, Math.round((current + delta) * 100) / 100);
    onChangeText(Number.isInteger(next) ? String(next) : String(next));
  }

  return (
    <View style={styles.wrapper}>
      <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
      <View
        style={[
          styles.field,
          { borderColor: colors.border, backgroundColor: colors.cardGlass },
        ]}
      >
        <Pressable
          accessibilityRole="button"
          accessibilityLabel={`Decrease ${label}`}
          hitSlop={6}
          onPress={() => adjust(-step)}
          style={({ pressed }) => [styles.stepButton, pressed && styles.stepPressed]}
        >
          <Ionicons name="remove" size={18} color={colors.foreground} />
        </Pressable>

        <TextInput
          value={value}
          onChangeText={onChangeText}
          keyboardType="decimal-pad"
          placeholderTextColor={colors.mutedForeground}
          style={[styles.input, { color: colors.foreground }]}
          {...props}
        />

        <Pressable
          accessibilityRole="button"
          accessibilityLabel={`Increase ${label}`}
          hitSlop={6}
          onPress={() => adjust(step)}
          style={({ pressed }) => [styles.stepButton, pressed && styles.stepPressed]}
        >
          <Ionicons name="add" size={18} color={colors.foreground} />
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    gap: spacing.sm,
  },
  label: {
    fontSize: 14,
    fontFamily: fonts.bodyMedium,
  },
  field: {
    minHeight: 44,
    borderWidth: 1,
    borderRadius: radii.md,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: spacing.xs,
  },
  stepButton: {
    width: 36,
    height: 36,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: radii.sm,
  },
  stepPressed: {
    opacity: 0.65,
  },
  input: {
    flex: 1,
    textAlign: "center",
    fontSize: 14,
    fontFamily: fonts.body,
    paddingVertical: spacing.sm,
  },
});