Checkbox

1"use client";
2 
3import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8import "./checkbox.css";
9 
10type CheckedState = boolean | "indeterminate";
11 
12export interface CheckboxProps extends Omit<
13  React.ComponentProps<typeof CheckboxPrimitive.Root>,
14  "checked" | "defaultChecked" | "indeterminate" | "onCheckedChange"
15> {
16  checked?: CheckedState;
17  defaultChecked?: CheckedState;
18  hasError?: boolean;
19  indeterminate?: boolean;
20  onCheckedChange?: (checked: CheckedState) => void;
21}
22 
23const Checkbox = ({
24  checked,
25  className,
26  defaultChecked,
27  hasError,
28  indeterminate,
29  onCheckedChange,
30  ...props
31}: CheckboxProps) => {
32  const resolvedIndeterminate =
33    indeterminate ?? (checked === "indeterminate" || defaultChecked === "indeterminate");
34 
35  return (
36    <CheckboxPrimitive.Root
37      aria-invalid={hasError || undefined}
38      checked={checked === "indeterminate" ? false : checked}
39      className={cn(
40        "ft-checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-[6px] bg-card align-middle shadow-input transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-disabled:cursor-not-allowed data-checked:text-primary-foreground data-indeterminate:text-primary-foreground data-disabled:opacity-50",
41        className,
42      )}
43      data-slot="checkbox"
44      defaultChecked={defaultChecked === "indeterminate" ? false : defaultChecked}
45      indeterminate={resolvedIndeterminate}
46      onCheckedChange={(nextChecked) => onCheckedChange?.(nextChecked)}
47      render={(renderProps, state) => {
48        let dataState: "indeterminate" | "checked" | "unchecked" = "unchecked";
49        if (state.indeterminate) {
50          dataState = "indeterminate";
51        } else if (state.checked) {
52          dataState = "checked";
53        }
54        return <span {...renderProps} data-state={dataState} />;
55      }}
56      {...props}
57    >
58      <CheckboxPrimitive.Indicator
59        className="pointer-events-none flex items-center justify-center text-current"
60        data-slot="checkbox-indicator"
61        keepMounted
62      >
63        <svg aria-hidden="true" className="z-10 h-3 w-4" role="presentation" viewBox="0 0 17 18">
64          <polyline
65            className="ft-checkbox-polyline"
66            fill="none"
67            points="1 9 7 14 15 4"
68            stroke="currentColor"
69// … truncated