@alfalab/core-components-radio-group 3.0.8 → 4.0.0

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 (92) hide show
  1. package/Component.desktop.d.ts +6 -0
  2. package/Component.desktop.js +20 -0
  3. package/Component.mobile.d.ts +6 -0
  4. package/Component.mobile.js +20 -0
  5. package/Component.responsive.d.ts +18 -0
  6. package/Component.responsive.js +26 -0
  7. package/{Component.d.ts → components/base-radio-group/Component.d.ts} +9 -3
  8. package/{cssm → components/base-radio-group}/Component.js +18 -15
  9. package/{index.css → components/base-radio-group/index.css} +25 -21
  10. package/components/base-radio-group/index.d.ts +1 -0
  11. package/components/base-radio-group/index.js +13 -0
  12. package/cssm/Component.desktop.d.ts +6 -0
  13. package/cssm/Component.desktop.js +20 -0
  14. package/cssm/Component.mobile.d.ts +6 -0
  15. package/cssm/Component.mobile.js +20 -0
  16. package/cssm/Component.responsive.d.ts +18 -0
  17. package/cssm/Component.responsive.js +29 -0
  18. package/{esm → cssm/components/base-radio-group}/Component.d.ts +9 -3
  19. package/{Component.js → cssm/components/base-radio-group/Component.js} +17 -16
  20. package/cssm/components/base-radio-group/index.d.ts +1 -0
  21. package/cssm/components/base-radio-group/index.js +14 -0
  22. package/cssm/{index.module.css → components/base-radio-group/index.module.css} +7 -3
  23. package/cssm/desktop.d.ts +2 -0
  24. package/cssm/desktop.js +16 -0
  25. package/cssm/desktop.module.css +27 -0
  26. package/cssm/index.d.ts +2 -1
  27. package/cssm/index.js +9 -3
  28. package/cssm/mobile.d.ts +2 -0
  29. package/cssm/mobile.js +16 -0
  30. package/cssm/mobile.module.css +29 -0
  31. package/cssm/vars.css +19 -0
  32. package/desktop.css +28 -0
  33. package/desktop.d.ts +2 -0
  34. package/desktop.js +14 -0
  35. package/esm/Component.desktop.d.ts +6 -0
  36. package/esm/Component.desktop.js +12 -0
  37. package/esm/Component.mobile.d.ts +6 -0
  38. package/esm/Component.mobile.js +12 -0
  39. package/esm/Component.responsive.d.ts +18 -0
  40. package/esm/Component.responsive.js +18 -0
  41. package/{cssm → esm/components/base-radio-group}/Component.d.ts +9 -3
  42. package/esm/components/base-radio-group/Component.js +52 -0
  43. package/esm/{index.css → components/base-radio-group/index.css} +25 -21
  44. package/esm/components/base-radio-group/index.d.ts +1 -0
  45. package/esm/components/base-radio-group/index.js +5 -0
  46. package/esm/desktop.css +28 -0
  47. package/esm/desktop.d.ts +2 -0
  48. package/esm/desktop.js +6 -0
  49. package/esm/index.d.ts +2 -1
  50. package/esm/index.js +5 -1
  51. package/esm/mobile.css +30 -0
  52. package/esm/mobile.d.ts +2 -0
  53. package/esm/mobile.js +6 -0
  54. package/index.d.ts +2 -1
  55. package/index.js +6 -2
  56. package/mobile.css +30 -0
  57. package/mobile.d.ts +2 -0
  58. package/mobile.js +14 -0
  59. package/modern/Component.desktop.d.ts +6 -0
  60. package/modern/Component.desktop.js +11 -0
  61. package/modern/Component.mobile.d.ts +6 -0
  62. package/modern/Component.mobile.js +11 -0
  63. package/modern/Component.responsive.d.ts +18 -0
  64. package/modern/Component.responsive.js +16 -0
  65. package/modern/{Component.d.ts → components/base-radio-group/Component.d.ts} +9 -3
  66. package/modern/{Component.js → components/base-radio-group/Component.js} +13 -11
  67. package/modern/{index.css → components/base-radio-group/index.css} +25 -21
  68. package/modern/components/base-radio-group/index.d.ts +1 -0
  69. package/modern/components/base-radio-group/index.js +4 -0
  70. package/modern/desktop.css +28 -0
  71. package/modern/desktop.d.ts +2 -0
  72. package/modern/desktop.js +5 -0
  73. package/modern/index.d.ts +2 -1
  74. package/modern/index.js +5 -1
  75. package/modern/mobile.css +30 -0
  76. package/modern/mobile.d.ts +2 -0
  77. package/modern/mobile.js +5 -0
  78. package/package.json +21 -3
  79. package/src/Component.desktop.tsx +11 -0
  80. package/src/Component.mobile.tsx +11 -0
  81. package/src/Component.responsive.tsx +27 -0
  82. package/src/components/base-radio-group/Component.tsx +237 -0
  83. package/src/components/base-radio-group/index.module.css +87 -0
  84. package/src/components/base-radio-group/index.ts +1 -0
  85. package/src/desktop.module.css +13 -0
  86. package/src/desktop.ts +1 -0
  87. package/src/index.ts +1 -0
  88. package/src/mobile.module.css +13 -0
  89. package/src/mobile.ts +1 -0
  90. package/src/vars.css +13 -0
  91. package/esm/Component.js +0 -50
  92. package/send-stats.js +0 -82
