switch

1import * as React from "react"
2import { Switch as BaseSwitch } from "@base-ui/react/switch"
3 
4import { cn } from "@/lib/utils"
5 
6function Switch({
7	className,
8	...props
9}: React.ComponentProps<typeof BaseSwitch.Root>) {
10	return (
11		<BaseSwitch.Root
12			data-slot="switch"
13			className={cn(
14				"data-checked:bg-primary focus-visible:border-ring focus-visible:ring-ring/50 data-unchecked:bg-input data-unchecked:hover:border-ring/70 data-checked:border-primary inline-flex h-5 w-8 shrink-0 items-center rounded-full border shadow-xs transition-all duration-200 outline-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50",
15				className
16			)}
17			{...props}
18		>
19			<BaseSwitch.Thumb
20				data-slot="switch-thumb"
21				className={cn(
22					"bg-foreground data-checked:bg-background pointer-events-none block size-4 rounded-full ring-0 transition-transform duration-200 ease-in-out data-checked:translate-x-[calc(100%-3px)] data-unchecked:translate-x-px"
23				)}
24			/>
25		</BaseSwitch.Root>
26	)
27}
28 
29export { Switch }