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

Comparing version 3.5.0 to 4.0.0

Component.d.ts

@@ -1,13 +0,16 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
 type SpinnerProps = {
     /**
+     * Палитра, в контексте которой используется спиннер
+     * @default default
+     */
+    colors?: 'default' | 'inverted';
+    /**
      * Управление видимостью компонента
+     * @default false
      */
     visible?: boolean;
     /**
-     * Размер компонента
-     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
-     */
-    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
-    /**
      * Дополнительный класс
@@ -25,15 +28,21 @@ */
     /**
-     * Палитра, в контексте которой используется спиннер
+     * Дополнительные инлайн стили для cпиннера
      */
-    colors?: 'default' | 'inverted';
-};
-declare const SIZE_TO_CLASSNAME_MAP: {
-    xs: string;
-    s: string;
-    m: string;
-    16: string;
-    24: string;
-    48: string;
-};
+    style?: React.CSSProperties;
+} & ({
+    /**
+     * Размер спиннера (кольца)
+     */
+    size: number;
+    /**
+     * Толщина линии спинера (кольца)
+     */
+    lineWidth: number;
+} | {
+    /**
+     * Преднастроенный вариант
+     */
+    preset: 16 | 24 | 48;
+});
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };
+export { SpinnerProps, Spinner };

Component.js

@@ -5,4 +5,6 @@ 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared');
 var hooks = require('@alfalab/hooks');
@@ -15,11 +17,14 @@
 
-var defaultColors = {"component":"spinner__component_9ln32"};
+var defaultColors = {"component":"spinner__component_113u6"};
 require('./default.css')
 
-var styles = {"spinner":"spinner__spinner_1rkq4","spin_animation":"spinner__spin_animation_1rkq4","visible":"spinner__visible_1rkq4","size-16":"spinner__size-16_1rkq4","size-24":"spinner__size-24_1rkq4","size-48":"spinner__size-48_1rkq4"};
+var styles = {"spinner":"spinner__spinner_1ndpi","spin_animation":"spinner__spin_animation_1ndpi","visible":"spinner__visible_1ndpi","gradient":"spinner__gradient_1ndpi"};
 require('./index.css')
 
-var invertedColors = {"component":"spinner__component_nilh9"};
+var invertedColors = {"component":"spinner__component_1f0sk"};
 require('./inverted.css')
 
+var presetStyles = {"preset16":"spinner__preset16_i1yci","preset24":"spinner__preset24_i1yci","preset48":"spinner__preset48_i1yci"};
+require('./preset.css')
+
 var colorStyles = {
@@ -29,70 +34,43 @@ default: defaultColors,
 };
