@alfalab/core-components-spinner - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

Component.d.ts

@@ -9,4 +9,5 @@ import { FC } from 'react';
      * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
      */
-    size?: 'xs' | 's' | 'm';
+    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
     /**
@@ -29,3 +30,11 @@ * Дополнительный класс
 };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, Spinner };
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };

Component.js

@@ -14,9 +14,9 @@ 'use strict';
 
-var defaultColors = {"component":"spinner__component_2cauj"};
+var defaultColors = {"component":"spinner__component_yuj30"};
 require('./default.css')
 
-var styles = {"spinner":"spinner__spinner_1rz07","spin_animation":"spinner__spin_animation_1rz07","visible":"spinner__visible_1rz07","xs":"spinner__xs_1rz07","s":"spinner__s_1rz07","m":"spinner__m_1rz07"};
+var styles = {"spinner":"spinner__spinner_1x8cb","spin_animation":"spinner__spin_animation_1x8cb","visible":"spinner__visible_1x8cb","size-16":"spinner__size-16_1x8cb","size-24":"spinner__size-24_1x8cb","size-48":"spinner__size-48_1x8cb"};
 require('./index.css')
 
-var invertedColors = {"component":"spinner__component_g998q"};
+var invertedColors = {"component":"spinner__component_14ovj"};
 require('./inverted.css')
@@ -44,6 +44,29 @@
     },
+    16: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    24: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    48: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-16',
+    s: 'size-24',
+    m: 'size-48',
+    16: 'size-16',
+    24: 'size-24',
+    48: 'size-48',
+};
 var Spinner = function (_a) {
     var _b;
-    var _c = _a.size, sizeProp = _c === void 0 ? 's' : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+    var _c = _a.size, sizeProp = _c === void 0 ? 24 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
     var uniqId = hooks.useId();
@@ -57,3 +80,3 @@ var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
     var bottomGradientId = "".concat(uniqId, "_bottom");
-    return (React__default.default.createElement("svg", { viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default.default(styles.spinner, colorStyles[colors].component, styles[sizeProp], className, (_b = {},
+    return (React__default.default.createElement("svg", { viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default.default(styles.spinner, colorStyles[colors].component, styles[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, (_b = {},
             _b[styles.visible] = visible,
@@ -74,2 +97,3 @@ _b)), "data-test-id": dataTestId, id: id },
 
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Spinner;

cssm/Component.d.ts

@@ -9,4 +9,5 @@ import { FC } from 'react';
      * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
      */
-    size?: 'xs' | 's' | 'm';
+    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
     /**
@@ -29,3 +30,11 @@ * Дополнительный класс
 };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, Spinner };
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };

cssm/Component.js

@@ -40,6 +40,29 @@ 'use strict';
     },
+    16: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    24: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    48: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-16',
+    s: 'size-24',
+    m: 'size-48',
+    16: 'size-16',
+    24: 'size-24',
+    48: 'size-48',
+};
 var Spinner = function (_a) {
     var _b;
-    var _c = _a.size, sizeProp = _c === void 0 ? 's' : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+    var _c = _a.size, sizeProp = _c === void 0 ? 24 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
     var uniqId = hooks.useId();
@@ -53,3 +76,3 @@ var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
     var bottomGradientId = "".concat(uniqId, "_bottom");
-    return (React__default.default.createElement("svg", { viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default.default(styles__default.default.spinner, colorStyles[colors].component, styles__default.default[sizeProp], className, (_b = {},
+    return (React__default.default.createElement("svg", { viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default.default(styles__default.default.spinner, colorStyles[colors].component, styles__default.default[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, (_b = {},
             _b[styles__default.default.visible] = visible,
@@ -70,2 +93,3 @@ _b)), "data-test-id": dataTestId, id: id },
 
+exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Spinner;

cssm/index.js

@@ -6,11 +6,6 @@ 'use strict';
 var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('@alfalab/hooks');
-require('./default.module.css');
-require('./index.module.css');
-require('./inverted.module.css');
 
 
 
+exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Component.Spinner;

esm/Component.d.ts

@@ -9,4 +9,5 @@ import { FC } from 'react';
      * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
      */
