@cloud-ru/ds-loader 1.0.0

package/dist/cjs/components/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SUN_SIZE = exports.LOADER_SIZE = void 0;
+exports.LOADER_SIZE = {
+    '2XS': '2xs',
+    XS: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.SUN_SIZE = {
+    XS: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './Spinner';
+export * from './Sun';
+export * from './types';

package/dist/cjs/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./Sun"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { LOADER_SIZE, SUN_SIZE } from './constants';
+export type LoaderSize = ValueOf<typeof LOADER_SIZE>;
+export type SunSize = ValueOf<typeof SUN_SIZE>;

package/dist/cjs/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/style.css

@@ -0,0 +1,124 @@
+.spinner{
+  pointer-events:none;
+  stroke:currentcolor;
+  animation:spin 1s ease-in-out infinite;
+}
+.spinner > g > path{
+  fill:currentcolor;
+}
+.spinner > mask{
+  mask-type:alpha;
+}
+.spinner[data-size="2xs"]{
+  width:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
+}
+.spinner[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.spinner[data-size=s]{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.spinner[data-size=m]{
+  width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+}
+.spinner[data-size=l]{
+  width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+  height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+}
+@keyframes spin{
+  to{
+    transform:rotate(360deg);
+  }
+}
+.sun{
+  pointer-events:none;
+  fill:currentcolor;
+}
+.sun[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.sun[data-size=s]{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.sun[data-size=m]{
+  width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+}
+.sun[data-size=l]{
+  width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+  height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+}
+.sun > path{
+  stroke:currentcolor;
+  animation-name:loading-wheel;
+  animation-timing-function:linear;
+  animation-iteration-count:infinite;
+}
+.sun > path:nth-child(1){
+  animation-duration:1000ms;
+  animation-delay:0ms;
+}
+.sun > path:nth-child(2){
+  animation-duration:1000ms;
+  animation-delay:-125ms;
+}
+.sun > path:nth-child(3){
+  animation-duration:1000ms;
+  animation-delay:-250ms;
+}
+.sun > path:nth-child(4){
+  animation-duration:1000ms;
+  animation-delay:-375ms;
+}
+.sun > path:nth-child(5){
+  animation-duration:1000ms;
+  animation-delay:-500ms;
+}
+.sun > path:nth-child(6){
+  animation-duration:1000ms;
+  animation-delay:-625ms;
+}
+.sun > path:nth-child(7){
+  animation-duration:1000ms;
+  animation-delay:-750ms;
+}
+.sun > path:nth-child(8){
+  animation-duration:1000ms;
+  animation-delay:-875ms;
+}
+
+@keyframes loading-wheel{
+  0%{
+    opacity:1;
+  }
+  12.5%{
+    opacity:0.48;
+  }
+  25%{
+    opacity:0.4;
+  }
+  37.5%{
+    opacity:0.32;
+  }
+  50%{
+    opacity:0.24;
+  }
+  62.5%{
+    opacity:0.16;
+  }
+  75%{
+    opacity:0.08;
+  }
+  87.5%{
+    opacity:0.04;
+  }
+  100%{
+    opacity:1;
+  }
+}

package/dist/esm/components/Spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { LoaderSize } from '../types.js';
+export type SpinnerProps = WithSupportProps<{
+    /** Размер */
+    size?: LoaderSize;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Компонент спиннер */
+export declare function Spinner({ size, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { LOADER_SIZE } from '../constants.js';
+import { SPINNER_GEOMETRY, SPINNER_TRACK_OPACITY } from './constants.js';
+import styles from './styles.module.css';
+import { buildQuarterArcPath } from './utils.js';
+/** Компонент спиннер */
+export function Spinner({ size = LOADER_SIZE.S, className, ...rest }) {
+    const { frame, ring, strokeWidth } = SPINNER_GEOMETRY[size];
+    const center = frame / 2;
+    const radius = ring / 2;
+    return (_jsxs("svg", { viewBox: `0 0 ${frame} ${frame}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, className), ...extractSupportProps(rest), "data-size": size, children: [_jsx("circle", { opacity: SPINNER_TRACK_OPACITY, cx: center, cy: center, r: radius, strokeWidth: strokeWidth }), _jsx("path", { d: buildQuarterArcPath(center, radius), strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
+}

package/dist/esm/components/Spinner/constants.d.ts

@@ -0,0 +1,17 @@
+import { LoaderSize } from '../types.js';
+type SpinnerGeometry = {
+    /** Сторона квадратного кадра — `viewBox` иконки */
+    frame: number;
+    /** Диаметр кольца по центру обводки */
+    ring: number;
+    /** Толщина обводки кольца и дуги */
+    strokeWidth: number;
+};
+/**
+ * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
+ * (страница `loader`, узел `2918:21302`).
+ */
+export declare const SPINNER_GEOMETRY: Record<LoaderSize, SpinnerGeometry>;
+/** Прозрачность трека — кольца под вращающейся дугой */
+export declare const SPINNER_TRACK_OPACITY = 0.24;
+export {};

package/dist/esm/components/Spinner/constants.js

@@ -0,0 +1,14 @@
+import { LOADER_SIZE } from '../constants.js';
+/**
+ * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
+ * (страница `loader`, узел `2918:21302`).
+ */
+export const SPINNER_GEOMETRY = {
+    [LOADER_SIZE['2XS']]: { frame: 8, ring: 6, strokeWidth: 0.5 },
+    [LOADER_SIZE.XS]: { frame: 16, ring: 9, strokeWidth: 1.25 },
+    [LOADER_SIZE.S]: { frame: 24, ring: 13, strokeWidth: 1.5 },
+    [LOADER_SIZE.M]: { frame: 32, ring: 20, strokeWidth: 2 },
+    [LOADER_SIZE.L]: { frame: 40, ring: 30, strokeWidth: 2.5 },
+};
+/** Прозрачность трека — кольца под вращающейся дугой */
+export const SPINNER_TRACK_OPACITY = 0.24;

package/dist/esm/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './Spinner.js';

package/dist/esm/components/Spinner/index.js

@@ -0,0 +1 @@
+export * from './Spinner.js';

package/dist/esm/components/Spinner/styles.module.css

@@ -0,0 +1,36 @@
+.spinner{
+  pointer-events:none;
+  stroke:currentcolor;
+  animation:spin 1s ease-in-out infinite;
+}
+.spinner > g > path{
+  fill:currentcolor;
+}
+.spinner > mask{
+  mask-type:alpha;
+}
+.spinner[data-size="2xs"]{
+  width:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
+}
+.spinner[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.spinner[data-size=s]{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.spinner[data-size=m]{
+  width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+}
+.spinner[data-size=l]{
+  width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+  height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+}
+@keyframes spin{
+  to{
+    transform:rotate(360deg);
+  }
+}

package/dist/esm/components/Spinner/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Путь четверти окружности — от левой точки кольца к верхней, против часовой стрелки.
+ * Так дуга спиннера повторяет `ToneAlpha1` из мастера Figma.
+ */
+export declare function buildQuarterArcPath(center: number, radius: number): string;

package/dist/esm/components/Spinner/utils.js

@@ -0,0 +1,17 @@
+/** Отношение длины контрольного плеча к радиусу для четверти окружности, заданной кубической кривой Безье */
+const QUARTER_ARC_HANDLE_RATIO = 0.5522847498;
+function format(value) {
+    return String(Number(value.toFixed(5)));
+}
+/**
+ * Путь четверти окружности — от левой точки кольца к верхней, против часовой стрелки.
+ * Так дуга спиннера повторяет `ToneAlpha1` из мастера Figma.
+ */
+export function buildQuarterArcPath(center, radius) {
+    const handle = radius * QUARTER_ARC_HANDLE_RATIO;
+    const start = `${format(center - radius)} ${format(center)}`;
+    const firstControl = `${format(center - radius)} ${format(center - handle)}`;
+    const secondControl = `${format(center - handle)} ${format(center - radius)}`;
+    const end = `${format(center)} ${format(center - radius)}`;
+    return `M${start}C${firstControl} ${secondControl} ${end}`;
+}

package/dist/esm/components/Sun/Sun.d.ts

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { SunSize } from '../types.js';
+export type SunProps = WithSupportProps<{
+    /** Размер */
+    size?: SunSize;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Компонент спиннер */
+export declare function Sun({ size, className, ...rest }: SunProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Sun/Sun.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { LOADER_SIZE } from '../constants.js';
+import { SUN_STROKE_WIDTH } from './constants.js';
+import styles from './styles.module.css';
+/** Компонент спиннер */
+export function Sun({ size = LOADER_SIZE.S, className, ...rest }) {
+    const strokeWidth = SUN_STROKE_WIDTH[size];
+    return (_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', id: 'SunSVG', className: cn(styles.sun, className), ...extractSupportProps(rest), "data-size": size, children: [_jsx("path", { d: 'M12 4V7', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M6.34302 6.34314L8.46434 8.46446', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M4 12L7 12', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M6.34302 17.6569L8.46434 15.5355', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M12 17V20', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M15.5354 15.5355L17.6567 17.6568', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M17 12L20 12', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M15.5354 8.46448L17.6567 6.34316', strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
+}

package/dist/esm/components/Sun/constants.d.ts

@@ -0,0 +1,18 @@
+import { SunSize } from '../types.js';
+/**
+ * Толщина луча по размерам, в единицах `viewBox` (кадр 24 у всех размеров).
+ *
+ * Пути солнца нарисованы в кадре 24, а сам `<svg>` масштабируется CSS'ом до размера
+ * иконки — значит видимая толщина равна `strokeWidth × размер / 24`. Поэтому число
+ * здесь пересчитано от эталона Figma, а не взято из макета напрямую:
+ *
+ * | размер | иконка | эталон Figma | `strokeWidth` |
+ * |--------|--------|--------------|---------------|
+ * | `xs`   | 16     | 1.25         | 1.875         |
+ * | `s`    | 24     | 1.5          | 1.5           |
+ * | `m`    | 32     | 2            | 1.5           |
+ * | `l`    | 40     | 2.5          | 1.5           |
+ *
+ * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
+ */
+export declare const SUN_STROKE_WIDTH: Record<SunSize, number>;

package/dist/esm/components/Sun/constants.js

@@ -0,0 +1,23 @@
+import { SUN_SIZE } from '../constants.js';
+/**
+ * Толщина луча по размерам, в единицах `viewBox` (кадр 24 у всех размеров).
+ *
+ * Пути солнца нарисованы в кадре 24, а сам `<svg>` масштабируется CSS'ом до размера
+ * иконки — значит видимая толщина равна `strokeWidth × размер / 24`. Поэтому число
+ * здесь пересчитано от эталона Figma, а не взято из макета напрямую:
+ *
+ * | размер | иконка | эталон Figma | `strokeWidth` |
+ * |--------|--------|--------------|---------------|
+ * | `xs`   | 16     | 1.25         | 1.875         |
+ * | `s`    | 24     | 1.5          | 1.5           |
+ * | `m`    | 32     | 2            | 1.5           |
+ * | `l`    | 40     | 2.5          | 1.5           |
+ *
+ * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
+ */
+export const SUN_STROKE_WIDTH = {
+    [SUN_SIZE.XS]: 1.875,
+    [SUN_SIZE.S]: 1.5,
+    [SUN_SIZE.M]: 1.5,
+    [SUN_SIZE.L]: 1.5,
+};

package/dist/esm/components/Sun/index.d.ts

@@ -0,0 +1 @@
+export * from './Sun.js';

package/dist/esm/components/Sun/index.js

@@ -0,0 +1 @@
+export * from './Sun.js';

package/dist/esm/components/Sun/styles.module.css

@@ -0,0 +1,88 @@
+.sun{
+  pointer-events:none;
+  fill:currentcolor;
+}
+.sun[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.sun[data-size=s]{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.sun[data-size=m]{
+  width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
+}
+.sun[data-size=l]{
+  width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+  height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
+}
+.sun > path{
+  stroke:currentcolor;
+  animation-name:loading-wheel;
+  animation-timing-function:linear;
+  animation-iteration-count:infinite;
+}
+.sun > path:nth-child(1){
+  animation-duration:1000ms;
+  animation-delay:0ms;
+}
+.sun > path:nth-child(2){
+  animation-duration:1000ms;
+  animation-delay:-125ms;
+}
+.sun > path:nth-child(3){
+  animation-duration:1000ms;
+  animation-delay:-250ms;
+}
+.sun > path:nth-child(4){
+  animation-duration:1000ms;
+  animation-delay:-375ms;
+}
+.sun > path:nth-child(5){
+  animation-duration:1000ms;
+  animation-delay:-500ms;
+}
+.sun > path:nth-child(6){
+  animation-duration:1000ms;
+  animation-delay:-625ms;
+}
+.sun > path:nth-child(7){
+  animation-duration:1000ms;
+  animation-delay:-750ms;
+}
+.sun > path:nth-child(8){
+  animation-duration:1000ms;
+  animation-delay:-875ms;
+}
+
+@keyframes loading-wheel{
+  0%{
+    opacity:1;
+  }
+  12.5%{
+    opacity:0.48;
+  }
+  25%{
+    opacity:0.4;
+  }
+  37.5%{
+    opacity:0.32;
+  }
+  50%{
+    opacity:0.24;
+  }
+  62.5%{
+    opacity:0.16;
+  }
+  75%{
+    opacity:0.08;
+  }
+  87.5%{
+    opacity:0.04;
+  }
+  100%{
+    opacity:1;
+  }
+}

package/dist/esm/components/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const LOADER_SIZE: {
+    readonly '2XS': "2xs";
+    readonly XS: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const SUN_SIZE: {
+    readonly XS: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};

package/dist/esm/components/constants.js

@@ -0,0 +1,13 @@
+export const LOADER_SIZE = {
+    '2XS': '2xs',
+    XS: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const SUN_SIZE = {
+    XS: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './constants.js';
+export * from './Spinner/index.js';
+export * from './Sun/index.js';
+export * from './types.js';

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from './constants.js';
+export * from './Spinner/index.js';
+export * from './Sun/index.js';
+export * from './types.js';

package/dist/esm/components/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { LOADER_SIZE, SUN_SIZE } from './constants.js';
+export type LoaderSize = ValueOf<typeof LOADER_SIZE>;
+export type SunSize = ValueOf<typeof SUN_SIZE>;

package/dist/esm/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';