-var CONFIG = {
-    xs: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    s: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    m: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
-    16: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    24: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    48: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
+var PRESET_CONFIG = {
+    16: [2, 14, 'preset16'],
+    24: [2, 20, 'preset24'],
+    48: [4, 40, 'preset48'],
 };
-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 ? 24 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+var Spinner = function (props) {
+    var _a;
+    var style = props.style, visible = props.visible, id = props.id, className = props.className, dataTestId = props.dataTestId, _b = props.colors, colors = _b === void 0 ? 'default' : _b;
+    var size;
+    var lineWidth;
+    var presetClassname;
+    if (coreComponentsShared.hasOwnProperty(props, 'preset')) {
+        var preset = props.preset;
+        var config = PRESET_CONFIG[preset];
+        var styleKey = config[2];
+        lineWidth = config[0], size = config[1];
+        presetClassname = presetStyles[styleKey];
+    }
+    else {
+        size = props.size;
+        lineWidth = props.lineWidth;
+    }
+    var color = style === null || style === void 0 ? void 0 : style.color;
+    if (coreComponentsShared.isNonNullable(color)) {
+        coreComponentsShared.devWarning("[Spinner]: \u041F\u0430\u043B\u0438\u0442\u0440\u0430, \u0432 \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u0435 \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0441\u043F\u0438\u043D\u043D\u0435\u0440 (\u043F\u0440\u043E\u043F 'colors') \u0438\u0433\u043D\u043E\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044F. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0446\u0432\u0435\u0442 'style.color' ".concat(color));
+    }
     var uniqId = hooks.useId();
-    var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
-    var xStart = padding + lineWidth / 2;
-    var xEnd = size - xStart;
-    var y = size / 2;
-    var r = y - xStart;
-    var topGradientId = "".concat(uniqId, "_top");
-    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[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, (_b = {},
-            _b[styles.visible] = visible,
-            _b)), "data-test-id": dataTestId, id: id },
+    var radius = size / 2 - lineWidth / 2;
+    var rotationAngle /* deg */ = Math.ceil((Math.asin(lineWidth / 2 / radius) * 180) / Math.PI);
+    var gap /* deg */ = 90;
+    var pathLength /* deg */ = 360;
+    var strokeDasharray = "".concat(pathLength - gap - rotationAngle, " ").concat(gap + rotationAngle);
+    var gradient = "conic-gradient(from ".concat(rotationAngle, "deg, transparent ").concat(gap - rotationAngle * 2, "deg, currentColor)");
+    return (React__default.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: "0 0 ".concat(size, " ").concat(size), style: tslib.__assign(tslib.__assign({}, style), { height: size, width: size }), className: cn__default.default(styles.spinner, colorStyles[colors].component, presetClassname, className, (_a = {}, _a[styles.visible] = visible, _a)), "data-test-id": dataTestId, id: id },
         React__default.default.createElement("defs", null,
-            React__default.default.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
-                React__default.default.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
-                React__default.default.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
-            React__default.default.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
-                React__default.default.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
-                React__default.default.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
-        React__default.default.createElement("g", { strokeWidth: lineWidth },
-            React__default.default.createElement("path", { stroke: "url(#".concat(topGradientId, ")"), d: "M".concat(xStart, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xEnd, ",").concat(y) }),
-            React__default.default.createElement("path", { stroke: "url(#".concat(bottomGradientId, ")"), d: "M".concat(xEnd, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xStart, ",").concat(y) }),
-            React__default.default.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: "M".concat(xStart, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xStart, " ").concat(y) }))));
+            React__default.default.createElement("mask", { id: uniqId },
+                React__default.default.createElement("circle", { cx: '50%', cy: '50%', r: radius, strokeWidth: lineWidth, strokeLinecap: 'round', stroke: '#fff', strokeDashoffset: -rotationAngle, strokeDasharray: strokeDasharray, pathLength: pathLength }))),
+        React__default.default.createElement("foreignObject", { x: '0', y: '0', width: size, height: size, mask: "url(#".concat(uniqId, ")") },
+            React__default.default.createElement("div", { className: styles.gradient, style: { backgroundImage: gradient } }))));
 };
 
-exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Spinner;

cssm/Component.d.ts

@@ -1,13 +0,16 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
 type SpinnerProps = {
     /**
+     * Палитра, в контексте которой используется спиннер
+     * @default default
+     */
+    colors?: 'default' | 'inverted';
+    /**
      * Управление видимостью компонента
+     * @default false
      */
     visible?: boolean;
     /**
-     * Размер компонента
-     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
-     */
-    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
-    /**
      * Дополнительный класс
@@ -25,15 +28,21 @@ */
     /**
-     * Палитра, в контексте которой используется спиннер
+     * Дополнительные инлайн стили для cпиннера
      */
-    colors?: 'default' | 'inverted';
-};
-declare const SIZE_TO_CLASSNAME_MAP: {
-    xs: string;
-    s: string;
-    m: string;
-    16: string;
-    24: string;
-    48: string;
-};
+    style?: React.CSSProperties;
+} & ({
+    /**
+     * Размер спиннера (кольца)
+     */
+    size: number;
+    /**
+     * Толщина линии спинера (кольца)
+     */
+    lineWidth: number;
+} | {
+    /**
+     * Преднастроенный вариант
+     */
+    preset: 16 | 24 | 48;
+});
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };
+export { SpinnerProps, Spinner };

cssm/Component.js

@@ -5,4 +5,6 @@ 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var hooks = require('@alfalab/hooks');
@@ -12,2 +14,3 @@ var defaultColors = require('./default.module.css');
 var invertedColors = require('./inverted.module.css');
