@alfalab/core-components-pure-cell 4.3.1 → 4.4.0

package/modern/components/footer/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
-import { g as getDataTestId } from '../../getDataTestId-d1e65cf0.js';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 
-const styles = {"component":"pure-cell__component_1xulf","none":"pure-cell__none_1xulf","default":"pure-cell__default_1xulf"};
+const styles = {"component":"pure-cell__component_16s40","none":"pure-cell__none_16s40","default":"pure-cell__default_16s40"};
 require('./index.css')
 
 const Footer = ({ children, footerPadding = 'default', dataTestId }) => (React.createElement("footer", { className: cn(styles.component, styles[footerPadding]), "data-test-id": getDataTestId(dataTestId, 'footer') }, children));

package/modern/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: j6pdu */
+/* hash: poc4g */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,12 +15,12 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .pure-cell__component_1xulf {
+} .pure-cell__component_16s40 {
     grid-column: 1/3;
     display: grid;
     grid-row-gap: var(--gap-xs)
-} .pure-cell__component_1xulf.pure-cell__none_1xulf {
+} .pure-cell__component_16s40.pure-cell__none_16s40 {
         margin-top: 0;
-    } .pure-cell__component_1xulf.pure-cell__default_1xulf {
+    } .pure-cell__component_16s40.pure-cell__default_16s40 {
         margin-top: var(--gap-xs);
     }

package/modern/components/footer/index.js

@@ -1,4 +1,4 @@
 export { Footer } from './component.js';
 import 'react';
 import 'classnames';
-import '../../getDataTestId-d1e65cf0.js';
+import '@alfalab/core-components-shared/modern';

package/modern/components/footer-button/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from '@alfalab/core-components-button/modern';
-import { g as getDataTestId } from '../../getDataTestId-d1e65cf0.js';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 
-const styles = {"component":"pure-cell__component_18rhv"};
+const styles = {"component":"pure-cell__component_xb6ri"};
 require('./index.css')
 
 const FooterButton = ({ children, dataTestId, ...props }) => (React.createElement(Button, { ...props, size: 'xxs', dataTestId: getDataTestId(dataTestId, 'button'), className: styles.component }, children));

package/modern/components/footer-button/index.css

@@ -1,4 +1,4 @@
-/* hash: advwb */
+/* hash: kyquj */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,6 +14,6 @@
 } :root {
 } :root {
 } :root {
-} .pure-cell__component_18rhv {
+} .pure-cell__component_xb6ri {
     justify-self: start;
 }

package/modern/components/footer-button/index.js

@@ -1,4 +1,4 @@
 export { FooterButton } from './component.js';
 import 'react';
 import '@alfalab/core-components-button/modern';
-import '../../getDataTestId-d1e65cf0.js';
+import '@alfalab/core-components-shared/modern';

package/modern/components/footer-text/component.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { Typography } from '@alfalab/core-components-typography/modern';
-import { g as getDataTestId } from '../../getDataTestId-d1e65cf0.js';
 
 const FooterText = ({ children, color = 'secondary', dataTestId }) => (React.createElement(Typography.Text, { view: 'primary-small', color: color, "data-test-id": getDataTestId(dataTestId, 'footer-title') }, children));
 

package/modern/components/footer-text/index.js

@@ -1,4 +1,4 @@
 export { FooterText } from './component.js';
 import 'react';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/core-components-typography/modern';
-import '../../getDataTestId-d1e65cf0.js';

package/modern/components/graphics/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
-import { g as getDataTestId } from '../../getDataTestId-d1e65cf0.js';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 
-const styles = {"component":"pure-cell__component_ulfcs","top":"pure-cell__top_ulfcs","center":"pure-cell__center_ulfcs","bottom":"pure-cell__bottom_ulfcs"};
+const styles = {"component":"pure-cell__component_1feu9","top":"pure-cell__top_1feu9","center":"pure-cell__center_1feu9","bottom":"pure-cell__bottom_1feu9"};
 require('./index.css')
 
 const Graphics = ({ children, dataTestId, verticalAlign = 'top' }) => (React.createElement("section", { className: cn(styles.component, styles[verticalAlign]), "data-test-id": getDataTestId(dataTestId, 'graphics') }, children));

package/modern/components/graphics/index.css

@@ -1,4 +1,4 @@
-/* hash: c7ayp */
+/* hash: cncle */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,13 +14,13 @@
 } :root {
 } :root {
 } :root {
-} .pure-cell__component_ulfcs {
+} .pure-cell__component_1feu9 {
     display: inline-flex;
     flex-basis: auto;
-} .pure-cell__top_ulfcs {
+} .pure-cell__top_1feu9 {
     align-self: flex-start;
-} .pure-cell__center_ulfcs {
+} .pure-cell__center_1feu9 {
     align-self: center;
-} .pure-cell__bottom_ulfcs {
+} .pure-cell__bottom_1feu9 {
     align-self: flex-end;
 }

