@alfalab/core-components 25.1.0 → 25.3.0

package/grid/modern/index.js

@@ -1,7 +1,7 @@
 import 'classnames';
 import 'react';
 import './utils/index.js';
-import './gutters.module-b60c8f59.js';
+import './gutters.module-2efdee33.js';
 import './row/Component.js';
 import './col/Component.js';
 export { Grid } from './Component.js';

package/grid/modern/row/Component.js

@@ -1,9 +1,9 @@
 import cn from 'classnames';
 import React, { useMemo } from 'react';
 import { createClassNames } from '../utils/index.js';
-import { g as guttersStyles } from '../gutters.module-b60c8f59.js';
+import { g as guttersStyles } from '../gutters.module-2efdee33.js';
 
-var styles = {"component":"grid__component_1svv0","top":"grid__top_1svv0","middle":"grid__middle_1svv0","bottom":"grid__bottom_1svv0","left":"grid__left_1svv0","center":"grid__center_1svv0","right":"grid__right_1svv0","around":"grid__around_1svv0","between":"grid__between_1svv0"};
+var styles = {"component":"grid__component_1m070","top":"grid__top_1m070","middle":"grid__middle_1m070","bottom":"grid__bottom_1m070","left":"grid__left_1m070","center":"grid__center_1m070","right":"grid__right_1m070","around":"grid__around_1m070","between":"grid__between_1m070"};
 require('./index.css');
 
 const Row = ({ tag: Component = 'div', className, gutter = {

package/grid/modern/row/index.css

@@ -1,5 +1,5 @@
 /* hash: 1uhhv */
-.grid__component_1svv0 {
+.grid__component_1m070 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -7,34 +7,34 @@
     box-sizing: border-box;
 }
 
-.grid__top_1svv0 {
+.grid__top_1m070 {
     align-items: flex-start;
 }
 
-.grid__middle_1svv0 {
+.grid__middle_1m070 {
     align-items: center;
 }
 
-.grid__bottom_1svv0 {
+.grid__bottom_1m070 {
     align-items: flex-end;
 }
 
-.grid__left_1svv0 {
+.grid__left_1m070 {
     justify-content: flex-start;
 }
 
-.grid__center_1svv0 {
+.grid__center_1m070 {
     justify-content: center;
 }
 
-.grid__right_1svv0 {
+.grid__right_1m070 {
     justify-content: flex-end;
 }
 
-.grid__around_1svv0 {
+.grid__around_1m070 {
     justify-content: space-around;
 }
 
-.grid__between_1svv0 {
+.grid__between_1m070 {
     justify-content: space-between;
 }

package/grid/modern/row/index.js

@@ -1,5 +1,5 @@
 import 'classnames';
 import 'react';
 import '../utils/index.js';
-import '../gutters.module-b60c8f59.js';
+import '../gutters.module-2efdee33.js';
 export { Row } from './Component.js';

package/grid/row/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var gutters_module = require('../gutters.module-acfc2c53.js');
+var gutters_module = require('../gutters.module-f3d1a2cc.js');
 var cn = require('classnames');
 var React = require('react');
 var utils_index = require('../utils/index.js');
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"component":"grid__component_1svv0","top":"grid__top_1svv0","middle":"grid__middle_1svv0","bottom":"grid__bottom_1svv0","left":"grid__left_1svv0","center":"grid__center_1svv0","right":"grid__right_1svv0","around":"grid__around_1svv0","between":"grid__between_1svv0"};
+var styles = {"component":"grid__component_1m070","top":"grid__top_1m070","middle":"grid__middle_1m070","bottom":"grid__bottom_1m070","left":"grid__left_1m070","center":"grid__center_1m070","right":"grid__right_1m070","around":"grid__around_1m070","between":"grid__between_1m070"};
 require('./index.css');
 
 var Row = function (_a) {

package/grid/row/index.css

@@ -1,5 +1,5 @@
 /* hash: 1uhhv */
-.grid__component_1svv0 {
+.grid__component_1m070 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -7,34 +7,34 @@
     box-sizing: border-box;
 }
 
-.grid__top_1svv0 {
+.grid__top_1m070 {
     align-items: flex-start;
 }
 
-.grid__middle_1svv0 {
+.grid__middle_1m070 {
     align-items: center;
 }
 
-.grid__bottom_1svv0 {
+.grid__bottom_1m070 {
     align-items: flex-end;
 }
 
-.grid__left_1svv0 {
+.grid__left_1m070 {
     justify-content: flex-start;
 }
 
-.grid__center_1svv0 {
+.grid__center_1m070 {
     justify-content: center;
 }
 
-.grid__right_1svv0 {
+.grid__right_1m070 {
     justify-content: flex-end;
 }
 
-.grid__around_1svv0 {
+.grid__around_1m070 {
     justify-content: space-around;
 }
 
-.grid__between_1svv0 {
+.grid__between_1m070 {
     justify-content: space-between;
 }

package/grid/row/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../gutters.module-acfc2c53.js');
+require('../gutters.module-f3d1a2cc.js');
 require('classnames');
 require('react');
 require('../utils/index.js');

package/hatching-progress-bar/Component.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+type HatchingProgressBarProps = {
+    /**
+     * Значение заполненной части 0-100
+     */
+    value: number;
+    /**
+     * Значение будущей заполненной части 0-100
+     */
+    hatchValue: number;
+    /**
+     * Css-класс для стилизации
+     */
+    className?: string;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+};
+declare const HatchingProgressBar: React.ForwardRefExoticComponent<HatchingProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export { HatchingProgressBarProps, HatchingProgressBar };

package/hatching-progress-bar/Component.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"container":"hatching-progress-bar__container_s1oa9","hatch":"hatching-progress-bar__hatch_s1oa9","filled":"hatching-progress-bar__filled_s1oa9","positive":"hatching-progress-bar__positive_s1oa9","attention":"hatching-progress-bar__attention_s1oa9","negative":"hatching-progress-bar__negative_s1oa9","link":"hatching-progress-bar__link_s1oa9","tertiary":"hatching-progress-bar__tertiary_s1oa9","secondary":"hatching-progress-bar__secondary_s1oa9","primary":"hatching-progress-bar__primary_s1oa9","accent":"hatching-progress-bar__accent_s1oa9"};
+require('./index.css');
+
+var HatchingProgressBar = React__default['default'].forwardRef(function (_a, ref) {
+    var className = _a.className, value = _a.value, hatchValue = _a.hatchValue, _b = _a.view, view = _b === void 0 ? 'positive' : _b, dataTestId = _a.dataTestId;
+    return (React__default['default'].createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn__default['default'](styles.container, className), "data-test-id": dataTestId, ref: ref },
+        React__default['default'].createElement("div", { className: styles.hatch, style: { transform: "translateX(" + (hatchValue - 100) + "%)" } }),
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.filled, styles[view]), style: { transform: "translateX(" + (value - 100) + "%)" } })));
+});
+
+exports.HatchingProgressBar = HatchingProgressBar;

package/hatching-progress-bar/cssm/Component.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+type HatchingProgressBarProps = {
+    /**
+     * Значение заполненной части 0-100
+     */
+    value: number;
+    /**
+     * Значение будущей заполненной части 0-100
+     */
+    hatchValue: number;
+    /**
+     * Css-класс для стилизации
+     */
+    className?: string;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+};
+declare const HatchingProgressBar: React.ForwardRefExoticComponent<HatchingProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export { HatchingProgressBarProps, HatchingProgressBar };

package/hatching-progress-bar/cssm/Component.js

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var HatchingProgressBar = React__default['default'].forwardRef(function (_a, ref) {
+    var className = _a.className, value = _a.value, hatchValue = _a.hatchValue, _b = _a.view, view = _b === void 0 ? 'positive' : _b, dataTestId = _a.dataTestId;
+    return (React__default['default'].createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn__default['default'](styles__default['default'].container, className), "data-test-id": dataTestId, ref: ref },
+        React__default['default'].createElement("div", { className: styles__default['default'].hatch, style: { transform: "translateX(" + (hatchValue - 100) + "%)" } }),
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].filled, styles__default['default'][view]), style: { transform: "translateX(" + (value - 100) + "%)" } })));
+});
+
+exports.HatchingProgressBar = HatchingProgressBar;

package/hatching-progress-bar/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/hatching-progress-bar/cssm/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.HatchingProgressBar = Component.HatchingProgressBar;

package/hatching-progress-bar/cssm/index.module.css

@@ -0,0 +1,76 @@
+:root {
+    --color-light-graphic-accent: #ef3124;
+    --color-light-graphic-attention: #e58933;
+    --color-light-graphic-link: #007aff;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-m: 8px;
+}
+.container {
+    background: var(--color-light-bg-primary-inverted-alpha-10);
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--border-radius-m);
+    height: 8px;
+    position: relative;
+}
+.hatch {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    width: 100%;
+    transition: transform 0.4s ease;
+    background: repeating-linear-gradient(
+        -45deg,
+        var(--color-light-graphic-tertiary) 6px 10px,
+        var(--color-light-specialbg-nulled) 10px 18px
+    );
+}
+.filled {
+    position: relative;
+    border-radius: inherit;
+    width: 100%;
+    transition: transform 0.4s ease;
+    z-index: 1;
+}
+.positive {
+    background: var(--color-light-graphic-positive);
+}
+.attention {
+    background: var(--color-light-graphic-attention);
+}
+.negative {
+    background: var(--color-light-graphic-negative);
+}
+.link {
+    background: var(--color-light-graphic-link);
+}
+.tertiary {
+    background: var(--color-light-graphic-tertiary);
+}
+.secondary {
+    background: var(--color-light-graphic-secondary);
+}
+.primary {
+    background: var(--color-light-graphic-primary);
+}
+.accent {
+    background: var(--color-light-graphic-accent);
+}

package/hatching-progress-bar/esm/Component.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+type HatchingProgressBarProps = {
+    /**
+     * Значение заполненной части 0-100
+     */
+    value: number;
+    /**
+     * Значение будущей заполненной части 0-100
+     */
+    hatchValue: number;
+    /**
+     * Css-класс для стилизации
+     */
+    className?: string;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+};
+declare const HatchingProgressBar: React.ForwardRefExoticComponent<HatchingProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export { HatchingProgressBarProps, HatchingProgressBar };

package/hatching-progress-bar/esm/Component.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import cn from 'classnames';
+
+var styles = {"container":"hatching-progress-bar__container_s1oa9","hatch":"hatching-progress-bar__hatch_s1oa9","filled":"hatching-progress-bar__filled_s1oa9","positive":"hatching-progress-bar__positive_s1oa9","attention":"hatching-progress-bar__attention_s1oa9","negative":"hatching-progress-bar__negative_s1oa9","link":"hatching-progress-bar__link_s1oa9","tertiary":"hatching-progress-bar__tertiary_s1oa9","secondary":"hatching-progress-bar__secondary_s1oa9","primary":"hatching-progress-bar__primary_s1oa9","accent":"hatching-progress-bar__accent_s1oa9"};
+require('./index.css');
+
+var HatchingProgressBar = React.forwardRef(function (_a, ref) {
+    var className = _a.className, value = _a.value, hatchValue = _a.hatchValue, _b = _a.view, view = _b === void 0 ? 'positive' : _b, dataTestId = _a.dataTestId;
+    return (React.createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn(styles.container, className), "data-test-id": dataTestId, ref: ref },
+        React.createElement("div", { className: styles.hatch, style: { transform: "translateX(" + (hatchValue - 100) + "%)" } }),
+        React.createElement("div", { className: cn(styles.filled, styles[view]), style: { transform: "translateX(" + (value - 100) + "%)" } })));
+});
+
+export { HatchingProgressBar };

package/hatching-progress-bar/esm/index.css

@@ -0,0 +1,77 @@
+/* hash: z14vw */
+:root {
+    --color-light-graphic-accent: #ef3124;
+    --color-light-graphic-attention: #e58933;
+    --color-light-graphic-link: #007aff;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-m: 8px;
+}
+.hatching-progress-bar__container_s1oa9 {
+    background: var(--color-light-bg-primary-inverted-alpha-10);
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--border-radius-m);
+    height: 8px;
+    position: relative;
+}
+.hatching-progress-bar__hatch_s1oa9 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    width: 100%;
+    transition: transform 0.4s ease;
+    background: repeating-linear-gradient(
+        -45deg,
+        var(--color-light-graphic-tertiary) 6px 10px,
+        var(--color-light-specialbg-nulled) 10px 18px
+    );
+}
+.hatching-progress-bar__filled_s1oa9 {
+    position: relative;
+    border-radius: inherit;
+    width: 100%;
+    transition: transform 0.4s ease;
+    z-index: 1;
+}
+.hatching-progress-bar__positive_s1oa9 {
+    background: var(--color-light-graphic-positive);
+}
+.hatching-progress-bar__attention_s1oa9 {
+    background: var(--color-light-graphic-attention);
+}
+.hatching-progress-bar__negative_s1oa9 {
+    background: var(--color-light-graphic-negative);
+}
+.hatching-progress-bar__link_s1oa9 {
+    background: var(--color-light-graphic-link);
+}
+.hatching-progress-bar__tertiary_s1oa9 {
+    background: var(--color-light-graphic-tertiary);
+}
+.hatching-progress-bar__secondary_s1oa9 {
+    background: var(--color-light-graphic-secondary);
+}
+.hatching-progress-bar__primary_s1oa9 {
+    background: var(--color-light-graphic-primary);
+}
+.hatching-progress-bar__accent_s1oa9 {
+    background: var(--color-light-graphic-accent);
+}

package/hatching-progress-bar/esm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/hatching-progress-bar/esm/index.js

@@ -0,0 +1,3 @@
+import 'react';
+import 'classnames';
+export { HatchingProgressBar } from './Component.js';

package/hatching-progress-bar/index.css

@@ -0,0 +1,77 @@
+/* hash: z14vw */
+:root {
+    --color-light-graphic-accent: #ef3124;
+    --color-light-graphic-attention: #e58933;
+    --color-light-graphic-link: #007aff;
+    --color-light-graphic-negative: #f15045;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-m: 8px;
+}
+.hatching-progress-bar__container_s1oa9 {
+    background: var(--color-light-bg-primary-inverted-alpha-10);
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--border-radius-m);
+    height: 8px;
+    position: relative;
+}
+.hatching-progress-bar__hatch_s1oa9 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    width: 100%;
+    transition: transform 0.4s ease;
+    background: repeating-linear-gradient(
+        -45deg,
+        var(--color-light-graphic-tertiary) 6px 10px,
+        var(--color-light-specialbg-nulled) 10px 18px
+    );
+}
+.hatching-progress-bar__filled_s1oa9 {
+    position: relative;
+    border-radius: inherit;
+    width: 100%;
+    transition: transform 0.4s ease;
+    z-index: 1;
+}
+.hatching-progress-bar__positive_s1oa9 {
+    background: var(--color-light-graphic-positive);
+}
+.hatching-progress-bar__attention_s1oa9 {
+    background: var(--color-light-graphic-attention);
+}
+.hatching-progress-bar__negative_s1oa9 {
+    background: var(--color-light-graphic-negative);
+}
+.hatching-progress-bar__link_s1oa9 {
+    background: var(--color-light-graphic-link);
+}
+.hatching-progress-bar__tertiary_s1oa9 {
+    background: var(--color-light-graphic-tertiary);
+}
+.hatching-progress-bar__secondary_s1oa9 {
+    background: var(--color-light-graphic-secondary);
+}
+.hatching-progress-bar__primary_s1oa9 {
+    background: var(--color-light-graphic-primary);
+}
+.hatching-progress-bar__accent_s1oa9 {
+    background: var(--color-light-graphic-accent);
+}

