@semcore/button 17.0.0-prerelease.29 → 17.0.0-prerelease.31

package/lib/esm/component/Button/Button.mjs

@@ -1,8 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps } from "@semcore/core";
-import { Box } from "@semcore/base-components";
+import { sstyled, createComponent, Component, CORE_INSTANCE, assignProps } from "@semcore/core";
+import { NeighborLocation, Box, Hint } from "@semcore/base-components";
+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 { Text } from "@semcore/typography";
 import React from "react";
-import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
+import SpinButton from "./SpinButton.mjs";
 /*!__reshadow-styles__:"./button.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
@@ -41,9 +45,109 @@ const style = (
     "_theme_tertiary-invert": "_theme_tertiary-invert_1vv7x_gg_"
   })
 );
-class RootButton extends AbstractButton {
-  getTextColor() {
-    return void 0;
+const MAP_USE_DEFAULT_THEME = {
+  primary: "info",
+  secondary: "muted",
+  tertiary: "info"
+};
+class RootButton extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "state", {
+      ariaLabelledByContent: null
+    });
+  }
+  getTextProps() {
+    const {
+      size
+    } = this.asProps;
+    return {
+      size,
+      "hint:triggerRef": this.containerRef
+    };
+  }
+  getAddonProps() {
+    const {
+      size
+    } = this.asProps;
+    return {
+      size
+    };
+  }
+  componentDidMount() {
+    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"] || RootButton.displayName);
+    }
+    const ariaLabelledby = this.asProps["aria-labelledby"];
+    if (ariaLabelledby) {
+      setTimeout(() => {
+        var _a;
+        this.setState({
+          ariaLabelledByContent: ((_a = document.getElementById(ariaLabelledby)) == null ? void 0 : _a.textContent) ?? ""
+        });
+      }, 0);
+    }
+  }
+  render() {
+    var _ref = this.asProps;
+    const {
+      styles,
+      use,
+      theme = typeof use === "string" && MAP_USE_DEFAULT_THEME[use],
+      loading,
+      disabled = loading,
+      size,
+      neighborLocation,
+      children,
+      title,
+      ["aria-label"]: ariaLabel,
+      Children,
+      addonLeft: AddonLeft,
+      addonRight: AddonRight,
+      hintPlacement
+    } = this.asProps;
+    const SButton = Box;
+    const Button2 = this[CORE_INSTANCE];
+    const useTheme = use && theme ? `${use}-${theme}` : false;
+    const SInner = Box;
+    const SSpin = Box;
+    const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? "";
+    const showHint = children === void 0 || title;
+    return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
+      neighborLocation
+    }, (neighborLocation2) => {
+      var _ref4;
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SButton, _ref4.cn("SButton", {
+        ...assignProps({
+          "invertOutline": theme === "invert",
+          "type": "button",
+          "tag": "button",
+          "tabIndex": 0,
+          "disabled": disabled,
+          "use:theme": useTheme,
+          "ref": this.containerRef,
+          "aria-busy": loading,
+          "__excludeProps": ["title"],
+          "aria-label": showHint ? buttonAriaLabel : void 0,
+          "neighborLocation": neighborLocation2
+        }, _ref)
+      }), /* @__PURE__ */ React.createElement(SInner, _ref4.cn("SInner", {
+        "tag": "span",
+        "loading": loading,
+        "data-ui-name": `${this.asProps["data-ui-name"]}.InnerWrapper`
+      }), AddonLeft ? /* @__PURE__ */ React.createElement(Button2.Addon, null, /* @__PURE__ */ React.createElement(AddonLeft, _ref4.cn("AddonLeft", {}))) : null, addonTextChildren(Children, Button2.Text, Button2.Addon), AddonRight ? /* @__PURE__ */ React.createElement(Button2.Addon, null, /* @__PURE__ */ React.createElement(AddonRight, _ref4.cn("AddonRight", {}))) : null), loading && /* @__PURE__ */ React.createElement(SSpin, _ref4.cn("SSpin", {
+        "tag": "span"
+      }), /* @__PURE__ */ React.createElement(SpinButton, _ref4.cn("SpinButton", {
+        "centered": true,
+        "size": size,
+        "theme": useTheme
+      })))), showHint && /* @__PURE__ */ React.createElement(Hint, _ref4.cn("Hint", {
+        "triggerRef": this.containerRef,
+        "timeout": [250, 50],
+        "placement": hintPlacement
+      }), buttonAriaLabel));
+    });
   }
 }
 _defineProperty(RootButton, "displayName", "Button");
