From 93b1807371a0172e50a0634faa61a8e91643442d Mon Sep 17 00:00:00 2001
From: Mohammed Helaiwa <eng.helewa@gmail.com>
Date: Sat, 26 Oct 2024 20:17:42 +0300
Subject: [PATCH] Add named slot inside SwitchThumb

---
 .../src/lib/registry/default/ui/switch/Switch.vue    | 12 ++++--------
 .../src/lib/registry/new-york/ui/switch/Switch.vue   |  4 +++-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/switch/Switch.vue b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
index 49d9af1f..acab25ed 100644
--- a/apps/www/src/lib/registry/default/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
@@ -8,20 +8,14 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
-
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
-
 const emits = defineEmits<SwitchRootEmits>()
-
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
-
   return delegated
 })
-
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
-
 <template>
   <SwitchRoot
     v-bind="forwarded"
@@ -31,7 +25,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     )"
   >
     <SwitchThumb
-      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
-    />
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
   </SwitchRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
index bc2da72f..afa7c27d 100644
--- a/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
@@ -32,6 +32,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <SwitchThumb
       :class="cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')"
-    />
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
   </SwitchRoot>
 </template>