package/modern/components/graphics/index.js

@@ -1,4 +1,4 @@
 export { Graphics } from './component.js';
 import 'react';
 import 'classnames';
-import '../../getDataTestId-d1e65cf0.js';
+import '@alfalab/core-components-shared/modern';

package/modern/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
-import '../../getDataTestId-d1e65cf0.js';
-export { M as Main } from '../../component-6e5f347e.js';
+import '@alfalab/core-components-shared/modern';
+export { M as Main } from '../../component-b811b670.js';
 import 'react-merge-refs';
 import '@alfalab/core-components-comment/modern';
 import '@alfalab/hooks';

package/modern/components/main/index.css

@@ -1,4 +1,4 @@
-/* hash: llbaz */
+/* hash: w6697 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,20 +15,20 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
-} .pure-cell__component_umeb0 {
+} .pure-cell__component_1ufkr {
     display: flex;
     flex-direction: column;
     align-self: center;
 
     /* can use /r/n */
     white-space: pre-line
-} .pure-cell__component_umeb0.pure-cell__vertical_umeb0 {
+} .pure-cell__component_1ufkr.pure-cell__vertical_1ufkr {
         grid-row-gap: var(--gap-3xs);
         justify-content: center;
         align-items: center;
 
         /* for button */
         text-align: center;
-    } .pure-cell__component_umeb0.pure-cell__reverse_umeb0 {
+    } .pure-cell__component_1ufkr.pure-cell__reverse_1ufkr {
         flex-direction: column-reverse;
     }

package/modern/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-6e5f347e";
+export * from "../../component-b811b670";

package/modern/components/main/index.js

@@ -1,11 +1,11 @@
-export { M as Main } from '../../component-6e5f347e.js';
+export { M as Main } from '../../component-b811b670.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-comment/modern';
 import '@alfalab/hooks';
 import '../addon/component.js';
-import '../../getDataTestId-d1e65cf0.js';
+import '@alfalab/core-components-shared/modern';
 import '../amount/component.js';
 import '@alfalab/core-components-amount/modern';
 import '@alfalab/core-components-typography/modern';

package/modern/components/text/component.js

@@ -1,8 +1,8 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/core-components-typography/modern';
-import '../../getDataTestId-d1e65cf0.js';
-export { T as Text } from '../../component-6e5f347e.js';
+export { T as Text } from '../../component-b811b670.js';
 import 'react-merge-refs';
 import '@alfalab/core-components-comment/modern';
 import '@alfalab/hooks';

package/modern/components/text/index.css

