switch

1"use client"
2 
3import * as React from "react"
4 
5import { Switch as SwitchPrimitive } from "@ark-ui/react/switch"
6 
7import { cn } from "@/lib/utils"
8 
9const Switch = React.forwardRef<
10  React.ElementRef<typeof SwitchPrimitive.Root>,
11  SwitchPrimitive.RootProps
12>(({ className, children, ...props }, ref) => (
13  <SwitchPrimitive.Root
14    ref={ref}
15    className={cn(
16      "inline-flex data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
17      className
18    )}
19    {...props}
20  >
21    {children}
22  </SwitchPrimitive.Root>
23))
24Switch.displayName = "Switch"
25 
26const SwitchContext = SwitchPrimitive.Context
27 
28const SwitchControl = React.forwardRef<
29  React.ElementRef<typeof SwitchPrimitive.Control>,
30  SwitchPrimitive.ControlProps
31>(({ className, children, ...props }, ref) => (
32  <SwitchPrimitive.Control
33    ref={ref}
34    className={cn(
35      "inline-flex h-6 w-10 shrink-0 items-center rounded-full border-2 border-transparent outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
36      className
37    )}
38    {...props}
39  >
40    {children}
41    <SwitchPrimitive.HiddenInput />
42  </SwitchPrimitive.Control>
43))
44SwitchControl.displayName = "SwitchControl"
45 
46const SwitchLabel = React.forwardRef<
47  React.ElementRef<typeof SwitchPrimitive.Label>,
48  SwitchPrimitive.LabelProps
49>(({ className, ...props }, ref) => (
50  <SwitchPrimitive.Label
51    ref={ref}
52    className={cn(
53      "select-none font-medium text-foreground text-sm leading-4 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
54      className
55    )}
56    {...props}
57  />
58))
59SwitchLabel.displayName = "SwitchLabel"
60 
61const SwitchRootProvider = SwitchPrimitive.RootProvider
62 
63const SwitchThumb = React.forwardRef<
64  React.ElementRef<typeof SwitchPrimitive.Thumb>,
65  SwitchPrimitive.ThumbProps
66>(({ className, ...props }, ref) => (
67  <SwitchPrimitive.Thumb
68    ref={ref}
69    className={cn(
70      "data-[state=checked]:rtl:-translate-x-4 pointer-events-none block size-5 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
71      className
72    )}
73    {...props}
74  />
75))
76SwitchThumb.displayName = "SwitchThumb"
77 
78export {
79  Switch,
80  SwitchContext,
81  SwitchControl,
82  SwitchLabel,
83  SwitchRootProvider,
84  SwitchThumb,
85}
86 
87export {
88  useSwitch,
89  useSwitchContext,
90  type SwitchCheckedChangeDetails,
91} from "@ark-ui/react/switch"