openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as TogglePrimitive from "@radix-ui/react-toggle";
4import { cva } from "class-variance-authority";
5import type { VariantProps } from "class-variance-authority";
6import * as React from "react";
7
8import { cn } from "@/lib/utils";
9
10const toggleVariants = cva(
11 "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
12 {
13 variants: {
14 variant: {
15 default: "bg-transparent",
16 outline:
17 "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
18 },
19 size: {
20 default: "h-10 px-3",
21 sm: "h-9 px-2.5",
22 lg: "h-11 px-5",
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 React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
35 VariantProps<typeof toggleVariants>
36>(({ className, variant, size, ...props }, ref) => (
37 <TogglePrimitive.Root
38 ref={ref}
39 className={cn(toggleVariants({ variant, size, className }))}
40 {...props}
41 />
42));
43
44Toggle.displayName = TogglePrimitive.Root.displayName;
45
46export { Toggle, toggleVariants };