Checkbox

1"use client";
2 
3import "./checkbox.css";
4import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { CheckboxContext, useCheckboxContext } from "./checkbox.context";
9import { checkboxVariants, type CheckboxVariants } from "./checkbox.variants";
10 
11export type CheckboxProps = CheckboxVariants & React.ComponentProps<typeof BaseCheckbox.Root>;
12 
13export const CheckboxRoot = ({ children, className, size, variant, ...props }: CheckboxProps) => {
14  const slots = checkboxVariants({ size, variant });
15 
16  return (
17    <CheckboxContext.Provider value={{ slots }}>
18      <BaseCheckbox.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseCheckbox.Root>
21    </CheckboxContext.Provider>
22  );
23};
24 
25export type CheckboxIndicatorProps = React.ComponentProps<typeof BaseCheckbox.Indicator>;
26 
27export const CheckboxIndicator = ({ children, className, ...props }: CheckboxIndicatorProps) => {
28  const { slots } = useCheckboxContext();
29  return (
30    <BaseCheckbox.Indicator className={cn(slots.indicator(), className)} {...props}>
31      {children ?? (
32        <svg
33          className="h-full w-full stroke-current"
34          fill="none"
35          strokeLinecap="round"
36          strokeLinejoin="round"
37          strokeWidth="3"
38          viewBox="0 0 24 24"
39        >
40          <polyline points="20 6 9 17 4 12" />
41        </svg>
42      )}
43    </BaseCheckbox.Indicator>
44  );
45};