Checkbox

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiCheck } from "@mdi/js";
5import { Checkbox as CheckboxPrimitive } from "radix-ui";
6import type * as React from "react";
7 
8import { cn } from "@/lib/utils";
9 
10function Checkbox({
11  className,
12  "aria-label": ariaLabel,
13  ...props
14}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
15  return (
16    <CheckboxPrimitive.Root
17      data-slot="checkbox"
18      aria-label={ariaLabel}
19      className={cn(
20        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
21        className,
22      )}
23      {...props}
24    >
25      <CheckboxPrimitive.Indicator
26        data-slot="checkbox-indicator"
27        className="data-[state=checked]:border-info-fg data-[state=checked]:bg-info-fg data-[state=checked]:text-inverse-text dark:data-[state=checked]:border-info-fg dark:data-[state=checked]:bg-info-fg"
28      >
29        <Icon path={mdiCheck} size={0.8} />
30      </CheckboxPrimitive.Indicator>
31    </CheckboxPrimitive.Root>
32  );
33}
34 
35export { Checkbox };