switch

1"use client"
2
3import * as React from "react"
4import { Switch as BaseSwitch } from "@base-ui/react/switch"
5import { cn } from "@/lib/utils"
6
7type SwitchRootProps = React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>
8
9type SwitchA11yProps =
10    | { "aria-label": string; "aria-labelledby"?: string; id?: string }
11    | { "aria-labelledby": string; "aria-label"?: string; id?: string }
12    | { id: string; "aria-label"?: string; "aria-labelledby"?: string }
13
14type SwitchProps = Omit<SwitchRootProps, "aria-label" | "aria-labelledby" | "id"> & SwitchA11yProps
15
16const Switch = React.forwardRef<
17    React.ComponentRef<typeof BaseSwitch.Root>,
18    SwitchProps
19>(({ className, ...props }, ref) => (
20    <BaseSwitch.Root
21        className={cn(
22            "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-black transition-colors focus-brutal disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-main data-unchecked:bg-white",
23            className
24        )}
25        {...props}
26        ref={ref}
27    >
28        <BaseSwitch.Thumb className="pointer-events-none block h-4 w-4 rounded-full border-2 border-black bg-white ring-0 transition-transform data-checked:translate-x-5 data-checked:bg-black data-unchecked:translate-x-0.5" />
29    </BaseSwitch.Root>
30))
31Switch.displayName = "Switch"
32
33export { Switch }