Checkbox

1"use client";
2 
3import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6import {
7  coarseTarget,
8  colorTransition,
9  selectionFocus,
10  stateStepping,
11} from "@/lib/recipes";
12 
13import { Check, Minus } from "@phosphor-icons/react/dist/ssr";
14export interface CheckboxProps extends CheckboxPrimitive.Root.Props {
15  /** Optional label. When present, the checkbox is wrapped in a `<label>` so clicking the label toggles the box. */
16  children?: React.ReactNode;
17  /** Additional classes for the outer wrapper (only applies when `children` is provided). */
18  wrapperClassName?: string;
19}
20 
21export function Checkbox({
22  className,
23  wrapperClassName,
24  children,
25  disabled,
26  ...props
27}: CheckboxProps): React.ReactElement {
28  const box = (
29    <CheckboxPrimitive.Root
30      disabled={disabled}
31      className={cn(
32        "inline-flex size-4 shrink-0 items-center justify-center rounded-[var(--radius-4)]",
33        stateStepping.uncheckedNeutralFill,
34        "data-checked:bg-ink data-checked:hover:bg-ink data-checked:focus-visible:bg-ink data-checked:active:bg-ink",
35        "data-indeterminate:bg-ink data-indeterminate:hover:bg-ink data-indeterminate:focus-visible:bg-ink data-indeterminate:active:bg-ink",
36        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
37        colorTransition,
38        selectionFocus,
39        children == null && coarseTarget,
40        className,
41      )}
42      data-slot="checkbox"
43      {...props}
44    >
45      <CheckboxPrimitive.Indicator
46        className="group flex items-center justify-center"
47        data-slot="checkbox-indicator"
48        keepMounted
49      >
50        <Check
51          className="text-base size-3 group-data-indeterminate:hidden group-data-unchecked:hidden"
52        />
53        <Minus
54          aria-hidden="true"
55          className="text-base hidden size-3 group-data-indeterminate:block"
56        />
57      </CheckboxPrimitive.Indicator>
58    </CheckboxPrimitive.Root>
59  );
60 
61  if (children == null) return box;
62 
63  return (
64    <label
65      className={cn(
66        "inline-flex items-center gap-2 text-small text-ink",
67        disabled && "cursor-not-allowed opacity-50",
68        wrapperClassName,
69      )}
70      data-slot="checkbox-label"
71    >
72      {box}
73      <span>{children}</span>
74    </label>
75  );
76}
77 
78export { CheckboxPrimitive };