@hh.ru/magritte-ui-floating-button 1.0.1

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 (11) hide show
  1. package/FloatingButton.d.ts +3 -0
  2. package/FloatingButton.js +38 -0
  3. package/FloatingButton.js.map +1 -0
  4. package/index.css +248 -0
  5. package/index.d.ts +2 -0
  6. package/index.js +9 -0
  7. package/index.js.map +1 -0
  8. package/package.json +39 -0
  9. package/types.d.ts +25 -0
  10. package/types.js +3 -0
  11. package/types.js.map +1 -0
package/FloatingButton.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';
2
+ import type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';
3
+ export declare const FloatingButton: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'>;
package/FloatingButton.js ADDED
@@ -0,0 +1,38 @@
1
+ import './index.css';
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
+ import { createPortal } from 'react-dom';
4
+ import classnames from 'classnames';
5
+ import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
6
+ import { Loader } from '@hh.ru/magritte-ui-loader';
7
+ import { Text } from '@hh.ru/magritte-ui-typography';
8
+
9
+ var styles = {"button":"magritte-button___nL-Hn_1-0-1","loading":"magritte-loading___C0oPZ_1-0-1","postfix":"magritte-postfix___r0EZ6_1-0-1","icon":"magritte-icon___VpqJt_1-0-1","label":"magritte-label___EPgvj_1-0-1","border-radius":"magritte-border-radius___ObLLb_1-0-1","borderRadius":"magritte-border-radius___ObLLb_1-0-1","content":"magritte-content___JNpTZ_1-0-1","withLabel":"magritte-withLabel___3gZML_1-0-1","loader":"magritte-loader___EPezG_1-0-1","button_style-neutral":"magritte-button_style-neutral___bPUwu_1-0-1","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_1-0-1","button_style-inverse":"magritte-button_style-inverse___Xgf26_1-0-1","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_1-0-1"};
10
+
11
+ const FloatingButton = (props) => {
12
+ const { Element = 'button', style = 'neutral', disabled, borderRadius, icon: IconComponent, postfix, loading, host, children, className, inlineStyle, } = props;
13
+ let additionalAttributes;
14
+ const isServerEnv = useServerEnv();
15
+ if (Element === 'button') {
16
+ additionalAttributes = {
17
+ type: 'button',
18
+ };
19
+ }
20
+ else {
21
+ additionalAttributes = {
22
+ role: 'button',
23
+ tabIndex: disabled ? -1 : 0,
24
+ 'aria-disabled': disabled,
25
+ };
26
+ }
27
+ if (isServerEnv) {
28
+ return null;
29
+ }
30
+ return createPortal(jsx(Element, { ...additionalAttributes, disabled: !!disabled, className: classnames(styles.button, styles[`button_style-${style}`], {
31
+ [styles.borderRadius]: borderRadius,
32
+ [styles.withLabel]: !!children,
33
+ [styles.loading]: loading,
34
+ }, className), style: inlineStyle, children: jsxs("span", { className: styles.content, children: [IconComponent && (jsx("span", { className: styles.icon, children: jsx(IconComponent, {}) })), children && (jsx("span", { className: styles.label, children: jsx(Text, { typography: 'subtitle-1-semibold', children: children }) })), postfix && (jsx("span", { className: styles.postfix, children: jsx(Text, { typography: 'subtitle-1-semibold', children: postfix }) })), loading && (jsx("span", { className: styles.loader, children: jsx(Loader, { size: 24 }) }))] }) }), host?.current || document.body);
35
+ };
36
+
37
+ export { FloatingButton };
38
+ //# sourceMappingURL=FloatingButton.js.map
package/FloatingButton.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport type { PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nexport const FloatingButton: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'> = (props) => {\n const {\n Element = 'button',\n style = 'neutral',\n disabled,\n borderRadius,\n icon: IconComponent,\n postfix,\n loading,\n host,\n children,\n className,\n inlineStyle,\n } = props;\n let additionalAttributes: Record<string, unknown>;\n const isServerEnv = useServerEnv();\n\n if (Element === 'button') {\n additionalAttributes = {\n type: 'button',\n };\n } else {\n additionalAttributes = {\n role: 'button',\n tabIndex: disabled ? -1 : 0,\n 'aria-disabled': disabled,\n };\n }\n\n if (isServerEnv) {\n return null;\n }\n\n return createPortal(\n <Element\n {...additionalAttributes}\n disabled={!!disabled}\n className={classnames(\n styles.button,\n styles[`button_style-${style}`],\n {\n [styles.borderRadius]: borderRadius,\n [styles.withLabel]: !!children,\n [styles.loading]: loading,\n },\n className\n )}\n style={inlineStyle}\n >\n <span className={styles.content}>\n {IconComponent && (\n <span className={styles.icon}>\n <IconComponent />\n </span>\n )}\n {children && (\n <span className={styles.label}>\n <Text typography={'subtitle-1-semibold'}>{children}</Text>\n </span>\n )}\n {postfix && (\n <span className={styles.postfix}>\n <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n </span>\n )}\n {loading && (\n <span className={styles.loader}>\n <Loader size={24} />\n </span>\n )}\n </span>\n </Element>,\n host?.current || document.body\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAYa,MAAA,cAAc,GAAmE,CAAC,KAAK,KAAI;AACpG,IAAA,MAAM,EACF,OAAO,GAAG,QAAQ,EAClB,KAAK,GAAG,SAAS,EACjB,QAAQ,EACR,YAAY,EACZ,IAAI,EAAE,aAAa,EACnB,OAAO,EACP,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,GACd,GAAG,KAAK,CAAC;AACV,IAAA,IAAI,oBAA6C,CAAC;AAClD,IAAA,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC;AAEnC,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;AACtB,QAAA,oBAAoB,GAAG;AACnB,YAAA,IAAI,EAAE,QAAQ;SACjB,CAAC;KACL;SAAM;AACH,QAAA,oBAAoB,GAAG;AACnB,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;AAC3B,YAAA,eAAe,EAAE,QAAQ;SAC5B,CAAC;KACL;IAED,IAAI,WAAW,EAAE;AACb,QAAA,OAAO,IAAI,CAAC;KACf;IAED,OAAO,YAAY,CACfA,GAAA,CAAC,OAAO,EAAA,EAAA,GACA,oBAAoB,EACxB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,CAAgB,aAAA,EAAA,KAAK,CAAE,CAAA,CAAC,EAC/B;AACI,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY;AACnC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ;AAC9B,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;SAC5B,EACD,SAAS,CACZ,EACD,KAAK,EAAE,WAAW,EAAA,QAAA,EAElBC,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CAC1B,aAAa,KACVD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EACxB,QAAA,EAAAA,GAAA,CAAC,aAAa,EAAG,EAAA,CAAA,EAAA,CACd,CACV,EACA,QAAQ,KACLA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,KAAK,EACzB,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAE,qBAAqB,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EAAA,CACvD,CACV,EACA,OAAO,KACJA,cAAM,SAAS,EAAE,MAAM,CAAC,OAAO,EAC3B,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAE,qBAAqB,EAAG,QAAA,EAAA,OAAO,EAAQ,CAAA,EAAA,CACtD,CACV,EACA,OAAO,KACJA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAI,CAAA,EAAA,CACjB,CACV,CACE,EAAA,CAAA,EAAA,CACD,EACV,IAAI,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CACjC,CAAC;AACN;;;;"}
package/index.css ADDED
@@ -0,0 +1,248 @@
1
+ :root{
2
+ --magritte-color-component-button-background-neutral-v23-2-0:#000000;
3
+ --magritte-color-component-button-background-inverse-v23-2-0:#ffffff;
4
+ --magritte-color-component-button-background-state-neutral-disabled-v23-2-0:#DCE3EB;
5
+ --magritte-color-component-button-background-state-neutral-hovered-v23-2-0:#343c43;
6
+ --magritte-color-component-button-background-state-neutral-pressed-v23-2-0:#000000;
7
+ --magritte-color-component-button-background-state-neutral-focused-v23-2-0:#000000;
8
+ --magritte-color-component-button-background-state-inverse-hovered-v23-2-0:#EEF1F7;
9
+ --magritte-color-component-button-background-state-inverse-pressed-v23-2-0:#ffffff;
10
+ --magritte-color-component-button-background-state-inverse-focused-v23-2-0:#ffffff;
11
+ --magritte-color-component-button-background-state-inverse-disabled-v23-2-0:#ffffff;
12
+ --magritte-color-component-button-text-neutral-v23-2-0:#ffffff;
13
+ --magritte-color-component-button-text-inverse-v23-2-0:#0d1115;
14
+ --magritte-color-component-button-icon-neutral-v23-2-0:#ffffff;
15
+ --magritte-color-component-button-icon-inverse-v23-2-0:#0d1115;
16
+ --magritte-color-component-button-loader-icon-neutral-v23-2-0:#ffffff;
17
+ --magritte-color-component-button-loader-icon-inverse-v23-2-0:#000000;
18
+ --magritte-color-component-button-text-state-neutral-disabled-v23-2-0:#8293a2;
19
+ --magritte-color-component-button-text-state-inverse-disabled-v23-2-0:#8da0b0;
20
+ --magritte-color-component-button-icon-state-neutral-disabled-v23-2-0:#8293a2;
21
+ --magritte-color-component-button-icon-state-inverse-disabled-v23-2-0:#8da0b0;
22
+ --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-0:#0070ff7a;
23
+ --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-0:#a4c9fe7a;
24
+ --magritte-color-component-button-postfix-text-neutral-v23-2-0:#AABBCA;
25
+ --magritte-color-component-button-postfix-text-inverse-v23-2-0:#0d1115;
26
+ --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-0:#AABBCA;
27
+ --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-0:#96aabb;
28
+ --magritte-shadow-level-2-color-v23-2-0:#7090b03d;
29
+ --magritte-shadow-level-2-x-v23-2-0:0px;
30
+ --magritte-shadow-level-2-y-v23-2-0:8px;
31
+ --magritte-shadow-level-2-blur-v23-2-0:16px;
32
+ --magritte-shadow-level-2-spread-v23-2-0:0px;
33
+ --magritte-shadow-level-1-color-v23-2-0:#7090b029;
34
+ --magritte-shadow-level-1-x-v23-2-0:0px;
35
+ --magritte-shadow-level-1-y-v23-2-0:4px;
36
+ --magritte-shadow-level-1-blur-v23-2-0:12px;
37
+ --magritte-shadow-level-1-spread-v23-2-0:0px;
38
+ }
39
+
40
+ :root{
41
+ --magritte-semantic-border-width-tab-focused-v23-2-0:4px;
42
+ }
43
+
44
+ .magritte-night-theme{
45
+ --magritte-color-component-button-background-neutral-v23-2-0:#ffffff;
46
+ --magritte-color-component-button-background-inverse-v23-2-0:#303030;
47
+ --magritte-color-component-button-background-state-neutral-disabled-v23-2-0:#303030;
48
+ --magritte-color-component-button-background-state-inverse-disabled-v23-2-0:#262626;
49
+ --magritte-color-component-button-background-state-neutral-hovered-v23-2-0:#F1F1F1;
50
+ --magritte-color-component-button-background-state-neutral-pressed-v23-2-0:#ffffff;
51
+ --magritte-color-component-button-background-state-neutral-focused-v23-2-0:#ffffff;
52
+ --magritte-color-component-button-background-state-inverse-hovered-v23-2-0:#3B3B3B;
53
+ --magritte-color-component-button-background-state-inverse-pressed-v23-2-0:#303030;
54
+ --magritte-color-component-button-background-state-inverse-focused-v23-2-0:#303030;
55
+ --magritte-color-component-button-text-neutral-v23-2-0:#000000;
56
+ --magritte-color-component-button-text-inverse-v23-2-0:#ffffff;
57
+ --magritte-color-component-button-text-state-neutral-disabled-v23-2-0:#848484;
58
+ --magritte-color-component-button-text-state-inverse-disabled-v23-2-0:#848484;
59
+ --magritte-color-component-button-icon-state-neutral-disabled-v23-2-0:#848484;
60
+ --magritte-color-component-button-icon-state-inverse-disabled-v23-2-0:#848484;
61
+ --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-0:#0070ff7a;
62
+ --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-0:#a4c9fe7a;
63
+ --magritte-color-component-button-icon-neutral-v23-2-0:#000000;
64
+ --magritte-color-component-button-icon-inverse-v23-2-0:#ffffff;
65
+ --magritte-color-component-button-loader-icon-neutral-v23-2-0:#000000;
66
+ --magritte-color-component-button-loader-icon-inverse-v23-2-0:#ffffff;
67
+ --magritte-color-component-button-postfix-text-neutral-v23-2-0:#ABABAB;
68
+ --magritte-color-component-button-postfix-text-inverse-v23-2-0:#ABABAB;
69
+ --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-0:#535353;
70
+ --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-0:#535353;
71
+ --magritte-shadow-level-2-color-v23-2-0:#0000003d;
72
+ --magritte-shadow-level-2-x-v23-2-0:0px;
73
+ --magritte-shadow-level-2-y-v23-2-0:8px;
74
+ --magritte-shadow-level-2-blur-v23-2-0:16px;
75
+ --magritte-shadow-level-2-spread-v23-2-0:0px;
76
+ --magritte-shadow-level-1-color-v23-2-0:#00000029;
77
+ --magritte-shadow-level-1-x-v23-2-0:0px;
78
+ --magritte-shadow-level-1-y-v23-2-0:4px;
79
+ --magritte-shadow-level-1-blur-v23-2-0:12px;
80
+ --magritte-shadow-level-1-spread-v23-2-0:0px;
81
+ }
82
+
83
+ .magritte-zp-day-theme{
84
+ --magritte-color-component-button-background-neutral-v23-2-0:#000000;
85
+ --magritte-color-component-button-background-inverse-v23-2-0:#ffffff;
86
+ --magritte-color-component-button-background-state-neutral-disabled-v23-2-0:#DCE3EB;
87
+ --magritte-color-component-button-background-state-inverse-disabled-v23-2-0:#ffffff;
88
+ --magritte-color-component-button-background-state-neutral-hovered-v23-2-0:#343c43;
89
+ --magritte-color-component-button-background-state-neutral-pressed-v23-2-0:#000000;
90
+ --magritte-color-component-button-background-state-neutral-focused-v23-2-0:#000000;
91
+ --magritte-color-component-button-background-state-inverse-hovered-v23-2-0:#EEF1F7;
92
+ --magritte-color-component-button-background-state-inverse-pressed-v23-2-0:#ffffff;
93
+ --magritte-color-component-button-background-state-inverse-focused-v23-2-0:#ffffff;
94
+ --magritte-color-component-button-text-neutral-v23-2-0:#ffffff;
95
+ --magritte-color-component-button-text-inverse-v23-2-0:#0d1115;
96
+ --magritte-color-component-button-icon-neutral-v23-2-0:#ffffff;
97
+ --magritte-color-component-button-icon-inverse-v23-2-0:#0d1115;
98
+ --magritte-color-component-button-loader-icon-neutral-v23-2-0:#ffffff;
99
+ --magritte-color-component-button-loader-icon-inverse-v23-2-0:#000000;
100
+ --magritte-color-component-button-text-state-neutral-disabled-v23-2-0:#8293a2;
101
+ --magritte-color-component-button-text-state-inverse-disabled-v23-2-0:#8da0b0;
102
+ --magritte-color-component-button-icon-state-neutral-disabled-v23-2-0:#8293a2;
103
+ --magritte-color-component-button-icon-state-inverse-disabled-v23-2-0:#8da0b0;
104
+ --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-0:#0070ff7a;
105
+ --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-0:#a4c9fe7a;
106
+ --magritte-color-component-button-postfix-text-neutral-v23-2-0:#AABBCA;
107
+ --magritte-color-component-button-postfix-text-inverse-v23-2-0:#0d1115;
108
+ --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-0:#AABBCA;
109
+ --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-0:#96aabb;
110
+ --magritte-shadow-level-2-color-v23-2-0:#7090b03d;
111
+ --magritte-shadow-level-2-x-v23-2-0:0px;
112
+ --magritte-shadow-level-2-y-v23-2-0:8px;
113
+ --magritte-shadow-level-2-blur-v23-2-0:16px;
114
+ --magritte-shadow-level-2-spread-v23-2-0:0px;
115
+ --magritte-shadow-level-1-color-v23-2-0:#7090b029;
116
+ --magritte-shadow-level-1-x-v23-2-0:0px;
117
+ --magritte-shadow-level-1-y-v23-2-0:4px;
118
+ --magritte-shadow-level-1-blur-v23-2-0:12px;
119
+ --magritte-shadow-level-1-spread-v23-2-0:0px;
120
+ }
121
+ .magritte-button___nL-Hn_1-0-1{
122
+ display:inline-block;
123
+ padding:12px;
124
+ border-radius:24px;
125
+ position:fixed;
126
+ right:16px;
127
+ bottom:20px;
128
+ }
129
+ @media (min-width: 1020px){
130
+ body.magritte-old-layout .magritte-button___nL-Hn_1-0-1{
131
+ right:36px;
132
+ bottom:32px;
133
+ }
134
+ }
135
+ @media (min-width: 1024px){
136
+ body:not(.magritte-old-layout) .magritte-button___nL-Hn_1-0-1{
137
+ right:36px;
138
+ bottom:32px;
139
+ }
140
+ }
141
+ .magritte-button___nL-Hn_1-0-1:disabled,
142
+ .magritte-button___nL-Hn_1-0-1.magritte-loading___C0oPZ_1-0-1{
143
+ pointer-events:none;
144
+ cursor:not-allowed;
145
+ }
146
+ .magritte-loading___C0oPZ_1-0-1 .magritte-postfix___r0EZ6_1-0-1,
147
+ .magritte-loading___C0oPZ_1-0-1 .magritte-icon___VpqJt_1-0-1,
148
+ .magritte-loading___C0oPZ_1-0-1 .magritte-label___EPgvj_1-0-1{
149
+ visibility:hidden;
150
+ }
151
+ .magritte-border-radius___ObLLb_1-0-1{
152
+ border-radius:12px;
153
+ }
154
+ .magritte-content___JNpTZ_1-0-1{
155
+ display:flex;
156
+ position:relative;
157
+ }
158
+ .magritte-withLabel___3gZML_1-0-1 .magritte-icon___VpqJt_1-0-1{
159
+ padding-left:4px;
160
+ }
161
+ .magritte-label___EPgvj_1-0-1{
162
+ padding:1px 4px;
163
+ }
164
+ .magritte-postfix___r0EZ6_1-0-1{
165
+ padding:1px 4px;
166
+ }
167
+ .magritte-icon___VpqJt_1-0-1 + .magritte-label___EPgvj_1-0-1,
168
+ .magritte-icon___VpqJt_1-0-1 + .magritte-postfix___r0EZ6_1-0-1{
169
+ padding-left:8px;
170
+ }
171
+ .magritte-loader___EPezG_1-0-1{
172
+ position:absolute;
173
+ left:50%;
174
+ top:50%;
175
+ transform:translate(-50%, -50%);
176
+ line-height:0;
177
+ overflow:hidden;
178
+ }
179
+ .magritte-button_style-neutral___bPUwu_1-0-1{
180
+ background:var(--magritte-color-component-button-background-neutral-v23-2-0);
181
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-neutral-v23-2-0);
182
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-neutral-v23-2-0);
183
+ box-shadow:var(--magritte-shadow-level-2-x-v23-2-0) var(--magritte-shadow-level-2-y-v23-2-0) var(--magritte-shadow-level-2-blur-v23-2-0) var(--magritte-shadow-level-2-spread-v23-2-0) var(--magritte-shadow-level-2-color-v23-2-0);
184
+ --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-neutral-v23-2-0);
185
+ }
186
+ .magritte-button_style-neutral___bPUwu_1-0-1 .magritte-postfix___r0EZ6_1-0-1{
187
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-neutral-v23-2-0);
188
+ }
189
+ .magritte-button_style-neutral___bPUwu_1-0-1.focus-visible{
190
+ outline:var(--magritte-semantic-border-width-tab-focused-v23-2-0) solid var(--magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-0);
191
+ background:var(--magritte-color-component-button-background-state-neutral-focused-v23-2-0);
192
+ }
193
+ .magritte-button_style-neutral___bPUwu_1-0-1:not(:disabled):active{
194
+ background:var(--magritte-color-component-button-background-state-neutral-pressed-v23-2-0);
195
+ }
196
+ .magritte-button_style-neutral___bPUwu_1-0-1:disabled{
197
+ background:var(--magritte-color-component-button-background-state-neutral-disabled-v23-2-0);
198
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-neutral-disabled-v23-2-0);
199
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-neutral-disabled-v23-2-0);
200
+ }
201
+ .magritte-button_style-neutral___bPUwu_1-0-1:disabled .magritte-postfix___r0EZ6_1-0-1{
202
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-0);
203
+ }
204
+ @media (min-width: 1020px){
205
+ body.magritte-old-layout .magritte-button_style-neutral___bPUwu_1-0-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
206
+ background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-0);
207
+ }
208
+ }
209
+ @media (min-width: 1024px){
210
+ body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_1-0-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
211
+ background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-0);
212
+ }
213
+ }
214
+ .magritte-button_style-inverse___Xgf26_1-0-1{
215
+ background:var(--magritte-color-component-button-background-inverse-v23-2-0);
216
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-inverse-v23-2-0);
217
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-inverse-v23-2-0);
218
+ box-shadow:var(--magritte-shadow-level-1-x-v23-2-0) var(--magritte-shadow-level-1-y-v23-2-0) var(--magritte-shadow-level-1-blur-v23-2-0) var(--magritte-shadow-level-1-spread-v23-2-0) var(--magritte-shadow-level-1-color-v23-2-0);
219
+ --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-inverse-v23-2-0);
220
+ }
221
+ .magritte-button_style-inverse___Xgf26_1-0-1 .magritte-postfix___r0EZ6_1-0-1{
222
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-inverse-v23-2-0);
223
+ }
224
+ .magritte-button_style-inverse___Xgf26_1-0-1.focus-visible{
225
+ outline:var(--magritte-semantic-border-width-tab-focused-v23-2-0) solid var(--magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-0);
226
+ background:var(--magritte-color-component-button-background-state-inverse-focused-v23-2-0);
227
+ }
228
+ .magritte-button_style-inverse___Xgf26_1-0-1:not(:disabled):active{
229
+ background:var(--magritte-color-component-button-background-state-inverse-pressed-v23-2-0);
230
+ }
231
+ .magritte-button_style-inverse___Xgf26_1-0-1:disabled{
232
+ background:var(--magritte-color-component-button-background-state-inverse-disabled-v23-2-0);
233
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-inverse-disabled-v23-2-0);
234
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-inverse-disabled-v23-2-0);
235
+ }
236
+ .magritte-button_style-inverse___Xgf26_1-0-1:disabled .magritte-postfix___r0EZ6_1-0-1{
237
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-0);
238
+ }
239
+ @media (min-width: 1020px){
240
+ body.magritte-old-layout .magritte-button_style-inverse___Xgf26_1-0-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
241
+ background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-0);
242
+ }
243
+ }
244
+ @media (min-width: 1024px){
245
+ body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_1-0-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
246
+ background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-0);
247
+ }
248
+ }
package/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from '@hh.ru/magritte-ui-floating-button/FloatingButton';
2
+ export * from '@hh.ru/magritte-ui-floating-button/types';
package/index.js ADDED
@@ -0,0 +1,9 @@
1
+ import './index.css';
2
+ export { FloatingButton } from './FloatingButton.js';
3
+ import 'react/jsx-runtime';
4
+ import 'react-dom';
5
+ import 'classnames';
6
+ import '@hh.ru/magritte-common-is-server-env';
7
+ import '@hh.ru/magritte-ui-loader';
8
+ import '@hh.ru/magritte-ui-typography';
9
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@hh.ru/magritte-ui-floating-button",
3
+ "version": "1.0.1",
4
+ "main": "index.js",
5
+ "types": "index.d.ts",
6
+ "sideEffects": [
7
+ "index.css"
8
+ ],
9
+ "scripts": {
10
+ "build": "yarn root:build $(pwd)",
11
+ "build-test-branch": "yarn root:build-test-branch $(pwd)",
12
+ "prepack": "yarn root:prepack $(pwd)",
13
+ "postpublish": "yarn root:postpublish $(pwd)",
14
+ "stylelint-check": "yarn root:stylelint-check $(pwd)",
15
+ "eslint-check": "yarn root:eslint-check $(pwd)",
16
+ "ts-config": "yarn root:ts-config $(pwd)",
17
+ "ts-check": "yarn root:ts-check $(pwd)",
18
+ "test": "yarn root:test $(pwd)",
19
+ "watch": "yarn root:watch $(pwd)"
20
+ },
21
+ "dependencies": {
22
+ "@hh.ru/magritte-common-is-server-env": "1.0.7",
23
+ "@hh.ru/magritte-design-tokens": "23.2.0",
24
+ "@hh.ru/magritte-types": "5.0.4",
25
+ "@hh.ru/magritte-ui-badge": "3.1.2",
26
+ "@hh.ru/magritte-ui-breakpoint": "6.0.0",
27
+ "@hh.ru/magritte-ui-loader": "2.0.6",
28
+ "@hh.ru/magritte-ui-typography": "4.2.1"
29
+ },
30
+ "peerDependencies": {
31
+ "classnames": ">=2.3.2",
32
+ "react": ">=18.2.0",
33
+ "react-dom": ">=18.2.0"
34
+ },
35
+ "publishConfig": {
36
+ "access": "public"
37
+ },
38
+ "gitHead": "8cf6122feeba29a8a936c172d0d6d0e2583463b9"
39
+ }
package/types.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { CSSProperties, PropsWithChildren, ReactElement, ReactNode, type RefObject } from 'react';
2
+ import { IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';
3
+ export type FloatingButtonStyle = 'neutral' | 'inverse';
4
+ export interface FloatingButtonProps extends PropsWithChildren {
5
+ /** Кастомный компонент 'a', 'button', 'span' или функция */
6
+ Element?: 'a' | 'button' | 'span';
7
+ style?: FloatingButtonStyle;
8
+ icon?: IconWrapperComponentSize24;
9
+ /** Скругления */
10
+ borderRadius?: boolean;
11
+ /** Компонент Badge */
12
+ badge?: ReactElement;
13
+ /** Постфикс */
14
+ postfix?: ReactNode;
15
+ /** Отображение индикации загрузки */
16
+ loading?: boolean;
17
+ /** Заблокирована ли кнопка */
18
+ disabled?: boolean;
19
+ /** Хост для отрисовки */
20
+ host?: RefObject<HTMLElement>;
21
+ /** css-класс для позиционирования кнопки */
22
+ className?: string;
23
+ /** инлайн стили для позиционирования кнопки */
24
+ inlineStyle?: CSSProperties;
25
+ }
package/types.js ADDED
@@ -0,0 +1,3 @@
1
+ import './index.css';
2
+
3
+ //# sourceMappingURL=types.js.map
package/types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}