@kiwicom/orbit-components/lib/SegmentedSwitch/SwitchSegment/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";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
const SwitchSegment = ({
  value,
  label,
  disabled,
  onChange,
  setTooltipShown,
  onFocus,
  defaultChecked,
  name
}) => {
  const theme = (0, _useTheme.default)();
  const ref = React.useRef(null);
  (0, _useClickOutside.default)(ref, () => setTooltipShown(false));
  return /*#__PURE__*/React.createElement("label", {
    className: "orbit-switch-segment-label relative flex w-full"
  }, /*#__PURE__*/React.createElement("input", {
    className: (0, _clsx.default)("sr-only absolute m-[-1px] h-[1px] w-[1px] overflow-hidden whitespace-nowrap border-0 p-0 focus:outline-none", "peer"),
    name: name || "switch-segment",
    defaultChecked: defaultChecked,
    type: "radio",
    role: "switch",
    ref: ref,
    "aria-checked": Boolean(value),
    onChange: onChange,
    onFocus: onFocus,
    disabled: disabled,
    value: value
  }), /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-switch-segment-text", "peer-checked:text-form-element-label-filled-foreground peer-checked:outline-blue-normal peer-checked:z-10 peer-checked:!rounded-[5px] peer-checked:outline peer-checked:outline-2 ", "peer-focus:text-form-element-label-filled-foreground peer-focus:outline-blue-normal peer-focus:z-10 peer-focus:!rounded-[5px] peer-focus:outline peer-focus:outline-2 ", "p-sm font-base text-normal duration-fast box-border flex w-full max-w-full cursor-pointer items-center justify-center border-0 text-center font-medium leading-normal transition-colors ease-in-out", "bg-form-element-background text-form-element-foreground hover:text-form-element-label-filled-foreground"),
    style: {
      boxShadow: `0 0 0 1px ${theme.orbit.paletteCloudDark}`
    }
  }, label));
};
var _default = SwitchSegment;
exports.default = _default;