Toggle

1"use client";
2 
3import "./toggle.css";
4import { Toggle as BaseToggle } from "@base-ui/react/toggle";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ToggleContext } from "./toggle.context";
9import { toggleVariants, type ToggleVariants } from "./toggle.variants";
10 
11export type ToggleProps = ToggleVariants & React.ComponentProps<typeof BaseToggle>;
12 
13export const ToggleRoot = ({ children, className, variant, size, ...props }: ToggleProps) => {
14  const slots = toggleVariants({ variant, size });
15 
16  return (
17    <ToggleContext.Provider value={{ slots }}>
18      <BaseToggle className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseToggle>
21    </ToggleContext.Provider>
22  );
23};