+var presetStyles = require('./preset.module.css');
 
@@ -21,2 +24,3 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+var presetStyles__default = /*#__PURE__*/_interopDefaultCompat(presetStyles);
 
@@ -27,70 +31,43 @@ var colorStyles = {
 };
-var CONFIG = {
-    xs: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    s: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    m: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
-    16: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    24: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    48: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
+var PRESET_CONFIG = {
+    16: [2, 14, 'preset16'],
+    24: [2, 20, 'preset24'],
+    48: [4, 40, 'preset48'],
 };
-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 ? 24 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+var Spinner = function (props) {
+    var _a;
+    var style = props.style, visible = props.visible, id = props.id, className = props.className, dataTestId = props.dataTestId, _b = props.colors, colors = _b === void 0 ? 'default' : _b;
+    var size;
+    var lineWidth;
+    var presetClassname;
+    if (coreComponentsShared.hasOwnProperty(props, 'preset')) {
+        var preset = props.preset;
+        var config = PRESET_CONFIG[preset];
+        var styleKey = config[2];
+        lineWidth = config[0], size = config[1];
+        presetClassname = presetStyles__default.default[styleKey];
+    }
+    else {
+        size = props.size;
+        lineWidth = props.lineWidth;
+    }
+    var color = style === null || style === void 0 ? void 0 : style.color;
+    if (coreComponentsShared.isNonNullable(color)) {
+        coreComponentsShared.devWarning("[Spinner]: \u041F\u0430\u043B\u0438\u0442\u0440\u0430, \u0432 \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u0435 \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0441\u043F\u0438\u043D\u043D\u0435\u0440 (\u043F\u0440\u043E\u043F 'colors') \u0438\u0433\u043D\u043E\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044F. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0446\u0432\u0435\u0442 'style.color' ".concat(color));
+    }
     var uniqId = hooks.useId();
-    var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
-    var xStart = padding + lineWidth / 2;
-    var xEnd = size - xStart;
-    var y = size / 2;
-    var r = y - xStart;
-    var topGradientId = "".concat(uniqId, "_top");
-    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[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, (_b = {},
-            _b[styles__default.default.visible] = visible,
-            _b)), "data-test-id": dataTestId, id: id },
+    var radius = size / 2 - lineWidth / 2;
+    var rotationAngle /* deg */ = Math.ceil((Math.asin(lineWidth / 2 / radius) * 180) / Math.PI);
+    var gap /* deg */ = 90;
+    var pathLength /* deg */ = 360;
+    var strokeDasharray = "".concat(pathLength - gap - rotationAngle, " ").concat(gap + rotationAngle);
+    var gradient = "conic-gradient(from ".concat(rotationAngle, "deg, transparent ").concat(gap - rotationAngle * 2, "deg, currentColor)");
+    return (React__default.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: "0 0 ".concat(size, " ").concat(size), style: tslib.__assign(tslib.__assign({}, style), { height: size, width: size }), className: cn__default.default(styles__default.default.spinner, colorStyles[colors].component, presetClassname, className, (_a = {}, _a[styles__default.default.visible] = visible, _a)), "data-test-id": dataTestId, id: id },
         React__default.default.createElement("defs", null,
-            React__default.default.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
-                React__default.default.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
-                React__default.default.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
-            React__default.default.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
-                React__default.default.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
-                React__default.default.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
-        React__default.default.createElement("g", { strokeWidth: lineWidth },
-            React__default.default.createElement("path", { stroke: "url(#".concat(topGradientId, ")"), d: "M".concat(xStart, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xEnd, ",").concat(y) }),
-            React__default.default.createElement("path", { stroke: "url(#".concat(bottomGradientId, ")"), d: "M".concat(xEnd, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xStart, ",").concat(y) }),
-            React__default.default.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: "M".concat(xStart, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xStart, " ").concat(y) }))));
+            React__default.default.createElement("mask", { id: uniqId },
+                React__default.default.createElement("circle", { cx: '50%', cy: '50%', r: radius, strokeWidth: lineWidth, strokeLinecap: 'round', stroke: '#fff', strokeDashoffset: -rotationAngle, strokeDasharray: strokeDasharray, pathLength: pathLength }))),
+        React__default.default.createElement("foreignObject", { x: '0', y: '0', width: size, height: size, mask: "url(#".concat(uniqId, ")") },
+            React__default.default.createElement("div", { className: styles__default.default.gradient, style: { backgroundImage: gradient } }))));
 };
 
-exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Spinner;

cssm/index.js

@@ -9,3 +9,2 @@ 'use strict';
 
-exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Component.Spinner;

esm/Component.d.ts

@@ -1,13 +0,16 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
 type SpinnerProps = {
     /**
+     * Палитра, в контексте которой используется спиннер
+     * @default default
+     */
+    colors?: 'default' | 'inverted';
+    /**
      * Управление видимостью компонента
+     * @default false
      */
     visible?: boolean;
     /**
-     * Размер компонента
-     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
-     */
-    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
-    /**
      * Дополнительный класс
@@ -25,15 +28,21 @@ */
     /**
-     * Палитра, в контексте которой используется спиннер
+     * Дополнительные инлайн стили для cпиннера
      */
-    colors?: 'default' | 'inverted';
-};
-declare const SIZE_TO_CLASSNAME_MAP: {
-    xs: string;
-    s: string;
-    m: string;
-    16: string;
-    24: string;
-    48: string;
-};
+    style?: React.CSSProperties;
+} & ({
+    /**
+     * Размер спиннера (кольца)
+     */
+    size: number;
+    /**
+     * Толщина линии спинера (кольца)
+     */
+    lineWidth: number;
+} | {
+    /**
+     * Преднастроенный вариант
+     */
+    preset: 16 | 24 | 48;
+});
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };
+export { SpinnerProps, Spinner };

esm/Component.js

@@ -0,14 +1,19 @@
+import { __assign } from 'tslib';
 import React from 'react';
 import cn from 'classnames';
+import { hasOwnProperty, isNonNullable, devWarning } from '@alfalab/core-components-shared/esm';
 import { useId } from '@alfalab/hooks';
 
-var defaultColors = {"component":"spinner__component_9ln32"};
+var defaultColors = {"component":"spinner__component_113u6"};
 require('./default.css')
 
-var styles = {"spinner":"spinner__spinner_1rkq4","spin_animation":"spinner__spin_animation_1rkq4","visible":"spinner__visible_1rkq4","size-16":"spinner__size-16_1rkq4","size-24":"spinner__size-24_1rkq4","size-48":"spinner__size-48_1rkq4"};
+var styles = {"spinner":"spinner__spinner_1ndpi","spin_animation":"spinner__spin_animation_1ndpi","visible":"spinner__visible_1ndpi","gradient":"spinner__gradient_1ndpi"};
 require('./index.css')
 
-var invertedColors = {"component":"spinner__component_nilh9"};
+var invertedColors = {"component":"spinner__component_1f0sk"};
 require('./inverted.css')
 
+var presetStyles = {"preset16":"spinner__preset16_i1yci","preset24":"spinner__preset24_i1yci","preset48":"spinner__preset48_i1yci"};
+require('./preset.css')
+
 var colorStyles = {
@@ -18,69 +23,43 @@ default: defaultColors,
 };
