@semcore/button 5.44.0-prerelease.4 → 5.44.0-prerelease.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/lib/cjs/component/Button/Button.js +166 -64
  2. package/lib/cjs/component/Button/Button.js.map +1 -1
  3. package/lib/cjs/component/Button/Button.type.js.map +1 -1
  4. package/lib/cjs/component/{AbstractButton → Button}/SpinButton.js +3 -4
  5. package/lib/cjs/component/Button/SpinButton.js.map +1 -0
  6. package/lib/cjs/component/Button/button.shadow.css +1 -9
  7. package/lib/cjs/component/ButtonLink/ButtonLink.js +35 -68
  8. package/lib/cjs/component/ButtonLink/ButtonLink.js.map +1 -1
  9. package/lib/cjs/component/ButtonLink/ButtonLink.type.js.map +1 -1
  10. package/lib/cjs/component/ButtonLink/buttonLink.shadow.css +11 -150
  11. package/lib/cjs/index.js +3 -4
  12. package/lib/cjs/index.js.map +1 -1
  13. package/lib/es6/component/Button/Button.js +163 -57
  14. package/lib/es6/component/Button/Button.js.map +1 -1
  15. package/lib/es6/component/Button/Button.type.js.map +1 -1
  16. package/lib/es6/component/{AbstractButton → Button}/SpinButton.js +1 -1
  17. package/lib/es6/component/Button/SpinButton.js.map +1 -0
  18. package/lib/es6/component/Button/button.shadow.css +1 -9
  19. package/lib/es6/component/ButtonLink/ButtonLink.js +34 -65
  20. package/lib/es6/component/ButtonLink/ButtonLink.js.map +1 -1
  21. package/lib/es6/component/ButtonLink/ButtonLink.type.js.map +1 -1
  22. package/lib/es6/component/ButtonLink/buttonLink.shadow.css +11 -150
  23. package/lib/es6/index.js +1 -2
  24. package/lib/es6/index.js.map +1 -1
  25. package/lib/esm/component/Button/Button.mjs +142 -56
  26. package/lib/esm/component/Button/Button.type.mjs +1 -0
  27. package/lib/esm/component/{AbstractButton → Button}/SpinButton.mjs +2 -3
  28. package/lib/esm/component/Button/button.shadow.css +1 -9
  29. package/lib/esm/component/ButtonLink/ButtonLink.mjs +33 -61
  30. package/lib/esm/component/ButtonLink/ButtonLink.type.mjs +1 -0
  31. package/lib/esm/component/ButtonLink/buttonLink.shadow.css +11 -150
  32. package/lib/esm/index.mjs +3 -2
  33. package/lib/types/component/Button/Button.d.ts +28 -1
  34. package/lib/types/component/Button/Button.type.d.ts +40 -39
  35. package/lib/types/component/{AbstractButton → Button}/SpinButton.d.ts +2 -2
  36. package/lib/types/component/ButtonLink/ButtonLink.d.ts +1 -1
  37. package/lib/types/component/ButtonLink/ButtonLink.type.d.ts +15 -21
  38. package/lib/types/index.d.ts +1 -2
  39. package/package.json +7 -7
  40. package/lib/cjs/component/AbstractButton/AbstractButton.js +0 -182
  41. package/lib/cjs/component/AbstractButton/AbstractButton.js.map +0 -1
  42. package/lib/cjs/component/AbstractButton/AbstractButton.type.js +0 -2
  43. package/lib/cjs/component/AbstractButton/AbstractButton.type.js.map +0 -1
  44. package/lib/cjs/component/AbstractButton/SpinButton.js.map +0 -1
  45. package/lib/es6/component/AbstractButton/AbstractButton.js +0 -175
  46. package/lib/es6/component/AbstractButton/AbstractButton.js.map +0 -1
  47. package/lib/es6/component/AbstractButton/AbstractButton.type.js +0 -2
  48. package/lib/es6/component/AbstractButton/AbstractButton.type.js.map +0 -1
  49. package/lib/es6/component/AbstractButton/SpinButton.js.map +0 -1
  50. package/lib/esm/component/AbstractButton/AbstractButton.mjs +0 -152
  51. package/lib/types/component/AbstractButton/AbstractButton.d.ts +0 -24
  52. package/lib/types/component/AbstractButton/AbstractButton.type.d.ts +0 -39
