@sima-land/moleculas 16.0.0-alpha.2 → 16.0.0-alpha.21

package/common/components/media-modal/types.d.ts

@@ -0,0 +1,18 @@
+export type MediaType = 'image' | 'video' | '360';
+export interface MediaShape<T extends string, D extends Record<string, any>> {
+    type: T;
+    data: D;
+}
+export type MediaImage = MediaShape<'image', {
+    src: string;
+    alt?: string;
+    thumbnail?: string;
+}>;
+export type MediaVideo = MediaShape<'video', {
+    src: string;
+    thumbnail?: string;
+}>;
+export type Media360 = MediaShape<'360', {
+    photos: string[];
+}>;
+export type MediaData = MediaImage | MediaVideo | Media360;

package/common/components/media-modal/types.js

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

package/common/components/media-modal/types.js.map

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

package/common/components/media-modal/utils.d.ts

@@ -0,0 +1,42 @@
+import { RefObject } from 'react';
+export interface IRange {
+    start: number;
+    finish: number;
+}
+/** Диапазон. */
+export declare class Range {
+    /**
+     * Возвращает диапазон на основе вертикального размера элемента.
+     * @param el Элемент.
+     * @return Диапазон.
+     */
+    static fromRectVertical(el: Element): IRange;
+    /**
+     * Возвращает диапазон на основе вертикального размера элемента.
+     * @param el Элемент.
+     * @return Диапазон.
+     */
+    static fromRectHorizontal(el: Element): IRange;
+    /**
+     * Возвращает кратчайшее расстояние от диапазона до другого диапазона на которое нужно сместиться.
+     * @param range Диапазон.
+     * @param target Диапазон.
+     * @return Расстояние.
+     */
+    static getShiftDistance(range: IRange, target: IRange): number;
+}
+/**
+ * Возвращает ограничивающий прямоугольник элемента в виде состояния.
+ * @param ref Ref элемента.
+ * @return Прямоугольник.
+ */
+export declare function useClientRect(ref: RefObject<HTMLElement>): {
+    ready: boolean;
+    width: number;
+    height: number;
+};
+/**
+ * Хук получения доступа к visualViewport.
+ * @param handle Получит visualViewport.
+ */
+export declare function useVisualViewport(handle: (viewport: VisualViewport) => void): void;

