56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Checkbox as KumoCheckbox, type CheckboxProps as KumoCheckboxProps } from "@cloudflare/kumo/components/checkbox";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
|
|
checked?: boolean;
|
|
defaultChecked?: boolean;
|
|
onCheckedChange?: (checked: boolean) => void;
|
|
};
|
|
|
|
export function Checkbox({
|
|
"aria-label": ariaLabel,
|
|
"aria-labelledby": ariaLabelledBy,
|
|
checked,
|
|
className,
|
|
defaultChecked = false,
|
|
label,
|
|
name,
|
|
onCheckedChange,
|
|
...props
|
|
}: CheckboxProps): React.ReactElement {
|
|
const generatedId = React.useId().replace(/:/g, "");
|
|
const labelId = label ? `teatea-checkbox-label-${generatedId}` : undefined;
|
|
const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
|
|
const isControlled = checked !== undefined;
|
|
const currentChecked = isControlled ? checked : uncontrolledChecked;
|
|
|
|
return (
|
|
<span className="teatea-checkbox">
|
|
<KumoCheckbox
|
|
aria-label={label ? undefined : ariaLabel}
|
|
aria-labelledby={ariaLabelledBy ?? labelId}
|
|
checked={currentChecked}
|
|
className={cn("teatea-checkbox-control", className)}
|
|
onCheckedChange={(nextChecked) => {
|
|
const booleanValue = Boolean(nextChecked);
|
|
if (!isControlled) {
|
|
setUncontrolledChecked(booleanValue);
|
|
}
|
|
onCheckedChange?.(booleanValue);
|
|
}}
|
|
{...props}
|
|
/>
|
|
{label ? (
|
|
<span className="min-w-0 flex-1" id={labelId}>
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
{name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
|
|
</span>
|
|
);
|
|
}
|