@hh.ru/magritte-ui-loader 3.0.14 → 4.0.0

package/Loader.js

@@ -1,29 +1,48 @@
 import './index.css';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { LoaderOutlinedSize16, LoaderOutlinedSize24, LoaderOutlinedSize32, LoaderOutlinedSize48, LoaderOutlinedSize64, LoaderOutlinedSize96 } from '@hh.ru/magritte-ui-icon/icon';
+import { LoaderOutlinedSize16, LoaderOutlinedSize24, LoaderOutlinedSize32, LoaderOutlinedSize48, LoaderOutlinedSize64, LoaderOutlinedSize96, HyperstarFilledSize16, HyperstarFilledSize24, HyperstarFilledSize32, HyperstarFilledSize48, HyperstarFilledSize64, HyperstarFilledSize96 } from '@hh.ru/magritte-ui-icon/icon';
 
-var styles = {"loader":"magritte-loader___GSe1a_3-0-14","loader-color-override":"magritte-loader-color-override___-ttHq_3-0-14","loaderColorOverride":"magritte-loader-color-override___-ttHq_3-0-14"};
+var styles = {"loader":"magritte-loader___GSe1a_4-0-0","loader-color-override":"magritte-loader-color-override___-ttHq_4-0-0","loaderColorOverride":"magritte-loader-color-override___-ttHq_4-0-0","stars":"magritte-stars___NlDEc_4-0-0","star-1-position-animation":"magritte-star-1-position-animation___YJawa_4-0-0","star1PositionAnimation":"magritte-star-1-position-animation___YJawa_4-0-0","star-1-scale-animation":"magritte-star-1-scale-animation___s3pjV_4-0-0","star1ScaleAnimation":"magritte-star-1-scale-animation___s3pjV_4-0-0","star-2-position-animation":"magritte-star-2-position-animation___a7b4H_4-0-0","star2PositionAnimation":"magritte-star-2-position-animation___a7b4H_4-0-0","star-2-scale-animation":"magritte-star-2-scale-animation___EFKyj_4-0-0","star2ScaleAnimation":"magritte-star-2-scale-animation___EFKyj_4-0-0"};
 
