@alfalab/core-components-switch 4.5.6 → 4.5.7-snapshot-1393ffa
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.
- package/Component.js +18 -23
- package/Component.js.map +1 -0
- package/cssm/Component.js +3 -2
- package/cssm/Component.js.map +1 -0
- package/cssm/default.module.css +2 -35
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +12 -43
- package/cssm/inverted.module.css +2 -35
- package/{Component.d.ts → cssm/src/Component.d.ts} +6 -8
- package/cssm/src/index.d.ts +1 -0
- package/cssm/src/types/colors.d.ts +1 -0
- package/cssm/types/colors.js +1 -0
- package/cssm/types/colors.js.map +1 -0
- package/default.css +13 -47
- package/default.module.css.js +8 -0
- package/default.module.css.js.map +1 -0
- package/esm/Component.js +4 -9
- package/esm/Component.js.map +1 -0
- package/esm/default.css +13 -47
- package/esm/default.module.css.js +6 -0
- package/esm/default.module.css.js.map +1 -0
- package/esm/index.css +27 -59
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/esm/inverted.css +13 -47
- package/esm/inverted.module.css.js +6 -0
- package/esm/inverted.module.css.js.map +1 -0
- package/{cssm → esm/src}/Component.d.ts +6 -8
- package/esm/src/index.d.ts +1 -0
- package/esm/src/types/colors.d.ts +1 -0
- package/esm/types/colors.js +1 -0
- package/esm/types/colors.js.map +1 -0
- package/index.css +27 -59
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/inverted.css +13 -47
- package/inverted.module.css.js +8 -0
- package/inverted.module.css.js.map +1 -0
- package/modern/Component.js +4 -9
- package/modern/Component.js.map +1 -0
- package/modern/default.css +13 -47
- package/modern/default.module.css.js +6 -0
- package/modern/default.module.css.js.map +1 -0
- package/modern/index.css +27 -59
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/modern/inverted.css +13 -47
- package/modern/inverted.module.css.js +6 -0
- package/modern/inverted.module.css.js.map +1 -0
- package/{esm → modern/src}/Component.d.ts +6 -8
- package/modern/src/index.d.ts +1 -0
- package/modern/src/types/colors.d.ts +1 -0
- package/modern/types/colors.js +1 -0
- package/modern/types/colors.js.map +1 -0
- package/moderncssm/Component.js +1 -0
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/default.module.css +0 -13
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -18
- package/moderncssm/inverted.module.css +0 -13
- package/{modern → moderncssm/src}/Component.d.ts +6 -8
- package/moderncssm/src/index.d.ts +1 -0
- package/moderncssm/src/types/colors.d.ts +1 -0
- package/moderncssm/types/colors.js +1 -0
- package/moderncssm/types/colors.js.map +1 -0
- package/package.json +4 -4
- package/src/Component.d.ts +124 -0
- package/src/index.d.ts +1 -0
- package/src/types/colors.d.ts +1 -0
- package/types/colors.js +1 -0
- package/types/colors.js.map +1 -0
- package/cssm/index.d.ts +0 -1
- package/cssm/types/colors.d.ts +0 -2
- package/cssm/vars.css +0 -14
- package/esm/index.d.ts +0 -1
- package/esm/types/colors.d.ts +0 -2
- package/index.d.ts +0 -1
- package/modern/index.d.ts +0 -1
- package/modern/types/colors.d.ts +0 -2
- package/moderncssm/Component.d.ts +0 -126
- package/moderncssm/index.d.ts +0 -1
- package/moderncssm/types/colors.d.ts +0 -2
- package/moderncssm/vars.css +0 -14
- package/types/colors.d.ts +0 -2
package/Component.js
CHANGED
|
@@ -8,6 +8,9 @@ var mergeRefs = require('react-merge-refs');
|
|
|
8
8
|
var cn = require('classnames');
|
|
9
9
|
var coreComponentsShared = require('@alfalab/core-components-shared');
|
|
10
10
|
var hooks = require('@alfalab/hooks');
|
|
11
|
+
var default_module = require('./default.module.css.js');
|
|
12
|
+
var index_module = require('./index.module.css.js');
|
|
13
|
+
var inverted_module = require('./inverted.module.css.js');
|
|
11
14
|
|
|
12
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
16
|
|
|
@@ -15,18 +18,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
15
18
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
16
19
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
17
20
|
|
|
18
|
-
var defaultStyles = {"switch":"switch__switch_95gov","label":"switch__label_95gov","hint":"switch__hint_95gov","checked":"switch__checked_95gov","disabled":"switch__disabled_95gov"};
|
|
19
|
-
require('./default.css')
|
|
20
|
-
|
|
21
|
-
var styles = {"component":"switch__component_agi88","start":"switch__start_agi88","center":"switch__center_agi88","addons":"switch__addons_agi88","block":"switch__block_agi88","switch":"switch__switch_agi88","content":"switch__content_agi88","label":"switch__label_agi88","errorMessage":"switch__errorMessage_agi88","hint":"switch__hint_agi88","reversed":"switch__reversed_agi88","checked":"switch__checked_agi88","disabled":"switch__disabled_agi88","focused":"switch__focused_agi88"};
|
|
22
|
-
require('./index.css')
|
|
23
|
-
|
|
24
|
-
var invertedStyles = {"switch":"switch__switch_1kqnc","label":"switch__label_1kqnc","hint":"switch__hint_1kqnc","checked":"switch__checked_1kqnc","disabled":"switch__disabled_1kqnc"};
|
|
25
|
-
require('./inverted.css')
|
|
26
|
-
|
|
27
21
|
var colorStyles = {
|
|
28
|
-
default:
|
|
29
|
-
inverted:
|
|
22
|
+
default: default_module,
|
|
23
|
+
inverted: inverted_module,
|
|
30
24
|
};
|
|
31
25
|
var Switch = React.forwardRef(function (_a, ref) {
|
|
32
26
|
var _b;
|
|
@@ -39,25 +33,26 @@ var Switch = React.forwardRef(function (_a, ref) {
|
|
|
39
33
|
}
|
|
40
34
|
};
|
|
41
35
|
var errorMessage = typeof error === 'boolean' ? '' : error;
|
|
42
|
-
return (React__default.default.createElement("label", { className: cn__default.default(
|
|
43
|
-
_b[
|
|
36
|
+
return (React__default.default.createElement("label", { className: cn__default.default(index_module.component, index_module[align], className, (_b = {},
|
|
37
|
+
_b[index_module.disabled] = disabled || inactive,
|
|
44
38
|
_b[colorStyles[colors].disabled] = disabled || inactive,
|
|
45
|
-
_b[
|
|
39
|
+
_b[index_module.checked] = checked,
|
|
46
40
|
_b[colorStyles[colors].checked] = checked,
|
|
47
|
-
_b[
|
|
48
|
-
_b[
|
|
49
|
-
_b[
|
|
41
|
+
_b[index_module.reversed] = reversed,
|
|
42
|
+
_b[index_module.focused] = focused,
|
|
43
|
+
_b[index_module.block] = block,
|
|
50
44
|
_b)), ref: mergeRefs__default.default([labelRef, ref]) },
|
|
51
45
|
React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
|
|
52
|
-
React__default.default.createElement("span", { className: cn__default.default(
|
|
53
|
-
(label || hint || errorMessage) && (React__default.default.createElement("span", { className:
|
|
54
|
-
label && (React__default.default.createElement("span", { className: cn__default.default(
|
|
55
|
-
hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(
|
|
56
|
-
errorMessage && (React__default.default.createElement("span", { className:
|
|
46
|
+
React__default.default.createElement("span", { className: cn__default.default(index_module.switch, colorStyles[colors].switch) }),
|
|
47
|
+
(label || hint || errorMessage) && (React__default.default.createElement("span", { className: index_module.content },
|
|
48
|
+
label && (React__default.default.createElement("span", { className: cn__default.default(index_module.label, colorStyles[colors].label) }, label)),
|
|
49
|
+
hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(index_module.hint, colorStyles[colors].hint) }, hint)),
|
|
50
|
+
errorMessage && (React__default.default.createElement("span", { className: index_module.errorMessage, role: 'alert' }, errorMessage)))),
|
|
57
51
|
addons && (
|
|
58
52
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
59
|
-
React__default.default.createElement("span", { className:
|
|
53
|
+
React__default.default.createElement("span", { className: index_module.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
|
|
60
54
|
});
|
|
61
55
|
Switch.displayName = 'Switch';
|
|
62
56
|
|
|
63
57
|
exports.Switch = Switch;
|
|
58
|
+
//# sourceMappingURL=Component.js.map
|
package/Component.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости\n * Используйте props disabled\n * Управление состоянием активен / неактивен\n */\n inactive?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n inactive,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled || inactive,\n [colorStyles[colors].disabled]: disabled || inactive,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled || inactive}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}
|
package/cssm/Component.js
CHANGED
|
@@ -6,7 +6,7 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var mergeRefs = require('react-merge-refs');
|
|
8
8
|
var cn = require('classnames');
|
|
9
|
-
var
|
|
9
|
+
var cssm = require('@alfalab/core-components-shared/cssm');
|
|
10
10
|
var hooks = require('@alfalab/hooks');
|
|
11
11
|
var defaultStyles = require('./default.module.css');
|
|
12
12
|
var styles = require('./index.module.css');
|
|
@@ -53,8 +53,9 @@ var Switch = React.forwardRef(function (_a, ref) {
|
|
|
53
53
|
errorMessage && (React__default.default.createElement("span", { className: styles__default.default.errorMessage, role: 'alert' }, errorMessage)))),
|
|
54
54
|
addons && (
|
|
55
55
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
56
|
-
React__default.default.createElement("span", { className: styles__default.default.addons, onClick:
|
|
56
|
+
React__default.default.createElement("span", { className: styles__default.default.addons, onClick: cssm.dom.preventDefault }, addons))));
|
|
57
57
|
});
|
|
58
58
|
Switch.displayName = 'Switch';
|
|
59
59
|
|
|
60
60
|
exports.Switch = Switch;
|
|
61
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости\n * Используйте props disabled\n * Управление состоянием активен / неактивен\n */\n inactive?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n inactive,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled || inactive,\n [colorStyles[colors].disabled]: disabled || inactive,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled || inactive}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["defaultStyles","invertedStyles","forwardRef","__rest","useRef","useFocus","React","cn","styles","mergeRefs","__assign","dom"],"mappings":"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"}
|
package/cssm/default.module.css
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
3
2
|
--color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
|
|
4
3
|
--color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
|
|
5
4
|
--color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
|
|
@@ -7,49 +6,17 @@
|
|
|
7
6
|
--color-light-status-positive: #0cc44d;
|
|
8
7
|
--color-light-status-positive-hover: #04b545;
|
|
9
8
|
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
10
|
-
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
11
|
-
} :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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
12
|
-
} :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 */
|
|
9
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
13
10
|
} :root {
|
|
14
|
-
|
|
15
|
-
/* Hard */
|
|
16
|
-
|
|
17
|
-
/* Up */
|
|
18
|
-
|
|
19
|
-
/* Hard up */
|
|
20
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
-
|
|
22
|
-
/* новые значения, используйте их */
|
|
23
|
-
} :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 */
|
|
24
|
-
|
|
25
|
-
/* новые значения, используйте их */
|
|
26
|
-
|
|
27
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
28
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
29
|
-
} :root {
|
|
30
|
-
} :root {
|
|
31
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
32
11
|
--switch-label-color: var(--color-light-text-primary);
|
|
33
12
|
--switch-hint-color: var(--color-light-text-secondary);
|
|
34
13
|
--switch-bg-color: var(--color-light-neutral-translucent-700);
|
|
35
|
-
|
|
36
|
-
/* inverted */
|
|
37
|
-
|
|
38
|
-
/* hover */
|
|
39
14
|
--switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
|
|
40
|
-
|
|
41
|
-
/* checked */
|
|
42
15
|
--switch-checked-bg-color: var(--color-light-status-positive);
|
|
43
16
|
--switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
|
|
44
|
-
|
|
45
|
-
/* disabled */
|
|
46
17
|
--switch-disabled-color: var(--color-light-text-secondary);
|
|
47
18
|
--switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
|
|
48
|
-
|
|
49
|
-
/* disabled checked */
|
|
50
19
|
--switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
|
|
51
|
-
|
|
52
|
-
/* icon */
|
|
53
20
|
--switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
|
|
54
21
|
} .switch {
|
|
55
22
|
background-color: var(--switch-bg-color)
|
package/cssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cssm/index.module.css
CHANGED
|
@@ -1,57 +1,27 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
3
2
|
--color-light-status-info: #2288fa;
|
|
4
3
|
--color-light-text-negative: #ec2d20;
|
|
5
|
-
--color-static-neutral-0: #fff;
|
|
6
|
-
} :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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
7
|
-
} :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 */
|
|
4
|
+
--color-static-neutral-0: #fff;
|
|
8
5
|
} :root {
|
|
9
|
-
|
|
10
|
-
/* Hard */
|
|
11
|
-
|
|
12
|
-
/* Up */
|
|
13
|
-
|
|
14
|
-
/* Hard up */
|
|
15
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
16
|
-
--border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
6
|
+
--border-radius-xl: 16px;
|
|
17
7
|
--border-radius-circle: 50%;
|
|
18
|
-
|
|
19
|
-
/* новые значения, используйте их */
|
|
20
8
|
--border-radius-16: var(--border-radius-xl);
|
|
21
9
|
} :root {
|
|
22
|
-
--gap-3xs: 2px;
|
|
23
|
-
--gap-2xs: 4px;
|
|
24
|
-
--gap-s: 12px;
|
|
25
|
-
--gap-m: 16px;
|
|
26
|
-
|
|
27
|
-
/* новые значения, используйте их */
|
|
28
|
-
|
|
29
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
30
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
10
|
+
--gap-3xs: 2px;
|
|
11
|
+
--gap-2xs: 4px;
|
|
12
|
+
--gap-s: 12px;
|
|
13
|
+
--gap-m: 16px;
|
|
31
14
|
--gap-0: 0px;
|
|
32
15
|
--gap-2: var(--gap-3xs);
|
|
33
16
|
--gap-4: var(--gap-2xs);
|
|
34
17
|
--gap-12: var(--gap-s);
|
|
35
18
|
--gap-16: var(--gap-m);
|
|
36
|
-
} :root {
|
|
37
19
|
} :root {
|
|
38
20
|
--focus-color: var(--color-light-status-info);
|
|
39
21
|
--disabled-cursor: not-allowed;
|
|
40
|
-
}
|
|
22
|
+
} :root {
|
|
41
23
|
--switch-border-color: transparent;
|
|
42
24
|
--switch-error-color: var(--color-light-text-negative);
|
|
43
|
-
|
|
44
|
-
/* inverted */
|
|
45
|
-
|
|
46
|
-
/* hover */
|
|
47
|
-
|
|
48
|
-
/* checked */
|
|
49
|
-
|
|
50
|
-
/* disabled */
|
|
51
|
-
|
|
52
|
-
/* disabled checked */
|
|
53
|
-
|
|
54
|
-
/* icon */
|
|
55
25
|
--switch-icon-color: var(--color-static-neutral-0);
|
|
56
26
|
} .component {
|
|
57
27
|
display: inline-flex;
|
|
@@ -116,7 +86,7 @@
|
|
|
116
86
|
line-height: 18px;
|
|
117
87
|
font-weight: 400;
|
|
118
88
|
display: block;
|
|
119
|
-
}
|
|
89
|
+
} .component.reversed {
|
|
120
90
|
flex-direction: row-reverse;
|
|
121
91
|
} .reversed .content {
|
|
122
92
|
margin-right: var(--gap-16);
|
|
@@ -126,12 +96,11 @@
|
|
|
126
96
|
padding-left: var(--gap-0);
|
|
127
97
|
margin-right: auto;
|
|
128
98
|
padding-right: var(--gap-16);
|
|
129
|
-
}
|
|
130
|
-
/* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
|
|
99
|
+
} .checked .switch:before {
|
|
131
100
|
transform: translateX(16px);
|
|
132
|
-
}
|
|
101
|
+
} .disabled {
|
|
133
102
|
cursor: var(--disabled-cursor);
|
|
134
|
-
}
|
|
103
|
+
} .focused .switch {
|
|
135
104
|
outline: 2px solid var(--focus-color);
|
|
136
105
|
outline-offset: 2px;
|
|
137
106
|
}
|
package/cssm/inverted.module.css
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
3
2
|
--color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
|
|
4
3
|
--color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
5
4
|
--color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
|
|
@@ -7,49 +6,17 @@
|
|
|
7
6
|
--color-light-status-positive-inverted: #17d055;
|
|
8
7
|
--color-light-status-positive-inverted-hover: #22e068;
|
|
9
8
|
--color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
|
|
10
|
-
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
11
|
-
} :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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
12
|
-
} :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 */
|
|
9
|
+
--color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
|
|
13
10
|
} :root {
|
|
14
|
-
|
|
15
|
-
/* Hard */
|
|
16
|
-
|
|
17
|
-
/* Up */
|
|
18
|
-
|
|
19
|
-
/* Hard up */
|
|
20
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
-
|
|
22
|
-
/* новые значения, используйте их */
|
|
23
|
-
} :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 */
|
|
24
|
-
|
|
25
|
-
/* новые значения, используйте их */
|
|
26
|
-
|
|
27
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
28
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
29
|
-
} :root {
|
|
30
|
-
} :root {
|
|
31
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
32
|
-
|
|
33
|
-
/* inverted */
|
|
34
11
|
--switch-label-inverted-color: var(--color-light-text-primary-inverted);
|
|
35
12
|
--switch-hint-inverted-color: var(--color-light-text-secondary-inverted);
|
|
36
13
|
--switch-checked-bg-inverted-color: var(--color-light-status-positive-inverted);
|
|
37
14
|
--switch-checked-hover-bg-inverted-color: var(--color-light-status-positive-inverted-hover);
|
|
38
15
|
--switch-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted);
|
|
39
|
-
|
|
40
|
-
/* hover */
|
|
41
16
|
--switch-hover-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted-hover);
|
|
42
|
-
|
|
43
|
-
/* checked */
|
|
44
|
-
|
|
45
|
-
/* disabled */
|
|
46
17
|
--switch-disabled-inverted-color: var(--color-light-text-secondary-inverted);
|
|
47
18
|
--switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
|
|
48
|
-
|
|
49
|
-
/* disabled checked */
|
|
50
19
|
--switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
|
|
51
|
-
|
|
52
|
-
/* icon */
|
|
53
20
|
--switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
|
|
54
21
|
} .switch {
|
|
55
22
|
background-color: var(--switch-bg-inverted-color)
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
type Align = 'start' | 'center';
|
|
6
|
-
type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
|
|
1
|
+
import React, { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { Colors } from './types/colors';
|
|
3
|
+
declare type Align = 'start' | 'center';
|
|
4
|
+
export declare type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
|
|
7
5
|
/**
|
|
8
6
|
* Управление состоянием вкл/выкл компонента
|
|
9
7
|
*/
|
|
@@ -63,7 +61,7 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
|
|
|
63
61
|
*/
|
|
64
62
|
colors?: Colors;
|
|
65
63
|
};
|
|
66
|
-
declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
|
|
64
|
+
export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
|
|
67
65
|
/**
|
|
68
66
|
* Управление состоянием вкл/выкл компонента
|
|
69
67
|
*/
|
|
@@ -123,4 +121,4 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
|
|
|
123
121
|
*/
|
|
124
122
|
colors?: Colors | undefined;
|
|
125
123
|
} & React.RefAttributes<HTMLLabelElement>>;
|
|
126
|
-
export {
|
|
124
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare type Colors = 'default' | 'inverted';
|
package/cssm/types/colors.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|