@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/timer/timer.d.ts

@@ -0,0 +1,7 @@
+import type { TimerProps } from './types';
+/**
+ * Таймер - выводит оставшееся время до заданной временной отметки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Timer({ date, format, timeout }: TimerProps): import("react/jsx-runtime").JSX.Element;

package/timer/timer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = Timer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+/**
+ * Таймер - выводит оставшееся время до заданной временной отметки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Timer({ date, format = utils_1.formatDistance, timeout = 1000 }) {
+    const [distance, setDistance] = (0, react_1.useState)((0, utils_1.getDistanceToNow)(date));
+    (0, react_1.useEffect)(() => {
+        const timerId = setInterval(() => {
+            setDistance((0, utils_1.getDistanceToNow)(date));
+        }, timeout);
+        setDistance((0, utils_1.getDistanceToNow)(date));
+        return () => clearInterval(timerId);
+    }, [timeout]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: format(distance) });
+}
+//# sourceMappingURL=timer.js.map

package/timer/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/timer/timer.tsx"],"names":[],"mappings":";;AASA,sBAcC;;AAtBD,iCAA4C;AAC5C,mCAA2D;AAE3D;;;;GAIG;AACH,SAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,sBAAc,EAAE,OAAO,GAAG,IAAI,EAAc;IACjF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAA,wBAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;YAC/B,WAAW,CAAC,IAAA,wBAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;QACtC,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,WAAW,CAAC,IAAA,wBAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,2DAAG,MAAM,CAAC,QAAQ,CAAC,GAAI,CAAC;AACjC,CAAC"}

package/timer/types.d.ts

@@ -1,6 +1,15 @@
-export interface Distance {
+import type { ReactNode } from 'react';
+export interface TimeDistance {
     days: number;
     hours: number;
     minutes: number;
     seconds: number;
 }
+export interface TimerProps {
+    /** Дата и время события. */
+    date: string;
+    /** Должна отформатировать данные об оставшемся времени для вывода. */
+    format?: (distance: TimeDistance) => ReactNode;
+    /** Частота обновления таймера в миллисекундах. */
+    timeout?: number;
+}

package/timer/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/timer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/timer/types.ts"],"names":[],"mappings":""}

package/timer/utils.d.ts

@@ -1,13 +1,13 @@
-import { Distance } from './types';
+import type { TimeDistance } from './types';
 /**
  * Форматирует оставшееся время в виде "дни:часы:минуты:секунды".
  * @param distance Оставшееся время.
  * @return Отформатированное время.
  */
-export declare const formatDistance: ({ days, hours, minutes, seconds }: Distance) => string;
+export declare function formatDistance({ days, hours, minutes, seconds }: TimeDistance): string;
 /**
  * Возвращает объект с данными об оставшемся времени от текущего момента.
  * @param dateString Строка с датой в формате ISO.
  * @return Оставшееся время.
  */
-export declare const getDistanceToNow: (dateString: string) => Distance;
+export declare function getDistanceToNow(dateString: string): TimeDistance;

package/timer/utils.js

@@ -1,36 +1,35 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDistanceToNow = exports.formatDistance = void 0;
-const formatDistanceToNowStrict_1 = __importDefault(require("date-fns/formatDistanceToNowStrict"));
-const isAfter_1 = __importDefault(require("date-fns/isAfter"));
-const isValid_1 = __importDefault(require("date-fns/isValid"));
-const parseISO_1 = __importDefault(require("date-fns/parseISO"));
+exports.formatDistance = formatDistance;
+exports.getDistanceToNow = getDistanceToNow;
+const formatDistanceToNowStrict_1 = require("date-fns/formatDistanceToNowStrict");
+const isAfter_1 = require("date-fns/isAfter");
+const isValid_1 = require("date-fns/isValid");
+const parseISO_1 = require("date-fns/parseISO");
 const UNITS = ['day', 'hour', 'minute', 'second'];
 /**
  * Форматирует оставшееся время в виде "дни:часы:минуты:секунды".
  * @param distance Оставшееся время.
  * @return Отформатированное время.
  */
-const formatDistance = ({ days, hours, minutes, seconds }) => [days, ...[hours % 24, minutes % 60, seconds % 60].map(s => `${s}`.padStart(2, '0'))].join(':');
-exports.formatDistance = formatDistance;
+function formatDistance({ days, hours, minutes, seconds }) {
+    return [days, ...[hours % 24, minutes % 60, seconds % 60].map(s => `${s}`.padStart(2, '0'))].join(':');
+}
 /**
  * Возвращает объект с данными об оставшемся времени от текущего момента.
  * @param dateString Строка с датой в формате ISO.
  * @return Оставшееся время.
  */
