toggle

1"use client"
2 
3import * as React from "react"
4 
5import { Toggle as TogglePrimitive } from "@ark-ui/react/toggle"
6import { type VariantProps, cva } from "class-variance-authority"
7 
8import { cn } from "@/lib/utils"
9 
10export const toggleVariants = cva(
11  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
12  {
13    variants: {
14      variant: {
15        default: "bg-transparent",
16        outline:
17          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
18      },
19      size: {
20        default: "h-9 px-2 min-w-9",
21        sm: "h-8 px-1.5 min-w-8",
22        lg: "h-10 px-2.5 min-w-10",
23      },
24    },
25    defaultVariants: {
26      variant: "default",
27      size: "default",
28    },
29  }
30)
31 
32const Toggle = React.forwardRef<
33  React.ElementRef<typeof TogglePrimitive.Root>,
34  TogglePrimitive.RootProps & VariantProps<typeof toggleVariants>
35>(({ className, variant, size, ...props }, ref) => (
36  <TogglePrimitive.Root
37    ref={ref}
38    className={cn(toggleVariants({ variant, size, className }))}
39    {...props}
40  />
41))
42Toggle.displayName = "Toggle"
43 
44const ToggleContext = TogglePrimitive.Context
45 
46const ToggleIndicator = TogglePrimitive.Indicator
47 
48export { Toggle, ToggleContext, ToggleIndicator }
49 
50export {
51  useToggle,
52  useToggleContext,
53} from "@ark-ui/react/toggle"