@cloud-ru/uikit-product-button-predefined 0.7.4 → 0.7.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 (78) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/ButtonDropdown/ButtonDropdown.d.ts +6 -0
  3. package/dist/cjs/components/ButtonDropdown/ButtonDropdown.js +32 -0
  4. package/dist/cjs/components/ButtonDropdown/index.d.ts +1 -0
  5. package/dist/cjs/components/ButtonDropdown/index.js +17 -0
  6. package/dist/cjs/components/ButtonPromo/ButtonPromo.d.ts +6 -0
  7. package/dist/cjs/components/ButtonPromo/ButtonPromo.js +29 -0
  8. package/dist/cjs/components/ButtonPromo/index.d.ts +1 -0
  9. package/dist/cjs/components/ButtonPromo/index.js +17 -0
  10. package/dist/cjs/components/ButtonPromo/styles.module.css +293 -0
  11. package/dist/cjs/components/ButtonPromoOutline/ButtonPromoOutline.d.ts +6 -0
  12. package/dist/cjs/components/ButtonPromoOutline/ButtonPromoOutline.js +29 -0
  13. package/dist/cjs/components/ButtonPromoOutline/index.d.ts +1 -0
  14. package/dist/cjs/components/ButtonPromoOutline/index.js +17 -0
  15. package/dist/cjs/components/ButtonPromoOutline/styles.module.css +305 -0
  16. package/dist/cjs/components/index.d.ts +3 -0
  17. package/dist/cjs/components/index.js +19 -0
  18. package/dist/cjs/constants.d.ts +25 -0
  19. package/dist/cjs/constants.js +28 -0
  20. package/dist/cjs/helperComponents/ButtonPrivate/ButtonPrivate.d.ts +14 -0
  21. package/dist/cjs/helperComponents/ButtonPrivate/ButtonPrivate.js +55 -0
  22. package/dist/cjs/helperComponents/ButtonPrivate/constants.d.ts +10 -0
  23. package/dist/cjs/helperComponents/ButtonPrivate/constants.js +15 -0
  24. package/dist/cjs/helperComponents/ButtonPrivate/index.d.ts +1 -0
  25. package/dist/cjs/helperComponents/ButtonPrivate/index.js +17 -0
  26. package/dist/cjs/helperComponents/ButtonPrivate/styles.module.css +36 -0
  27. package/dist/cjs/helperComponents/ButtonPrivate/utils.d.ts +11 -0
  28. package/dist/cjs/helperComponents/ButtonPrivate/utils.js +54 -0
  29. package/dist/cjs/helperComponents/index.d.ts +1 -0
  30. package/dist/cjs/helperComponents/index.js +17 -0
  31. package/dist/cjs/hooks.d.ts +7 -0
  32. package/dist/cjs/hooks.js +10 -0
  33. package/dist/cjs/index.d.ts +1 -0
  34. package/dist/cjs/index.js +17 -0
  35. package/dist/cjs/styles.module.css +0 -0
  36. package/dist/cjs/types.d.ts +48 -0
  37. package/dist/cjs/types.js +2 -0
  38. package/dist/cjs/utils.d.ts +12 -0
  39. package/dist/cjs/utils.js +6 -0
  40. package/dist/esm/components/ButtonDropdown/ButtonDropdown.d.ts +6 -0
  41. package/dist/esm/components/ButtonDropdown/ButtonDropdown.js +29 -0
  42. package/dist/esm/components/ButtonDropdown/index.d.ts +1 -0
  43. package/dist/esm/components/ButtonDropdown/index.js +1 -0
  44. package/dist/esm/components/ButtonPromo/ButtonPromo.d.ts +6 -0
  45. package/dist/esm/components/ButtonPromo/ButtonPromo.js +23 -0
  46. package/dist/esm/components/ButtonPromo/index.d.ts +1 -0
  47. package/dist/esm/components/ButtonPromo/index.js +1 -0
  48. package/dist/esm/components/ButtonPromo/styles.module.css +293 -0
  49. package/dist/esm/components/ButtonPromoOutline/ButtonPromoOutline.d.ts +6 -0
  50. package/dist/esm/components/ButtonPromoOutline/ButtonPromoOutline.js +23 -0
  51. package/dist/esm/components/ButtonPromoOutline/index.d.ts +1 -0
  52. package/dist/esm/components/ButtonPromoOutline/index.js +1 -0
  53. package/dist/esm/components/ButtonPromoOutline/styles.module.css +305 -0
  54. package/dist/esm/components/index.d.ts +3 -0
  55. package/dist/esm/components/index.js +3 -0
  56. package/dist/esm/constants.d.ts +25 -0
  57. package/dist/esm/constants.js +25 -0
  58. package/dist/esm/helperComponents/ButtonPrivate/ButtonPrivate.d.ts +14 -0
  59. package/dist/esm/helperComponents/ButtonPrivate/ButtonPrivate.js +49 -0
  60. package/dist/esm/helperComponents/ButtonPrivate/constants.d.ts +10 -0
  61. package/dist/esm/helperComponents/ButtonPrivate/constants.js +12 -0
  62. package/dist/esm/helperComponents/ButtonPrivate/index.d.ts +1 -0
  63. package/dist/esm/helperComponents/ButtonPrivate/index.js +1 -0
  64. package/dist/esm/helperComponents/ButtonPrivate/styles.module.css +36 -0
  65. package/dist/esm/helperComponents/ButtonPrivate/utils.d.ts +11 -0
  66. package/dist/esm/helperComponents/ButtonPrivate/utils.js +48 -0
  67. package/dist/esm/helperComponents/index.d.ts +1 -0
  68. package/dist/esm/helperComponents/index.js +1 -0
  69. package/dist/esm/hooks.d.ts +7 -0
  70. package/dist/esm/hooks.js +7 -0
  71. package/dist/esm/index.d.ts +1 -0
  72. package/dist/esm/index.js +1 -0
  73. package/dist/esm/styles.module.css +0 -0
  74. package/dist/esm/types.d.ts +48 -0
  75. package/dist/esm/types.js +1 -0
  76. package/dist/esm/utils.d.ts +12 -0
  77. package/dist/esm/utils.js +3 -0
  78. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.7.5 (2025-11-12)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.7.4 (2025-11-12)
