feat(Switch): new component

playground/app.vue

@@ -25,6 +25,7 @@ const components = [
   'popover',
   'skeleton',
   'slideover',
+  'switch',
   'tabs',
   'tooltip'
 ]

playground/pages/switch.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import theme from '#build/ui/switch'
+
+const sizes = Object.keys(theme.variants.size)
+const checked = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div>
+      <USwitch v-model:checked="checked" />
+    </div>
+    <div>
+      <USwitch v-model:checked="checked" disabled />
+    </div>
+    <div class="flex items-center gap-2 ml-[-96px]">
+      <USwitch v-for="size in sizes" :key="size" v-model:checked="checked" :size="(size as any)" />
+    </div>
+    <div class="flex items-center gap-2 ml-[-96px]">
+      <USwitch
+        v-for="size in sizes"
+        :key="size"
+        v-model:checked="checked"
+        :size="(size as any)"
+        unchecked-icon="i-heroicons-x-mark-20-solid"
+        checked-icon="i-heroicons-check-20-solid"
+      />
+    </div>
+  </div>
+</template>