@trellixio/roaster-coffee/esm/components/Checkbox/Checkbox.js

Beans' product component library

import * as React from 'react';
import { classNames } from '../../utils/classNames/index.js';
import { useUid } from '../../utils/useUid/index.js';
import '@floating-ui/react';
import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup.js';
import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroup.context.js';

const Checkbox = React.forwardRef((props, ref) => {
  const { id, label, name, disabled, value, labelClassName, inputClassName, isRichSelector, checked, onChange } = props;
  const ctx = useCheckboxGroupContext();
  const uid = useUid(id);
  const contextProps = ctx ? {
    checked: ctx.value.includes(value),
    onChange: ctx.onChange
  } : {
    checked,
    onChange: (event) => {
      onChange?.(event.target.checked);
    }
  };
  return /* @__PURE__ */ React.createElement(
    "label",
    {
      htmlFor: uid,
      className: classNames(labelClassName, { selector: isRichSelector, selected: contextProps.checked })
    },
    /* @__PURE__ */ React.createElement(
      "input",
      {
        value,
        ref,
        type: "checkbox",
        name,
        id: uid,
        disabled,
        checked: contextProps.checked,
        onChange: contextProps.onChange,
        className: inputClassName
      }
    ),
    /* @__PURE__ */ React.createElement("span", { className: classNames("input-checkbox", inputClassName) }),
    /* @__PURE__ */ React.createElement("div", { className: "content" }, label)
  );
});
Checkbox.displayName = "Checkbox";
Checkbox.Group = CheckboxGroup;

export { Checkbox };
//# sourceMappingURL=Checkbox.js.map