@@ -0,0 +1,2 @@
1
+ export * from "./Component.mobile";
2
+ export {};
package/cssm/mobile.js ADDED
@@ -0,0 +1,16 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Component_mobile = require('./Component.mobile.js');
6
+ require('tslib');
7
+ require('react');
8
+ require('./components/base-radio-group/Component.js');
9
+ require('classnames');
10
+ require('@alfalab/hooks');
11
+ require('./components/base-radio-group/index.module.css');
12
+ require('./mobile.module.css');
13
+
14
+
15
+
16
+ exports.RadioGroupMobile = Component_mobile.RadioGroupMobile;
@@ -0,0 +1,29 @@
1
+ :root {
2
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root {
5
+ } :root {
6
+
7
+ /* Hard */
8
+
9
+ /* Up */
10
+
11
+ /* Hard up */
12
+ } :root {
13
+ } :root {
14
+ --gap-3xs: 2px;
15
+ --gap-2xs: 4px;
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+
20
+ /* mobile */
21
+ --radio-group-mobile-sub-padding-left: var(--gap-2xs);
22
+ --radio-group-mobile-list-padding-left: var(--gap-3xs);
23
+ } .radioList {
24
+ padding-left: var(--radio-group-mobile-list-padding-left);
25
+ } .label {
26
+ padding-left: var(--radio-group-mobile-sub-padding-left);
27
+ } .sub {
28
+ padding-left: var(--radio-group-mobile-sub-padding-left);
29
+ }
package/cssm/vars.css ADDED
@@ -0,0 +1,19 @@
1
+ :root {
2
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root {
5
+ } :root {
6
+
7
+ /* Hard */
8
+
9
+ /* Up */
10
+
11
+ /* Hard up */
12
+ } :root {
13
+ } :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+
18
+ /* mobile */
19
+ }
package/desktop.css ADDED
@@ -0,0 +1,28 @@
1
+ /* hash: 8ejm5 */
2
+ :root {
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root {
6
+ } :root {
7
+
8
+ /* Hard */
9
+
10
+ /* Up */
11
+
12
+ /* Hard up */
13
+ } :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ --radio-group-sub-padding-left: 0;
19
+ --radio-group-list-padding-left: 0;
20
+
21
+ /* mobile */
22
+ } .radio-group__radioList_1ud02 {
23
+ padding-left: var(--radio-group-list-padding-left);
24
+ } .radio-group__label_1ud02 {
25
+ padding-left: var(--radio-group-sub-padding-left);
26
+ } .radio-group__sub_1ud02 {
27
+ padding-left: var(--radio-group-sub-padding-left);
28
+ }
package/desktop.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./Component.desktop";
2
+ export {};
package/desktop.js ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Component_desktop = require('./Component.desktop.js');
6
+ require('tslib');
7
+ require('react');
8
+ require('./components/base-radio-group/Component.js');
9
+ require('classnames');
10
+ require('@alfalab/hooks');
11
+
12
+
13
+
14
+ exports.RadioGroupDesktop = Component_desktop.RadioGroupDesktop;
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BaseRadioGroupProps } from "./components/base-radio-group/index";
4
+ type RadioGroupDesktopProps = Omit<BaseRadioGroupProps, 'styles'>;
5
+ declare const RadioGroupDesktop: React.ForwardRefExoticComponent<RadioGroupDesktopProps & React.RefAttributes<HTMLDivElement>>;
6
+ export { RadioGroupDesktopProps, RadioGroupDesktop };
@@ -0,0 +1,12 @@
1
+ import { __assign } from 'tslib';
2
+ import React, { forwardRef } from 'react';
3
+ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
4
+ import 'classnames';
5
+ import '@alfalab/hooks';
6
+
7
+ var styles = {"radioList":"radio-group__radioList_1ud02","label":"radio-group__label_1ud02","sub":"radio-group__sub_1ud02"};
8
+ require('./desktop.css')
9
+
10
+ var RadioGroupDesktop = forwardRef(function (props, ref) { return React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles })); });
11
+
12
+ export { RadioGroupDesktop };
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BaseRadioGroupProps } from "./components/base-radio-group/index";
4
+ type RadioGroupMobileProps = Omit<BaseRadioGroupProps, 'styles'>;
5
+ declare const RadioGroupMobile: React.ForwardRefExoticComponent<RadioGroupMobileProps & React.RefAttributes<HTMLDivElement>>;
6
+ export { RadioGroupMobileProps, RadioGroupMobile };
@@ -0,0 +1,12 @@
1
+ import { __assign } from 'tslib';
2
+ import React, { forwardRef } from 'react';
3
+ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
4
+ import 'classnames';
5
+ import '@alfalab/hooks';
6
+
7
+ var styles = {"radioList":"radio-group__radioList_srwz3","label":"radio-group__label_srwz3","sub":"radio-group__sub_srwz3"};
8
+ require('./mobile.css')
9
+
10
+ var RadioGroupMobile = forwardRef(function (props, ref) { return (React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles }))); });
11
+
12
+ export { RadioGroupMobile };
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BaseRadioGroupProps } from "./components/base-radio-group/index";
4
+ type RadioGroupProps = Omit<BaseRadioGroupProps, 'styles'> & {
5
+ /**
6
+ * Контрольная точка, с нее начинается desktop версия
7
+ * @default 1024
8
+ */
9
+ breakpoint?: number;
10
+ };
11
+ declare const RadioGroup: React.ForwardRefExoticComponent<Omit<BaseRadioGroupProps, "styles"> & {
12
+ /**
13
+ * Контрольная точка, с нее начинается desktop версия
14
+ * @default 1024
15
+ */
16
+ breakpoint?: number | undefined;
17
+ } & React.RefAttributes<HTMLDivElement>>;
18
+ export { RadioGroupProps, RadioGroup };
@@ -0,0 +1,18 @@
1
+ import { __rest, __assign } from 'tslib';
2
+ import React, { forwardRef } from 'react';
3
+ import { useMatchMedia } from '@alfalab/core-components-mq/esm';
4
+ import { RadioGroupDesktop } from './Component.desktop.js';
5
+ import { RadioGroupMobile } from './Component.mobile.js';
6
+ import './components/base-radio-group/Component.js';
7
+ import 'classnames';
8
+ import '@alfalab/hooks';
9
+
10
+ var RadioGroup = forwardRef(function (_a, ref) {
11
+ var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
12
+ var query = "(min-width: ".concat(breakpoint, "px)");
13
+ var isDesktop = useMatchMedia(query)[0];
14
+ var Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
15
+ return React.createElement(Component, __assign({ ref: ref }, restProps));
16
+ });
17
+
18
+ export { RadioGroup };
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import { ChangeEvent, FocusEvent, MouseEvent, ReactNode } from "react";
4
4
  type Direction = 'horizontal' | 'vertical';
