import { clsx } from 'clsx';
import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import { useInputAttributes } from '../inputs/contexts.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';

const CheckboxButton = /*#__PURE__*/forwardRef(function CheckboxButton({
  checked,
  indeterminate = false,
  className,
  disabled,
  onChange,
  ...rest
}, reference) {
  const inputAttributes = useInputAttributes();
  const internalRef = useRef(null);
  useImperativeHandle(reference, () => internalRef.current ?? {});
  useEffect(() => {
    if (internalRef.current) {
      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
      internalRef.current.indeterminate = indeterminate;
    }
  }, [indeterminate, reference]);
  return /*#__PURE__*/jsxs("span", {
    className: clsx('np-checkbox-button', className, disabled && 'disabled'),
    children: [/*#__PURE__*/jsx("input", {
      ...inputAttributes,
      ...rest,
      ref: reference ?? internalRef,
      type: "checkbox",
      disabled: disabled,
      checked: checked,
      onChange: onChange
    }), /*#__PURE__*/jsxs("span", {
      className: "tw-checkbox-button",
      children: [/*#__PURE__*/jsx("span", {
        className: "tw-checkbox-check"
      }), /*#__PURE__*/jsx("span", {
        className: "np-tw-checkbox-indeterminate"
      })]
    })]
  });
});

export { CheckboxButton as default };
//# sourceMappingURL=CheckboxButton.mjs.map
