checkbox-group

1import * as CheckboxGroupPrimitive from "@diceui/checkbox-group";
2import { Check } from "lucide-react";
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6function CheckboxGroup({
7  className,
8  ...props
9}: React.ComponentProps<typeof CheckboxGroupPrimitive.Root>) {
10  return (
11    <CheckboxGroupPrimitive.Root
12      data-slot="checkbox-group"
13      className={cn("peer flex flex-col gap-3.5", className)}
14      {...props}
15    />
16  );
17}
18 
19function CheckboxGroupLabel({
20  className,
21  ...props
22}: React.ComponentProps<typeof CheckboxGroupPrimitive.Label>) {
23  return (
24    <CheckboxGroupPrimitive.Label
25      data-slot="checkbox-group-label"
26      className={cn(
27        "text-foreground/70 text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
28        className,
29      )}
30      {...props}
31    />
32  );
33}
34 
35function CheckboxGroupList({
36  className,
37  ...props
38}: React.ComponentProps<typeof CheckboxGroupPrimitive.List>) {
39  return (
40    <CheckboxGroupPrimitive.List
41      data-slot="checkbox-group-list"
42      className={cn(
43        "flex gap-3 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
44        className,
45      )}
46      {...props}
47    />
48  );
49}
50 
51function CheckboxGroupItem({
52  className,
53  children,
54  ...props
55}: React.ComponentProps<typeof CheckboxGroupPrimitive.Item>) {
56  return (
57    <label className="flex w-fit select-none items-center gap-2 text-sm leading-none has-data-disabled:cursor-not-allowed has-data-invalid:text-destructive has-data-disabled:opacity-50">
58      <CheckboxGroupPrimitive.Item
59        data-slot="checkbox-group-item"
60        className={cn(
61          "size-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring data-invalid:border-destructive [&[data-state=checked]:not([data-invalid])]:bg-primary [&[data-state=checked]:not([data-invalid])]:text-primary-foreground [&[data-state=checked][data-invalid]]:bg-destructive [&[data-state=checked][data-invalid]]:text-primary-foreground [&[data-state=unchecked][data-invalid]]:bg-transparent",
62          className,
63        )}
64        {...props}
65      >
66        <CheckboxGroupPrimitive.Indicator
67          className="flex items-center justify-center text-current"
68          asChild
69        >
70          <Check className="size-3.5" />
71        </CheckboxGroupPrimitive.Indicator>
72      </CheckboxGroupPrimitive.Item>
73      {children}
74    </label>
75  );
76}
77 
78// … truncated