package/hatching-progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/hatching-progress-bar/index.js

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+var Component = require('./Component.js');
+
+
+
+exports.HatchingProgressBar = Component.HatchingProgressBar;

package/hatching-progress-bar/modern/Component.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+type HatchingProgressBarProps = {
+    /**
+     * Значение заполненной части 0-100
+     */
+    value: number;
+    /**
+     * Значение будущей заполненной части 0-100
+     */
+    hatchValue: number;
+    /**
+     * Css-класс для стилизации
+     */
+    className?: string;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+};
+declare const HatchingProgressBar: React.ForwardRefExoticComponent<HatchingProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export { HatchingProgressBarProps, HatchingProgressBar };

package/hatching-progress-bar/modern/Component.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cn from 'classnames';
+
+var styles = {"container":"hatching-progress-bar__container_s1oa9","hatch":"hatching-progress-bar__hatch_s1oa9","filled":"hatching-progress-bar__filled_s1oa9","positive":"hatching-progress-bar__positive_s1oa9","attention":"hatching-progress-bar__attention_s1oa9","negative":"hatching-progress-bar__negative_s1oa9","link":"hatching-progress-bar__link_s1oa9","tertiary":"hatching-progress-bar__tertiary_s1oa9","secondary":"hatching-progress-bar__secondary_s1oa9","primary":"hatching-progress-bar__primary_s1oa9","accent":"hatching-progress-bar__accent_s1oa9"};
+require('./index.css');
+
+const HatchingProgressBar = React.forwardRef(({ className, value, hatchValue, view = 'positive', dataTestId }, ref) => (React.createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn(styles.container, className), "data-test-id": dataTestId, ref: ref },
+    React.createElement("div", { className: styles.hatch, style: { transform: `translateX(${hatchValue - 100}%)` } }),
+    React.createElement("div", { className: cn(styles.filled, styles[view]), style: { transform: `translateX(${value - 100}%)` } }))));
+
+export { HatchingProgressBar };