From 8dcca2c21f65768469514ceaecc058999b64d5ef Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:34:55 +0000
Subject: [PATCH 1/3] chore: Add shadows for consistency

---
 ui/src/core_components/input/CoreRatingInput.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/core_components/input/CoreRatingInput.vue b/ui/src/core_components/input/CoreRatingInput.vue
index 03a98ba60..2dbbf43b8 100644
--- a/ui/src/core_components/input/CoreRatingInput.vue
+++ b/ui/src/core_components/input/CoreRatingInput.vue
@@ -266,6 +266,7 @@ label {
 }
 
 .unit.stars {
+	box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.2) inset;
 	clip-path: polygon(
 		50% 0%,
 		61% 35%,
@@ -281,10 +282,12 @@ label {
 }
 
 .unit.faces {
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2) inset;
 	clip-path: circle(50%);
 }
 
 .unit.hearts {
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2) inset;
 	clip-path: path(
 		"M2.54139 14.2987C0.97724 12.7905 0 10.646 0 8.26667C0 3.70111 3.5983 0 8.03704 0C10.4025 0 12.5293 1.05112 14 2.72404C15.4707 1.05112 17.5975 0 19.963 0C24.4017 0 28 3.70111 28 8.26667C28 10.6181 27.0455 12.7402 25.5133 14.2455L14.0815 28L2.54139 14.2987Z"
 	);
