@kiwicom/orbit-components/lib/Radio/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;
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _react = _interopRequireDefault(require("react"));
var _cloneWithTooltip = _interopRequireDefault(require("../utils/cloneWithTooltip"));
var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
const Radio = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    label,
    value,
    hasError = false,
    disabled = false,
    checked = false,
    onChange,
    name,
    info,
    readOnly,
    id,
    tabIndex = 0,
    dataTest,
    tooltip
  } = props;
  return /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: id,
    className: (0, _clsx.default)("font-base items-self-start text-form-element-label-foreground relative flex w-full", disabled ? "cursor-not-allowed" : "cursor-pointer", !disabled && [!checked && "bg-form-element-background", !checked && (hasError ? "[&>.orbit-radio-icon-container]:border-form-element-error [&>.orbit-radio-icon-container]:hover:border-form-element-error-hover [&>.orbit-radio-icon-container]:active:border-form-element-error " : "[&>.orbit-radio-icon-container]:border-form-element [&>.orbit-radio-icon-container]:hover:border-form-element-hover [&>.orbit-radio-icon-container]:active:border-form-element-active"), checked && "[&>.orbit-radio-icon-container]:border-form-element-focus [&>.orbit-radio-icon-container]:bg-blue-normal active:border-form-element-focus"])
  }, /*#__PURE__*/_react.default.createElement("input", {
    "data-test": dataTest,
    "data-state": (0, _getFieldDataState.default)(hasError),
    className: "peer absolute opacity-0",
    value: value,
    type: "radio",
    disabled: disabled,
    checked: checked,
    id: id,
    onChange: onChange,
    name: name,
    tabIndex: Number(tabIndex),
    ref: ref,
    readOnly: readOnly
  }), (0, _cloneWithTooltip.default)(tooltip, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.default)("orbit-radio-icon-container", "relative box-border", "flex flex-none items-center justify-center", "rounded-circle h-icon-medium w-icon-medium", "duration-fast scale-100 transition-all ease-in-out", "lm:border border-[2px] border-solid", "active:scale-95", "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2", disabled && "bg-form-element-disabled-background border-transparent")
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _clsx.default)("h-xs w-xs rounded-circle", disabled ? "bg-cloud-light" : "bg-form-element-background", checked ? "visible" : "invisible")
  }))), (label || info) && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.default)("ms-xs flex flex-1 flex-col font-medium", disabled ? "opacity-50" : "opacity-1")
  }, label && /*#__PURE__*/_react.default.createElement("span", {
    className: "text-normal text-primary-foreground [&_.orbit-text]:text-normal font-medium leading-normal [&_.orbit-text]:font-medium [&_.orbit-text]:leading-normal"
  }, label), info && /*#__PURE__*/_react.default.createElement("span", {
    className: "text-small leading-small text-form-element-label-filled-foreground"
  }, info)));
});
Radio.displayName = "Radio";
var _default = Radio;
exports.default = _default;