@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
53 lines (52 loc) • 3.24 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import Check from "../icons/Check";
import getFieldDataState from "../common/getFieldDataState";
import cloneWithTooltip from "../utils/cloneWithTooltip";
const Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
label,
value,
hasError = false,
disabled = false,
checked = false,
name,
onChange,
dataTest,
id,
info,
readOnly,
tabIndex,
tooltip
} = props;
return /*#__PURE__*/React.createElement("label", {
className: cx("orbit-checkbox-label", "font-base", "flex flex-row", "relative w-full", "[&_.orbit-checkbox-icon-container]:hover:shadow-none", disabled ? "cursor-not-allowed" : ["cursor-pointer", checked && "[&_.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", !checked && !hasError && "[&_.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: "peer absolute z-[-1] opacity-0",
"data-test": dataTest,
id: id,
"data-state": getFieldDataState(!!hasError),
value: value,
type: "checkbox",
disabled: disabled,
name: name,
tabIndex: tabIndex ? Number(tabIndex) : undefined,
checked: checked,
onChange: onChange,
ref: ref,
readOnly: readOnly
}), cloneWithTooltip(tooltip, /*#__PURE__*/React.createElement("div", {
className: cx("orbit-checkbox-icon-container", "relative box-border", "border border-solid", "flex shrink-0 grow-0 basis-auto items-center justify-center", "h-icon-medium w-icon-medium", "rounded-large de:rounded-normal", "duration-fast transition-all ease-in-out", "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2", "[&>svg]:w-icon-small [&>svg]:h-icon-small [&>svg]:invisible peer-checked:[&>svg]:visible", "[&>svg]:flex [&>svg]:items-center [&>svg]:justify-center", "active:scale-95", disabled && ["border-cloud-dark", checked && "bg-cloud-dark", !checked && "bg-form-element-disabled-background"])
}, /*#__PURE__*/React.createElement(Check, {
customColor: "white"
}))), (label || info) && /*#__PURE__*/React.createElement("div", {
className: cx("ms-xs flex flex-1 flex-col", disabled ? "opacity-50" : "opacity-1")
}, 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)));
});
Checkbox.displayName = "Checkbox";
export default Checkbox;