-    size?: 'xs' | 's' | 'm';
+    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
     /**
@@ -29,3 +30,11 @@ * Дополнительный класс
 };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, Spinner };
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };

esm/Component.js

@@ -5,9 +5,9 @@ import React from 'react';
 
-var defaultColors = {"component":"spinner__component_2cauj"};
+var defaultColors = {"component":"spinner__component_yuj30"};
 require('./default.css')
 
-var styles = {"spinner":"spinner__spinner_1rz07","spin_animation":"spinner__spin_animation_1rz07","visible":"spinner__visible_1rz07","xs":"spinner__xs_1rz07","s":"spinner__s_1rz07","m":"spinner__m_1rz07"};
+var styles = {"spinner":"spinner__spinner_1x8cb","spin_animation":"spinner__spin_animation_1x8cb","visible":"spinner__visible_1x8cb","size-16":"spinner__size-16_1x8cb","size-24":"spinner__size-24_1x8cb","size-48":"spinner__size-48_1x8cb"};
 require('./index.css')
 
-var invertedColors = {"component":"spinner__component_g998q"};
+var invertedColors = {"component":"spinner__component_14ovj"};
 require('./inverted.css')
@@ -35,6 +35,29 @@
     },
+    16: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    24: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    48: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
 };
+var SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-16',
+    s: 'size-24',
+    m: 'size-48',
+    16: 'size-16',
+    24: 'size-24',
+    48: 'size-48',
+};
 var Spinner = function (_a) {
     var _b;
-    var _c = _a.size, sizeProp = _c === void 0 ? 's' : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+    var _c = _a.size, sizeProp = _c === void 0 ? 24 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
     var uniqId = useId();
@@ -48,3 +71,3 @@ var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
     var bottomGradientId = "".concat(uniqId, "_bottom");
-    return (React.createElement("svg", { viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[sizeProp], className, (_b = {},
+    return (React.createElement("svg", { viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, (_b = {},
             _b[styles.visible] = visible,
@@ -65,2 +88,2 @@ _b)), "data-test-id": dataTestId, id: id },
 
-export { Spinner };
+export { SIZE_TO_CLASSNAME_MAP, Spinner };

esm/index.js

@@ -1,4 +0,1 @@
-export { Spinner } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/hooks';
+export { SIZE_TO_CLASSNAME_MAP, Spinner } from './Component.js';

index.js

@@ -6,8 +6,6 @@ 'use strict';
 var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('@alfalab/hooks');
 
 
 
+exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Component.Spinner;

modern/Component.d.ts

@@ -9,4 +9,5 @@ import { FC } from 'react';
      * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
      */
-    size?: 'xs' | 's' | 'm';
+    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
     /**
@@ -29,3 +30,11 @@ * Дополнительный класс
 };
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, Spinner };
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };

modern/Component.js

@@ -5,9 +5,9 @@ import React from 'react';
 
-const defaultColors = {"component":"spinner__component_2cauj"};
+const defaultColors = {"component":"spinner__component_yuj30"};
 require('./default.css')
 
-const styles = {"spinner":"spinner__spinner_1rz07","spin_animation":"spinner__spin_animation_1rz07","visible":"spinner__visible_1rz07","xs":"spinner__xs_1rz07","s":"spinner__s_1rz07","m":"spinner__m_1rz07"};
+const styles = {"spinner":"spinner__spinner_1x8cb","spin_animation":"spinner__spin_animation_1x8cb","visible":"spinner__visible_1x8cb","size-16":"spinner__size-16_1x8cb","size-24":"spinner__size-24_1x8cb","size-48":"spinner__size-48_1x8cb"};
 require('./index.css')
 
-const invertedColors = {"component":"spinner__component_g998q"};
+const invertedColors = {"component":"spinner__component_14ovj"};
 require('./inverted.css')
@@ -35,4 +35,27 @@
     },
+    16: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    24: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    48: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
 };
-const Spinner = ({ size: sizeProp = 's', colors = 'default', visible, id, className, dataTestId, }) => {
+const SIZE_TO_CLASSNAME_MAP = {
+    xs: 'size-16',
+    s: 'size-24',
+    m: 'size-48',
+    16: 'size-16',
+    24: 'size-24',
+    48: 'size-48',
+};
+const Spinner = ({ size: sizeProp = 24, colors = 'default', visible, id, className, dataTestId, }) => {
     const uniqId = useId();
@@ -46,3 +69,3 @@ const { size, padding, lineWidth } = CONFIG[sizeProp];
     const bottomGradientId = `${uniqId}_bottom`;
-    return (React.createElement("svg", { viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[sizeProp], className, {
+    return (React.createElement("svg", { viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, colorStyles[colors].component, styles[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, {
             [styles.visible]: visible,
@@ -63,2 +86,2 @@ }), "data-test-id": dataTestId, id: id },
 
-export { Spinner };
+export { SIZE_TO_CLASSNAME_MAP, Spinner };

modern/index.js

@@ -1,4 +0,1 @@
-export { Spinner } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/hooks';
+export { SIZE_TO_CLASSNAME_MAP, Spinner } from './Component.js';

package.json

 {
     "name": "@alfalab/core-components-spinner",
-    "version": "3.2.0",
+    "version": "3.3.0",
     "description": "Spinner component",
@@ -5,0 +5,0 @@ "keywords": [],

No alert changes

Improved metrics

Total package byte prevSize

60119

increased by41.29%

Lines of code

1073

increased by19.89%

No dependency changes