checkbox-group

1'use client';
2 
3import * as React from 'react';
4import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
5 
6import { cn } from '@/registry/lib/utils';
7 
8interface CheckboxGroupContextValue {
9  variant?: 'solid' | 'surface';
10  theme?: 'gray' | 'accent';
11}
12 
13const CheckboxGroupContext = React.createContext<CheckboxGroupContextValue>({});
14 
15/**
16 * Slots: checkbox-group
17 */
18function CheckboxGroup({
19  className,
20  variant,
21  theme,
22  ...props
23}: CheckboxGroupPrimitive.Props & CheckboxGroupContextValue) {
24  return (
25    <CheckboxGroupContext.Provider value={{ variant, theme }}>
26      <CheckboxGroupPrimitive
27        data-slot="checkbox-group"
28        className={cn('flex flex-col gap-2', className)}
29        {...props}
30      />
31    </CheckboxGroupContext.Provider>
32  );
33}
34 
35export { CheckboxGroup, CheckboxGroupContext };