-const getDistanceToNow = (dateString) => {
-    const date = (0, parseISO_1.default)(dateString);
+function getDistanceToNow(dateString) {
+    const date = (0, parseISO_1.parseISO)(dateString);
     let result = { days: 0, hours: 0, minutes: 0, seconds: 0 };
-    if ((0, isValid_1.default)(date) && !(0, isAfter_1.default)(new Date(), date)) {
-        const [days, hours, minutes, seconds] = UNITS.map(unit => parseInt((0, formatDistanceToNowStrict_1.default)(date, {
+    if ((0, isValid_1.isValid)(date) && !(0, isAfter_1.isAfter)(new Date(), date)) {
+        const [days, hours, minutes, seconds] = UNITS.map(unit => parseInt((0, formatDistanceToNowStrict_1.formatDistanceToNowStrict)(date, {
             unit,
             roundingMethod: 'floor',
         }).replace(/\D/g, '')));
         result = { days, hours, minutes, seconds };
     }
     return result;
-};
-exports.getDistanceToNow = getDistanceToNow;
+}
+//# sourceMappingURL=utils.js.map

package/timer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/timer/utils.ts"],"names":[],"mappings":";;AAaA,wCAIC;AAOD,4CAmBC;AA1CD,kFAA+E;AAC/E,8CAA2C;AAC3C,8CAA2C;AAC3C,gDAA6C;AAE7C,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAE3D;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAgB;IAC5E,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC/F,GAAG,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,gBAAgB,CAAC,UAAkB;IACjD,MAAM,IAAI,GAAG,IAAA,mBAAQ,EAAC,UAAU,CAAC,CAAC;IAElC,IAAI,MAAM,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAE3D,IAAI,IAAA,iBAAO,EAAC,IAAI,CAAC,IAAI,CAAC,IAAA,iBAAO,EAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC;QAChD,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACvD,QAAQ,CACN,IAAA,qDAAyB,EAAC,IAAI,EAAE;YAC9B,IAAI;YACJ,cAAc,EAAE,OAAO;SACxB,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,CACF,CAAC;QAEF,MAAM,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;IAC7C,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/toggle/index.d.ts

@@ -1,7 +1,2 @@
-import React from 'react';
-import { CheckboxInputProps } from '../types';
-export type ToggleProps = CheckboxInputProps;
-/**
- * Компонент стилизованного переключателя (input[type=checkbox]).
- */
-export declare const Toggle: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLInputElement>>;
+export type { ToggleProps } from './types';
+export { Toggle } from './toggle';

package/toggle/index.js

@@ -1,56 +1,6 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
-const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const toggle_module_scss_1 = __importDefault(require("./toggle.module.scss"));
-const cx = bind_1.default.bind(toggle_module_scss_1.default);
-/**
- * Компонент стилизованного переключателя (input[type=checkbox]).
- */
-exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, style, 'data-testid': testId = 'toggle' } = _a, 
-    // input props
-    restProps = __rest(_a, ["className", "style", 'data-testid']);
-    return (react_1.default.createElement("label", { className: cx('root', className), style: style },
-        react_1.default.createElement("input", Object.assign({}, restProps, { className: cx('input'), ref: ref, type: 'checkbox', "data-testid": testId })),
-        react_1.default.createElement("span", { className: cx('switch') })));
-});
-exports.Toggle.displayName = 'Toggle';
+var toggle_1 = require("./toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return toggle_1.Toggle; } });
+//# sourceMappingURL=index.js.map

package/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle/index.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/toggle/toggle.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Тогл - элемент для управления полем с двумя состояниями - включено и отключено.
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<import("../types").CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/toggle/toggle.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bind_1 = __importDefault(require("classnames/bind"));
+const toggle_m_scss_1 = __importDefault(require("./toggle.m.scss"));
+const cx = bind_1.default.bind(toggle_m_scss_1.default);
+/**
+ * Тогл - элемент для управления полем с двумя состояниями - включено и отключено.
+ */
+exports.Toggle = (0, react_1.forwardRef)(function Toggle({ className, style, 'data-testid': testId = 'toggle', 
+// input props
+...restProps }, ref) {
+    return ((0, jsx_runtime_1.jsxs)("label", { className: cx('root', className), style: style, children: [(0, jsx_runtime_1.jsx)("input", { ...restProps, className: cx('input'), ref: ref, type: 'checkbox', "data-testid": testId }), (0, jsx_runtime_1.jsx)("span", { className: cx('switch') })] }));
+});
+exports.Toggle.displayName = 'Toggle';
+//# sourceMappingURL=toggle.js.map

package/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/toggle/toggle.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAmC;AACnC,2DAAyC;AACzC,oEAAqC;AAErC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,uBAAM,CAAC,CAAC;AAEnC;;GAEG;AACU,QAAA,MAAM,GAAG,IAAA,kBAAU,EAAgC,SAAS,MAAM,CAC7E,EACE,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GAAG,QAAQ;AAEhC,cAAc;AACd,GAAG,SAAS,EACb,EACD,GAAG;IAEH,OAAO,CACL,mCAAO,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aACnD,qCACM,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EACtB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,iBACF,MAAM,GACnB,EACF,iCAAM,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAI,IAC3B,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/toggle/{toggle.module.scss → toggle.m.scss}

@@ -3,7 +3,6 @@
 .root {
   position: relative;
   display: inline-block;
-  cursor: pointer;
   user-select: none;
   vertical-align: -2px;
 }
@@ -14,9 +13,9 @@
   opacity: 0;
   padding: 0;
   margin: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
   &:not(:checked) + .switch {
     --toggle-slider-position: 2px;
   }
@@ -45,6 +44,7 @@
   border-radius: 12px;
   background: var(--toggle-primary-color);
   transition: background 0.16s ease-in-out;
+  pointer-events: none;
   &::after {
     content: '';
     position: absolute;

package/toggle/types.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxInputProps } from '../types';
+export type ToggleProps = CheckboxInputProps;

package/toggle/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/toggle/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/toggle/types.ts"],"names":[],"mappings":""}

package/top-bar/index.d.ts

@@ -1,3 +1,3 @@
 export type { TopBarProps, TopBarSize } from './types';
-export type { navigationButtons } from './utils';
+export { navigationButtons } from './utils';
 export { TopBar, TOP_BAR_HEIGHT } from './top-bar';

package/top-bar/index.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOP_BAR_HEIGHT = exports.TopBar = void 0;
+exports.TOP_BAR_HEIGHT = exports.TopBar = exports.navigationButtons = void 0;
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "navigationButtons", { enumerable: true, get: function () { return utils_1.navigationButtons; } });
 var top_bar_1 = require("./top-bar");
 Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return top_bar_1.TopBar; } });
 Object.defineProperty(exports, "TOP_BAR_HEIGHT", { enumerable: true, get: function () { return top_bar_1.TOP_BAR_HEIGHT; } });
