@kiwicom/orbit-components/lib/Checkbox/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.FakeCheckbox = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Check = _interopRequireDefault(require("../icons/Check"));
var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
var _FakeCheckbox = _interopRequireDefault(require("./FakeCheckbox"));
exports.FakeCheckbox = _FakeCheckbox.default;
const Checkbox = props => {
  const {
    label,
    value,
    hasError = false,
    disabled = false,
    checked,
    defaultChecked,
    name,
    onChange,
    dataTest,
    id,
    info,
    tabIndex,
    ariaControls,
    ariaDescribedby,
    ref
  } = props;
  const Component = label ? "label" : "div";
  return /*#__PURE__*/React.createElement(Component, {
    htmlFor: label ? id : undefined,
    className: (0, _clsx.default)("orbit-checkbox-label", "font-base", "flex flex-row", "relative w-full", "[&_.orbit-checkbox-icon-container]:hover:shadow-none", "[&_.orbit-checkbox-icon-container]:has-[:focus]:outline-blue-normal [&_.orbit-checkbox-icon-container]:has-[:focus]:outline [&_.orbit-checkbox-icon-container]:has-[:focus]:outline-2", "[&_.orbit-checkbox-icon-container>svg]:has-[:checked]:visible", disabled ? ["cursor-not-allowed", "[&_.orbit-checkbox-icon-container]:bg-form-element-disabled-background", "[&_.orbit-checkbox-icon-container]:has-[:checked]:bg-cloud-dark", checked && "[&_.orbit-checkbox-icon-container]:bg-cloud-dark"] : ["cursor-pointer", "[&_.orbit-checkbox-icon-container]:has-[:checked]:border-blue-normal [&_.orbit-checkbox-icon-container]:has-[:checked]:bg-blue-normal [&_.orbit-checkbox-icon-container]:has-[:checked]:hover:border-blue-dark [&_.orbit-checkbox-icon-container]:has-[:checked]:hover:bg-blue-dark", checked && !hasError && "[&_.orbit-checkbox-icon-container]:bg-blue-normal [&_.orbit-checkbox-icon-container]:border-blue-normal [&_.orbit-checkbox-icon-container]:hover:bg-blue-dark [&_.orbit-checkbox-icon-container]:hover:border-blue-dark", !checked && "[&_.orbit-checkbox-icon-container]:bg-form-element-background", !checked && hasError ? "[&_.orbit-checkbox-icon-container]:border-form-element-error" : "[&_.orbit-checkbox-icon-container]:border-form-element-border-color [&_.orbit-checkbox-icon-container]:hover:border-blue-light-active [&_.orbit-checkbox-icon-container]:active:border-form-element-focus"])
  }, /*#__PURE__*/React.createElement("input", {
    className: "-z-default absolute opacity-0",
    "data-test": dataTest,
    id: id,
    "data-state": (0, _getFieldDataState.default)(!!hasError),
    value: value,
    type: "checkbox",
    disabled: disabled,
    name: name,
    tabIndex: tabIndex ? Number(tabIndex) : undefined,
    checked: checked,
    defaultChecked: defaultChecked,
    onChange: onChange,
    ref: ref,
    "aria-controls": ariaControls,
    "aria-describedby": ariaDescribedby,
    "aria-invalid": hasError ? true : undefined
  }), /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-checkbox-icon-container", "relative box-border", "border border-solid", "flex shrink-0 grow-0 basis-auto items-center justify-center", "size-icon-medium", "rounded-150 de:rounded-100", "duration-fast transition-all ease-in-out", "[&>svg]:size-icon-small", "[&>svg]:flex [&>svg]:items-center [&>svg]:justify-center", checked ? "[&>svg]:visible" : "[&>svg]:invisible", disabled ? ["border-cloud-dark"] : "active:scale-95")
  }, /*#__PURE__*/React.createElement(_Check.default, {
    customColor: "white",
    ariaHidden: true
  })), (label || info) && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("ms-200 flex flex-1 flex-col", disabled ? "opacity-50" : "opacity-100")
  }, label && /*#__PURE__*/React.createElement("span", {
    className: "font-base text-form-element-normal text-form-element-label-foreground [&_.orbit-text]:text-form-element-normal [&_.orbit-text]:text-form-element-label-foreground [&_.orbit-text]:leading-small font-medium leading-normal [&_.orbit-text]:font-medium"
  }, label), info && /*#__PURE__*/React.createElement("span", {
    className: "text-small leading-small text-secondary-foreground"
  }, info)));
};
var _default = exports.default = Checkbox;