@@ -52,28 +156,28 @@ _defineProperty(RootButton, "defaultProps", {
   use: "secondary",
   size: "m"
 });
-function Text(props) {
-  var _ref = arguments[0], _ref3;
-  const SText = Box;
-  return _ref3 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", {
-    ...assignProps({
-      "tag": "span"
-    }, _ref)
+function ButtonText(props) {
+  var _ref2 = arguments[0], _ref5;
+  const SText = Text;
+  return _ref5 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", {
+    ...assignProps({}, _ref2)
   }));
 }
 function Addon(props) {
-  var _ref2 = arguments[0], _ref4;
+  var _ref3 = arguments[0], _ref6;
   const SAddon = Box;
-  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", {
+  return _ref6 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", {
     ...assignProps({
       "tag": "span"
-    }, _ref2)
+    }, _ref3)
   }));
 }
 const Button = createComponent(RootButton, {
-  Text,
+  Text: ButtonText,
   Addon
 });
 export {
+  MAP_USE_DEFAULT_THEME,
+  RootButton,
   Button as default
 };

package/lib/esm/component/ButtonLink/ButtonLink.mjs

@@ -1,78 +1,53 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps } from "@semcore/core";
-import { Box } from "@semcore/base-components";
-import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import Link from "@semcore/link";
 import React from "react";
-import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
 /*!__reshadow-styles__:"./buttonLink.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SButton_uv2ud_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_uv2ud_gg_,.___SButton_uv2ud_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_uv2ud_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SButton_uv2ud_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_uv2ud_gg_.__active_uv2ud_gg_,.___SButton_uv2ud_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_uv2ud_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_uv2ud_gg_.__active_uv2ud_gg_ .___SText_uv2ud_gg_,.___SButton_uv2ud_gg_:active .___SText_uv2ud_gg_{box-shadow:0 1px 0 0 currentColor}@media (hover:hover){.___SButton_uv2ud_gg_:hover .___SText_uv2ud_gg_{box-shadow:0 1px 0 0 currentColor}}.___SButton_uv2ud_gg_.__enableVisited_uv2ud_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_uv2ud_gg_.__enableVisited_uv2ud_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_uv2ud_gg_ .___SText_uv2ud_gg_{box-shadow:0 1px 0 0 transparent;transition:box-shadow .15s ease-in-out}.___SButton_uv2ud_gg_.__disabled_uv2ud_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_uv2ud_gg_._use_secondary_uv2ud_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_uv2ud_gg_._use_secondary_uv2ud_gg_.__active_uv2ud_gg_,.___SButton_uv2ud_gg_._use_secondary_uv2ud_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_uv2ud_gg_._use_secondary_uv2ud_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_uv2ud_gg_._use_secondary_uv2ud_gg_ .___SText_uv2ud_gg_{box-shadow:none;border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_uv2ud_gg_,.___SInner_uv2ud_gg_{display:inline-flex;justify-content:center;align-items:baseline}.___SInner_uv2ud_gg_{height:100%;width:100%}.___SAddon_uv2ud_gg_{vertical-align:middle;pointer-events:none;align-self:center}.___SButton_uv2ud_gg_ .___SAddon_uv2ud_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_uv2ud_gg_ .___SAddon_uv2ud_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_uv2ud_gg_.__text-color_uv2ud_gg_{color:var(--text-color_uv2ud)}.___SButton_uv2ud_gg_.__text-color_uv2ud_gg_.__active_uv2ud_gg_,.___SButton_uv2ud_gg_.__text-color_uv2ud_gg_:active{color:var(--text-color_uv2ud);filter:brightness(.8)}@media (hover:hover){.___SButton_uv2ud_gg_.__text-color_uv2ud_gg_:hover{color:var(--text-color_uv2ud);filter:brightness(.8)}}.___SButton_uv2ud_gg_._size_100_uv2ud_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_uv2ud_gg_._size_200_uv2ud_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_uv2ud_gg_._size_300_uv2ud_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_uv2ud_gg_._size_400_uv2ud_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_uv2ud_gg_._size_500_uv2ud_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_uv2ud_gg_._size_600_uv2ud_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_uv2ud_gg_._size_700_uv2ud_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_uv2ud_gg_._size_800_uv2ud_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_uv2ud_gg_,.___SText_uv2ud_gg_{transition:none}}",
+    ".___SButtonLink_3pzzd_gg_{border:0;font-family:inherit}.___SButtonLink_3pzzd_gg_._use_primary_3pzzd_gg_:not(.__color_3pzzd_gg_){color:var(--intergalactic-text-link, #006dca)}.___SButtonLink_3pzzd_gg_._use_primary_3pzzd_gg_.__active_3pzzd_gg_:not(.__color_3pzzd_gg_),.___SButtonLink_3pzzd_gg_._use_primary_3pzzd_gg_:not(.__color_3pzzd_gg_):active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButtonLink_3pzzd_gg_._use_primary_3pzzd_gg_:not(.__color_3pzzd_gg_):hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButtonLink_3pzzd_gg_._use_secondary_3pzzd_gg_:not(.__color_3pzzd_gg_){color:var(--intergalactic-text-hint, #6c6e79)}.___SButtonLink_3pzzd_gg_._use_secondary_3pzzd_gg_.__active_3pzzd_gg_:not(.__color_3pzzd_gg_),.___SButtonLink_3pzzd_gg_._use_secondary_3pzzd_gg_:not(.__color_3pzzd_gg_):active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButtonLink_3pzzd_gg_._use_secondary_3pzzd_gg_:not(.__color_3pzzd_gg_):hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButtonLink_3pzzd_gg_._use_secondary_3pzzd_gg_ .___SText_3pzzd_gg_{text-decoration-style:dashed;text-decoration-color:currentColor}",
     /*__inner_css_end__*/