+//# sourceMappingURL=index.js.map

package/top-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/top-bar/index.ts"],"names":[],"mappings":";;;AACA,iCAA4C;AAAnC,0GAAA,iBAAiB,OAAA;AAC1B,qCAAmD;AAA1C,iGAAA,MAAM,OAAA;AAAE,yGAAA,cAAc,OAAA"}

package/top-bar/top-bar.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { TopBarProps, TopBarSize } from './types';
 export declare const TOP_BAR_HEIGHT: Readonly<Record<TopBarSize, number>>;
 /**
- * Компонент шапки модальных окон/экранов.
+ * Топ-бар - блок для вывода содержимого в верхней части карточек, модальных окон и других сложных элементов.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function TopBar({ divided, size, title, subtitle, buttons: { start, startSecondary, end, endSecondary }, className, 'data-testid': testId, }: TopBarProps): JSX.Element;
+export declare function TopBar({ divided, size, rounds, title, subtitle, buttons: { start, startSecondary, end, endSecondary }, className, style, 'data-testid': testId, }: TopBarProps): import("react/jsx-runtime").JSX.Element;

package/top-bar/top-bar.js

@@ -1,101 +1,54 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopBar = exports.TOP_BAR_HEIGHT = void 0;
-const react_1 = __importStar(require("react"));
+exports.TOP_BAR_HEIGHT = void 0;
+exports.TopBar = TopBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const utils_1 = require("./utils");
 const borders_1 = require("../styling/borders");
 const bind_1 = __importDefault(require("classnames/bind"));
-const top_bar_module_scss_1 = __importDefault(require("./top-bar.module.scss"));
+const top_bar_m_scss_1 = __importDefault(require("./top-bar.m.scss"));
 // некоторым компонентам нужно знать конкретную высоту
 exports.TOP_BAR_HEIGHT = {
     s: 56,
     m: 64,
     xl: 80,
 };
-const cx = bind_1.default.bind(top_bar_module_scss_1.default);
+const cx = bind_1.default.bind(top_bar_m_scss_1.default);
 /**
- * Компонент шапки модальных окон/экранов.
+ * Топ-бар - блок для вывода содержимого в верхней части карточек, модальных окон и других сложных элементов.
  * @param props Свойства.
  * @return Элемент.
  */
