@kiwicom/orbit-components/lib/ButtonLink/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-link-primary-background hover:[@media(hover)_and_(pointer:fine)]:bg-button-link-primary-background-hover active:bg-button-link-primary-background-active focus:bg-button-link-primary-background-focus text-button-link-primary-foreground focus:text-button-link-primary-foreground-focus active:text-button-link-primary-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-primary-foreground-hover",
  secondary: "bg-button-link-secondary-background hover:[@media(hover)_and_(pointer:fine)]:bg-button-link-secondary-background-hover active:bg-button-link-secondary-background-active focus:bg-button-link-secondary-background-focus text-button-link-secondary-foreground focus:text-button-link-secondary-foreground-focus active:text-button-link-secondary-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-secondary-foreground-hover",
  critical: "bg-button-link-critical-background hover:[@media(hover)_and_(pointer:fine)]:bg-button-link-critical-background-hover active:bg-button-link-critical-background-active focus:bg-button-link-critical-background-focus text-button-link-critical-foreground focus:text-button-link-critical-foreground-focus active:text-button-link-critical-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-critical-foreground-hover"
};
const typeCompactStyles = {
  primary: "text-button-link-primary-foreground focus:text-button-link-primary-foreground-focus active:text-button-link-primary-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-primary-foreground-hover",
  secondary: "text-button-link-secondary-foreground focus:text-product-normal-hover active:text-product-normal-active hover:[@media(hover)_and_(pointer:fine)]:text-product-normal-hover",
  critical: "text-button-link-critical-foreground focus:text-button-link-critical-foreground-focus active:text-button-link-critical-foreground-active hover:[@media(hover)_and_(pointer:fine)]:text-button-link-critical-foreground-hover"
};
const typeDisabledStyles = {
  primary: "bg-button-link-primary-background text-button-link-primary-foreground",
  secondary: "bg-button-link-secondary-background text-button-link-secondary-foreground",
  critical: "bg-button-link-critical-background text-button-link-critical-foreground"
};
const typeCompactDisabledStyles = {
  primary: "text-button-link-primary-foreground",
  secondary: "text-button-link-secondary-foreground",
  critical: "text-button-link-critical-foreground"
};
const ButtonLink = ({
  type = "primary",
  size = "normal",
  compact,
  disabled,
  children,
  iconLeft,
  iconRight,
  ref,
  ...props
}) => {
  return /*#__PURE__*/React.createElement(_ButtonPrimitive.default, (0, _extends2.default)({
    ref: ref,
    iconLeft: iconLeft,
    iconRight: iconRight,
    disabled: disabled,
    borderRadius: _sizes.radiusStyles[size]
  }, props, {
    className: (0, _clsx.default)("space-x-200 rtl:space-x-reverse", _sizes.sizeStyles[size], children == null && _sizes.iconOnlyStyles[size], compact !== true && disabled !== true && typeStyles[type], compact === true && disabled !== true && typeCompactStyles[type], compact !== true && disabled === true && typeDisabledStyles[type], compact === true && disabled === true && typeCompactDisabledStyles[type], compact !== true && children != null && [iconLeft == null && iconRight == null && _sizes.paddingNoIconsStyles[size], iconLeft != null && iconRight == null && _sizes.paddingLeftIconStyles[size], iconLeft == null && iconRight != null && _sizes.paddingRightIconStyles[size], iconLeft != null && iconRight != null && _sizes.paddingBothIconsStyles[size]], props.circled === true && "rounded-full")
  }), children);
};
var _default = exports.default = ButtonLink;