@@ -1,90 +1,62 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
2
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
3
  import _createClass from "@babel/runtime/helpers/esm/createClass";
4
+ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
4
5
  import _inherits from "@babel/runtime/helpers/esm/inherits";
5
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
6
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
7
- import { sstyled } from "@semcore/utils/lib/core/index";
8
- import createComponent, { sstyled as sstyled$1, assignProps } from "@semcore/core";
7
+ import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
8
+ import Link from "@semcore/link";
9
9
  import React from "react";
10
- import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
11
- import { Box } from "@semcore/flex-box";
12
- import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
13
- import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
14
10
  /*!__reshadow-styles__:"./buttonLink.shadow.css"*/
15
11
  var style = (
16
12
  /*__reshadow_css_start__*/
17
13
  (sstyled.insert(
18
14
  /*__inner_css_start__*/
19
- ".___SButton_ewssl_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, rgb(35, 95, 226));line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_ewssl_gg_:active,.___SButton_ewssl_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_ewssl_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_ewssl_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_ewssl_gg_.__active_ewssl_gg_,.___SButton_ewssl_gg_:active{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}@media (hover:hover){.___SButton_ewssl_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___SButton_ewssl_gg_.__active_ewssl_gg_ .___SText_ewssl_gg_,.___SButton_ewssl_gg_:active .___SText_ewssl_gg_{border-color:currentColor}@media (hover:hover){.___SButton_ewssl_gg_:hover .___SText_ewssl_gg_{border-color:currentColor}}.___SButton_ewssl_gg_.__enableVisited_ewssl_gg_:visited{color:var(--intergalactic-text-link-visited, rgb(128, 41, 236))}@media (hover:hover){.___SButton_ewssl_gg_.__enableVisited_ewssl_gg_:visited:hover{color:var(--intergalactic-text-link-visited, rgb(128, 41, 236))}}.___SButton_ewssl_gg_ .___SText_ewssl_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_ewssl_gg_.__keyboardFocused_ewssl_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 33, 220, 0.469));outline-style:solid;outline-width:3px}@supports (color:color(display-p3 0 0 0)){.___SButton_ewssl_gg_.__keyboardFocused_ewssl_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SButton_ewssl_gg_.__keyboardFocused_ewssl_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SButton_ewssl_gg_.__disabled_ewssl_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SButton_ewssl_gg_._use_secondary_ewssl_gg_{color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SButton_ewssl_gg_._use_secondary_ewssl_gg_{color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SButton_ewssl_gg_._use_secondary_ewssl_gg_{color:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SButton_ewssl_gg_._use_secondary_ewssl_gg_.__active_ewssl_gg_,.___SButton_ewssl_gg_._use_secondary_ewssl_gg_:active{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SButton_ewssl_gg_._use_secondary_ewssl_gg_:hover{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SButton_ewssl_gg_._use_secondary_ewssl_gg_ .___SText_ewssl_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_ewssl_gg_,.___SInner_ewssl_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_ewssl_gg_{height:100%;width:100%}.___SAddon_ewssl_gg_{vertical-align:middle;pointer-events:none}.___SButton_ewssl_gg_ .___SAddon_ewssl_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_ewssl_gg_ .___SAddon_ewssl_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_ewssl_gg_.__text-color_ewssl_gg_{color:var(--text-color_ewssl)}.___SButton_ewssl_gg_.__text-color_ewssl_gg_.__active_ewssl_gg_,.___SButton_ewssl_gg_.__text-color_ewssl_gg_:active{color:var(--text-color_ewssl);filter:brightness(.8)}@media (hover:hover){.___SButton_ewssl_gg_.__text-color_ewssl_gg_:hover{color:var(--text-color_ewssl);filter:brightness(.8)}}.___SButton_ewssl_gg_._size_100_ewssl_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_ewssl_gg_._size_200_ewssl_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_ewssl_gg_._size_300_ewssl_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_ewssl_gg_._size_400_ewssl_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_ewssl_gg_._size_500_ewssl_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_ewssl_gg_._size_600_ewssl_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_ewssl_gg_._size_700_ewssl_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_ewssl_gg_._size_800_ewssl_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_ewssl_gg_,.___SText_ewssl_gg_{transition:none}}",
15
+ ".___SButtonLink_prbrc_gg_{border:0;font-family:inherit}.___SButtonLink_prbrc_gg_._use_primary_prbrc_gg_:not(.__color_prbrc_gg_){color:var(--intergalactic-text-link, rgb(35, 95, 226))}.___SButtonLink_prbrc_gg_._use_primary_prbrc_gg_.__active_prbrc_gg_:not(.__color_prbrc_gg_),.___SButtonLink_prbrc_gg_._use_primary_prbrc_gg_:not(.__color_prbrc_gg_):active{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}@media (hover:hover){.___SButtonLink_prbrc_gg_._use_primary_prbrc_gg_:not(.__color_prbrc_gg_):hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_:not(.__color_prbrc_gg_){color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_:not(.__color_prbrc_gg_){color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_:not(.__color_prbrc_gg_){color:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_.__active_prbrc_gg_:not(.__color_prbrc_gg_),.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_:not(.__color_prbrc_gg_):active{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_:not(.__color_prbrc_gg_):hover{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SButtonLink_prbrc_gg_._use_secondary_prbrc_gg_ .___SText_prbrc_gg_{text-decoration-style:dashed;text-decoration-color:currentColor}",
20
16
  /*__inner_css_end__*/
21
- "ewssl_gg_"
17
+ "prbrc_gg_"
22
18
  ), /*__reshadow_css_end__*/
23
19
  {
24
- "__SButton": "___SButton_ewssl_gg_",
25
- "_keyboardFocused": "__keyboardFocused_ewssl_gg_",
26
- "_disabled": "__disabled_ewssl_gg_",
27
- "__SInner": "___SInner_ewssl_gg_",
28
- "__SAddon": "___SAddon_ewssl_gg_",
29
- "_size_100": "_size_100_ewssl_gg_",
30
- "_size_200": "_size_200_ewssl_gg_",
31
- "_size_300": "_size_300_ewssl_gg_",
32
- "_size_400": "_size_400_ewssl_gg_",
33
- "_size_500": "_size_500_ewssl_gg_",
34
- "_size_600": "_size_600_ewssl_gg_",
35
- "_size_700": "_size_700_ewssl_gg_",
36
- "_size_800": "_size_800_ewssl_gg_",
37
- "__SText": "___SText_ewssl_gg_",
38
- "_active": "__active_ewssl_gg_",
39
- "_enableVisited": "__enableVisited_ewssl_gg_",
40
- "_use_secondary": "_use_secondary_ewssl_gg_",
41
- "_text-color": "__text-color_ewssl_gg_",
42
- "--text-color": "--text-color_ewssl"
20
+ "__SButtonLink": "___SButtonLink_prbrc_gg_",
21
+ "_use_secondary": "_use_secondary_prbrc_gg_",
22
+ "__SText": "___SText_prbrc_gg_",
23
+ "_use_primary": "_use_primary_prbrc_gg_",
24
+ "_color": "__color_prbrc_gg_",
25
+ "_active": "__active_prbrc_gg_"
43
26
  })
44
27
  );