-const ICON_BY_SIZE = new Map([
-    [16, LoaderOutlinedSize16],
-    [24, LoaderOutlinedSize24],
-    [32, LoaderOutlinedSize32],
-    [48, LoaderOutlinedSize48],
-    [64, LoaderOutlinedSize64],
-    [96, LoaderOutlinedSize96],
-]);
-const Loader = ({ size = 16, 'aria-label': ariaLabel = 'loading', initial, ...props }) => {
-    const Element = ICON_BY_SIZE.get(size);
+const ICON_BY_SIZE = {
+    default: {
+        16: LoaderOutlinedSize16,
+        24: LoaderOutlinedSize24,
+        32: LoaderOutlinedSize32,
+        48: LoaderOutlinedSize48,
+        64: LoaderOutlinedSize64,
+        96: LoaderOutlinedSize96,
+    },
+    hyperstar: {
+        16: HyperstarFilledSize16,
+        24: HyperstarFilledSize24,
+        32: HyperstarFilledSize32,
+        48: HyperstarFilledSize48,
+        64: HyperstarFilledSize64,
+        96: HyperstarFilledSize96,
+    },
+};
+const ICON_COLOR = {
+    default: 'accent',
+    hyperstar: 'tertiary',
+};
+const Loader = ({ size = 16, 'aria-label': ariaLabel = 'loading', color, mode = 'default', }) => {
+    const Element = ICON_BY_SIZE[mode][size];
     if (!Element) {
         return null;
     }
-    const baseProps = {
+    const iconProps = {
         'aria-label': ariaLabel,
-        initialColor: initial,
-        ...props,
+        initialColor: color ?? ICON_COLOR[mode],
     };
-    return (jsx("span", { className: classNames(styles.loader, { [styles.loaderColorOverride]: !initial }), role: "status", "data-qa": "magritte-loader", children: jsx(Element, { ...baseProps, loading: true }) }));
+    if (mode === 'default') {
+        return (jsx("span", { className: classNames(styles.loader, { [styles.loaderColorOverride]: !color }), role: "status", "data-qa": "magritte-loader", children: jsx(Element, { ...iconProps, loading: true }) }));
+    }
+    if (mode === 'hyperstar') {
+        return (jsxs("span", { className: classNames(styles.stars, { [styles.loaderColorOverride]: !color }), role: "status", "data-qa": "magritte-loader", style: { width: size, height: size }, children: [jsx("span", { className: styles.star1PositionAnimation, children: jsx("span", { className: styles.star1ScaleAnimation, children: jsx(Element, { ...iconProps }) }) }), jsx("span", { className: styles.star2PositionAnimation, children: jsx("span", { className: styles.star2ScaleAnimation, children: jsx(Element, { ...iconProps }) }) })] }));
+    }
+    return null;
 };
 
 export { Loader };

package/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["src/Loader.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\n\nimport { IconWrapperComponent } from '@hh.ru/magritte-ui-icon';\nimport {\n    LoaderOutlinedSize16,\n    LoaderOutlinedSize24,\n    LoaderOutlinedSize32,\n    LoaderOutlinedSize48,\n    LoaderOutlinedSize64,\n    LoaderOutlinedSize96,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { type LoaderSize, type LoaderProps } from '@hh.ru/magritte-ui-loader/types';\n\nimport styles from './loader.less';\n\nconst ICON_BY_SIZE = new Map<LoaderSize, IconWrapperComponent>([\n    [16, LoaderOutlinedSize16],\n    [24, LoaderOutlinedSize24],\n    [32, LoaderOutlinedSize32],\n    [48, LoaderOutlinedSize48],\n    [64, LoaderOutlinedSize64],\n    [96, LoaderOutlinedSize96],\n]);\n\nexport const Loader: FC<LoaderProps> = ({ size = 16, 'aria-label': ariaLabel = 'loading', initial, ...props }) => {\n    const Element = ICON_BY_SIZE.get(size);\n\n    if (!Element) {\n        return null;\n    }\n\n    const baseProps = {\n        'aria-label': ariaLabel,\n        initialColor: initial,\n        ...props,\n    };\n\n    return (\n        <span\n            className={classNames(styles.loader, { [styles.loaderColorOverride]: !initial })}\n            role=\"status\"\n            data-qa=\"magritte-loader\"\n        >\n            <Element {...baseProps} loading />\n        </span>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAgBA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAmC;IAC3D,CAAC,EAAE,EAAE,oBAAoB,CAAC;IAC1B,CAAC,EAAE,EAAE,oBAAoB,CAAC;IAC1B,CAAC,EAAE,EAAE,oBAAoB,CAAC;IAC1B,CAAC,EAAE,EAAE,oBAAoB,CAAC;IAC1B,CAAC,EAAE,EAAE,oBAAoB,CAAC;IAC1B,CAAC,EAAE,EAAE,oBAAoB,CAAC;AAC7B,CAAA,CAAC,CAAC;MAEU,MAAM,GAAoB,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,YAAY,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,KAAI;IAC7G,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,EAAE;AACV,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,MAAM,SAAS,GAAG;AACd,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,OAAO;AACrB,QAAA,GAAG,KAAK;KACX,CAAC;AAEF,IAAA,QACIA,GACI,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,CAAC,OAAO,EAAE,CAAC,EAChF,IAAI,EAAC,QAAQ,aACL,iBAAiB,EAAA,QAAA,EAEzBA,GAAC,CAAA,OAAO,OAAK,SAAS,EAAE,OAAO,EAAG,IAAA,EAAA,CAAA,EAAA,CAC/B,EACT;AACN;;;;"}
+{"version":3,"file":"Loader.js","sources":["src/Loader.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\n\nimport { IconWrapperComponent } from '@hh.ru/magritte-ui-icon';\nimport {\n    type IconColor,\n    HyperstarFilledSize16,\n    HyperstarFilledSize24,\n    HyperstarFilledSize32,\n    HyperstarFilledSize48,\n    HyperstarFilledSize64,\n    HyperstarFilledSize96,\n    LoaderOutlinedSize16,\n    LoaderOutlinedSize24,\n    LoaderOutlinedSize32,\n    LoaderOutlinedSize48,\n    LoaderOutlinedSize64,\n    LoaderOutlinedSize96,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { type LoaderSize, type LoaderProps } from '@hh.ru/magritte-ui-loader/types';\n\nimport styles from './loader.less';\n\nconst ICON_BY_SIZE: Record<Required<LoaderProps>['mode'], Record<LoaderSize, IconWrapperComponent>> = {\n    default: {\n        16: LoaderOutlinedSize16,\n        24: LoaderOutlinedSize24,\n        32: LoaderOutlinedSize32,\n        48: LoaderOutlinedSize48,\n        64: LoaderOutlinedSize64,\n        96: LoaderOutlinedSize96,\n    },\n    hyperstar: {\n        16: HyperstarFilledSize16,\n        24: HyperstarFilledSize24,\n        32: HyperstarFilledSize32,\n        48: HyperstarFilledSize48,\n        64: HyperstarFilledSize64,\n        96: HyperstarFilledSize96,\n    },\n};\n\nconst ICON_COLOR: Record<Required<LoaderProps>['mode'], IconColor> = {\n    default: 'accent',\n    hyperstar: 'tertiary',\n};\n\nexport const Loader: FC<LoaderProps> = ({\n    size = 16,\n    'aria-label': ariaLabel = 'loading',\n    color,\n    mode = 'default',\n}) => {\n    const Element = ICON_BY_SIZE[mode][size];\n    if (!Element) {\n        return null;\n    }\n\n    const iconProps = {\n        'aria-label': ariaLabel,\n        initialColor: color ?? ICON_COLOR[mode],\n    };\n\n    if (mode === 'default') {\n        return (\n            <span\n                className={classNames(styles.loader, { [styles.loaderColorOverride]: !color })}\n                role=\"status\"\n                data-qa=\"magritte-loader\"\n            >\n                <Element {...iconProps} loading />\n            </span>\n        );\n    }\n\n    if (mode === 'hyperstar') {\n        return (\n            <span\n                className={classNames(styles.stars, { [styles.loaderColorOverride]: !color })}\n                role=\"status\"\n                data-qa=\"magritte-loader\"\n                style={{ width: size, height: size }}\n            >\n                <span className={styles.star1PositionAnimation}>\n                    <span className={styles.star1ScaleAnimation}>\n                        <Element {...iconProps} />\n                    </span>\n                </span>\n                <span className={styles.star2PositionAnimation}>\n                    <span className={styles.star2ScaleAnimation}>\n                        <Element {...iconProps} />\n                    </span>\n                </span>\n            </span>\n        );\n    }\n\n    return null;\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAuBA,MAAM,YAAY,GAAoF;AAClG,IAAA,OAAO,EAAE;AACL,QAAA,EAAE,EAAE,oBAAoB;AACxB,QAAA,EAAE,EAAE,oBAAoB;AACxB,QAAA,EAAE,EAAE,oBAAoB;AACxB,QAAA,EAAE,EAAE,oBAAoB;AACxB,QAAA,EAAE,EAAE,oBAAoB;AACxB,QAAA,EAAE,EAAE,oBAAoB;AAC3B,KAAA;AACD,IAAA,SAAS,EAAE;AACP,QAAA,EAAE,EAAE,qBAAqB;AACzB,QAAA,EAAE,EAAE,qBAAqB;AACzB,QAAA,EAAE,EAAE,qBAAqB;AACzB,QAAA,EAAE,EAAE,qBAAqB;AACzB,QAAA,EAAE,EAAE,qBAAqB;AACzB,QAAA,EAAE,EAAE,qBAAqB;AAC5B,KAAA;CACJ,CAAC;AAEF,MAAM,UAAU,GAAqD;AACjE,IAAA,OAAO,EAAE,QAAQ;AACjB,IAAA,SAAS,EAAE,UAAU;CACxB,CAAC;MAEW,MAAM,GAAoB,CAAC,EACpC,IAAI,GAAG,EAAE,EACT,YAAY,EAAE,SAAS,GAAG,SAAS,EACnC,KAAK,EACL,IAAI,GAAG,SAAS,GACnB,KAAI;IACD,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE;AACV,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,MAAM,SAAS,GAAG;AACd,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,KAAK,IAAI,UAAU,CAAC,IAAI,CAAC;KAC1C,CAAC;AAEF,IAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,QACIA,GACI,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,CAAC,KAAK,EAAE,CAAC,EAC9E,IAAI,EAAC,QAAQ,aACL,iBAAiB,EAAA,QAAA,EAEzBA,GAAC,CAAA,OAAO,OAAK,SAAS,EAAE,OAAO,EAAG,IAAA,EAAA,CAAA,EAAA,CAC/B,EACT;KACL;AAED,IAAA,IAAI,IAAI,KAAK,WAAW,EAAE;AACtB,QAAA,QACIC,IACI,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,CAAC,KAAK,EAAE,CAAC,EAC7E,IAAI,EAAC,QAAQ,aACL,iBAAiB,EACzB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAEpCD,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EAC1CA,cAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACvC,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAK,EAAA,GAAA,SAAS,GAAI,EACvB,CAAA,EAAA,CACJ,EACPA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EAC1CA,cAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,YACvCA,GAAC,CAAA,OAAO,OAAK,SAAS,EAAA,CAAI,GACvB,EACJ,CAAA,CAAA,EAAA,CACJ,EACT;KACL;AAED,IAAA,OAAO,IAAI,CAAC;AAChB;;;;"}

package/index.css

@@ -1,19 +1,208 @@
-:root{
-  --magritte-color-component-loader-icon-content-v24-7-2:#0070ff;
-}
-
-.magritte-night-theme{
-  --magritte-color-component-loader-icon-content-v24-7-2:#0d63e3;
-}
-
-.magritte-zp-day-theme{
-  --magritte-color-component-loader-icon-content-v24-7-2:#7195AF;
-}
-.magritte-loader___GSe1a_3-0-14{
+.magritte-loader___GSe1a_4-0-0{
   display:inline-flex;
   height:max-content;
   width:max-content;
 }
-.magritte-loader-color-override___-ttHq_3-0-14{
-  --magritte-ui-icon-color-override:var(--magritte-ui-loader-color-override, var(--magritte-color-component-loader-icon-content-v24-7-2));
+.magritte-loader-color-override___-ttHq_4-0-0{
+  --magritte-ui-icon-color-override:var(--magritte-ui-loader-color-override);
+}
+.magritte-stars___NlDEc_4-0-0{
+  display:inline-block;
+  position:relative;
+}
+.magritte-star-1-position-animation___YJawa_4-0-0{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-star-1-position-animation___YJawa_4-0-0{
+    top:-50%;
+    left:-50%;
+    animation:magritte-star-1-position-animation___YJawa_4-0-0 3s linear infinite;
+  }
+}
+@keyframes magritte-star-1-position-animation___YJawa_4-0-0{
+  0%{
+    transform:translate(50%, 50%);
+  }
+  3.33%{
+    transform:translate(49.49%, 48.82%);
+  }
+  6.67%{
+    transform:translate(47.8%, 45.07%);
+  }
+  10%{
+    transform:translate(44.73%, 38.67%);
+  }
+  13.33%{
+    transform:translate(40.14%, 30.36%);
+  }
+  16.67%{
+    transform:translate(33.9%, 21.79%);
+  }
+  20%{
+    transform:translate(25.9%, 16.47%);
+  }
+  23.33%{
+    transform:translate(16.78%, 19.78%);
+  }
+  26.67%{
+    transform:translate(7.83%, 32.94%);
+  }
+  30%{
+    transform:translate(1.84%, 45.72%);
+  }
+  33.33%{
+    transform:translate(0%, 50%);
+  }
+  100%{
+    transform:translate(0%, 50%);
+  }
+}
+.magritte-star-1-scale-animation___s3pjV_4-0-0{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-star-1-scale-animation___s3pjV_4-0-0{
+    animation:magritte-star-1-scale-animation___s3pjV_4-0-0 3s linear infinite;
+  }
+}
+@keyframes magritte-star-1-scale-animation___s3pjV_4-0-0{
+  0%{
+    scale:100%;
+  }
+  3.33%{
+    scale:98.03%;
+  }
+  6.67%{
+    scale:91.84%;
+  }
+  10%{
+    scale:81.25%;
+  }
+  13.33%{
+    scale:66.8%;
+  }
+  16.67%{
+    scale:50%;
+  }
+  20%{
+    scale:33.2%;
+  }
+  23.33%{
+    scale:18.75%;
+  }
+  26.67%{
+    scale:8.16%;
+  }
+  30%{
+    scale:1.97%;
+  }
+  33.33%{
+    scale:0%;
+  }
+  100%{
+    scale:0%;
+  }
+}
+.magritte-star-2-position-animation___a7b4H_4-0-0{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-star-2-position-animation___a7b4H_4-0-0{
+    top:-50%;
+    left:-50%;
+    animation:magritte-star-2-position-animation___a7b4H_4-0-0 3s linear infinite;
+  }
+}
+@keyframes magritte-star-2-position-animation___a7b4H_4-0-0{
+  0%{
+    transform:translate(100%, 50%);
+  }
+  3.33%{
+    transform:translate(97.29%, 55.2%);
+  }
+  6.67%{
+    transform:translate(91.52%, 61.3%);
+  }
+  10%{
+    transform:translate(83.82%, 65.7%);
+  }
+  13.33%{
+    transform:translate(75.73%, 67.58%);
+  }
+  16.67%{
+    transform:translate(67.98%, 67.05%);
+  }
+  20%{
+    transform:translate(61.32%, 64.34%);
+  }
+  23.33%{
+    transform:translate(56.2%, 60.17%);
+  }
+  26.67%{
+    transform:translate(52.68%, 55.49%);
+  }
+  30%{
+    transform:translate(50.68%, 51.64%);
+  }
+  33.33%{
+    transform:translate(50%, 50%);
+  }
+  100%{
+    transform:translate(50%, 50%);
+  }
+}
+.magritte-star-2-scale-animation___EFKyj_4-0-0{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-star-2-scale-animation___EFKyj_4-0-0{
+    animation:magritte-star-2-scale-animation___EFKyj_4-0-0 3s linear infinite;
+  }
+}
+@keyframes magritte-star-2-scale-animation___EFKyj_4-0-0{
+  0%{
+    scale:0%;
+  }
+  3.33%{
+    scale:1.97%;
+  }
+  6.67%{
+    scale:8.16%;
+  }
+  10%{
+    scale:18.75%;
+  }
+  13.33%{
+    scale:33.2%;
+  }
+  16.67%{
+    scale:50%;
+  }
+  20%{
+    scale:66.8%;
+  }
+  23.33%{
+    scale:81.25%;
+  }
+  26.67%{
+    scale:91.84%;
+  }
+  30%{
+    scale:98.03%;
+  }
+  33.33%{
+    scale:100%;
+  }
+  100%{
+    scale:100%;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-loader",
-  "version": "3.0.14",
+  "version": "4.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -30,5 +30,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "31b8343d575729be9878df6f3d156992168a97b0"
+  "gitHead": "a912a354ba397bc6991dcf7f6ca19e02134b4abb"
 }

package/types.d.ts

@@ -1,9 +1,15 @@
-import { IconColor } from '@hh.ru/magritte-ui-icon/icon';
+import { type IconColor } from '@hh.ru/magritte-ui-icon/icon';
 export type LoaderSize = 16 | 24 | 32 | 48 | 64 | 96;
 export interface LoaderProps {
     /** Свойство для изменения размеров SVG-иконки */
     size?: LoaderSize;
     /** Цвет иконки */
-    initial?: IconColor;
+    color?: IconColor;
+    /**
+     * Задает иконку, анимации и цвет по умолчанию:
+     * `default` — спиннер, цвет по умолчанию `accent`
+     * `hyperstar` — две сменяющиеся звезды, цвет по умолчанию `tertiary`
+     */
+    mode?: 'default' | 'hyperstar';
     'aria-label'?: string;
 }