@semcore/button 16.1.0 → 16.1.1

package/lib/es6/component/ButtonLink/buttonLink.shadow.css

@@ -1,19 +1,61 @@
-SButtonLink {
-  border: none;
+SButton {
+  display: inline-flex;
   font-family: inherit;
-}
-
-SButtonLink[use='primary']:not([color]) {
+  font-size: var(--intergalactic-fs-200, 14px);
   color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+  line-height: normal;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  transition: color 0.15s ease-in-out;
 
-  &[active],
   &:active,
   &:hover {
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  &[active],
+  &:hover,
+  &:active {
     color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
+
+    & SText {
+      border-color: currentColor;
+    }
+  }
+
+  &[enableVisited]:visited,
+  &[enableVisited]:visited:hover {
+    color: var(--intergalactic-text-link-visited, oklch(0.53 0.26 296));
   }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
+  }
+}
+
+SButton[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
+  cursor: default;
+  /* Disable link interactions */
+  pointer-events: none;
 }
 
-SButtonLink[use='secondary']:not([color]) {
+SButton[use='secondary'] {
   color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
 
   &[active],
@@ -21,9 +63,97 @@ SButtonLink[use='secondary']:not([color]) {
   &:hover {
     color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
   }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
+    border-color: currentColor;
+  }
+}
+
+SInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+SAddon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+SButton SAddon {
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SButton[text-color] {
+  color: var(--text-color);
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    filter: brightness(0.8);
+  }
+}
+
+SButton[size='100'] {
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+}
+
+SButton[size='200'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SButton[size='300'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
 }
 
-SButtonLink[use='secondary'] SText {
-  text-decoration-style: dashed;
-  text-decoration-color: currentColor;
+SButton[size='400'] {
+  font-size: var(--intergalactic-fs-400, 20px);
+  line-height: var(--intergalactic-lh-400, 120%);
+}
+
+SButton[size='500'] {
+  font-size: var(--intergalactic-fs-500, 24px);
+  line-height: var(--intergalactic-lh-500, 117%);
+}
+
+SButton[size='600'] {
+  font-size: var(--intergalactic-fs-600, 32px);
+  line-height: var(--intergalactic-lh-600, 125%);
+}
+
+SButton[size='700'] {
+  font-size: var(--intergalactic-fs-700, 36px);
+  line-height: var(--intergalactic-lh-700, 110%);
+}
+
+SButton[size='800'] {
+  font-size: var(--intergalactic-fs-800, 48px);
+  line-height: var(--intergalactic-lh-800, 117%);
+}
+
+@media (prefers-reduced-motion) {
+  SButton {
+    transition: none;
+  }
+
+  SText {
+    transition: none;
+  }
 }

package/lib/es6/index.js

@@ -1,5 +1,6 @@
-export { default, MAP_USE_DEFAULT_THEME } from './component/Button/Button';
+export { default } from './component/Button/Button';
 export * from './component/Button/Button.type';
 export * from './component/ButtonLink/ButtonLink';
 export * from './component/ButtonLink/ButtonLink.type';
+export { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","MAP_USE_DEFAULT_THEME"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, MAP_USE_DEFAULT_THEME } from './component/Button/Button';\nexport * from './component/Button/Button.type';\nexport * from './component/ButtonLink/ButtonLink';\nexport * from './component/ButtonLink/ButtonLink.type';\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,qBAAqB,QAAQ,2BAA2B;AAC1E,cAAc,gCAAgC;AAC9C,cAAc,mCAAmC;AACjD,cAAc,wCAAwC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","MAP_USE_DEFAULT_THEME"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './component/Button/Button';\nexport * from './component/Button/Button.type';\nexport * from './component/ButtonLink/ButtonLink';\nexport * from './component/ButtonLink/ButtonLink.type';\nexport { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,2BAA2B;AACnD,cAAc,gCAAgC;AAC9C,cAAc,mCAAmC;AACjD,cAAc,wCAAwC;AACtD,SAASC,qBAAqB,QAAQ,2CAA2C","ignoreList":[]}

package/lib/esm/component/AbstractButton/AbstractButton.mjs

@@ -0,0 +1,157 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, assignProps, CORE_INSTANCE, Component } from "@semcore/core";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import hasLabels from "@semcore/core/lib/utils/hasLabels";
+import logger from "@semcore/core/lib/utils/logger";
+import { Box } from "@semcore/flex-box";
+import NeighborLocation from "@semcore/neighbor-location";
+import { Hint } from "@semcore/tooltip";
+import React from "react";
+import SpinButton from "./SpinButton.mjs";
+var MAP_USE_DEFAULT_THEME = {
+  primary: "info",
+  secondary: "muted",
+  tertiary: "info"
+};
+var AbstractButton = /* @__PURE__ */ (function(_Component) {
+  function AbstractButton2() {
+    var _this;
+    _classCallCheck(this, AbstractButton2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, AbstractButton2, [].concat(args));
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "state", {
+      ariaLabelledByContent: null
+    });
+    return _this;
+  }
+  _inherits(AbstractButton2, _Component);
+  return _createClass(AbstractButton2, [{
+    key: "getTextProps",
+    value: function getTextProps() {
+      var size = this.asProps.size;
+      return {
+        size
+      };
+    }
+  }, {
+    key: "getAddonProps",
+    value: function getAddonProps() {
+      var size = this.asProps.size;
+      return {
+        size
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      if (process.env.NODE_ENV !== "production") {
+        logger.warn(this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title, "'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content", this.asProps["data-ui-name"] || AbstractButton2.displayName);
+        logger.warn(this.asProps.theme === "warning", "Warning theme is deprecated and will be removed in the next major release.", this.asProps["data-ui-name"] || AbstractButton2.displayName);
+      }
+      var ariaLabelledby = this.asProps["aria-labelledby"];
+      if (ariaLabelledby) {
+        setTimeout(function() {
+          var _document$getElementB, _document$getElementB2;
+          _this2.setState({
+            ariaLabelledByContent: (_document$getElementB = (_document$getElementB2 = document.getElementById(ariaLabelledby)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.textContent) !== null && _document$getElementB !== void 0 ? _document$getElementB : ""
+          });
+        }, 0);
+      }
+    }
+  }, {
+    key: "renderButton",
+    value: function renderButton(_ref6) {
+      var _ref = this.asProps, _ref3;
+      var buttonProps = _ref6.buttonProps, children = _ref6.children;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, theme = _this$asProps.theme;
+      var SButton = Box;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SButton, _ref3.cn("SButton", _objectSpread({}, assignProps(_objectSpread({
+        "invertOutline": theme === "invert"
+      }, buttonProps), _ref))), children);
+    }
+  }, {
+    key: "renderButtonWithHint",
+    value: function renderButtonWithHint(_ref7) {
+      var _ref2 = this.asProps, _ref4;
+      var buttonProps = _ref7.buttonProps, children = _ref7.children, hintProps = _ref7.hintProps;
+      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, theme = _this$asProps2.theme;
+      var SButton = Hint;
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SButton, _ref4.cn("SButton", _objectSpread({}, assignProps(_objectSpread(_objectSpread(_objectSpread({
+        "invertOutline": theme === "invert"
+      }, buttonProps), hintProps), {}, {
+        "ignorePortalsStacking": true
+      }), _ref2))), children);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref8, _ref9, _this3 = this;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, use = _this$asProps3.use, _this$asProps3$theme = _this$asProps3.theme, theme = _this$asProps3$theme === void 0 ? typeof use === "string" && MAP_USE_DEFAULT_THEME[use] : _this$asProps3$theme, loading = _this$asProps3.loading, _this$asProps3$disabl = _this$asProps3.disabled, disabled = _this$asProps3$disabl === void 0 ? loading : _this$asProps3$disabl, size = _this$asProps3.size, neighborLocation = _this$asProps3.neighborLocation, hasChildren = _this$asProps3.children, title = _this$asProps3.title, ariaLabel = _this$asProps3["aria-label"], Children = _this$asProps3.Children, AddonLeft = _this$asProps3.addonLeft, AddonRight = _this$asProps3.addonRight, hintPlacement = _this$asProps3.hintPlacement;
+      var Button = this[CORE_INSTANCE];
+      var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
+      var SInner = Box;
+      var SSpin = Box;
+      var buttonAriaLabel = (_ref8 = (_ref9 = title !== null && title !== void 0 ? title : ariaLabel) !== null && _ref9 !== void 0 ? _ref9 : this.state.ariaLabelledByContent) !== null && _ref8 !== void 0 ? _ref8 : "";
+      var buttonProps = {
+        "type": "button",
+        "tag": "button",
+        disabled,
+        "use:theme": useTheme,
+        "ref": this.containerRef,
+        "text-color": this.getTextColor(),
+        "aria-busy": loading,
+        "__excludeProps": ["title"],
+        "tabIndex": 0
+      };
+      var hintProps = {
+        title: buttonAriaLabel,
+        timeout: [250, 50],
+        placement: hintPlacement,
+        theme: theme === "invert" ? "invert" : void 0,
+        __excludeProps: []
+      };
+      return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
+        neighborLocation
+      }, function(neighborLocation2) {
+        var _ref5;
+        var children = (_ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SInner, _ref5.cn("SInner", {
+          "tag": "span",
+          "loading": loading,
+          "data-ui-name": "".concat(_this3.asProps["data-ui-name"], ".InnerWrapper")
+        }), AddonLeft ? /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(AddonLeft, _ref5.cn("AddonLeft", {}))) : null, addonTextChildren(Children, Button.Text, Button.Addon), AddonRight ? /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(AddonRight, _ref5.cn("AddonRight", {}))) : null), loading && /* @__PURE__ */ React.createElement(SSpin, _ref5.cn("SSpin", {
+          "tag": "span"
+        }), /* @__PURE__ */ React.createElement(SpinButton, _ref5.cn("SpinButton", {
+          "centered": true,
+          "size": size,
+          "theme": useTheme
+        })))));
+        buttonProps.neighborLocation = neighborLocation2;
+        if (hasChildren === void 0 || title) {
+          return _this3.renderButtonWithHint({
+            buttonProps,
+            hintProps,
+            children
+          });
+        }
+        return _this3.renderButton({
+          buttonProps,
+          children
+        });
+      });
+    }
+  }]);
+})(Component);
+_defineProperty(AbstractButton, "displayName", "AbstractButton");
+export {
+  AbstractButton,
+  MAP_USE_DEFAULT_THEME
+};

package/lib/esm/component/{Button → AbstractButton}/SpinButton.mjs

@@ -10,7 +10,8 @@ var SPIN_SIZE_MAP = {
   s: "xxs"
 };
 function SpinButton(_ref) {
-  var theme = _ref.theme, size = _ref.size, others = _objectWithoutProperties(_ref, _excluded);
+  _ref.theme;
+  var size = _ref.size, others = _objectWithoutProperties(_ref, _excluded);
   return /* @__PURE__ */ React.createElement(Spin, _extends({
     size: typeof size === "string" ? SPIN_SIZE_MAP[size] : size,
     theme: "currentColor"