fix(ui): make shared switches visible across CMS themes

src/components/ui/switch.tsx

@@ -4,6 +4,7 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { CheckIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import styles from "./switch.module.css";
 
 function Switch({
 	className,
@@ -16,35 +17,11 @@ function Switch({
 		<SwitchPrimitive.Root
 			data-slot="switch"
 			data-size={size}
-			className={cn(
-				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-colors",
-				"bg-input hover:bg-input/80",
-				"data-checked:bg-primary data-checked:hover:bg-primary/90",
-				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
-				"disabled:cursor-not-allowed disabled:opacity-50",
-				"data-[size=default]:h-5 data-[size=default]:w-9",
-				"data-[size=sm]:h-4 data-[size=sm]:w-7",
-				className,
-			)}
+			className={cn(styles.root, className)}
 			{...props}
 		>
-			<SwitchPrimitive.Thumb
-				data-slot="switch-thumb"
-				className={cn(
-					"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full bg-background text-primary shadow-sm ring-0 transition-[left,colors]",
-					"left-0.5 data-checked:left-[calc(100%-1.125rem)]",
-					"group-data-[size=default]/switch:size-4",
-					"group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:data-checked:left-[calc(100%-0.875rem)]",
-				)}
-			>
-				<CheckIcon
-					aria-hidden
-					className={cn(
-						"size-2.5 stroke-[3] opacity-0 transition-opacity",
-						"group-data-checked/switch:opacity-100",
-						"group-data-[size=sm]/switch:size-2",
-					)}
-				/>
+			<SwitchPrimitive.Thumb data-slot="switch-thumb" className={styles.thumb}>
+				<CheckIcon aria-hidden className={styles.check} />
 			</SwitchPrimitive.Thumb>
 		</SwitchPrimitive.Root>
 	);