'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckIcon, MinusIcon } from '@graphprotocol/gds-react/icons';
import { useControlled, useGDS } from "../hooks/index.js";
import { cn, splitProps } from "../utils/index.js";
import { Checkable } from "./base/Checkable.js";
export function CheckboxRoot({ size, children: label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, name, value, checked: controlledChecked, defaultChecked, onChange, disabled = false, className, ...props }) {
    useGDS();
    const { rootProps, nestedProps } = splitProps(props);
    const [checked, setChecked] = useControlled(controlledChecked, defaultChecked ?? false, onChange);
    return (_jsx(Checkable, { size: size, label: label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, name: name, value: value, checked: checked, disabled: disabled, className: cn('gds-checkbox', className), ...rootProps, renderInput: (renderProps, { inputProps }) => (_jsxs(Checkable.Box, { ...renderProps, className: cn(renderProps.className, `text-form-checked
            **:icon:transition-opacity
            @state-disabled/checkable:**:icon:opacity-disabled
            @prop-size-small/checkable:rounded-4
            @prop-size-small/checkable:**:icon:prop-size-2.5
            @prop-size-medium/checkable:rounded-4
            @prop-size-medium/checkable:**:icon:prop-size-3
            @prop-size-large/checkable:rounded-6
            @prop-size-large/checkable:**:icon:prop-size-3.5`), children: [_jsx("input", { ...inputProps, type: "checkbox", onChange: (event) => setChecked(event.target.checked), ...nestedProps }), _jsx(CheckIcon, { alt: "", className: "@state-not-checked/checkable:hidden" }), _jsx(MinusIcon, { alt: "", className: "@state-not-indeterminate/checkable:hidden" })] })) }));
}
CheckboxRoot.displayName = 'Checkbox';
export function CheckboxArea(props) {
    return _jsx(Checkable.Label, { ...props });
}
CheckboxArea.displayName = 'Checkbox.Area';
//# sourceMappingURL=Checkbox.parts.js.map