8-bit Switch

1"use client";
2 
3import type * as React from "react";
4 
5import * as SwitchPrimitive from "@radix-ui/react-switch";
6 
7import { cn } from "@/lib/utils";
8 
9function Switch({
10  className,
11  ...props
12}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
13  return (
14    <SwitchPrimitive.Root
15      data-slot="switch"
16      className={cn(
17        "relative peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-4 w-8 shrink-0 items-center border border-transparent shadow-xs transition-all outline-none border-none disabled:cursor-not-allowed disabled:opacity-50",
18        className
19      )}
20      {...props}
21    >
22      <SwitchPrimitive.Thumb
23        data-slot="switch-thumb"
24        className={cn(
25          "bg-primary data-[state=checked]:bg-primary-foreground dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block size-4 data-[state=checked]:border-l data-[state=unchecked]:border-r border-foreground dark:border-ring ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%)] data-[state=unchecked]:translate-x-0"
26        )}
27      />
28 
29      <div
30        className="absolute inset-0 border-y-4 -my-1 border-foreground dark:border-ring pointer-events-none"
31        aria-hidden="true"
32      />
33 
34      <div
35        className="absolute inset-0 border-x-4 -mx-1 border-foreground dark:border-ring pointer-events-none"
36        aria-hidden="true"
37      />
38    </SwitchPrimitive.Root>
39  );
40}
41 
42export { Switch };