5
5
  type RadioGroupType = 'radio' | 'tag';
6
- type RadioGroupProps = {
6
+ type BaseRadioGroupProps = {
7
7
  /**
8
8
  * Заголовок группы
9
9
  */
@@ -63,6 +63,12 @@ type RadioGroupProps = {
63
63
  * Value выбранного дочернего элемента
64
64
  */
65
65
  value?: string | null;
66
+ /**
67
+ * Основные стили компонента.
68
+ */
69
+ styles: {
70
+ [key: string]: string;
71
+ };
66
72
  };
67
- declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
68
- export { Direction, RadioGroupType, RadioGroupProps, RadioGroup };
73
+ declare const BaseRadioGroup: React.ForwardRefExoticComponent<BaseRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
74
+ export { Direction, RadioGroupType, BaseRadioGroupProps, BaseRadioGroup };
@@ -0,0 +1,52 @@
1
+ import { __assign } from 'tslib';
2
+ import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
3
+ import cn from 'classnames';
4
+ import { useDidUpdateEffect } from '@alfalab/hooks';
5
+
6
+ var commonStyles = {"component":"radio-group__component_laaha","error":"radio-group__error_laaha","tag":"radio-group__tag_laaha","radioList":"radio-group__radioList_laaha","vertical":"radio-group__vertical_laaha","radio":"radio-group__radio_laaha","horizontal":"radio-group__horizontal_laaha","tagLabel":"radio-group__tagLabel_laaha","label":"radio-group__label_laaha","sub":"radio-group__sub_laaha","errorMessage":"radio-group__errorMessage_laaha","hint":"radio-group__hint_laaha","hiddenInput":"radio-group__hiddenInput_laaha"};
7
+ require('./index.css')
8
+
9
+ var BaseRadioGroup = forwardRef(function (_a, ref) {
10
+ var _b, _c;
11
+ var children = _a.children, className = _a.className, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
12
+ var _g = useState(''), stateValue = _g[0], setStateValue = _g[1];
13
+ useDidUpdateEffect(function () {
14
+ setStateValue(value);
15
+ }, [value]);
16
+ var isChecked = function (childValue) {
17
+ return value !== null && (value || stateValue) === childValue;
18
+ };
19
+ var handleChange = function (event, childValue) {
20
+ setStateValue(childValue);
21
+ if (onChange) {
22
+ onChange(event, { name: name, value: childValue });
23
+ }
24
+ };
25
+ var renderRadio = function (child) {
26
+ var _a = child.props, childClassName = _a.className, childValue = _a.value;
27
+ return cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn(childClassName, commonStyles.radio) }));
28
+ };
29
+ var renderTag = function (child) {
30
+ var childValue = child.props.value;
31
+ var checked = isChecked(childValue);
32
+ var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
33
+ return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
34
+ React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles.hiddenInput, value: child.props.value }),
35
+ clone));
36
+ };
37
+ var errorMessage = typeof error === 'boolean' ? '' : error;
38
+ return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], commonStyles[direction], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
39
+ label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label) }, label)) : null,
40
+ children ? (React.createElement("div", { className: cn(commonStyles.radioList, (_c = {},
41
+ _c[styles.radioList] = type === 'radio',
42
+ _c)), onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
43
+ if (isValidElement(child)) {
44
+ return type === 'radio' ? renderRadio(child) : renderTag(child);
45
+ }
46
+ return null;
47
+ }))) : null,
48
+ errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.errorMessage), role: 'alert' }, errorMessage)),
49
+ hint && !errorMessage && (React.createElement("span", { className: cn(commonStyles.sub, styles.sub, commonStyles.hint) }, hint))));
50
+ });
51
+
52
+ export { BaseRadioGroup };
@@ -1,4 +1,4 @@
1
- /* hash: qfvvr */
1
+ /* hash: 2q0m4 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -28,57 +28,61 @@
28
28
  --radio-group-error-color: var(--color-light-text-negative);
29
29
  --radio-group-hint-color: var(--color-light-text-secondary);
30
30
  --radio-group-label-color: var(--color-light-text-primary);
31
- } .radio-group__component_phgvy {
31
+
32
+ /* mobile */
33
+ } .radio-group__component_laaha {
32
34
  display: flex;
33
35
  flex-direction: column;
34
- } .radio-group__error_phgvy {
35
- padding-left: var(--gap-xs);
36
- border-left: 1px solid var(--radio-group-error-color);
37
- } .radio-group__radioList_phgvy {
36
+ } .radio-group__error_laaha {
37
+ padding-left: var(--gap-s);
38
+ border-left: 1px solid var(--radio-group-error-color)
39
+ } .radio-group__error_laaha.radio-group__tag_laaha {
40
+ padding-left: var(--gap-xs);
41
+ } .radio-group__radioList_laaha {
38
42
  display: flex;
39
- } .radio-group__vertical_phgvy .radio-group__radioList_phgvy {
43
+ } .radio-group__vertical_laaha .radio-group__radioList_laaha {
40
44
  flex-direction: column;
41
45
  align-items: flex-start;
42
- } .radio-group__vertical_phgvy .radio-group__radio_phgvy {
46
+ } .radio-group__vertical_laaha .radio-group__radio_laaha {
43
47
  margin-bottom: var(--gap-m)
44
- } .radio-group__vertical_phgvy .radio-group__radio_phgvy:last-child {
48
+ } .radio-group__vertical_laaha .radio-group__radio_laaha:last-child {
45
49
  margin-bottom: 0;
46
- } .radio-group__horizontal_phgvy .radio-group__radioList_phgvy {
50
+ } .radio-group__horizontal_laaha .radio-group__radioList_laaha {
47
51
  flex-wrap: wrap;
48
52
  margin-bottom: var(--gap-xs-neg);
49
- } .radio-group__horizontal_phgvy .radio-group__radio_phgvy {
53
+ } .radio-group__horizontal_laaha .radio-group__radio_laaha {
50
54
  margin-right: var(--gap-xl);
51
55
  margin-bottom: var(--gap-xs);
52
- } .radio-group__horizontal_phgvy .radio-group__tagLabel_phgvy {
56
+ } .radio-group__horizontal_laaha .radio-group__tagLabel_laaha {
53
57
  margin-right: var(--gap-xs);
54
- } .radio-group__horizontal_phgvy .radio-group__radio_phgvy:last-child,
55
- .radio-group__horizontal_phgvy .radio-group__tagLabel_phgvy:last-child {
58
+ } .radio-group__horizontal_laaha .radio-group__radio_laaha:last-child,
59
+ .radio-group__horizontal_laaha .radio-group__tagLabel_laaha:last-child {
56
60
  margin-right: 0;
57
- } .radio-group__label_phgvy {
61
+ } .radio-group__label_laaha {
58
62
  font-size: 16px;
59
63
  line-height: 24px;
60
64
  font-weight: 400;
61
65
  margin-bottom: var(--gap-s);
62
66
  color: var(--radio-group-label-color);
63
- } .radio-group__sub_phgvy {
67
+ } .radio-group__sub_laaha {
64
68
  font-size: 14px;
65
69
  line-height: 18px;
66
70
  font-weight: 400;
67
71
  margin-top: var(--gap-s);
68
- } .radio-group__errorMessage_phgvy {
72
+ } .radio-group__errorMessage_laaha {
69
73
  color: var(--radio-group-error-color);
70
- } .radio-group__hint_phgvy {
74
+ } .radio-group__hint_laaha {
71
75
  color: var(--radio-group-hint-color);
72
- } .radio-group__hiddenInput_phgvy {
76
+ } .radio-group__hiddenInput_laaha {
73
77
  position: absolute;
74
78
  z-index: -1;
75
79
  top: 0;
76
80
  left: 0;
77
81
  opacity: 0
78
- } .radio-group__hiddenInput_phgvy:focus ~ button {
82
+ } .radio-group__hiddenInput_laaha:focus ~ button {
79
83
  outline: 2px solid var(--focus-color);
80
84
  outline-offset: 2px;
81
- } .radio-group__tagLabel_phgvy {
85
+ } .radio-group__tagLabel_laaha {
82
86
  position: relative;
83
87
  max-width: 100%;
84
88
  }