-    "uv2ud_gg_"
+    "3pzzd_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SButton": "___SButton_uv2ud_gg_",
-    "_disabled": "__disabled_uv2ud_gg_",
-    "__SInner": "___SInner_uv2ud_gg_",
-    "__SAddon": "___SAddon_uv2ud_gg_",
-    "_size_100": "_size_100_uv2ud_gg_",
-    "_size_200": "_size_200_uv2ud_gg_",
-    "_size_300": "_size_300_uv2ud_gg_",
-    "_size_400": "_size_400_uv2ud_gg_",
-    "_size_500": "_size_500_uv2ud_gg_",
-    "_size_600": "_size_600_uv2ud_gg_",
-    "_size_700": "_size_700_uv2ud_gg_",
-    "_size_800": "_size_800_uv2ud_gg_",
-    "__SText": "___SText_uv2ud_gg_",
-    "_active": "__active_uv2ud_gg_",
-    "_enableVisited": "__enableVisited_uv2ud_gg_",
-    "_use_secondary": "_use_secondary_uv2ud_gg_",
-    "_text-color": "__text-color_uv2ud_gg_",
-    "--text-color": "--text-color_uv2ud"
+    "__SButtonLink": "___SButtonLink_3pzzd_gg_",
+    "_use_secondary": "_use_secondary_3pzzd_gg_",
+    "__SText": "___SText_3pzzd_gg_",
+    "_use_primary": "_use_primary_3pzzd_gg_",
+    "_color": "__color_3pzzd_gg_",
+    "_active": "__active_3pzzd_gg_"
   })
 );