@@ -1,4 +1,4 @@
-/* hash: u9ouz */
+/* hash: 10rbl */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,29 +16,29 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .pure-cell__horizontal_fkntw {
+} .pure-cell__horizontal_k946b {
     padding: var(--gap-3xs) 0;
-} .pure-cell__rowLimit1_fkntw {
+} .pure-cell__rowLimit1_k946b {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
-} .pure-cell__rowLimit2_fkntw {
+} .pure-cell__rowLimit2_k946b {
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .pure-cell__component_fkntw {
+} .pure-cell__component_k946b {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
     margin: var(--gap-3xs) 0;
     word-break: break-word;
-} .pure-cell__component_fkntw .pure-cell__vertical_fkntw {
+} .pure-cell__component_k946b .pure-cell__vertical_k946b {
         justify-content: center;
-    } .pure-cell__title_fkntw + .pure-cell__value_fkntw {
+    } .pure-cell__title_k946b + .pure-cell__value_k946b {
     margin-left: var(--gap-m);
     flex-shrink: 0;
 }

package/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-6e5f347e";
+export * from "../../component-b811b670";

package/modern/components/text/index.js

@@ -1,11 +1,11 @@
-export { T as Text } from '../../component-6e5f347e.js';
+export { T as Text } from '../../component-b811b670.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-comment/modern';
 import '@alfalab/hooks';
 import '../addon/component.js';
-import '../../getDataTestId-d1e65cf0.js';
+import '@alfalab/core-components-shared/modern';
 import '../amount/component.js';
 import '@alfalab/core-components-amount/modern';
 import '@alfalab/core-components-typography/modern';

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 12n1r */
+/* hash: y3rwu */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -20,21 +20,21 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .pure-cell__component_1gk1s {
+} .pure-cell__component_1cht4 {
     text-align: unset;
     box-sizing: border-box;
-} .pure-cell__horizontal_1gk1s {
+} .pure-cell__horizontal_1cht4 {
     display: flex;
     width: 100%
-} .pure-cell__horizontal_1gk1s > section:not(:last-child) {
+} .pure-cell__horizontal_1cht4 > section:not(:last-child) {
         margin-right: var(--gap-m);
-    } .pure-cell__vertical_1gk1s {
+    } .pure-cell__vertical_1cht4 {
     display: flex;
     align-items: center;
     flex-direction: column
-} .pure-cell__vertical_1gk1s > section:not(:last-child) {
+} .pure-cell__vertical_1cht4 > section:not(:last-child) {
         margin-bottom: var(--gap-s);
-    } .pure-cell__button_1gk1s {
+    } .pure-cell__button_1cht4 {
     font-family: inherit;
     background: none;
     border: 0;
@@ -42,37 +42,37 @@
     cursor: pointer;
     transition: opacity 0.15s ease-in-out;
     padding: 0
-} .pure-cell__button_1gk1s:hover {
+} .pure-cell__button_1cht4:hover {
         opacity: 0.8;
-    } .pure-cell__button_1gk1s:active {
+    } .pure-cell__button_1cht4:active {
         opacity: 0.6;
-    } .pure-cell__link_1gk1s {
+    } .pure-cell__link_1cht4 {
     text-decoration: none;
     color: inherit;
     cursor: pointer;
     transition: opacity 0.15s ease-in-out
-} .pure-cell__link_1gk1s:hover {
+} .pure-cell__link_1cht4:hover {
         opacity: 0.8;
-    } .pure-cell__link_1gk1s:active {
+    } .pure-cell__link_1cht4:active {
         opacity: 0.6;
-    } .pure-cell__none_1gk1s {
+    } .pure-cell__none_1cht4 {
     padding: 0;
-} .pure-cell__airy_1gk1s {
+} .pure-cell__airy_1cht4 {
     padding: var(--gap-m) 0;
-} .pure-cell__defaultPadding_1gk1s {
+} .pure-cell__defaultPadding_1cht4 {
     padding: var(--gap-s) 0;
-} .pure-cell__compact_1gk1s {
+} .pure-cell__compact_1cht4 {
     padding: var(--gap-xs) 0;
-} .pure-cell__tiny_1gk1s {
+} .pure-cell__tiny_1cht4 {
     padding: var(--gap-2xs) 0;
-} .pure-cell__left_1gk1s {
+} .pure-cell__left_1cht4 {
     padding-left: var(--gap-m);
-} .pure-cell__right_1gk1s {
+} .pure-cell__right_1cht4 {
     padding-right: var(--gap-m);
-} .pure-cell__both_1gk1s {
+} .pure-cell__both_1cht4 {
     padding-right: var(--gap-m);
     padding-left: var(--gap-m);
-} .pure-cell__focused_1gk1s {
+} .pure-cell__focused_1cht4 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index.d.ts

@@ -1 +1 @@
-export { PureCell } from "./component-c49f24a8";
+export { PureCell } from "./component-5a229016";

package/modern/index.js

@@ -1,11 +1,11 @@
-export { P as PureCell } from './component-6e5f347e.js';
+export { P as PureCell } from './component-b811b670.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-comment/modern';
 import '@alfalab/hooks';
 import './components/addon/component.js';
-import './getDataTestId-d1e65cf0.js';
+import '@alfalab/core-components-shared/modern';
 import './components/amount/component.js';
 import '@alfalab/core-components-amount/modern';
 import '@alfalab/core-components-typography/modern';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.3.1",
+    "version": "4.4.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,10 +15,11 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-amount": "^3.2.2",
-        "@alfalab/core-components-button": "^8.5.1",
-        "@alfalab/core-components-typography": "^3.2.2",
-        "@alfalab/core-components-comment": "^2.1.11",
+        "@alfalab/core-components-amount": "^3.3.0",
+        "@alfalab/core-components-button": "^9.0.0",
+        "@alfalab/core-components-typography": "^4.0.0",
+        "@alfalab/core-components-comment": "^2.2.0",
+        "@alfalab/core-components-shared": "^0.1.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "1.1.0",

package/src/component.tsx

@@ -0,0 +1,186 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    ElementType,
+    forwardRef,
+    HTMLAttributes,
+    useRef,
+} from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { ButtonProps } from '@alfalab/core-components-button';
+import { Comment } from '@alfalab/core-components-comment';
+import { useFocus } from '@alfalab/hooks';
+
+import { Addon } from './components/addon';
+import { Amount } from './components/amount';
+import { AmountTitle } from './components/amount-title';
+import { Category } from './components/category';
+import { Content } from './components/content';
+import { Footer } from './components/footer';
+import { FooterButton } from './components/footer-button';
+import { FooterText } from './components/footer-text';
+import { Graphics } from './components/graphics';
+import { Main } from './components/main';
+import { Text } from './components/text';
+import { PureCellElement } from './components/types';
+
+import styles from './index.module.css';
+
+export type PureCellContext = {
+    /** Направление */
+    direction?: 'horizontal' | 'vertical';
+};
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PureCellContext = React.createContext<PureCellContext>({});
+
+export type PureCellProps = {
+    /**
+     * Направление
+     */
+    direction?: 'horizontal' | 'vertical';
+
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+
+    /**
+     * Выводит ссылку в виде ячейки
+     */
+    href?: string;
+
+    /**
+     * Вертикальные отступы
+     */
+    verticalPadding?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+
+    /**
+     * Горизонтальные отступы
+     */
+    horizontalPadding?: 'left' | 'right' | 'both' | 'none';
+
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    tag?: ElementType;
+    /**
+     * Компоненты
+     */
+    children: PureCellElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type AnchorPureCellProps = PureCellProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonPureCellProps = PureCellProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ElementPureCellProps = PureCellProps & HTMLAttributes<HTMLElement>;
+type PureProps = Partial<AnchorPureCellProps | ButtonPureCellProps | ElementPureCellProps>;
+
+const PureCellComponent = forwardRef<HTMLElement, PureProps>(
+    (
+        {
+            className,
+            dataTestId,
+            onClick,
+            href,
+            tag: Component = (href && 'a') || (onClick && 'button') || 'section',
+            children,
+            horizontalPadding = 'none',
+            verticalPadding = 'none',
+            direction = 'horizontal',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const cellRef = useRef<HTMLDivElement>(null);
+        const [focused] = useFocus(cellRef, 'keyboard');
+        const addClasses = {
+            [styles.component]: true,
+            [styles.focused]: focused,
+            [styles[direction]]: true,
+            [styles.defaultPadding]: verticalPadding === 'default',
+            [styles[verticalPadding]]: verticalPadding !== 'default',
+            [styles[horizontalPadding]]: true,
+        };
+
+        if (href) {
+            const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
+
+            // Для совместимости с react-router-dom, меняем href на to
+            const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
+
+            return (
+                <Component
+                    rel={target === '_blank' ? 'noreferrer noopener' : undefined}
+                    {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+                    {...hrefProps}
+                    ref={mergeRefs([cellRef, ref])}
+                    className={cn(styles.link, addClasses, className)}
+                    data-test-id={dataTestId}
+                    onClick={onClick}
+                >
+                    <PureCellContext.Provider value={{ direction }}>
+                        {children}
+                    </PureCellContext.Provider>
+                </Component>
+            );
+        }
+
+        if (onClick) {
+            return (
+                <Component
+                    {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+                    ref={mergeRefs([cellRef, ref])}
+                    className={cn(styles.button, addClasses, className)}
+                    data-test-id={dataTestId}
+                    onClick={onClick}
+                >
+                    <PureCellContext.Provider value={{ direction }}>
+                        {children}
+                    </PureCellContext.Provider>
+                </Component>
+            );
+        }
+
+        return (
+            <Component
+                {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+                ref={ref}
+                tabIndex={0}
+                className={cn(addClasses, className)}
+                data-test-id={dataTestId}
+            >
+                <PureCellContext.Provider value={{ direction }}>
+                    {children}
+                </PureCellContext.Provider>
+            </Component>
+        );
+    },
+);
+
+/**
+ * Универсальный конструктор для сборки любой ячейки.
+ *
+ * [Макет](https://www.figma.com/file/KlFOLLkKO8rtvvQE3RXuhq/Click-Library?node-id=43525%3A240018)
+ */
+export const PureCell = Object.assign(PureCellComponent, {
+    Main,
+    Graphics,
+    Content,
+    Text,
+    Amount,
+    AmountTitle,
+    Addon,
+    Footer,
+    ExtraSubtitle: FooterText,
+    FooterButton,
+    Comment,
+    Category,
+});

package/src/components/addon/component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { AddonElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Вертикальное выравнивание
+     */
+    verticalAlign?: 'auto' | 'top' | 'center' | 'bottom';
+
+    /**
+     * Горизонтальные отступы
+     */
+    addonPadding?: 'default' | 'none';
+
+    /**
+     * Компоненты
+     */
+    children: AddonElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Addon: React.FC<Props> = ({
+    children,
+    verticalAlign = 'top',
+    addonPadding = 'default',
+    dataTestId,
+}) => (
+    <section
+        className={cn(styles.component, styles[addonPadding], styles[verticalAlign])}
+        data-test-id={getDataTestId(dataTestId, 'addon')}
+    >
+        {children}
+    </section>
+);