UNPKG

@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
"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: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;