Checkbox

1"use client";
2 
3import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
4import { mergeProps } from "@base-ui/react/merge-props";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8import { CheckIcon } from "lucide-react";
9 
10type CheckedState = boolean | "indeterminate";
11type CheckboxProps = Omit<
12  CheckboxPrimitive.Root.Props,
13  "checked" | "defaultChecked" | "onCheckedChange" | "ref"
14> & {
15  asChild?: boolean;
16  checked?: CheckedState;
17  children?: React.ReactNode;
18  defaultChecked?: CheckedState;
19  forceMount?: true;
20  onCheckedChange?: (
21    checked: CheckedState,
22    eventDetails: CheckboxPrimitive.Root.ChangeEventDetails,
23  ) => void;
24};
25 
26type RenderProps = React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> };
27 
28function mergeRefs(...refs: (React.Ref<HTMLElement> | undefined)[]) {
29  return (element: HTMLElement | null) => {
30    refs.forEach((ref) => {
31      if (typeof ref === "function") {
32        ref(element);
33      } else if (ref) {
34        ref.current = element;
35      }
36    });
37  };
38}
39 
40function preserveRadixEventCancellation(
41  child: React.ReactElement<{ [key: string]: unknown; children?: React.ReactNode }>,
42) {
43  const eventProps: Record<string, unknown> = {};
44 
45  for (const [name, handler] of Object.entries(child.props)) {
46    if (/^on[A-Z]/.test(name) && typeof handler === "function") {
47      eventProps[name] = (...args: unknown[]) => {
48        (handler as (...handlerArgs: unknown[]) => void)(...args);
49        const event = args[0] as
50          | { defaultPrevented?: boolean; preventBaseUIHandler?: () => void }
51          | undefined;
52        if (event?.defaultPrevented) event.preventBaseUIHandler?.();
53      };
54    }
55  }
56 
57  return React.cloneElement(child, eventProps);
58}
59 
60function renderWithAliases<State>(
61  render:
62    | React.ReactElement
63    | ((props: RenderProps, state: State) => React.ReactElement)
64    | undefined,
65  fallback: React.ReactElement,
66  getAliases: (state: State) => Record<string, string | undefined>,
67) {
68  return (elementProps: RenderProps, state: State) => {
69    const aliasedProps = mergeProps(
70      elementProps as React.ComponentPropsWithRef<"button">,
71      getAliases(state) as React.ComponentPropsWithRef<"button">,
72    ) as RenderProps;
73 
74    if (typeof render === "function") {
75      return render(aliasedProps, state);
76    }
77 
78    const element = (render ?? fallback) as React.ReactElement<RenderProps>;
79    const mergedProps = mergeProps(
80// … truncated