-var CONFIG = {
-    xs: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    s: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    m: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
-    16: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    24: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    48: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
+var PRESET_CONFIG = {
+    16: [2, 14, 'preset16'],
+    24: [2, 20, 'preset24'],
+    48: [4, 40, 'preset48'],
 };
-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 ? 24 : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+var Spinner = function (props) {
+    var _a;
+    var style = props.style, visible = props.visible, id = props.id, className = props.className, dataTestId = props.dataTestId, _b = props.colors, colors = _b === void 0 ? 'default' : _b;
+    var size;
+    var lineWidth;
+    var presetClassname;
+    if (hasOwnProperty(props, 'preset')) {
+        var preset = props.preset;
+        var config = PRESET_CONFIG[preset];
+        var styleKey = config[2];
+        lineWidth = config[0], size = config[1];
+        presetClassname = presetStyles[styleKey];
+    }
+    else {
+        size = props.size;
+        lineWidth = props.lineWidth;
+    }
+    var color = style === null || style === void 0 ? void 0 : style.color;
+    if (isNonNullable(color)) {
+        devWarning("[Spinner]: \u041F\u0430\u043B\u0438\u0442\u0440\u0430, \u0432 \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u0435 \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0441\u043F\u0438\u043D\u043D\u0435\u0440 (\u043F\u0440\u043E\u043F 'colors') \u0438\u0433\u043D\u043E\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044F. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0446\u0432\u0435\u0442 'style.color' ".concat(color));
+    }
     var uniqId = useId();
-    var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
-    var xStart = padding + lineWidth / 2;
-    var xEnd = size - xStart;
-    var y = size / 2;
-    var r = y - xStart;
-    var topGradientId = "".concat(uniqId, "_top");
-    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[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, (_b = {},
-            _b[styles.visible] = visible,
-            _b)), "data-test-id": dataTestId, id: id },
+    var radius = size / 2 - lineWidth / 2;
+    var rotationAngle /* deg */ = Math.ceil((Math.asin(lineWidth / 2 / radius) * 180) / Math.PI);
+    var gap /* deg */ = 90;
+    var pathLength /* deg */ = 360;
+    var strokeDasharray = "".concat(pathLength - gap - rotationAngle, " ").concat(gap + rotationAngle);
+    var gradient = "conic-gradient(from ".concat(rotationAngle, "deg, transparent ").concat(gap - rotationAngle * 2, "deg, currentColor)");
+    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: "0 0 ".concat(size, " ").concat(size), style: __assign(__assign({}, style), { height: size, width: size }), className: cn(styles.spinner, colorStyles[colors].component, presetClassname, className, (_a = {}, _a[styles.visible] = visible, _a)), "data-test-id": dataTestId, id: id },
         React.createElement("defs", null,
-            React.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
-                React.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
-                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
-            React.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
-                React.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
-                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
-        React.createElement("g", { strokeWidth: lineWidth },
-            React.createElement("path", { stroke: "url(#".concat(topGradientId, ")"), d: "M".concat(xStart, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xEnd, ",").concat(y) }),
-            React.createElement("path", { stroke: "url(#".concat(bottomGradientId, ")"), d: "M".concat(xEnd, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xStart, ",").concat(y) }),
-            React.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: "M".concat(xStart, ",").concat(y, " A").concat(r, ",").concat(r, " 0 0 1 ").concat(xStart, " ").concat(y) }))));
+            React.createElement("mask", { id: uniqId },
+                React.createElement("circle", { cx: '50%', cy: '50%', r: radius, strokeWidth: lineWidth, strokeLinecap: 'round', stroke: '#fff', strokeDashoffset: -rotationAngle, strokeDasharray: strokeDasharray, pathLength: pathLength }))),
+        React.createElement("foreignObject", { x: '0', y: '0', width: size, height: size, mask: "url(#".concat(uniqId, ")") },
+            React.createElement("div", { className: styles.gradient, style: { backgroundImage: gradient } }))));
 };
 
-export { SIZE_TO_CLASSNAME_MAP, Spinner };
+export { Spinner };

esm/index.js

@@ -1,1 +0,1 @@
-export { SIZE_TO_CLASSNAME_MAP, Spinner } from './Component.js';
+export { Spinner } from './Component.js';

index.js

@@ -9,3 +9,2 @@ 'use strict';
 
-exports.SIZE_TO_CLASSNAME_MAP = Component.SIZE_TO_CLASSNAME_MAP;
 exports.Spinner = Component.Spinner;

modern/Component.d.ts