-const enhance = {
-  resolveColor: resolveColorEnhance()
-};
-class RootButtonLink extends AbstractButton {
-  getTextColor() {
+class RootButtonLink extends Component {
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SButtonLink = Link;
     const {
-      color,
-      resolveColor
+      disabled
     } = this.asProps;
-    return resolveColor(color);
+    return _ref2 = sstyled(style), /* @__PURE__ */ React.createElement(SButtonLink, _ref2.cn("SButtonLink", {
+      ...assignProps({
+        "tag": "button",
+        "type": "button",
+        "use:disabled": disabled,
+        "use:tabIndex": 0
+      }, _ref)
+    }));
   }
 }
 _defineProperty(RootButtonLink, "displayName", "ButtonLink");
-_defineProperty(RootButtonLink, "enhance", Object.values(enhance));
 _defineProperty(RootButtonLink, "style", style);
 _defineProperty(RootButtonLink, "defaultProps", {
-  use: "primary"
+  use: "primary",
+  size: 200
 });
-function Text(props) {
-  var _ref = arguments[0], _ref3;
-  const SText = Box;
-  return _ref3 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", {
-    ...assignProps({
-      "tag": "span"
-    }, _ref)
-  }));
-}
-function Addon(props) {
-  var _ref2 = arguments[0], _ref4;
-  const SAddon = Box;
-  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", {
-    ...assignProps({
-      "tag": "span"
-    }, _ref2)
-  }));
-}
 const ButtonLink = createComponent(RootButtonLink, {
-  Text,
-  Addon
+  Text: Link.Text,
+  Addon: Link.Addon
+}, {
+  parent: Link
 });
 export {
   ButtonLink

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

@@ -1,59 +1,19 @@
-SButton {
-  display: inline-flex;
+SButtonLink {
+  border: none;
   font-family: inherit;
-  font-size: var(--intergalactic-fs-200, 14px);
+}
+
+SButtonLink[use='primary']:not([color]) {
   color: var(--intergalactic-text-link, #006dca);
-  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, #044792);
-
-    & SText {
-      box-shadow: 0 1px 0 0 currentColor;
-    }
-  }
-
-  &[enableVisited]:visited,
-  &[enableVisited]:visited:hover {
-    color: var(--intergalactic-text-link-visited, #8649e1);
   }
-
-  SText {
-    box-shadow: 0 1px 0 0 transparent;
-    transition: box-shadow 0.15s ease-in-out;
-  }
-}
-
-SButton[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  cursor: default;
-  /* Disable link interactions */
-  pointer-events: none;
 }
 
-SButton[use='secondary'] {
+SButtonLink[use='secondary']:not([color]) {
   color: var(--intergalactic-text-hint, #6c6e79);
 
   &[active],
@@ -61,99 +21,9 @@ SButton[use='secondary'] {
   &:hover {
     color: var(--intergalactic-text-hint-hover-active, #484a54);
   }
-
-  SText {
-    box-shadow: none;
-    border-bottom-width: 1px;
-    border-bottom-style: dashed;
-    border-color: currentColor;
-  }
-}
-
-SInner {
-  display: inline-flex;
-  align-items: baseline;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-
-SAddon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: baseline;
-  vertical-align: middle;
-  pointer-events: none;
-  align-self: center;
-}
-
-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%);
 }
 
-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;
-  }
+SButtonLink[use='secondary'] SText {
+  text-decoration-style: dashed;
+  text-decoration-color: currentColor;
 }

package/lib/esm/index.mjs

@@ -1,6 +1,5 @@
-import { default as default2 } from "./component/Button/Button.mjs";
+import { MAP_USE_DEFAULT_THEME, default as default2 } from "./component/Button/Button.mjs";
 import { ButtonLink } from "./component/ButtonLink/ButtonLink.mjs";
-import { MAP_USE_DEFAULT_THEME } from "./component/AbstractButton/AbstractButton.mjs";
 export {
   ButtonLink,
   MAP_USE_DEFAULT_THEME,

package/lib/types/component/Button/Button.d.ts

@@ -1,3 +1,30 @@
-import type { ButtonComponent } from './Button.type';
+import { Component } from '@semcore/core';
+import React from 'react';
+import type { ButtonProps, ButtonComponent } from './Button.type';
+export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
+type State = {
+    ariaLabelledByContent: null | string;
+};
+export declare class RootButton extends Component<ButtonProps, [], never, {}, State> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    static defaultProps: {
+        use: string;
+        size: string;
+    };
+    containerRef: React.RefObject<HTMLButtonElement>;
+    state: State;
+    getTextProps(): {
+        size: "l" | "m" | undefined;
+        'hint:triggerRef': React.RefObject<HTMLButtonElement>;
+    };
+    getAddonProps(): {
+        size: "l" | "m" | undefined;
+    };
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+}
 declare const Button: ButtonComponent;
 export default Button;

package/lib/types/component/Button/Button.type.d.ts

@@ -1,27 +1,44 @@
-import type { Intergalactic } from '@semcore/core';
-import type { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
-/**
- *  Button size
- * @default m
- */
-export type ButtonSize = 'l' | 'm';
-/**
- *  Button type
- * @default secondary
- */
-type Use = 'primary' | 'secondary' | 'tertiary';
-/** Button theme */
-type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
-export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
-export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
-export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
-export type ButtonContext = AbstractButtonContext;
-export type ButtonChildren = {
-    Text: Intergalactic.Component<'span', ButtonTextProps>;
-    Addon: Intergalactic.Component<'span', ButtonAddonProps>;
+import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
+import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { TextProps } from '@semcore/typography';
+import type React from 'react';
+export type ButtonProps = BoxProps & NeighborItemProps & {
+    /** Button activity state */
+    active?: boolean;
+    /** Disabled button state */
+    disabled?: boolean;
+    /** Loading button state */
+    loading?: boolean;
+    /** Tag for the left Addon */
+    addonLeft?: React.ElementType;
+    /** Tag for the right Addon */
+    addonRight?: React.ElementType;
+    /**
+   * Placement for hint
+   * @default top
+   */
+    hintPlacement?: SimpleHintPopperProps['placement'];
+    /** Button size.
+   * @default `m`
+   */
+    size?: 'l' | 'm';
+    /** Button usage.
+   * @default `primary`
+   */
+    use?: 'primary' | 'secondary' | 'tertiary';
+    /** Button theme.
+   * @default undefined
+   */
+    theme?: 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
 };
-export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & {
+export type ButtonTextProps = TextProps;
+export type ButtonAddonProps = BoxProps;
+export type ButtonContext = {
+    getTextProps: PropGetterFn;
+    getAddonProps: PropGetterFn;
+};
+export type ButtonChildren = {
     Text: Intergalactic.Component<'span', ButtonTextProps>;
     Addon: Intergalactic.Component<'span', ButtonAddonProps>;
 };
-export {};
+export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & ButtonChildren;

package/lib/types/component/ButtonLink/ButtonLink.type.d.ts

@@ -1,24 +1,19 @@
+import type { BoxProps } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
-/**
- *  Button link size
- */
-export type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
-/**
- *  Button link type
- * @default primary
- */
-type Use = 'primary' | 'secondary';
-export type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;
-export type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;
-export type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;
-export type ButtonLinkContext = AbstractButtonContext;
-export type ButtonLinkChildren = {
-    Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
-    Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
+import type { LinkProps } from '@semcore/link';
+import type { TextProps } from '@semcore/typography';
+import type { ButtonContext } from '../Button/Button.type';
+export type ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit<LinkProps, 'enableVisited'> & {
+    /**
+     *  Button link type
+     * @default primary
+     */
+    use?: 'primary' | 'secondary';
 };
-export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonLinkContext> & {
+export type ButtonLinkTextProps = TextProps;
+export type ButtonLinkAddonProps = BoxProps;
+export type ButtonLinkChildren = {
     Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
     Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
 };
-export {};
+export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonContext> & ButtonLinkChildren;

package/lib/types/index.d.ts

@@ -1,5 +1,4 @@
-export { default } from './component/Button/Button';
+export { default, MAP_USE_DEFAULT_THEME } 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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "17.0.0-prerelease.29",
+  "version": "17.0.0-prerelease.31",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,7 +14,9 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/spin": "^17.0.0-prerelease.29"
+    "@semcore/spin": "^17.0.0-prerelease.31",
+    "@semcore/typography": "^17.0.0-prerelease.31",
+    "@semcore/link": "^17.0.0-prerelease.31"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.0.0 || ^17.0.0-0"
@@ -25,10 +27,10 @@
     "directory": "semcore/button"
   },
   "devDependencies": {
-    "@semcore/core": "17.0.0-prerelease.29",
-    "@semcore/base-components": "17.0.0-prerelease.29",
+    "@semcore/core": "17.0.0-prerelease.31",
+    "@semcore/base-components": "17.0.0-prerelease.31",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "16.7.2-prerelease.29"
+    "@semcore/icon": "16.7.2-prerelease.31"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"