package/common/components/media-modal/utils.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisualViewport = exports.useClientRect = exports.Range = void 0;
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const react_1 = require("react");
+/** Диапазон. */
+class Range {
+    /**
+     * Возвращает диапазон на основе вертикального размера элемента.
+     * @param el Элемент.
+     * @return Диапазон.
+     */
+    static fromRectVertical(el) {
+        const rect = el.getBoundingClientRect();
+        return {
+            start: rect.top,
+            finish: rect.bottom,
+        };
+    }
+    /**
+     * Возвращает диапазон на основе вертикального размера элемента.
+     * @param el Элемент.
+     * @return Диапазон.
+     */
+    static fromRectHorizontal(el) {
+        const rect = el.getBoundingClientRect();
+        return {
+            start: rect.left,
+            finish: rect.right,
+        };
+    }
+    /**
+     * Возвращает кратчайшее расстояние от диапазона до другого диапазона на которое нужно сместиться.
+     * @param range Диапазон.
+     * @param target Диапазон.
+     * @return Расстояние.
+     */
+    static getShiftDistance(range, target) {
+        let result = 0;
+        if (target.finish > range.finish) {
+            result = target.finish - range.finish;
+        }
+        else if (target.start < range.start) {
+            result = -(range.start - target.start);
+        }
+        return result;
+    }
+}
+exports.Range = Range;
+/**
+ * Возвращает ограничивающий прямоугольник элемента в виде состояния.
+ * @param ref Ref элемента.
+ * @return Прямоугольник.
+ */
+function useClientRect(ref) {
+    const [rect, setRect] = (0, react_1.useState)(() => ({
+        ready: false,
+        width: 0,
+        height: 0,
+    }));
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (ref.current) {
+            const element = ref.current;
+            setRect({
+                ready: true,
+                width: element.getBoundingClientRect().width,
+                height: element.getBoundingClientRect().height,
+            });
+            const observer = new ResizeObserver(() => {
+                setRect({
+                    ready: true,
+                    width: element.getBoundingClientRect().width,
+                    height: element.getBoundingClientRect().height,
+                });
+            });
+            observer.observe(element);
+            return () => observer.disconnect();
+        }
+    }, [ref]);
+    return rect;
+}
+exports.useClientRect = useClientRect;
+/**
+ * Хук получения доступа к visualViewport.
+ * @param handle Получит visualViewport.
+ */
+function useVisualViewport(handle) {
+    const ref = (0, hooks_1.useIdentityRef)(handle);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const viewport = window.visualViewport;
+        if (!viewport) {
+            return;
+        }
+        // eslint-disable-next-line require-jsdoc
+        const update = () => ref.current(viewport);
+        window.addEventListener('resize', update);
+        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', update);
+        (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', update);
+        update();
+        return () => {
+            var _a, _b;
+            window.removeEventListener('resize', update);
+            (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', update);
+            (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', update);
+        };
+    }, []);
+}
+exports.useVisualViewport = useVisualViewport;
+//# sourceMappingURL=utils.js.map

package/common/components/media-modal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/common/components/media-modal/utils.ts"],"names":[],"mappings":"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"}

package/common/components/modifier/index.d.ts

@@ -1,46 +1,2 @@
-import { AnchorHTMLAttributes } from 'react';
-interface TextContent {
-    type: 'text';
-    text: string;
-}
-interface ColorContent {
-    type: 'color';
-    color: string;
-}
-interface ImageContent {
-    type: 'image';
-    src: string;
-}
-export type ModifierContent = TextContent | ColorContent | ImageContent;
-export interface ModifierProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** Вывести выбранным. */
-    active?: boolean;
-    /** Вывести отключенным. */
-    disabled?: boolean;
-    /** Вывести зачеркнутым. */
-    crossedOut?: boolean;
-    /** Содержимое. */
-    content: ModifierContent;
-    /** Высота по дизайн-гайдам. */
-    size?: 's' | 'm';
-    /** Кол-во. */
-    count?: number;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-export type MoreButtonProps = Omit<ModifierProps, 'content' | 'crossedOut' | 'active' | 'count'> & {
-    count: number;
-};
-/**
- * Кнопка модификатора (аналога товара).
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, 'data-testid': testId, ...props }: ModifierProps): JSX.Element;
-/**
- * Кнопка "+N" для показа полного списка модификаторов.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function MoreButton({ count, className, 'data-testid': testId, ...rest }: MoreButtonProps): JSX.Element;
-export {};
+export type { TextContent, ImageContent, ColorContent, ModifierContent, ModifierProps, MoreButtonProps, } from './types';
+export { Modifier, MoreButton } from './modifier';

package/common/components/modifier/index.js

@@ -1,102 +1,7 @@
 "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.MoreButton = exports.Modifier = void 0;
-const react_1 = __importStar(require("react"));
-const hint_1 = require("@sima-land/ui-nucleons/hint");
-const bind_1 = __importDefault(require("classnames/bind"));
-const modifiers_module_scss_1 = __importDefault(require("./modifiers.module.scss"));
-const cx = bind_1.default.bind(modifiers_module_scss_1.default);
-/**
- * Кнопка модификатора (аналога товара).
- * @param props Свойства.
- * @return Элемент.
- */
-function Modifier(_a) {
-    var { size = 'm', active, crossedOut, disabled, content, count, className, 'data-testid': testId = 'modifier' } = _a, props = __rest(_a, ["size", "active", "crossedOut", "disabled", "content", "count", "className", 'data-testid']);
-    // текст хинта
-    const [hint, setHint] = (0, react_1.useState)('');
-    // состояние хинта
-    const [open, setOpen] = (0, react_1.useState)(false);
-    // позиционирование хинта
-    const _b = (0, hint_1.useHintFloating)({ open, onOpenChange: setOpen }), { refs } = _b, floating = __rest(_b, ["refs"]);
-    // пользовательское взаимодействие для хинта
-    const { getReferenceProps, getFloatingProps } = (0, hint_1.useHintOnHover)(floating);
-    // определение необходимости активации хинта
-    (0, react_1.useEffect)(() => {
-        const textElement = refs.reference.current;
-        if (!(textElement instanceof HTMLElement) || content.type !== 'text') {
-            return;
-        }
-        // eslint-disable-next-line require-jsdoc
-        const defineHint = () => setHint(isTruncated(textElement) ? content.text : '');
-        defineHint();
-        const observer = new ResizeObserver(defineHint);
-        observer.observe(textElement);
-        return () => observer.disconnect();
-    }, [content.text]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("a", Object.assign({}, props, { className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId }),
-            content.type === 'color' && (react_1.default.createElement("span", { className: cx('color'), role: 'banner', style: { background: content.color } })),
-            content.type === 'image' && (react_1.default.createElement("span", { className: cx('image'), role: 'banner', style: { backgroundImage: `url(${content.src})` } })),
-            content.type === 'text' && (react_1.default.createElement("span", Object.assign({ ref: refs.setReference, className: cx('text') }, getReferenceProps()), content.text)),
-            typeof count === 'number' && (react_1.default.createElement("span", { className: cx('counter') }, count > 99 ? '99+' : count)),
-            crossedOut && (react_1.default.createElement("svg", { width: '100%', height: '100%', className: cx('diagonal') },
-                react_1.default.createElement("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)' })))),
-        hint && (react_1.default.createElement(hint_1.Hint, Object.assign({ open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow }, getFloatingProps()), hint))));
-}
-exports.Modifier = Modifier;
-/**
- * Кнопка "+N" для показа полного списка модификаторов.
- * @param props Свойства.
- * @return Элемент.
- */
-function MoreButton(_a) {
-    var { count, className, 'data-testid': testId = 'more-modifiers' } = _a, rest = __rest(_a, ["count", "className", 'data-testid']);
-    return (react_1.default.createElement(Modifier, Object.assign({ role: 'button', "aria-label": '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0430\u043D\u0430\u043B\u043E\u0433\u0438' }, rest, { className: cx('more', className), content: { type: 'text', text: `+${count}` }, "data-testid": testId })));
-}
-exports.MoreButton = MoreButton;
-/**
- * Определяет, обрезан ли текст в элементе.
- * @param el Элемент.
- * @return Обрезан ли текст в элементе.
- */
-function isTruncated(el) {
-    return el.scrollWidth > el.clientWidth;
-}
+var modifier_1 = require("./modifier");
+Object.defineProperty(exports, "Modifier", { enumerable: true, get: function () { return modifier_1.Modifier; } });
+Object.defineProperty(exports, "MoreButton", { enumerable: true, get: function () { return modifier_1.MoreButton; } });
+//# sourceMappingURL=index.js.map

package/common/components/modifier/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/modifier/index.ts"],"names":[],"mappings":";;;AAQA,uCAAkD;AAAzC,oGAAA,QAAQ,OAAA;AAAE,sGAAA,UAAU,OAAA"}

package/common/components/modifier/modifier.d.ts

@@ -0,0 +1,13 @@
+import { ModifierProps, MoreButtonProps } from './types';
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId, ...props }: ModifierProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MoreButton({ count, className, 'data-testid': testId, ...rest }: MoreButtonProps): import("react/jsx-runtime").JSX.Element;

package/common/components/modifier/modifier.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoreButton = exports.Modifier = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hint_1 = require("@sima-land/ui-nucleons/hint");
+const hooks_1 = require("../../hooks");
+const ImageBroken_1 = __importDefault(require("@sima-land/ui-quarks/icons/40x40/Stroked/ImageBroken"));
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Cross"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const modifier_m_scss_1 = __importDefault(require("./modifier.m.scss"));
+const cx = bind_1.default.bind(modifier_m_scss_1.default);
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Modifier({ size = 'm', active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId = 'modifier', ...props }) {
+    // текст хинта
+    const [hint, setHint] = (0, react_1.useState)('');
+    // состояние хинта
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // позиционирование хинта
+    const { refs, ...floating } = (0, hint_1.useHintFloating)({ open, onOpenChange: setOpen });
+    // пользовательское взаимодействие для хинта
+    const { getReferenceProps, getFloatingProps } = (0, hint_1.useHintOnHover)(floating);
+    // определение необходимости активации хинта
+    (0, react_1.useEffect)(() => {
+        const textElement = refs.reference.current;
+        if (!(textElement instanceof HTMLElement) || content.type !== 'text') {
+            return;
+        }
+        // eslint-disable-next-line require-jsdoc
+        const defineHint = () => setHint(isTruncated(textElement) ? content.text : '');
+        defineHint();
+        const observer = new ResizeObserver(defineHint);
+        observer.observe(textElement);
+        return () => observer.disconnect();
+    }, [content.text]);
+    // ВАЖНО: по дизайн-гайдам disabled не может быть перечеркнут
+    const canStrike = !disabled;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", { ...props, className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId, children: [content.type === 'color' && ((0, jsx_runtime_1.jsx)("span", { className: cx('color'), role: 'banner', style: { background: content.color }, children: disabled && (0, jsx_runtime_1.jsx)(Cross_1.default, { className: cx('cross') }) })), content.type === 'image' && (0, jsx_runtime_1.jsx)(Image, { src: content.src }), content.type === 'text' && ((0, jsx_runtime_1.jsx)("span", { ref: refs.setReference, className: cx('text'), ...getReferenceProps(), children: content.text })), typeof count === 'number' && ((0, jsx_runtime_1.jsx)("span", { className: cx('counter'), children: count > 99 ? '99+' : count })), canStrike && crossedOut && ((0, jsx_runtime_1.jsx)("svg", { width: '100%', height: '100%', className: cx('diagonal'), children: (0, jsx_runtime_1.jsx)("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)', strokeWidth: 2 }) })), markdown && (0, jsx_runtime_1.jsx)("span", { className: modifier_m_scss_1.default.corner, children: "\u0423" })] }), hint && ((0, jsx_runtime_1.jsx)(hint_1.Hint, { open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow, ...getFloatingProps(), children: hint }))] }));
+}
+exports.Modifier = Modifier;
+/**
+ * Картинка с заглушкой в случае ошибки загрузки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Image({ src, onError, ...rest }) {
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src, onError);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: cx('image-wrapper', { fail: failed }), children: [failed && (0, jsx_runtime_1.jsx)(ImageBroken_1.default, {}), (0, jsx_runtime_1.jsx)("img", { className: cx('image'), ...rest, src: src, onError: handleError })] }));
+}
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MoreButton({ count, className, 'data-testid': testId = 'more-modifiers', ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(Modifier, { role: 'button', "aria-label": '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0430\u043D\u0430\u043B\u043E\u0433\u0438', ...rest, className: cx('more', className), content: { type: 'text', text: `+${count}` }, "data-testid": testId }));
+}
+exports.MoreButton = MoreButton;
+/**
+ * Определяет, обрезан ли текст в элементе.
+ * @param el Элемент.
+ * @return Обрезан ли текст в элементе.
+ */
+function isTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+//# sourceMappingURL=modifier.js.map

package/common/components/modifier/modifier.js.map

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

package/common/components/modifier/{modifiers.module.scss → modifier.m.scss}

@@ -14,8 +14,12 @@
   --modifier-text-color: #{colors.$basic-gray87};
   --modifier-border-width: 1px;
   --modifier-border-color: #{colors.$basic-gray12};
+  --modifier-corner-bg: #{colors.$basic-gray12};
+  --modifier-corner-color: #{colors.$basic-gray87};
   &.active {
     --modifier-border-color: #{colors.$basic-blue};
+    --modifier-corner-color: #fff;
+    --modifier-corner-bg: #{colors.$basic-blue};
   }
   &:hover:not(.disabled) {
     cursor: pointer;
@@ -28,6 +32,8 @@
     --modifier-overlay-color: rgba(0, 0, 0, 0.04);
     --modifier-border-width: 0;
     --modifier-text-color: #{colors.$basic-gray38};
+    --modifier-corner-bg: transparent;
+    --modifier-corner-color: #{colors.$basic-gray38};
   }
   &::after {
     content: '';
@@ -91,6 +97,36 @@
   background-size: cover;
 }
 
+.image-wrapper {
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: colors.$basic-gray4;
+  &.fail {
+    --modifier-media-opacity: 0;
+  }
+  > svg {
+    width: calc(48%);
+    height: calc(48%);
+    fill: colors.$basic-gray24;
+  }
+}
+
+.color {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .cross {
+    fill: colors.$basic-gray24;
+  }
+}
+
 .text {
   padding: var(--modifier-padding);
   display: block;
@@ -105,6 +141,7 @@
 }
 
 .counter {
+  white-space: nowrap;
   font-weight: 600;
   font-size: 12px;
   line-height: 14px;
@@ -119,3 +156,27 @@
   border-radius: 32px;
   z-index: 1;
 }
+
+.corner {
+  font-weight: 600;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  border-bottom-right-radius: inherit;
+  font-size: 12px;
+  line-height: 14px;
+  padding-right: 2px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  color: var(--modifier-corner-color);
+  background: linear-gradient(
+    to bottom right,
+    transparent 0%,
+    transparent 50%,
+    var(--modifier-corner-bg) 50%,
+    var(--modifier-corner-bg) 100%
+  );
+}

package/common/components/modifier/types.d.ts

@@ -0,0 +1,35 @@
+import type { AnchorHTMLAttributes } from 'react';
+export interface TextContent {
+    type: 'text';
+    text: string;
+}
+export interface ColorContent {
+    type: 'color';
+    color: string;
+}
+export interface ImageContent {
+    type: 'image';
+    src: string;
+}
+export type ModifierContent = TextContent | ColorContent | ImageContent;
+export interface ModifierProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'content'> {
+    /** Вывести выбранным. */
+    active?: boolean;
+    /** Вывести отключенным. */
+    disabled?: boolean;
+    /** Вывести зачеркнутым. */
+    crossedOut?: boolean;
+    /** Содержимое. */
+    content: ModifierContent;
+    /** Высота по дизайн-гайдам. */
+    size?: 's' | 'm';
+    /** Кол-во. */
+    count?: number;
+    /** Выводить ли ярлык уценки. */
+    markdown?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type MoreButtonProps = Omit<ModifierProps, 'content' | 'crossedOut' | 'active' | 'count'> & {
+    count: number;
+};

package/common/components/modifier/types.js

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

package/common/components/modifier/types.js.map

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

package/common/components/pagination-controls/index.d.ts

@@ -0,0 +1,2 @@
+export type { PaginationData, PaginationControlsProps } from './types';
+export { PaginationControls, PageButtons, PageForm, PageFormInput } from './pagination-controls';

package/common/components/pagination-controls/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFormInput = exports.PageForm = exports.PageButtons = exports.PaginationControls = void 0;
+var pagination_controls_1 = require("./pagination-controls");
+Object.defineProperty(exports, "PaginationControls", { enumerable: true, get: function () { return pagination_controls_1.PaginationControls; } });
+Object.defineProperty(exports, "PageButtons", { enumerable: true, get: function () { return pagination_controls_1.PageButtons; } });
+Object.defineProperty(exports, "PageForm", { enumerable: true, get: function () { return pagination_controls_1.PageForm; } });
+Object.defineProperty(exports, "PageFormInput", { enumerable: true, get: function () { return pagination_controls_1.PageFormInput; } });
+//# sourceMappingURL=index.js.map

package/common/components/pagination-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/pagination-controls/index.ts"],"names":[],"mappings":";;;AACA,6DAAiG;AAAxF,yHAAA,kBAAkB,OAAA;AAAE,kHAAA,WAAW,OAAA;AAAE,+GAAA,QAAQ,OAAA;AAAE,oHAAA,aAAa,OAAA"}

package/common/components/pagination-controls/pagination-controls.d.ts

@@ -0,0 +1,30 @@
+import type { PaginationControlsProps } from './types';
+import { InputProps } from '@sima-land/ui-nucleons/input';
+/**
+ * Блок управления пагинацией.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PaginationControls({ current: currentProp, total: totalProp, onPageChange, flow, Buttons, Form, withForm: withFormProp, className, ...restProps }: PaginationControlsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Кнопки страниц.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PageButtons({ total, current, onPageChange, }: {
+    total: number;
+    current: number;
+    onPageChange: (page: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Форма выбора страницы.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PageForm({ total, onPageChange }: any): import("react/jsx-runtime").JSX.Element;
+/**
+ * Поле ввода номера страницы. Только стилизует Input.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PageFormInput({ className, ...restProps }: InputProps): import("react/jsx-runtime").JSX.Element;