@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
54 lines (53 loc) • 4.13 kB
JavaScript
;
"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: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:text-button-link-primary-foreground-hover",
secondary: "bg-button-link-secondary-background hover: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:text-button-link-secondary-foreground-hover",
critical: "bg-button-link-critical-background hover: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: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:text-button-link-primary-foreground-hover",
secondary: "text-button-link-secondary-foreground focus:text-product-normal-hover active:text-product-normal-active hover: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: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 = /*#__PURE__*/React.forwardRef(({
type = "primary",
size = "normal",
compact,
disabled,
children,
iconLeft,
iconRight,
...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], 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 && _sizes.circledStyles[size])
}), children);
});
ButtonLink.displayName = "ButtonLink";
var _default = ButtonLink;
exports.default = _default;