-function TopBar({ divided, size = 'm', title, subtitle, buttons: { start, startSecondary, end, endSecondary } = {}, className, 'data-testid': testId = 'top-bar', }) {
+function TopBar({ divided, size = 'm', rounds = 'm', title, subtitle, buttons: { start, startSecondary, end, endSecondary } = {}, className, style, 'data-testid': testId = 'top-bar', }) {
     const hasStartButtons = start || startSecondary;
     const hasEndButtons = end || endSecondary;
     const hasButtons = hasStartButtons || hasEndButtons;
-    const rootClasses = cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom, !subtitle && 'no-subtitle');
-    return (react_1.default.createElement("div", { className: rootClasses, "data-testid": testId },
-        hasButtons && (react_1.default.createElement("div", { className: cx('side') },
-            hasStartButtons && (react_1.default.createElement(TopBarButtonGroup, null,
-                start && react_1.default.createElement(TopBarButton, Object.assign({}, start)),
-                startSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, startSecondary)))),
-            hasEndButtons && (react_1.default.createElement(TopBarButtonGroup, { stub: true, end: true },
-                endSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, endSecondary)),
-                end && react_1.default.createElement(TopBarButton, Object.assign({}, end)))))),
-        react_1.default.createElement("div", { className: cx('main') },
-            title && react_1.default.createElement("div", { className: cx('title') }, title),
-            subtitle && react_1.default.createElement("div", { className: cx('subtitle') }, subtitle)),
-        hasButtons && (react_1.default.createElement("div", { className: cx('side') },
-            hasEndButtons && (react_1.default.createElement(TopBarButtonGroup, { end: true },
-                endSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, endSecondary)),
-                end && react_1.default.createElement(TopBarButton, Object.assign({}, end)))),
-            hasStartButtons && (react_1.default.createElement(TopBarButtonGroup, { stub: true },
-                start && react_1.default.createElement(TopBarButton, Object.assign({}, start)),
-                startSecondary && react_1.default.createElement(TopBarButton, Object.assign({}, startSecondary))))))));
+    const rootClasses = cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom, rounds !== 'unset' && `rounds-${rounds}`, !subtitle && 'no-subtitle');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, style: style, "data-testid": testId, children: [hasButtons && ((0, jsx_runtime_1.jsxs)("div", { className: cx('side'), children: [hasStartButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, { children: [start && (0, jsx_runtime_1.jsx)(TopBarButton, { ...start }), startSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, { ...startSecondary })] })), hasEndButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, { stub: true, end: true, children: [endSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, { ...endSecondary }), end && (0, jsx_runtime_1.jsx)(TopBarButton, { ...end })] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: cx('main'), children: [title && (0, jsx_runtime_1.jsx)("div", { className: cx('title'), children: title }), subtitle && (0, jsx_runtime_1.jsx)("div", { className: cx('subtitle'), children: subtitle })] }), hasButtons && ((0, jsx_runtime_1.jsxs)("div", { className: cx('side'), children: [hasEndButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, { end: true, children: [endSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, { ...endSecondary }), end && (0, jsx_runtime_1.jsx)(TopBarButton, { ...end })] })), hasStartButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, { stub: true, children: [start && (0, jsx_runtime_1.jsx)(TopBarButton, { ...start }), startSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, { ...startSecondary })] }))] }))] }));
 }
-exports.TopBar = TopBar;
 /**
- * Компонент группы кнопок.
+ * Группа кнопок.
  * @param props Свойства.
  * @return Элемент.
  */
 function TopBarButtonGroup({ children, stub, end, }) {
-    return (react_1.default.createElement(utils_1.TopBarButtonGroupContext.Provider, { value: { stub } },
-        react_1.default.createElement("div", { className: cx('button-group', { stub, end }) }, children)));
+    return ((0, jsx_runtime_1.jsx)(utils_1.TopBarButtonGroupContext.Provider, { value: { stub }, children: (0, jsx_runtime_1.jsx)("div", { className: cx('button-group', { stub, end }), children: children }) }));
 }
 /**
- * Компонент кнопки-иконки.
+ * Кнопки для TopBar.
  * @param props Свойства.
  * @return Элемент.
  */
