@kiwicom/orbit-components/es/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 client";

import * as React from "react";
import cx from "clsx";
import handleKeyDown from "../utils/handleKeyDown";
const Switch = ({
  onChange,
  checked,
  dataTest,
  id,
  icon,
  onBlur,
  onFocus,
  disabled,
  ariaControls,
  ariaLabel,
  ariaLabelledby,
  ref
}) => {
  return /*#__PURE__*/React.createElement("label", {
    className: "inline-block"
  }, /*#__PURE__*/React.createElement("div", {
    className: cx("duration-fast h-600 w-form-box-normal relative flex items-center justify-between rounded-full transition-colors", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", checked ? "bg-blue-normal" : "bg-cloud-dark")
  }, /*#__PURE__*/React.createElement("input", {
    className: cx("peer absolute inset-0 m-0 size-full p-0 opacity-0", !disabled && "cursor-pointer"),
    ref: ref,
    checked: checked,
    disabled: disabled,
    "aria-checked": checked,
    role: "switch",
    onKeyDown: !disabled ? handleKeyDown(undefined, onChange) : undefined,
    onBlur: !disabled ? onBlur : undefined,
    onChange: !disabled ? onChange : undefined,
    onFocus: !disabled ? onFocus : undefined,
    type: "checkbox",
    "data-test": dataTest,
    id: id,
    "aria-controls": ariaControls,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby
  }), /*#__PURE__*/React.createElement("div", {
    className: cx("bg-white-normal duration-fast shadow-switch size-500 absolute box-border inline-flex items-center justify-center rounded-full", "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2", "[&_svg]:size-300", !disabled && "active:shadow-level2", !checked && (icon ? "[&_svg]:text-ink-normal" : "[&_svg]:text-cloud-dark"), checked ? "[&_svg]:text-blue-normal rtl:-translate-x-50 ltr:translate-x-[calc(100%+2px)]" : "left-50")
  }, icon || null)));
};
export default Switch;