@@ -297,6 +300,7 @@ label {
 	width: 28px;
 	height: 28px;
 	background: var(--accentColor);
+	box-shadow: none;
 }
 
 .unit .filler.light {

From ba2db4075833f427cd2d6c79aa46b51cd1c1e9a4 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:35:16 +0000
Subject: [PATCH 2/3] feat: Switch Input component

---
 src/streamsync/core.py                        |   4 +
 ui/src/core/templateMap.ts                    |   4 +-
 .../core_components/input/CoreSwitchInput.vue | 127 ++++++++++++++++++
 3 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/core_components/input/CoreSwitchInput.vue

diff --git a/src/streamsync/core.py b/src/streamsync/core.py
index 85ff703b9..0b27fb8d6 100644
--- a/src/streamsync/core.py
+++ b/src/streamsync/core.py
@@ -632,6 +632,10 @@ def _transform_options_change(self, ev: StreamsyncEvent) -> Optional[List[str]]:
             raise ValueError("Unauthorised option")
         return payload
 
+    def _transform_toggle(self, ev: StreamsyncEvent) -> bool:
+        payload = bool(ev.payload)
+        return payload
+
     def _transform_keydown(self, ev) -> Dict:
         payload = ev.payload
         key = str(payload.get("key"))
diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index 8c5aa211d..3cdf95845 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -25,6 +25,7 @@ import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
 import CoreTextInput from "../core_components/input/CoreTextInput.vue";
 import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
 import CoreRating from "../core_components/input/CoreRatingInput.vue";
+import CoreSwitchInput from "../core_components/input/CoreSwitchInput.vue";
 // layout
 import CoreColumn from "../core_components/layout/CoreColumn.vue";
 import CoreColumns from "../core_components/layout/CoreColumns.vue";
@@ -104,7 +105,8 @@ const templateMap = {
 	chat: CoreChat,
 	step: CoreStep,
 	steps: CoreSteps,
-	ratinginput: CoreRating
+	ratinginput: CoreRating,
+	switchinput: CoreSwitchInput,
 };
 
 if (STREAMSYNC_LIVE_CCT === "yes") {
diff --git a/ui/src/core_components/input/CoreSwitchInput.vue b/ui/src/core_components/input/CoreSwitchInput.vue
new file mode 100644
index 000000000..c99265517
--- /dev/null
+++ b/ui/src/core_components/input/CoreSwitchInput.vue
@@ -0,0 +1,127 @@
+<template>
+	<div ref="rootEl" class="CoreSwitchInput">
+		<div
+			class="switch"
+			:class="{ on: toggleValue }"
+			@click="handleToggle"
+			tabindex="0"
+			role="switch"
+			@keydown.enter.space="handleToggle"
+			:aria-checked="toggleValue"
+		>
+			<div class="toggle"></div>
+		</div>
+		<label @click="handleToggle">
+			{{ fields.label.value }}
+		</label>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, inject, Ref } from "vue";
+import { ref } from "vue";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import {
+	accentColor,
+	primaryTextColor,
+	separatorColor,
+	cssClasses,
+} from "../../renderer/sharedStyleFields";
+
+const description = "A user input component with a simple on/off status.";
+
+const onToggleHandlerStub = `
+def handle_toggle(state, payload):
+
+	# The payload will be a bool 
+
+	state["its_on"] = payload`;
+
+export default {
+	streamsync: {
+		name: "Switch Input",
+		description,
+		category: "Input",
+		fields: {
+			label: {
+				name: "Label",
+				init: "Input Label",
+				type: FieldType.Text,
+			},
+			accentColor,
+			primaryTextColor,
+			separatorColor,
+			cssClasses,
+		},
+		events: {
+			"ss-toggle": {
+				desc: "Sent when the switch is toggled.",
+				stub: onToggleHandlerStub.trim(),
+				bindable: true,
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import injectionKeys from "../../injectionKeys";
+import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+
+const fields = inject(injectionKeys.evaluatedFields);
+const rootEl: Ref<HTMLElement> = ref(null);
+const ss = inject(injectionKeys.core);
+const instancePath = inject(injectionKeys.instancePath);
+const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
+const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
+const toggleValue = ref(false);
+
+function handleToggle() {
+	toggleValue.value = !toggleValue.value;
+	handleInput(toggleValue.value, "ss-toggle");
+}
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+.CoreSwitchInput {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.switch {
+	background: var(--separatorColor);
+	width: 32px;
+	height: 16px;
+	padding: 1px;
+	border-radius: 8px;
+	cursor: pointer;
+	box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
+	overflow: hidden;
+}
+
+.switch:focus-visible {
+	outline: 1px solid var(--primaryTextColor);
+}
+
+.switch.on {
+	background: var(--accentColor);
+}
+
+.toggle {
+	width: 14px;
+	height: 14px;
+	background: var(--containerBackgroundColor);
+	border-radius: 8px;
+	transition: 0.2s margin ease-in-out;
+}
+
+.switch.on .toggle {
+	margin-left: 16px;
+}
+
+label {
+	cursor: pointer;
+}
+</style>

From 4503230cc2ef3389cbf8dca4a795efd91d281b08 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:40:28 +0000
Subject: [PATCH 3/3] fix: Linting

---
 ui/src/core_components/input/CoreSwitchInput.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/src/core_components/input/CoreSwitchInput.vue b/ui/src/core_components/input/CoreSwitchInput.vue
index c99265517..59e387de9 100644
--- a/ui/src/core_components/input/CoreSwitchInput.vue
+++ b/ui/src/core_components/input/CoreSwitchInput.vue
@@ -3,11 +3,11 @@
 		<div
 			class="switch"
 			:class="{ on: toggleValue }"
-			@click="handleToggle"
 			tabindex="0"
 			role="switch"
-			@keydown.enter.space="handleToggle"
 			:aria-checked="toggleValue"
+			@click="handleToggle"
+			@keydown.enter.space="handleToggle"
 		>
 			<div class="toggle"></div>
 		</div>
@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import { computed, inject, Ref } from "vue";
+import { inject, Ref } from "vue";
 import { ref } from "vue";
-import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { FieldType } from "../../streamsyncTypes";
 import {
 	accentColor,
 	primaryTextColor,
@@ -72,8 +72,7 @@ const fields = inject(injectionKeys.evaluatedFields);
 const rootEl: Ref<HTMLElement> = ref(null);
 const ss = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
-const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
-const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
+const { handleInput } = useFormValueBroker(ss, instancePath, rootEl);
 const toggleValue = ref(false);
 
 function handleToggle() {