Toggle

1import { Toggle, ToggleIndicator } from "@/components/ui/toggle";
2
3<Toggle />

1"use client";
2
3import { Toggle as ArkToggle, useToggleContext } from "@ark-ui/react/toggle";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7import { buttonVariants } from "@/registry/react/components/button";
8
9export const useToggle = useToggleContext;
10
11export const toggleVariants = tv({
12  base: [
13    "relative",
14    "data-[state=on]:bg-input/64 dark:data-[state=on]:bg-input/64",
15    "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
16  ],
17  variants: {
18    size: {
19      sm: "h-7 min-w-7 px-1.5",
20      md: "h-8 min-w-8 px-2",
21      lg: "h-9 min-w-9 px-2.5",
22    },
23  },
24  defaultVariants: {
25    size: "md",
26  },
27});
28