Switch

1"use client";
2 
3import * as React from "react";
4import * as SwitchPrimitive from "@radix-ui/react-switch";
5import { cn } from "@/lib/utils";
6 
7const Switch = React.forwardRef<
8  React.ComponentRef<typeof SwitchPrimitive.Root>,
9  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
10>(({ className, ...props }, ref) => (
11  <SwitchPrimitive.Root
12    ref={ref}
13    data-slot="switch"
14    className={cn(
15      "peer relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-input bg-surface-200 shadow-inner",
16      "after:absolute after:-inset-y-2 after:-inset-x-1 after:content-['']",
17      "transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]",
18      "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25",
19      "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
20      "disabled:cursor-not-allowed disabled:border-border disabled:bg-disabled disabled:opacity-100",
21      className,
22    )}
23    {...props}
24  >
25    <SwitchPrimitive.Thumb
26      data-slot="switch-thumb"
27      className={cn(
28        "pointer-events-none block size-5 translate-x-px rounded-full border border-border bg-surface shadow-sm",
29        "transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-spring)]",
30        "data-[state=checked]:translate-x-5 data-[state=checked]:border-primary-foreground/40 data-[state=checked]:bg-primary-foreground",
31      )}
32    />
33  </SwitchPrimitive.Root>
34));
35Switch.displayName = SwitchPrimitive.Root.displayName;
36 
37export { Switch };