components/input/tonal_switch: implement TonalSwitch

lib/src/components.dart

@@ -8,6 +8,7 @@ export 'components/material/top_bar.dart';
 
 export 'components/input/input_field.dart';
 export 'components/input/validation_message.dart';
+export 'components/input/tonal_switch.dart';
 
 export 'components/icons.dart';
 export 'components/shimmer.dart';

lib/src/components/input/tonal_switch.dart

@@ -0,0 +1,69 @@
+import 'dart:io';
+
+import 'package:flume/flume.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class TonalSwitch extends StatelessWidget {
+  const TonalSwitch({super.key, required this.value, required this.onChanged});
+
+  final bool value;
+  final ValueChanged<bool> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    if (Platform.isMacOS || Platform.isIOS) {
+      return _CupertinoSwitch(key: key, value: value, onChanged: onChanged);
+    } else {
+      return _MaterialSwitch(key: key, value: value, onChanged: onChanged);
+    }
+  }
+}
+
+class _CupertinoSwitch extends StatelessWidget {
+  const _CupertinoSwitch({
+    super.key,
+    required this.value,
+    required this.onChanged,
+  });
+
+  final bool value;
+  final ValueChanged<bool> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoSwitch(
+      value: value,
+      onChanged: onChanged,
+      activeColor: context.ambiance.palette.light,
+      trackColor: context.ambiance.palette.mediumDark,
+      thumbColor: value
+          ? context.ambiance.palette.dark
+          : context.ambiance.palette.light,
+    );
+  }
+}
+
+class _MaterialSwitch extends StatelessWidget {
+  const _MaterialSwitch({
+    super.key,
+    required this.value,
+    required this.onChanged,
+  });
+
+  final bool value;
+  final ValueChanged<bool> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Switch(
+      value: value,
+      onChanged: onChanged,
+      activeColor: context.ambiance.palette.dark,
+      activeTrackColor: context.ambiance.palette.light,
+      inactiveThumbColor: context.ambiance.palette.light,
+      inactiveTrackColor: context.ambiance.palette.mediumDark,
+      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+    );
+  }
+}