@@ -0,0 +1 @@
1
+ export * from "./Component";
@@ -0,0 +1,5 @@
1
+ export { BaseRadioGroup } from './Component.js';
2
+ import 'tslib';
3
+ import 'react';
4
+ import 'classnames';
5
+ import '@alfalab/hooks';
@@ -0,0 +1,28 @@
1
+ /* hash: 8ejm5 */
2
+ :root {
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root {
6
+ } :root {
7
+
8
+ /* Hard */
9
+
10
+ /* Up */
11
+
12
+ /* Hard up */
13
+ } :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ --radio-group-sub-padding-left: 0;
19
+ --radio-group-list-padding-left: 0;
20
+
21
+ /* mobile */
22
+ } .radio-group__radioList_1ud02 {
23
+ padding-left: var(--radio-group-list-padding-left);
24
+ } .radio-group__label_1ud02 {
25
+ padding-left: var(--radio-group-sub-padding-left);
26
+ } .radio-group__sub_1ud02 {
27
+ padding-left: var(--radio-group-sub-padding-left);
28
+ }
@@ -0,0 +1,2 @@
1
+ export * from "./Component.desktop";
2
+ export {};
package/esm/desktop.js ADDED
@@ -0,0 +1,6 @@
1
+ export { RadioGroupDesktop } from './Component.desktop.js';
2
+ import 'tslib';
3
+ import 'react';
4
+ import './components/base-radio-group/Component.js';
5
+ import 'classnames';
6
+ import '@alfalab/hooks';
package/esm/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from "./Component";
1
+ export * from "./Component.responsive";
2
+ export {};
package/esm/index.js CHANGED
@@ -1,5 +1,9 @@
1
- export { RadioGroup } from './Component.js';
1
+ export { RadioGroup } from './Component.responsive.js';
2
2
  import 'tslib';