7
18
 
8
19
 
@@ -0,0 +1,6 @@
1
+ import { WithLayoutType } from '@sbercloud/uikit-product-utils';
2
+ import { ButtonFunctionProps } from '@snack-uikit/button';
3
+ import { DropdownProps } from '@snack-uikit/dropdown';
4
+ import { DroplistProps } from '@snack-uikit/list';
5
+ export type ButtonDropdownProps = WithLayoutType<Omit<ButtonFunctionProps, 'icon' | 'iconPosition'> & (Omit<DropdownProps, 'children'> | Omit<DroplistProps, 'children' | 'size'>)>;
6
+ export declare function ButtonDropdown({ size, className, open: openProp, onOpenChange: onOpenChangeProp, ...props }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.ButtonDropdown = ButtonDropdown;
15
+ const jsx_runtime_1 = require("react/jsx-runtime");
16
+ const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
17
+ const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
18
+ const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
19
+ const button_1 = require("@snack-uikit/button");
20
+ const hooks_1 = require("../../hooks");
21
+ function isDroplistProps(props) {
22
+ return 'items' in props;
23
+ }
24
+ function ButtonDropdown(_a) {
25
+ var { size = 's', className, open: openProp, onOpenChange: onOpenChangeProp } = _a, props = __rest(_a, ["size", "className", "open", "onOpenChange"]);
26
+ const [open, onOpenChange] = (0, hooks_1.useValueControl)({ value: openProp, onChange: onOpenChangeProp });
27
+ const Icon = open ? uikit_product_icons_1.ChevronUpSVG : uikit_product_icons_1.ChevronDownSVG;
28
+ if (isDroplistProps(props)) {
29
+ return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDroplist, Object.assign({}, (0, uikit_product_utils_1.excludeSupportProps)(props), { open: open, onOpenChange: onOpenChange, size: size === 'xs' ? 's' : size, layoutType: props.layoutType, children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({ size: size }, props, { className: className }, (0, uikit_product_utils_1.extractSupportProps)(props), { icon: (0, jsx_runtime_1.jsx)(Icon, {}) })) })));
30
+ }
31
+ return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDropdown, Object.assign({}, (0, uikit_product_utils_1.excludeSupportProps)(props), { open: open, onOpenChange: onOpenChange, layoutType: props.layoutType, children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({ size: size }, props, { className: className }, (0, uikit_product_utils_1.extractSupportProps)(props), { icon: (0, jsx_runtime_1.jsx)(Icon, {}) })) })));
32
+ }
@@ -0,0 +1 @@
1
+ export * from './ButtonDropdown';
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ButtonDropdown"), exports);
@@ -0,0 +1,6 @@
1
+ import { WithSupportProps } from '@sbercloud/uikit-product-utils';
2
+ import { CommonButtonProps } from '../../types';
3
+ export type ButtonPromoProps = WithSupportProps<CommonButtonProps>;
4
+ export declare const ButtonPromo: import("react").ForwardRefExoticComponent<{
5
+ 'data-test-id'?: string;
6
+ } & import("react").AriaAttributes & import("../../types").AnchorButtonProps & import("../../types").BaseButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.ButtonPromo = void 0;
18
+ const jsx_runtime_1 = require("react/jsx-runtime");
19
+ const classnames_1 = __importDefault(require("classnames"));
20
+ const react_1 = require("react");
21
+ const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
22
+ const constants_1 = require("../../constants");
23
+ const helperComponents_1 = require("../../helperComponents");
24
+ const utils_1 = require("../../utils");
25
+ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
26
+ exports.ButtonPromo = (0, react_1.forwardRef)((_a, ref) => {
27
+ var { className, size = constants_1.SIZE.S, target = constants_1.TARGET.Blank, type = constants_1.HTML_TYPE.Button, appearance = constants_1.APPEARANCE.Tertiary, tabIndex, fullWidth = false } = _a, rest = __rest(_a, ["className", "size", "target", "type", "appearance", "tabIndex", "fullWidth"]);
28
+ return ((0, jsx_runtime_1.jsx)(helperComponents_1.ButtonPrivate, Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), (0, utils_1.extractCommonButtonProps)(rest), { className: (0, classnames_1.default)(styles_module_scss_1.default.button, className), iconClassName: styles_module_scss_1.default.icon, labelClassName: styles_module_scss_1.default.label, size: size, fullWidth: fullWidth, target: target, type: type, appearance: appearance, tabIndex: tabIndex, ref: ref })));
29
+ });
@@ -0,0 +1 @@
1
+ export * from './ButtonPromo';
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ButtonPromo"), exports);
@@ -0,0 +1,293 @@
1
+ .button[data-size=xs] .label{
2
+ font-family:var(--sans-label-s-font-family, SB Sans Text);
3
+ font-weight:var(--sans-label-s-font-weight, Semibold);
4
+ line-height:var(--sans-label-s-line-height, 14px);
5
+ font-size:var(--sans-label-s-font-size, 11px);
6
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
7
+ paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
8
+ }
9
+ .button[data-size=xs] .icon{
10
+ display:inline-flex;
11
+ align-items:center;
12
+ justify-content:center;
13
+ width:var(--size-icon-container-s, 24px);
14
+ height:var(--size-icon-container-s, 24px);
15
+ }
16
+ .button[data-size=xs] .icon svg{
17
+ max-width:var(--size-icon-container-s, 24px);
18
+ max-height:var(--size-icon-container-s, 24px);
19
+ }
20
+ .button[data-size=xs][data-variant=label-only]{
21
+ border-radius:var(--radius-button-xs, 0px);
22
+ height:var(--size-button-xs, 24px);
23
+ padding-right:var(--space-button-xs-from-label, 8px);
24
+ padding-left:var(--space-button-xs-from-label, 8px);
25
+ min-width:var(--size-button-mininal-width-xs, 0px);
26
+ }
27
+ .button[data-size=xs][data-variant=icon-only]{
28
+ border-radius:var(--radius-button-xs, 0px);
29
+ height:var(--size-button-xs, 24px);
30
+ width:var(--size-button-xs, 24px);
31
+ }
32
+ .button[data-size=xs][data-variant=icon-after]{
33
+ border-radius:var(--radius-button-xs, 0px);
34
+ height:var(--size-button-xs, 24px);
35
+ gap:var(--space-button-xs-gap, 2px);
36
+ padding-right:var(--space-button-xs-from-icon, 4px);
37
+ padding-left:var(--space-button-xs-from-label, 8px);
38
+ min-width:var(--size-button-mininal-width-xs, 0px);
39
+ }
40
+ .button[data-size=s] .label{
41
+ font-family:var(--sans-label-m-font-family, SB Sans Text);
42
+ font-weight:var(--sans-label-m-font-weight, Semibold);
43
+ line-height:var(--sans-label-m-line-height, 16px);
44
+ font-size:var(--sans-label-m-font-size, 12px);
45
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
46
+ paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
47
+ }
48
+ .button[data-size=s] .icon{
49
+ display:inline-flex;
50
+ align-items:center;
51
+ justify-content:center;
52
+ width:var(--size-icon-container-s, 24px);
53
+ height:var(--size-icon-container-s, 24px);
54
+ }
55
+ .button[data-size=s] .icon svg{
56
+ max-width:var(--size-icon-container-s, 24px);
57
+ max-height:var(--size-icon-container-s, 24px);
58
+ }
59
+ .button[data-size=s][data-variant=label-only]{
60
+ border-radius:var(--radius-button-s, 0px);
61
+ height:var(--size-button-s, 32px);
62
+ padding-right:var(--space-button-s-from-label, 16px);
63
+ padding-left:var(--space-button-s-from-label, 16px);
64
+ min-width:var(--size-button-mininal-width-s, 0px);
65
+ }
66
+ .button[data-size=s][data-variant=icon-only]{
67
+ border-radius:var(--radius-button-s, 0px);
68
+ height:var(--size-button-s, 32px);
69
+ width:var(--size-button-s, 32px);
70
+ }
71
+ .button[data-size=s][data-variant=icon-after]{
72
+ border-radius:var(--radius-button-s, 0px);
73
+ height:var(--size-button-s, 32px);
74
+ gap:var(--space-button-s-gap, 4px);
75
+ padding-right:var(--space-button-s-from-icon, 8px);
76
+ padding-left:var(--space-button-s-from-label, 16px);
77
+ min-width:var(--size-button-mininal-width-s, 0px);
78
+ }
79
+ .button[data-size=m] .label{
80
+ font-family:var(--sans-label-l-font-family, SB Sans Text);
81
+ font-weight:var(--sans-label-l-font-weight, Semibold);
82
+ line-height:var(--sans-label-l-line-height, 20px);
83
+ font-size:var(--sans-label-l-font-size, 14px);
84
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
85
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
86
+ }
87
+ .button[data-size=m] .icon{
88
+ display:inline-flex;
89
+ align-items:center;
90
+ justify-content:center;
91
+ width:var(--size-icon-container-s, 24px);
92
+ height:var(--size-icon-container-s, 24px);
93
+ }
94
+ .button[data-size=m] .icon svg{
95
+ max-width:var(--size-icon-container-s, 24px);
96
+ max-height:var(--size-icon-container-s, 24px);
97
+ }
98
+ .button[data-size=m][data-variant=label-only]{
99
+ border-radius:var(--radius-button-m, 0px);
100
+ height:var(--size-button-m, 40px);
101
+ padding-right:var(--space-button-m-from-label, 24px);
102
+ padding-left:var(--space-button-m-from-label, 24px);
103
+ min-width:var(--size-button-mininal-width-m, 0px);
104
+ }
105
+ .button[data-size=m][data-variant=icon-only]{
106
+ border-radius:var(--radius-button-m, 0px);
107
+ height:var(--size-button-m, 40px);
108
+ width:var(--size-button-m, 40px);
109
+ }
110
+ .button[data-size=m][data-variant=icon-after]{
111
+ border-radius:var(--radius-button-m, 0px);
112
+ height:var(--size-button-m, 40px);
113
+ gap:var(--space-button-m-gap, 4px);
114
+ padding-right:var(--space-button-m-from-icon, 16px);
115
+ padding-left:var(--space-button-m-from-label, 24px);
116
+ min-width:var(--size-button-mininal-width-m, 0px);
117
+ }
118
+ .button[data-size=l] .label{
119
+ font-family:var(--sans-label-l-font-family, SB Sans Text);
120
+ font-weight:var(--sans-label-l-font-weight, Semibold);
121
+ line-height:var(--sans-label-l-line-height, 20px);
122
+ font-size:var(--sans-label-l-font-size, 14px);
123
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
124
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
125
+ }
126
+ .button[data-size=l] .icon{
127
+ display:inline-flex;
128
+ align-items:center;
129
+ justify-content:center;
130
+ width:var(--size-icon-container-s, 24px);
131
+ height:var(--size-icon-container-s, 24px);
132
+ }
133
+ .button[data-size=l] .icon svg{
134
+ max-width:var(--size-icon-container-s, 24px);
135
+ max-height:var(--size-icon-container-s, 24px);
136
+ }
137
+ .button[data-size=l][data-variant=label-only]{
138
+ border-radius:var(--radius-button-l, 0px);
139
+ height:var(--size-button-l, 48px);
140
+ padding-right:var(--space-button-l-from-label, 32px);
141
+ padding-left:var(--space-button-l-from-label, 32px);
142
+ min-width:var(--size-button-mininal-width-l, 0px);
143
+ }
144
+ .button[data-size=l][data-variant=icon-only]{
145
+ border-radius:var(--radius-button-l, 0px);
146
+ height:var(--size-button-l, 48px);
147
+ width:var(--size-button-l, 48px);
148
+ }
149
+ .button[data-size=l][data-variant=icon-after]{
150
+ border-radius:var(--radius-button-l, 0px);
151
+ height:var(--size-button-l, 48px);
152
+ gap:var(--space-button-l-gap, 4px);
153
+ padding-right:var(--space-button-l-from-icon, 24px);
154
+ padding-left:var(--space-button-l-from-label, 32px);
155
+ min-width:var(--size-button-mininal-width-l, 0px);
156
+ }
157
+ .button[data-loading][data-variant=label-only] .icon{
158
+ position:absolute;
159
+ top:50%;
160
+ left:50%;
161
+ transform:translate(-50%, -50%);
162
+ }
163
+ .button[data-loading][data-variant=label-only] .label{
164
+ opacity:var(--opacity-a0, 0);
165
+ }
166
+ .button[data-appearance=fluorescent-yellow]{
167
+ background-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
168
+ }
169
+ .button[data-appearance=fluorescent-yellow] .label{
170
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
171
+ }
172
+ .button[data-appearance=fluorescent-yellow] .icon{
173
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
174
+ }
175
+ @media (hover: hover){
176
+ .button[data-appearance=fluorescent-yellow]:hover{
177
+ background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
178
+ }
179
+ .button[data-appearance=fluorescent-yellow]:hover .label{
180
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
181
+ }
182
+ .button[data-appearance=fluorescent-yellow]:hover .icon{
183
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
184
+ }
185
+ }
186
+ @media (hover: none) or (hover: hover){
187
+ .button[data-appearance=fluorescent-yellow]:focus-visible{
188
+ background-color:var(--sys-fluorescent-yellow-accent-hovered, #abcb0f);
189
+ }
190
+ .button[data-appearance=fluorescent-yellow]:focus-visible .label{
191
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
192
+ }
193
+ .button[data-appearance=fluorescent-yellow]:focus-visible .icon{
194
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
195
+ }
196
+ .button[data-appearance=fluorescent-yellow]:active{
197
+ background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
198
+ }
199
+ .button[data-appearance=fluorescent-yellow]:active .label{
200
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
201
+ }
202
+ .button[data-appearance=fluorescent-yellow]:active .icon{
203
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
204
+ }
205
+ .button[data-appearance=fluorescent-yellow][data-loading]{
206
+ background-color:var(--sys-fluorescent-yellow-accent-pressed, #859c2d);
207
+ }
208
+ .button[data-appearance=fluorescent-yellow][data-loading] .label{
209
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
210
+ }
211
+ .button[data-appearance=fluorescent-yellow][data-loading] .icon{
212
+ color:var(--sys-fluorescent-yellow-on-accent, #2e3807);
213
+ }
214
+ .button[data-appearance=fluorescent-yellow]:disabled, .button[data-appearance=fluorescent-yellow][data-disabled]{
215
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
216
+ }
217
+ .button[data-appearance=fluorescent-yellow]:disabled .label, .button[data-appearance=fluorescent-yellow][data-disabled] .label{
218
+ color:var(--sys-neutral-text-light, #8b8e9b);
219
+ }
220
+ .button[data-appearance=fluorescent-yellow]:disabled .icon, .button[data-appearance=fluorescent-yellow][data-disabled] .icon{
221
+ color:var(--sys-neutral-text-light, #8b8e9b);
222
+ }
223
+ }
224
+ .button[data-appearance=graphite]{
225
+ background-color:var(--sys-graphite-accent-default, #222222);
226
+ }
227
+ .button[data-appearance=graphite] .label{
228
+ color:var(--sys-graphite-on-accent, #ffffff);
229
+ }
230
+ .button[data-appearance=graphite] .icon{
231
+ color:var(--sys-graphite-on-accent, #ffffff);
232
+ }
233
+ @media (hover: hover){
234
+ .button[data-appearance=graphite]:hover{
235
+ background-color:var(--sys-graphite-accent-hovered, #383838);
236
+ }
237
+ .button[data-appearance=graphite]:hover .label{
238
+ color:var(--sys-graphite-on-accent, #ffffff);
239
+ }
240
+ .button[data-appearance=graphite]:hover .icon{
241
+ color:var(--sys-graphite-on-accent, #ffffff);
242
+ }
243
+ }
244
+ @media (hover: none) or (hover: hover){
245
+ .button[data-appearance=graphite]:focus-visible{
246
+ background-color:var(--sys-graphite-accent-hovered, #383838);
247
+ }
248
+ .button[data-appearance=graphite]:focus-visible .label{
249
+ color:var(--sys-graphite-on-accent, #ffffff);
250
+ }
251
+ .button[data-appearance=graphite]:focus-visible .icon{
252
+ color:var(--sys-graphite-on-accent, #ffffff);
253
+ }
254
+ .button[data-appearance=graphite]:active{
255
+ background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
256
+ }
257
+ .button[data-appearance=graphite]:active .label{
258
+ color:var(--sys-graphite-on-accent, #ffffff);
259
+ }
260
+ .button[data-appearance=graphite]:active .icon{
261
+ color:var(--sys-graphite-on-accent, #ffffff);
262
+ }
263
+ .button[data-appearance=graphite][data-loading]{
264
+ background-color:var(--sys-graphite-accent-pressed, #4e4e4e);
265
+ }
266
+ .button[data-appearance=graphite][data-loading] .label{
267
+ color:var(--sys-graphite-on-accent, #ffffff);
268
+ }
269
+ .button[data-appearance=graphite][data-loading] .icon{
270
+ color:var(--sys-graphite-on-accent, #ffffff);
271
+ }
272
+ .button[data-appearance=graphite]:disabled, .button[data-appearance=graphite][data-disabled]{
273
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
274
+ }
275
+ .button[data-appearance=graphite]:disabled .label, .button[data-appearance=graphite][data-disabled] .label{
276
+ color:var(--sys-neutral-text-light, #8b8e9b);
277
+ }
278
+ .button[data-appearance=graphite]:disabled .icon, .button[data-appearance=graphite][data-disabled] .icon{
279
+ color:var(--sys-neutral-text-light, #8b8e9b);
280
+ }
281
+ }
282
+ .button[data-appearance=fluorescent-yellow]:focus-visible{
283
+ outline-color:var(--sys-available-complementary, #15151b);
284
+ }
285
+ .button[data-appearance=graphite]:focus-visible{
286
+ outline-color:var(--sys-available-complementary, #15151b);
287
+ }
288
+ .button:focus-visible{
289
+ outline-width:var(--border-state-focus-s-border-width, 2px);
290
+ outline-style:var(--border-state-focus-s-border-style, solid);
291
+ outline-color:var(--border-state-focus-s-border-color, );
292
+ outline-offset:var(--spacing-state-focus-offset, 2px);
293
+ }
@@ -0,0 +1,6 @@
1
+ import { WithSupportProps } from '@sbercloud/uikit-product-utils';
2
+ import { CommonButtonProps } from '../../types';
3
+ export type ButtonPromoOutlineProps = WithSupportProps<Omit<CommonButtonProps, 'iconPosition'>>;
4
+ export declare const ButtonPromoOutline: import("react").ForwardRefExoticComponent<{
5
+ 'data-test-id'?: string;
6
+ } & import("react").AriaAttributes & Omit<CommonButtonProps, "iconPosition"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.ButtonPromoOutline = void 0;
18
+ const jsx_runtime_1 = require("react/jsx-runtime");
19
+ const classnames_1 = __importDefault(require("classnames"));
20
+ const react_1 = require("react");
21
+ const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
22
+ const constants_1 = require("../../constants");
23
+ const helperComponents_1 = require("../../helperComponents");
24
+ const utils_1 = require("../../utils");
25
+ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
26
+ exports.ButtonPromoOutline = (0, react_1.forwardRef)((_a, ref) => {
27
+ var { className, size = constants_1.SIZE.S, target = constants_1.TARGET.Blank, type = constants_1.HTML_TYPE.Button, appearance = constants_1.APPEARANCE.Tertiary, fullWidth = false, tabIndex } = _a, rest = __rest(_a, ["className", "size", "target", "type", "appearance", "fullWidth", "tabIndex"]);
28
+ return ((0, jsx_runtime_1.jsx)(helperComponents_1.ButtonPrivate, Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), (0, utils_1.extractCommonButtonProps)(rest), { className: (0, classnames_1.default)(styles_module_scss_1.default.button, className), iconClassName: styles_module_scss_1.default.icon, labelClassName: styles_module_scss_1.default.label, size: size, fullWidth: fullWidth, target: target, type: type, appearance: appearance, tabIndex: tabIndex, ref: ref })));
29
+ });
@@ -0,0 +1 @@
1
+ export * from './ButtonPromoOutline';
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./ButtonPromoOutline"), exports);