@@ -1,13 +0,16 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
 type SpinnerProps = {
     /**
+     * Палитра, в контексте которой используется спиннер
+     * @default default
+     */
+    colors?: 'default' | 'inverted';
+    /**
      * Управление видимостью компонента
+     * @default false
      */
     visible?: boolean;
     /**
-     * Размер компонента
-     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
-     */
-    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
-    /**
      * Дополнительный класс
@@ -25,15 +28,21 @@ */
     /**
-     * Палитра, в контексте которой используется спиннер
+     * Дополнительные инлайн стили для cпиннера
      */
-    colors?: 'default' | 'inverted';
-};
-declare const SIZE_TO_CLASSNAME_MAP: {
-    xs: string;
-    s: string;
-    m: string;
-    16: string;
-    24: string;
-    48: string;
-};
+    style?: React.CSSProperties;
+} & ({
+    /**
+     * Размер спиннера (кольца)
+     */
+    size: number;
+    /**
+     * Толщина линии спинера (кольца)
+     */
+    lineWidth: number;
+} | {
+    /**
+     * Преднастроенный вариант
+     */
+    preset: 16 | 24 | 48;
+});
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };
+export { SpinnerProps, Spinner };

modern/Component.js

 import React from 'react';
 import cn from 'classnames';
+import { hasOwnProperty, isNonNullable, devWarning } from '@alfalab/core-components-shared/modern';
 import { useId } from '@alfalab/hooks';
 
-const defaultColors = {"component":"spinner__component_9ln32"};
+const defaultColors = {"component":"spinner__component_113u6"};
 require('./default.css')
 
-const styles = {"spinner":"spinner__spinner_1rkq4","spin_animation":"spinner__spin_animation_1rkq4","visible":"spinner__visible_1rkq4","size-16":"spinner__size-16_1rkq4","size-24":"spinner__size-24_1rkq4","size-48":"spinner__size-48_1rkq4"};
+const styles = {"spinner":"spinner__spinner_1ndpi","spin_animation":"spinner__spin_animation_1ndpi","visible":"spinner__visible_1ndpi","gradient":"spinner__gradient_1ndpi"};
 require('./index.css')
 
-const invertedColors = {"component":"spinner__component_nilh9"};
+const invertedColors = {"component":"spinner__component_1f0sk"};
 require('./inverted.css')
 
+const presetStyles = {"preset16":"spinner__preset16_i1yci","preset24":"spinner__preset24_i1yci","preset48":"spinner__preset48_i1yci"};
+require('./preset.css')
+
 const colorStyles = {
@@ -18,67 +22,42 @@ default: defaultColors,
 };
-const CONFIG = {
-    xs: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    s: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    m: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
-    16: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    24: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    48: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
+const PRESET_CONFIG = {
+    16: [2, 14, 'preset16'],
+    24: [2, 20, 'preset24'],
+    48: [4, 40, 'preset48'],
 };
-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 Spinner = (props) => {
+    const { style, visible, id, className, dataTestId, colors = 'default' } = props;
+    let size;
+    let lineWidth;
+    let presetClassname;
+    if (hasOwnProperty(props, 'preset')) {
+        const { preset } = props;
+        const config = PRESET_CONFIG[preset];
+        const [, , styleKey] = config;
+        [lineWidth, size] = config;
+        presetClassname = presetStyles[styleKey];
+    }
+    else {
+        size = props.size;
+        lineWidth = props.lineWidth;
+    }
+    const color = style?.color;
+    if (isNonNullable(color)) {
+        devWarning(`[Spinner]: Палитра, в контексте которой используется спиннер (проп 'colors') игнорируется. Используется цвет 'style.color' ${color}`);
+    }
     const uniqId = useId();
-    const { size, padding, lineWidth } = CONFIG[sizeProp];
-    const xStart = padding + lineWidth / 2;
-    const xEnd = size - xStart;
-    const y = size / 2;
-    const r = y - xStart;
-    const topGradientId = `${uniqId}_top`;
-    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[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, {
-            [styles.visible]: visible,
-        }), "data-test-id": dataTestId, id: id },
+    const radius = size / 2 - lineWidth / 2;
+    const rotationAngle /* deg */ = Math.ceil((Math.asin(lineWidth / 2 / radius) * 180) / Math.PI);
+    const gap /* deg */ = 90;
+    const pathLength /* deg */ = 360;
+    const strokeDasharray = `${pathLength - gap - rotationAngle} ${gap + rotationAngle}`;
+    const gradient = `conic-gradient(from ${rotationAngle}deg, transparent ${gap - rotationAngle * 2}deg, currentColor)`;
+    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${size} ${size}`, style: { ...style, height: size, width: size }, className: cn(styles.spinner, colorStyles[colors].component, presetClassname, className, { [styles.visible]: visible }), "data-test-id": dataTestId, id: id },
         React.createElement("defs", null,
-            React.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
-                React.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
-                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
-            React.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
-                React.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
-                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
-        React.createElement("g", { strokeWidth: lineWidth },
-            React.createElement("path", { stroke: `url(#${topGradientId})`, d: `M${xStart},${y} A${r},${r} 0 0 1 ${xEnd},${y}` }),
-            React.createElement("path", { stroke: `url(#${bottomGradientId})`, d: `M${xEnd},${y} A${r},${r} 0 0 1 ${xStart},${y}` }),
-            React.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: `M${xStart},${y} A${r},${r} 0 0 1 ${xStart} ${y}` }))));
+            React.createElement("mask", { id: uniqId },
+                React.createElement("circle", { cx: '50%', cy: '50%', r: radius, strokeWidth: lineWidth, strokeLinecap: 'round', stroke: '#fff', strokeDashoffset: -rotationAngle, strokeDasharray: strokeDasharray, pathLength: pathLength }))),
+        React.createElement("foreignObject", { x: '0', y: '0', width: size, height: size, mask: `url(#${uniqId})` },
+            React.createElement("div", { className: styles.gradient, style: { backgroundImage: gradient } }))));
 };
 
