Checkbox Group

1"use client";
2 
3import "./checkbox-group.css";
4import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { CheckboxGroupContext } from "./checkbox-group.context";
9import { checkboxGroupVariants, type CheckboxGroupVariants } from "./checkbox-group.variants";
10 
11export type CheckboxGroupProps = CheckboxGroupVariants &
12  React.ComponentProps<typeof BaseCheckboxGroup>;
13 
14export const CheckboxGroupRoot = ({
15  children,
16  className,
17  orientation,
18  ...props
19}: CheckboxGroupProps) => {
20  const slots = checkboxGroupVariants({ orientation });
21 
22  return (
23    <CheckboxGroupContext.Provider value={{ slots }}>
24      <BaseCheckboxGroup className={cn(slots.root(), className)} {...props}>
25        {children}
26      </BaseCheckboxGroup>
27    </CheckboxGroupContext.Provider>
28  );
29};