3
3
  import 'react';
4
+ import '@alfalab/core-components-mq/esm';
5
+ import './Component.desktop.js';
6
+ import './components/base-radio-group/Component.js';
4
7
  import 'classnames';
5
8
  import '@alfalab/hooks';
9
+ import './Component.mobile.js';
package/esm/mobile.css ADDED
@@ -0,0 +1,30 @@
1
+ /* hash: 1ptzr */
2
+ :root {
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root {
6
+ } :root {
7
+
8
+ /* Hard */
9
+
10
+ /* Up */
11
+
12
+ /* Hard up */
13
+ } :root {
14
+ } :root {
15
+ --gap-3xs: 2px;
16
+ --gap-2xs: 4px;
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+
21
+ /* mobile */
22
+ --radio-group-mobile-sub-padding-left: var(--gap-2xs);
23
+ --radio-group-mobile-list-padding-left: var(--gap-3xs);
24
+ } .radio-group__radioList_srwz3 {
25
+ padding-left: var(--radio-group-mobile-list-padding-left);
26
+ } .radio-group__label_srwz3 {
27
+ padding-left: var(--radio-group-mobile-sub-padding-left);
28
+ } .radio-group__sub_srwz3 {
29
+ padding-left: var(--radio-group-mobile-sub-padding-left);
30
+ }
@@ -0,0 +1,2 @@
1
+ export * from "./Component.mobile";
2
+ export {};
package/esm/mobile.js ADDED
@@ -0,0 +1,6 @@
1
+ export { RadioGroupMobile } from './Component.mobile.js';
2
+ import 'tslib';
3
+ import 'react';
4
+ import './components/base-radio-group/Component.js';
5
+ import 'classnames';
6
+ import '@alfalab/hooks';
package/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export * from "./Component";
1
+ export * from "./Component.responsive";
2
+ export {};
package/index.js CHANGED
@@ -2,12 +2,16 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Component = require('./Component.js');
5
+ var Component_responsive = require('./Component.responsive.js');
6
6
  require('tslib');
7
7
  require('react');
8
+ require('@alfalab/core-components-mq');
9
+ require('./Component.desktop.js');
10
+ require('./components/base-radio-group/Component.js');
8
11
  require('classnames');
9
12
  require('@alfalab/hooks');
13
+ require('./Component.mobile.js');
10
14
 
11
15
 
12
16
 
13
- exports.RadioGroup = Component.RadioGroup;
17
+ exports.RadioGroup = Component_responsive.RadioGroup;
package/mobile.css ADDED
@@ -0,0 +1,30 @@
1
+ /* hash: 1ptzr */
2
+ :root {
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root {
6
+ } :root {
7
+
8
+ /* Hard */
9
+
10
+ /* Up */
11
+
12
+ /* Hard up */
13
+ } :root {
14
+ } :root {
15
+ --gap-3xs: 2px;
16
+ --gap-2xs: 4px;
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+
21
+ /* mobile */
22
+ --radio-group-mobile-sub-padding-left: var(--gap-2xs);
23
+ --radio-group-mobile-list-padding-left: var(--gap-3xs);
24
+ } .radio-group__radioList_srwz3 {
25
+ padding-left: var(--radio-group-mobile-list-padding-left);
26
+ } .radio-group__label_srwz3 {
27
+ padding-left: var(--radio-group-mobile-sub-padding-left);
28
+ } .radio-group__sub_srwz3 {
29
+ padding-left: var(--radio-group-mobile-sub-padding-left);
30
+ }
package/mobile.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./Component.mobile";
2
+ export {};
package/mobile.js ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Component_mobile = require('./Component.mobile.js');
6
+ require('tslib');
7
+ require('react');
8
+ require('./components/base-radio-group/Component.js');
9
+ require('classnames');
10
+ require('@alfalab/hooks');
11
+
12
+
13
+
14
+ exports.RadioGroupMobile = Component_mobile.RadioGroupMobile;
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BaseRadioGroupProps } from "./components/base-radio-group/index";
4
+ type RadioGroupDesktopProps = Omit<BaseRadioGroupProps, 'styles'>;
5
+ declare const RadioGroupDesktop: React.ForwardRefExoticComponent<RadioGroupDesktopProps & React.RefAttributes<HTMLDivElement>>;
6
+ export { RadioGroupDesktopProps, RadioGroupDesktop };
@@ -0,0 +1,11 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
3
+ import 'classnames';
4
+ import '@alfalab/hooks';
5
+
6
+ const styles = {"radioList":"radio-group__radioList_1ud02","label":"radio-group__label_1ud02","sub":"radio-group__sub_1ud02"};
7
+ require('./desktop.css')
8
+
9
+ const RadioGroupDesktop = forwardRef((props, ref) => React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles }));
10
+
11
+ export { RadioGroupDesktop };
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BaseRadioGroupProps } from "./components/base-radio-group/index";
4
+ type RadioGroupMobileProps = Omit<BaseRadioGroupProps, 'styles'>;
5
+ declare const RadioGroupMobile: React.ForwardRefExoticComponent<RadioGroupMobileProps & React.RefAttributes<HTMLDivElement>>;
6
+ export { RadioGroupMobileProps, RadioGroupMobile };
@@ -0,0 +1,11 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
3
+ import 'classnames';
4
+ import '@alfalab/hooks';
5
+
6
+ const styles = {"radioList":"radio-group__radioList_srwz3","label":"radio-group__label_srwz3","sub":"radio-group__sub_srwz3"};
7
+ require('./mobile.css')
8
+
9
+ const RadioGroupMobile = forwardRef((props, ref) => (React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles })));
10
+
11
+ export { RadioGroupMobile };
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { BaseRadioGroupProps } from "./components/base-radio-group/index";
4
+ type RadioGroupProps = Omit<BaseRadioGroupProps, 'styles'> & {
5
+ /**
6
+ * Контрольная точка, с нее начинается desktop версия
7
+ * @default 1024
8
+ */
9
+ breakpoint?: number;
10
+ };
11
+ declare const RadioGroup: React.ForwardRefExoticComponent<Omit<BaseRadioGroupProps, "styles"> & {
12
+ /**
13
+ * Контрольная точка, с нее начинается desktop версия
14
+ * @default 1024
15
+ */
16
+ breakpoint?: number | undefined;
17
+ } & React.RefAttributes<HTMLDivElement>>;
18
+ export { RadioGroupProps, RadioGroup };