fix(docs): mark toggles as client-only (#321)

* fix(docs): mark toggles as client-only

* chore(docs): lint

docs/.vitepress/components/MotionToggle.vue

@@ -16,17 +16,19 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <SwitchRoot
-    id="motion-toggle"
-    v-model="shouldReduceMotion"
-    class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
-    :aria-label="switchTitle"
-  >
-    <SwitchThumb
-      class="text-muted-foreground bg-background border-muted my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+  <ClientOnly>
+    <SwitchRoot
+      id="motion-toggle"
+      v-model="shouldReduceMotion"
+      class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
+      :aria-label="switchTitle"
     >
-      <Icon v-if="shouldReduceMotion" icon="lucide:square-dashed-mouse-pointer" />
-      <Icon v-else icon="lucide:square-mouse-pointer" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <SwitchThumb
+        class="bg-background text-muted-foreground border-muted my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+      >
+        <Icon v-if="shouldReduceMotion" icon="lucide:square-dashed-mouse-pointer" />
+        <Icon v-else icon="lucide:square-mouse-pointer" />
+      </SwitchThumb>
+    </SwitchRoot>
+  </ClientOnly>
 </template>

docs/.vitepress/components/ThemeToggle.vue

@@ -16,17 +16,19 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <SwitchRoot
-    id="theme-toggle"
-    v-model="isDark"
-    class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
-    :aria-label="switchTitle"
-  >
-    <SwitchThumb
-      class="text-muted-foreground border-muted bg-background my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+  <ClientOnly>
+    <SwitchRoot
+      id="theme-toggle"
+      v-model="isDark"
+      class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
+      :aria-label="switchTitle"
     >
-      <Icon v-if="isDark" icon="lucide:moon-star" />
-      <Icon v-else icon="lucide:sun" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <SwitchThumb
+        class="text-muted-foreground border-muted bg-background my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+      >
+        <Icon v-if="isDark" icon="lucide:moon-star" />
+        <Icon v-else icon="lucide:sun" />
+      </SwitchThumb>
+    </SwitchRoot>
+  </ClientOnly>
 </template>