45
- var enhance = {
46
- keyboardFocused: keyboardFocusEnhance(),
47
- resolveColor: resolveColorEnhance()
48
- };
49
- var RootButtonLink = /* @__PURE__ */ function(_AbstractButton) {
50
- _inherits(RootButtonLink2, _AbstractButton);
51
- var _super = _createSuper(RootButtonLink2);
28
+ var RootButtonLink = /* @__PURE__ */ (function(_Component) {
52
29
  function RootButtonLink2() {
53
30
  _classCallCheck(this, RootButtonLink2);
54
- return _super.apply(this, arguments);
31
+ return _callSuper(this, RootButtonLink2, arguments);
55
32
  }
56
- _createClass(RootButtonLink2, [{
57
- key: "getTextColor",
58
- value: function getTextColor() {
59
- var _ref5 = this.asProps, color = _ref5.color, resolveColor = _ref5.resolveColor;
60
- return resolveColor(color);
33
+ _inherits(RootButtonLink2, _Component);
34
+ return _createClass(RootButtonLink2, [{
35
+ key: "render",
36
+ value: function render() {
37
+ var _ref = this.asProps, _ref2;
38
+ var SButtonLink = Link;
39
+ var disabled = this.asProps.disabled;
40
+ return _ref2 = sstyled(style), /* @__PURE__ */ React.createElement(SButtonLink, _ref2.cn("SButtonLink", _objectSpread({}, assignProps({
41
+ "tag": "button",
42
+ "type": "button",
43
+ "use:disabled": disabled,
44
+ "use:tabIndex": 0
45
+ }, _ref))));
61
46
  }
62
47
  }]);
63
- return RootButtonLink2;
64
- }(AbstractButton);
48
+ })(Component);
65
49
  _defineProperty(RootButtonLink, "displayName", "ButtonLink");
66
- _defineProperty(RootButtonLink, "enhance", Object.values(enhance));
67
50
  _defineProperty(RootButtonLink, "style", style);
68
51
  _defineProperty(RootButtonLink, "defaultProps", {
69
- use: "primary"
52
+ use: "primary",
53
+ size: 200
70
54
  });
71
- function Text(props) {
72
- var _ref = arguments[0], _ref3;
73
- var SText = Box;
74
- return _ref3 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", _objectSpread({}, assignProps({
75
- "tag": "span"
76
- }, _ref))));
77
- }
78
- function Addon(props) {
79
- var _ref2 = arguments[0], _ref4;
80
- var SAddon = Box;
81
- return _ref4 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, assignProps({
82
- "tag": "span"
83
- }, _ref2))));
84
- }
85
55
  var ButtonLink = createComponent(RootButtonLink, {
86
- Text,
87
- Addon
56
+ Text: Link.Text,
57
+ Addon: Link.Addon
58
+ }, {
59
+ parent: Link
88
60
  });