-function TopBarButton(_a) {
-    var { text, icon, className, 'data-testid': testId = 'top-bar:button' } = _a, buttonProps = __rest(_a, ["text", "icon", "className", 'data-testid']);
+function TopBarButton({ text, icon, className, 'data-testid': testId = 'top-bar:button', ...buttonProps }) {
     const { stub } = (0, react_1.useContext)(utils_1.TopBarButtonGroupContext);
-    return (react_1.default.createElement("button", Object.assign({}, (!stub && Object.assign(Object.assign({}, buttonProps), { 'data-testid': testId })), { type: 'button', className: cx('button', icon && 'iconic', stub && 'stub', className), "aria-hidden": stub }), icon && !stub ? icon : text));
+    return ((0, jsx_runtime_1.jsx)("button", { ...(!stub && {
+            // игнорируем атрибуты и свойства для заглушек
+            ...buttonProps,
+            'data-testid': testId,
+        }), type: 'button', className: cx('button', icon && 'iconic', stub && 'stub', className), "aria-hidden": stub, children: icon && !stub ? icon : text }));
 }
+//# sourceMappingURL=top-bar.js.map

package/top-bar/top-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.js","sourceRoot":"","sources":["../../src/top-bar/top-bar.tsx"],"names":[],"mappings":"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"}

package/top-bar/{top-bar.module.scss → top-bar.m.scss}

@@ -7,15 +7,29 @@
   justify-content: center;
   background: #fff;
   height: var(--top-bar-height);
-  &.size-s {
-    @include top-bar-util.size-s;
-  }
-  &.size-m {
-    @include top-bar-util.size-m;
-  }
-  &.size-xl {
-    @include top-bar-util.size-xl;
-  }
+  flex-shrink: 0; // ВАЖНО: для использования в Modal
+}
+
+.size-s {
+  @include top-bar-util.size-s;
+}
+
+.size-m {
+  @include top-bar-util.size-m;
+}
+
+.size-xl {
+  @include top-bar-util.size-xl;
+}
+
+.rounds-s {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.rounds-m {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 
 .main {
@@ -24,7 +38,7 @@
   flex-grow: 1;
   justify-content: center;
   overflow: hidden;
-  text-align: center;
+  text-align: var(--top-bar-text-align, center);
 
   // когда нет кнопок
   &:first-child:last-child {
@@ -50,7 +64,7 @@
   font-size: 12px;
   line-height: 16px;
   font-weight: 400;
-  margin-top: -4px;
+  margin-top: -2px;
 }
 
 .title,

package/top-bar/types.d.ts

@@ -1,14 +1,23 @@
-/// <reference types="react" />
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import type { WithTestId } from '../types';
 export type TopBarSize = 's' | 'm' | 'xl';
-export interface TopBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface TopBarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, WithTestId {
     /** Иконка. */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Текст. */
     text?: string;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
 }
-export interface TopBarProps {
+export interface TopBarStyle extends CSSProperties {
+    '--top-bar-height'?: string;
+    '--top-bar-title-size'?: string;
+    '--top-bar-title-height'?: string;
+    '--top-bar-gutter'?: string;
+    '--top-bar-icon-button-width'?: string;
+    '--top-bar-title-only-size'?: string;
+    '--top-bar-title-only-height'?: string;
+    '--top-bar-text-align'?: string;
+}
+export interface TopBarProps extends WithTestId {
     /** Свойства кнопок. */
     buttons?: {
         start?: TopBarButtonProps;
@@ -18,14 +27,16 @@ export interface TopBarProps {
     };
     /** CSS-класс корневого элемента. */
     className?: string;
+    /** Стили. */
+    style?: TopBarStyle;
     /** Размер. */
     size?: TopBarSize | 'unset';
     /** Подзаголовок. */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Заголовок. */
-    title?: string;
+    title?: ReactNode;
     /** Нужна ли разделительная черта снизу. */
     divided?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
+    /** Скругления углов. */
+    rounds?: 's' | 'm' | 'unset';
 }

package/top-bar/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/top-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/top-bar/types.ts"],"names":[],"mappings":""}

package/top-bar/utils.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { TopBarProps } from './types';
-export declare const TopBarButtonGroupContext: React.Context<{
-    stub?: boolean | undefined;
+export declare const TopBarButtonGroupContext: import("react").Context<{
+    stub?: boolean;
 }>;
 /**
  * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.