54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
|
|
import { CheckIcon } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function Switch({
|
|
className,
|
|
size = "default",
|
|
...props
|
|
}: SwitchPrimitive.Root.Props & {
|
|
size?: "sm" | "default";
|
|
}) {
|
|
return (
|
|
<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,
|
|
)}
|
|
{...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>
|
|
</SwitchPrimitive.Root>
|
|
);
|
|
}
|
|
|
|
export { Switch };
|