45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import type { ButtonHTMLAttributes } from "react";
|
|
import { cn } from "./cn.js";
|
|
|
|
export interface CheckerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
|
|
checked: boolean;
|
|
label: string;
|
|
/** Helper copy belongs outside the control, immediately before it. */
|
|
description?: never;
|
|
onChange: (checked: boolean) => void;
|
|
}
|
|
|
|
type IsNever<Value> = [Value] extends [never] ? true : false;
|
|
type Assert<Value extends true> = Value;
|
|
type _CheckerDescriptionMustStayForbidden = Assert<IsNever<Exclude<CheckerProps["description"], undefined>>>;
|
|
|
|
export function Checker({
|
|
checked,
|
|
label,
|
|
description: _unsupportedDescription,
|
|
onChange,
|
|
disabled,
|
|
className,
|
|
type = "button",
|
|
...props
|
|
}: CheckerProps) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={cn("nodedc-checker", className)}
|
|
role="checkbox"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={() => {
|
|
if (!disabled) onChange(!checked);
|
|
}}
|
|
{...props}
|
|
>
|
|
<span className="nodedc-checker__copy">
|
|
<span className="nodedc-checker__label">{label}</span>
|
|
</span>
|
|
<span className="nodedc-checker__indicator" aria-hidden="true" />
|
|
</button>
|
|
);
|
|
}
|