@kiwicom/orbit-components/lib/Switch/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 = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Circle = _interopRequireDefault(require("../icons/Circle"));
var _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));
const Switch = /*#__PURE__*/React.forwardRef(({
  onChange,
  checked,
  dataTest,
  id,
  icon,
  onBlur,
  onFocus,
  disabled,
  ariaLabelledby
}, ref) => {
  return /*#__PURE__*/React.createElement("label", {
    className: "inline-block"
  }, /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("duration-fast relative flex h-[20px] w-[40px] items-center justify-between rounded-[100px] transition-colors", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", checked ? "bg-blue-normal" : "bg-cloud-dark")
  }, /*#__PURE__*/React.createElement("input", {
    className: "peer absolute inset-0 m-0 h-full w-full p-0 opacity-0",
    ref: ref,
    checked: checked,
    disabled: disabled,
    "aria-checked": checked,
    role: "switch",
    "aria-labelledby": ariaLabelledby,
    onKeyDown: !disabled ? (0, _handleKeyDown.default)(undefined, onChange) : undefined,
    onBlur: !disabled ? onBlur : undefined,
    onChange: !disabled ? onChange : undefined,
    onFocus: !disabled ? onFocus : undefined,
    type: "checkbox",
    "data-test": dataTest,
    id: id
  }), /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("rounded-circle bg-white-normal duration-fast shadow-switch absolute box-border inline-flex h-[24px] w-[24px] items-center justify-center", "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2", "[&_svg]:h-icon-small [&_svg]:w-icon-small", !disabled && "active:shadow-action-active", !checked && (icon ? "[&_svg]:text-ink-normal" : "[&_svg]:text-cloud-dark"), checked ? "[&_svg]:text-blue-normal left-[calc(100%+2px)] -translate-x-full" : "left-[-3px]")
  }, icon || /*#__PURE__*/React.createElement(_Circle.default, {
    size: "small"
  }))));
});
Switch.displayName = "Switch";
var _default = Switch;
exports.default = _default;