-export { SIZE_TO_CLASSNAME_MAP, Spinner };
+export { Spinner };

modern/index.js

@@ -1,1 +0,1 @@
-export { SIZE_TO_CLASSNAME_MAP, Spinner } from './Component.js';
+export { Spinner } from './Component.js';

moderncssm/Component.d.ts

@@ -1,13 +0,16 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
 type SpinnerProps = {
     /**
+     * Палитра, в контексте которой используется спиннер
+     * @default default
+     */
+    colors?: 'default' | 'inverted';
+    /**
      * Управление видимостью компонента
+     * @default false
      */
     visible?: boolean;
     /**
-     * Размер компонента
-     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
-     */
-    size?: 'xs' | 's' | 'm' | 16 | 24 | 48;
-    /**
      * Дополнительный класс
@@ -25,15 +28,21 @@ */
     /**
-     * Палитра, в контексте которой используется спиннер
+     * Дополнительные инлайн стили для cпиннера
      */
-    colors?: 'default' | 'inverted';
-};
-declare const SIZE_TO_CLASSNAME_MAP: {
-    xs: string;
-    s: string;
-    m: string;
-    16: string;
-    24: string;
-    48: string;
-};
+    style?: React.CSSProperties;
+} & ({
+    /**
+     * Размер спиннера (кольца)
+     */
+    size: number;
+    /**
+     * Толщина линии спинера (кольца)
+     */
+    lineWidth: number;
+} | {
+    /**
+     * Преднастроенный вариант
+     */
+    preset: 16 | 24 | 48;
+});
 declare const Spinner: FC<SpinnerProps>;
-export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner };
+export { SpinnerProps, Spinner };

moderncssm/Component.js

 import React from 'react';
 import cn from 'classnames';
+import { hasOwnProperty, isNonNullable, devWarning } from '@alfalab/core-components-shared/moderncssm';
 import { useId } from '@alfalab/hooks';
@@ -7,2 +8,3 @@ import defaultColors from './default.module.css';
 import invertedColors from './inverted.module.css';
+import presetStyles from './preset.module.css';
 
@@ -13,67 +15,42 @@ const colorStyles = {
 };