89
61
  export {
90
62
  ButtonLink
@@ -1,70 +1,19 @@
1
- SButton {
2
- display: inline-flex;
3
- font-family: inherit;
4
- font-size: var(--intergalactic-fs-200, 14px);
5
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
6
- line-height: normal;
7
- position: relative;
8
- cursor: pointer;
9
- text-decoration: none;
1
+ SButtonLink {
10
2
  border: none;
11
- padding: 0;
12
- margin: 0;
13
- box-shadow: none;
14
- -webkit-tap-highlight-color: transparent;
15
- outline: 0;
16
- background: none;
17
- transition: color 0.15s ease-in-out;
18
-
19
- &:active,
20
- &:hover,
21
- &:focus {
22
- outline: 0;
23
- text-decoration: none;
24
- }
3
+ font-family: inherit;
4
+ }
25
5
 
26
- &::-moz-focus-inner {
27
- border: none;
28
- padding: 0;
29
- }
6
+ SButtonLink[use='primary']:not([color]) {
7
+ color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
30
8
 
31
9
  &[active],
32
- &:hover,
33
- &:active {
10
+ &:active,
11
+ &:hover {
34
12
  color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
35
-
36
- & SText {
37
- border-color: currentColor;
38
- }
39
- }
40
-
41
- &[enableVisited]:visited,
42
- &[enableVisited]:visited:hover {
43
- color: var(--intergalactic-text-link-visited, oklch(0.53 0.26 296));
44
13
  }
45
-
46
- SText {
47
- border-bottom-width: 1px;
48
- border-bottom-style: solid;
49
- border-color: transparent;
50
- transition: border-bottom-color 0.15s ease-in-out;
51
- }
52
- }
53
-
54
- SButton[keyboardFocused] {
55
- outline-color: var(--intergalactic-keyboard-focus-outline, oklch(0.424 0.269 264.2 / 0.469));
56
- outline-style: solid;
57
- outline-width: 3px;
58
14
  }
59
15
 
60
- SButton[disabled] {
61
- opacity: var(--intergalactic-disabled-opacity, 0.4);
62
- cursor: default;
63
- /* Disable link interactions */
64
- pointer-events: none;
65
- }
66
-
67
- SButton[use='secondary'] {
16
+ SButtonLink[use='secondary']:not([color]) {
68
17
  color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
69
18
 
70
19
  &[active],
@@ -72,97 +21,9 @@ SButton[use='secondary'] {
72
21
  &:hover {
73
22
  color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
74
23
  }
75
-
76
- SText {
77
- border-bottom-width: 1px;
78
- border-bottom-style: dashed;
79
- border-color: currentColor;
80
- }
81
- }
82
-
83
- SInner {
84
- display: inline-flex;
85
- align-items: center;
86
- justify-content: center;
87
- height: 100%;
88
- width: 100%;
89
24
  }
90
25
 
91
- SAddon {
92
- display: inline-flex;
93
- justify-content: center;
94
- align-items: center;
95
- vertical-align: middle;
96
- pointer-events: none;
97
- }
98
-
99
- SButton SAddon {
100
- &:not(:only-child):first-child {
101
- margin-right: var(--intergalactic-spacing-1x, 4px);
102
- }
103
-
104
- &:not(:only-child):last-child {
105
- margin-left: var(--intergalactic-spacing-1x, 4px);
106
- }
107
- }
108
-
109
- SButton[text-color] {
110
- color: var(--text-color);
111
-
112
- &[active],
113
- &:hover,
114
- &:active {
115
- color: var(--text-color);
116
- filter: brightness(0.8);
117
- }
118
- }
119
-
120
- SButton[size='100'] {
121
- font-size: var(--intergalactic-fs-100, 12px);
122
- line-height: var(--intergalactic-lh-100, 133%);
123
- }
124
-
125
- SButton[size='200'] {
126
- font-size: var(--intergalactic-fs-200, 14px);
127
- line-height: var(--intergalactic-lh-200, 142%);
128
- }
129
-
130
- SButton[size='300'] {
131
- font-size: var(--intergalactic-fs-300, 16px);
132
- line-height: var(--intergalactic-lh-300, 150%);
133
- }
134
-
135
- SButton[size='400'] {
136
- font-size: var(--intergalactic-fs-400, 20px);
137
- line-height: var(--intergalactic-lh-400, 120%);
138
- }
139
-
140
- SButton[size='500'] {
141
- font-size: var(--intergalactic-fs-500, 24px);
142
- line-height: var(--intergalactic-lh-500, 117%);
143
- }
144
-
145
- SButton[size='600'] {
146
- font-size: var(--intergalactic-fs-600, 32px);
147
- line-height: var(--intergalactic-lh-600, 125%);
148
- }
149
-
150
- SButton[size='700'] {
151
- font-size: var(--intergalactic-fs-700, 36px);
152
- line-height: var(--intergalactic-lh-700, 110%);
153
- }
154
-
155
- SButton[size='800'] {
156
- font-size: var(--intergalactic-fs-800, 48px);
157
- line-height: var(--intergalactic-lh-800, 117%);
158
- }
159
-
160
- @media (prefers-reduced-motion) {
161
- SButton {
162
- transition: none;
163
- }
164
-
165
- SText {
166
- transition: none;
167
- }
26
+ SButtonLink[use='secondary'] SText {
27
+ text-decoration-style: dashed;
28
+ text-decoration-color: currentColor;
168
29
  }
package/lib/esm/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
- import { default as default2 } from "./component/Button/Button.mjs";
1
+ import { MAP_USE_DEFAULT_THEME, default as default2 } from "./component/Button/Button.mjs";
2
+ import "./component/Button/Button.type.mjs";
2
3
  import { ButtonLink } from "./component/ButtonLink/ButtonLink.mjs";
3
- import { MAP_USE_DEFAULT_THEME } from "./component/AbstractButton/AbstractButton.mjs";
4
+ import "./component/ButtonLink/ButtonLink.type.mjs";
4
5
  export {
5
6
  ButtonLink,
6
7
  MAP_USE_DEFAULT_THEME,
@@ -1,3 +1,30 @@
1
- import { ButtonComponent } from './Button.type';
1
+ import { Component } from '@semcore/core';
2
+ import React from 'react';
3
+ import type { ButtonProps, ButtonComponent } from './Button.type';
4
+ export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
5
+ type State = {
6
+ ariaLabelledByContent: null | string;
7
+ };
8
+ export declare class RootButton extends Component<ButtonProps, [], never, {}, State> {
9
+ static displayName: string;
10
+ static style: {
11
+ [key: string]: string;
12
+ };
13
+ static defaultProps: {
14
+ use: string;
15
+ size: string;
16
+ };
17
+ containerRef: React.RefObject<HTMLButtonElement>;
18
+ state: State;
19
+ getTextProps(): {
20
+ size: "l" | "m" | undefined;
21
+ 'hint:triggerRef': React.RefObject<HTMLButtonElement>;
22
+ };
23
+ getAddonProps(): {
24
+ size: "l" | "m" | undefined;
25
+ };
26
+ componentDidMount(): void;
27
+ render(): React.JSX.Element;
28
+ }
2
29
  declare const Button: ButtonComponent;
3
30
  export default Button;
@@ -1,43 +1,44 @@
1
- import { UnknownProperties, Intergalactic } from '@semcore/core';
2
- import { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
3
- /**
4
- * Button size
5
- * @default m
6
- */
7
- export type ButtonSize = 'l' | 'm';
8
- /**
9
- * Button type
10
- * @default secondary
11
- */
12
- type Use = 'primary' | 'secondary' | 'tertiary';
13
- /**
14
- * @deprecated don't use it. use `danger` for incorrect or danger behavior and `brand` for the orange one.
15
- */
16
- type DeprecatedTheme = 'warning';
17
- /** Button theme */
18
- type Theme = 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
19
- /** @deprecated */
20
- export interface IButtonProps extends ButtonProps, UnknownProperties {
21
- }
22
- export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme | DeprecatedTheme>;
23
- /** @deprecated */
24
- export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {
25
- }
26
- export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
27
- /** @deprecated */
28
- export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {
29
- }
30
- export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
31
- /** @deprecated */
32
- export interface IButtonContext extends ButtonContext, UnknownProperties {
33
- }
34
- export type ButtonContext = AbstractButtonContext;
35
- export type ButtonChildren = {
36
- Text: Intergalactic.Component<'span', ButtonTextProps>;
37
- Addon: Intergalactic.Component<'span', ButtonAddonProps>;
1
+ import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
2
+ import type { Intergalactic, PropGetterFn } from '@semcore/core';
3
+ import type { NSText } from '@semcore/typography';
4
+ import type React from 'react';
5
+ export type ButtonProps = BoxProps & NeighborItemProps & {
6
+ /** Button activity state */
7
+ active?: boolean;
8
+ /** Disabled button state */
9
+ disabled?: boolean;
10
+ /** Loading button state */
11
+ loading?: boolean;
12
+ /** Tag for the left Addon */
13
+ addonLeft?: React.ElementType;
14
+ /** Tag for the right Addon */
15
+ addonRight?: React.ElementType;
16
+ /**
17
+ * Placement for hint
18
+ * @default top
19
+ */
20
+ hintPlacement?: SimpleHintPopperProps['placement'];
21
+ /** Button size.
22
+ * @default `m`
23
+ */
24
+ size?: 'l' | 'm';
25
+ /** Button usage.
26
+ * @default `primary`
27
+ */
28
+ use?: 'primary' | 'secondary' | 'tertiary';
29
+ /** Button theme.
30
+ * @default undefined
31
+ */
32
+ theme?: 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
38
33
  };
39
- export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & {
34
+ export type ButtonTextProps = NSText.Props;
35
+ export type ButtonAddonProps = BoxProps;
36
+ export type ButtonContext = {
37
+ getTextProps: PropGetterFn;
38
+ getAddonProps: PropGetterFn;
39
+ };
40
+ export type ButtonChildren = {
40
41
  Text: Intergalactic.Component<'span', ButtonTextProps>;
41
42
  Addon: Intergalactic.Component<'span', ButtonAddonProps>;
42
43
  };
43
- export {};
44
+ export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & ButtonChildren;
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  export declare const SPIN_SIZE_MAP: Record<string, string>;
3
- export default function SpinButton({ theme, size, ...others }: any): JSX.Element;
3
+ export default function SpinButton({ theme, size, ...others }: any): React.JSX.Element;
@@ -1,2 +1,2 @@
1
- import { ButtonLinkComponent } from './ButtonLink.type';
1
+ import type { ButtonLinkComponent } from './ButtonLink.type';
2
2
  export declare const ButtonLink: ButtonLinkComponent;
@@ -1,25 +1,19 @@
1
- import { Intergalactic } from '@semcore/core';
2
- import { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
3
- /**
4
- * Button link size
5
- * @default m
6
- */
7
- export type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
8
- /**
9
- * Button link type
10
- * @default primary
11
- */
12
- type Use = 'primary' | 'secondary';
13
- export type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;
14
- export type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;
15
- export type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;
16
- export type ButtonLinkContext = AbstractButtonContext;
17
- export type ButtonLinkChildren = {
18
- Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
19
- Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
1
+ import type { BoxProps } from '@semcore/base-components';
2
+ import type { Intergalactic } from '@semcore/core';
3
+ import type { LinkProps } from '@semcore/link';
4
+ import type { NSText } from '@semcore/typography';
5
+ import type { ButtonContext } from '../Button/Button.type';
6
+ export type ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit<LinkProps, 'enableVisited'> & {
7
+ /**
8
+ * Button link type
9
+ * @default primary
10
+ */
11
+ use?: 'primary' | 'secondary';
20
12
  };
21
- export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonLinkContext> & {
13
+ export type ButtonLinkTextProps = NSText.Props;
14
+ export type ButtonLinkAddonProps = BoxProps;
15
+ export type ButtonLinkChildren = {
22
16
  Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
23
17
  Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
24
18
  };
25
- export {};
19
+ export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonContext> & ButtonLinkChildren;
@@ -1,5 +1,4 @@
1
- export { default } from './component/Button/Button';
1
+ export { default, MAP_USE_DEFAULT_THEME } from './component/Button/Button';
2
2
  export * from './component/Button/Button.type';
3
3
  export * from './component/ButtonLink/ButtonLink';
4
4
  export * from './component/ButtonLink/ButtonLink.type';
5
- export { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/button",
3
3
  "description": "Semrush Button Component",
4
- "version": "5.44.0-prerelease.4",
4
+ "version": "5.44.0-prerelease.5",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "5.42.0-prerelease.4",
18
- "@semcore/neighbor-location": "4.41.0-prerelease.4",
19
- "@semcore/spin": "5.42.0-prerelease.4",
20
- "@semcore/tooltip": "6.50.0-prerelease.4",
21
- "@semcore/utils": "4.49.0-prerelease.4"
17
+ "@semcore/flex-box": "5.42.0-prerelease.5",
18
+ "@semcore/neighbor-location": "4.41.0-prerelease.5",
19
+ "@semcore/spin": "5.42.0-prerelease.5",
20
+ "@semcore/tooltip": "6.50.0-prerelease.5",
21
+ "@semcore/utils": "4.49.0-prerelease.5"
22
22
  },
23
23
  "peerDependencies": {
24
- "@semcore/core": "^2.40.0-prerelease.4",
24
+ "@semcore/core": "^2.40.0-prerelease.5",
25
25
  "react": "16.8 - 18",
26
26
  "react-dom": "16.8 - 18"
27
27
  },