Toggle Group

1"use client";
2 
3import "./toggle-group.css";
4import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ToggleRoot } from "../toggle";
9import { ToggleGroupContext } from "./toggle-group.context";
10import { toggleGroupVariants, type ToggleGroupVariants } from "./toggle-group.variants";
11 
12export type ToggleGroupProps = ToggleGroupVariants & React.ComponentProps<typeof BaseToggleGroup>;
13 
14export const ToggleGroupRoot = ({
15  children,
16  className,
17  orientation = "horizontal",
18  variant = "default",
19  ...props
20}: ToggleGroupProps) => {
21  const slots = toggleGroupVariants({ orientation, variant });
22 
23  return (
24    <ToggleGroupContext.Provider value={{ slots }}>
25      <BaseToggleGroup className={cn(slots.root(), className)} orientation={orientation} {...props}>
26        {children}
27      </BaseToggleGroup>
28    </ToggleGroupContext.Provider>
29  );
30};
31 
32export const ToggleItem = ToggleRoot;
33export const ToggleGroupItem = ToggleRoot;