@kiwicom/orbit-components/lib/Button/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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _ButtonPrimitive = _interopRequireDefault(require("../primitives/ButtonPrimitive"));
var _sizes = require("../primitives/ButtonPrimitive/sizes");
const typeStyles = {
  primary: "bg-button-primary-background hover:bg-button-primary-background-hover active:bg-button-primary-background-active disabled:bg-button-primary-background focus:bg-button-primary-background-focus text-button-primary-foreground focus:text-button-primary-foreground-focus active:text-button-primary-foreground-active hover:text-button-primary-foreground-hover disabled:text-button-primary-foreground active:shadow-button-active",
  secondary: "bg-button-secondary-background hover:bg-button-secondary-background-hover active:bg-button-secondary-background-active disabled:bg-button-secondary-background focus:bg-button-secondary-background-focus text-button-secondary-foreground focus:text-button-secondary-foreground-focus active:text-button-secondary-foreground-active hover:text-button-secondary-foreground-hover disabled:text-button-secondary-foreground active:shadow-button-active-pale",
  critical: "bg-button-critical-background hover:bg-button-critical-background-hover active:bg-button-critical-background-active disabled:bg-button-critical-background focus:bg-button-critical-background-focus text-button-critical-foreground focus:text-button-critical-foreground-focus active:text-button-critical-foreground-active hover:text-button-critical-foreground-hover disabled:text-button-critical-foreground active:shadow-button-active",
  primarySubtle: "bg-button-primary-subtle-background hover:bg-button-primary-subtle-background-hover active:bg-button-primary-subtle-active-background disabled:bg-button-primary-subtle-background focus:bg-button-primary-subtle-background-focus text-button-primary-subtle-foreground focus:text-button-primary-subtle-foreground-focus active:text-button-primary-subtle-foreground-active hover:text-button-primary-subtle-foreground-hover disabled:text-button-primary-subtle-foreground active:shadow-button-active-pale",
  criticalSubtle: "bg-button-critical-subtle-background hover:bg-button-critical-subtle-background-hover active:bg-button-critical-subtle-active-background disabled:bg-button-critical-subtle-background focus:bg-button-critical-subtle-background-focus text-button-critical-subtle-foreground focus:text-button-critical-subtle-foreground-focus active:text-button-critical-subtle-foreground-active hover:text-button-critical-subtle-foreground-hover disabled:text-button-critical-subtle-foreground active:shadow-button-active-pale",
  white: "bg-button-white-background hover:bg-button-white-background-hover active:bg-button-white-background-active disabled:bg-button-white-background focus:bg-button-white-background-focus text-button-white-foreground focus:text-button-white-foreground-focus active:text-button-white-foreground-active hover:text-button-white-foreground-hover disabled:text-button-white-foreground active:shadow-button-active-pale",
  bundleBasic: "bg-button-bundle-basic-background hover:bg-button-bundle-basic-background-hover active:bg-button-bundle-basic-background-active disabled:bg-button-bundle-basic-background focus:bg-button-bundle-basic-background-focus text-white-foreground focus:text-white-foreground-focus active:text-white-foreground-active hover:text-white-foreground-hover disabled:text-white-foreground active:shadow-button-active",
  bundleMedium: "bg-button-bundle-medium-background hover:bg-button-bundle-medium-background-hover active:bg-button-bundle-medium-background-active disabled:bg-button-bundle-medium-background focus:bg-button-bundle-medium-background-focus text-white-foreground focus:text-white-foreground-focus active:text-white-foreground-active hover:text-white-foreground-hover disabled:text-white-foreground active:shadow-button-active",
  bundleTop: "bg-button-bundle-top-background hover:bg-button-bundle-top-background-hover active:bg-button-bundle-top-background-active disabled:bg-button-bundle-top-background focus:bg-button-bundle-top-background-focus text-white-foreground focus:text-white-foreground-focus active:text-white-foreground-active hover:text-white-foreground-hover disabled:text-white-foreground active:shadow-button-active"
};

/**
 * This is necessary for <a> elements since they don't have the `disabled` attribute.
 */
const typeDisabledStyled = {
  primary: "bg-button-primary-background text-button-primary-foreground",
  secondary: "bg-button-secondary-background text-button-secondary-foreground",
  critical: "bg-button-critical-background text-button-critical-foreground",
  primarySubtle: "bg-button-primary-subtle-background text-button-primary-subtle-foreground",
  criticalSubtle: "bg-button-critical-subtle-background text-button-critical-subtle-foreground",
  white: "bg-button-white-background text-button-white-foreground",
  bundleBasic: "bg-button-bundle-basic-background text-white-foreground",
  bundleMedium: "bg-button-bundle-medium-background text-white-foreground",
  bundleTop: "bg-button-bundle-top-background text-white-foreground"
};
const Button = /*#__PURE__*/React.forwardRef(({
  type = "primary",
  size = "normal",
  children,
  iconLeft,
  iconRight,
  disabled,
  ...props
}, ref) => {
  return /*#__PURE__*/React.createElement(_ButtonPrimitive.default, (0, _extends2.default)({
    ref: ref,
    iconLeft: iconLeft,
    iconRight: iconRight,
    disabled: disabled
  }, props, {
    className: (0, _clsx.default)("space-x-xs rtl:space-x-reverse", _sizes.sizeStyles[size], children == null && _sizes.iconOnlyStyles[size], disabled === true ? typeDisabledStyled[type] : typeStyles[type], children != null && iconLeft == null && iconRight == null && _sizes.paddingNoIconsStyles[size], children != null && iconLeft != null && iconRight == null && _sizes.paddingLeftIconStyles[size], children != null && iconLeft == null && iconRight != null && _sizes.paddingRightIconStyles[size], children != null && iconLeft != null && iconRight != null && _sizes.paddingBothIconsStyles[size], props.circled === true && _sizes.circledStyles[size])
  }), children);
});
Button.displayName = "Button";
var _default = Button;
exports.default = _default;