-const CONFIG = {
-    xs: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    s: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    m: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
-    16: {
-        padding: 1,
-        lineWidth: 2,
-        size: 18,
-    },
-    24: {
-        padding: 2,
-        lineWidth: 2,
-        size: 24,
-    },
-    48: {
-        padding: 4,
-        lineWidth: 4,
-        size: 48,
-    },
+const PRESET_CONFIG = {
+    16: [2, 14, 'preset16'],
+    24: [2, 20, 'preset24'],
+    48: [4, 40, 'preset48'],
 };
-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 Spinner = (props) => {
+    const { style, visible, id, className, dataTestId, colors = 'default' } = props;
+    let size;
+    let lineWidth;
+    let presetClassname;
+    if (hasOwnProperty(props, 'preset')) {
+        const { preset } = props;
+        const config = PRESET_CONFIG[preset];
+        const [, , styleKey] = config;
+        [lineWidth, size] = config;
+        presetClassname = presetStyles[styleKey];
+    }
+    else {
+        size = props.size;
+        lineWidth = props.lineWidth;
+    }
+    const color = style?.color;
+    if (isNonNullable(color)) {
+        devWarning(`[Spinner]: Палитра, в контексте которой используется спиннер (проп 'colors') игнорируется. Используется цвет 'style.color' ${color}`);
+    }
     const uniqId = useId();
-    const { size, padding, lineWidth } = CONFIG[sizeProp];
-    const xStart = padding + lineWidth / 2;
-    const xEnd = size - xStart;
-    const y = size / 2;
-    const r = y - xStart;
-    const topGradientId = `${uniqId}_top`;
-    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[SIZE_TO_CLASSNAME_MAP[sizeProp]], className, {
-            [styles.visible]: visible,
-        }), "data-test-id": dataTestId, id: id },
+    const radius = size / 2 - lineWidth / 2;
+    const rotationAngle /* deg */ = Math.ceil((Math.asin(lineWidth / 2 / radius) * 180) / Math.PI);
+    const gap /* deg */ = 90;
+    const pathLength /* deg */ = 360;
+    const strokeDasharray = `${pathLength - gap - rotationAngle} ${gap + rotationAngle}`;
+    const gradient = `conic-gradient(from ${rotationAngle}deg, transparent ${gap - rotationAngle * 2}deg, currentColor)`;
+    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${size} ${size}`, style: { ...style, height: size, width: size }, className: cn(styles.spinner, colorStyles[colors].component, presetClassname, className, { [styles.visible]: visible }), "data-test-id": dataTestId, id: id },
         React.createElement("defs", null,
-            React.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
-                React.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
-                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
-            React.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
-                React.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
-                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
-        React.createElement("g", { strokeWidth: lineWidth },
-            React.createElement("path", { stroke: `url(#${topGradientId})`, d: `M${xStart},${y} A${r},${r} 0 0 1 ${xEnd},${y}` }),
-            React.createElement("path", { stroke: `url(#${bottomGradientId})`, d: `M${xEnd},${y} A${r},${r} 0 0 1 ${xStart},${y}` }),
-            React.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: `M${xStart},${y} A${r},${r} 0 0 1 ${xStart} ${y}` }))));
+            React.createElement("mask", { id: uniqId },
+                React.createElement("circle", { cx: '50%', cy: '50%', r: radius, strokeWidth: lineWidth, strokeLinecap: 'round', stroke: '#fff', strokeDashoffset: -rotationAngle, strokeDasharray: strokeDasharray, pathLength: pathLength }))),
+        React.createElement("foreignObject", { x: '0', y: '0', width: size, height: size, mask: `url(#${uniqId})` },
+            React.createElement("div", { className: styles.gradient, style: { backgroundImage: gradient } }))));
 };
 
-export { SIZE_TO_CLASSNAME_MAP, Spinner };
+export { Spinner };

moderncssm/index.js

@@ -1,1 +0,1 @@
-export { SIZE_TO_CLASSNAME_MAP, Spinner } from './Component.js';
+export { Spinner } from './Component.js';

package.json

 {
     "name": "@alfalab/core-components-spinner",
-    "version": "3.5.0",
+    "version": "4.0.0",
     "description": "Spinner component",
@@ -19,7 +19,8 @@ "keywords": [],
         "@alfalab/hooks": "^1.13.0",
+        "@alfalab/core-components-shared": "^0.14.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.1.0",
-    "varsVersion": "9.12.0"
+    "themesVersion": "13.5.0",
+    "varsVersion": "9.15.0"
 }

No alert changes

Improved metrics

Total package byte prevSize

261763

increased by36.02%

Number of package files

50

increased by21.95%

Lines of code

1908

increased by15.99%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@alfalab/core-components-shared@^0.14.0

• + Added@alfalab/core-components-shared@0.14.1(transitive)