@vkontakte/vkui 7.2.1 → 7.3.0

package/dist/components/HorizontalCell/HorizontalCell.d.ts

@@ -5,7 +5,7 @@ export declare const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = "--vkui_internal--cell_wi
 type HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';
 export interface HorizontalCellProps extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
-     * Ширина компонента
+     * Ширина компонента.
      *
      * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.
      * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.
@@ -13,7 +13,7 @@ export interface HorizontalCellProps extends Omit<TappableProps, 'size' | 'getRo
      */
     size?: LiteralUnion<HorizontalCellSizes, number>;
     /**
-     * Заголовок
+     * Заголовок.
      */
     title?: React.ReactNode;
     /**
@@ -25,13 +25,13 @@ export interface HorizontalCellProps extends Omit<TappableProps, 'size' | 'getRo
      */
     extraSubtitle?: React.ReactNode;
     /**
-     * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`
+     * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.
      */
     textAlign?: 'start' | 'center' | 'end';
     /**
-     * Отключает формирование отступов у крайних элементов
+     * Отключает формирование отступов у крайних элементов.
      *
-     * Актуально для использования в многострочных списках
+     * Актуально для использования в многострочных списках.
      */
     noPadding?: boolean;
     /**

package/dist/components/HorizontalCell/HorizontalCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов\n   *\n   * Актуально для использования в многострочных списках\n   */\n  noPadding?: boolean;\n  /**\n   * Позволяет передать типографический компонент, используемый для `title`.\n   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n   */\n  TitleComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  TitleComponent = size === 's' ? Caption : Subhead,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","m","l","xl","auto","textAlignClassNames","center","end","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AAGxD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;IACFC,IAAI;AACN;AAEA,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,GAAG;AACL;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB;QAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAACrB;QAAOoB,MAAM;MAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAMlB,UAAUE,OAAO,EAE7B,WADjBwB;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBACJ/B,aAAamB,UAAUnB,aAAaqB,aAAarB,aAAa0B;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACf,gCAAgC,EAAE,GAAGe,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAOnB,WAAW+B,kBAAkBZ;QACpCF,WAAWnB,uCAET,OAAOuB,SAAS,YAAYd,UAAU,CAACc,KAAK,EAC5CA,SAAS,uCACT,OAAOA,SAAS,8CAChBM,8CACAV;kBAGF,cAAA,MAACf;YAASe,SAAS;YAAeM,YAAYC;WAAYK;;gBACvD9B,aAAauB,2BAAa,KAACW;oBAAIhB,SAAS;8BAAiBK;;gBACzDQ,+BACC,MAACG;oBACChB,WAAWnB,0CAET4B,cAAc,WAAWb,mBAAmB,CAACa,UAAU;;wBAGxD3B,aAAamB,wBAAU,KAACU;sCAAgBV;;wBACxCnB,aAAaqB,2BAAa,KAAChB;4BAASa,SAAS;sCAAoBG;;wBACjErB,aAAa0B,gCACZ,KAACrB;4BAASa,SAAS;sCAAoBQ;;;;;;;AAOrD,EAAE"}
+{"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента.\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов.\n   *\n   * Актуально для использования в многострочных списках.\n   */\n  noPadding?: boolean;\n  /**\n   * Позволяет передать типографический компонент, используемый для `title`.\n   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n   */\n  TitleComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  TitleComponent = size === 's' ? Caption : Subhead,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","m","l","xl","auto","textAlignClassNames","center","end","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AAGxD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;IACFC,IAAI;AACN;AAEA,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,GAAG;AACL;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB;QAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAACrB;QAAOoB,MAAM;MAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAMlB,UAAUE,OAAO,EAE7B,WADjBwB;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBACJ/B,aAAamB,UAAUnB,aAAaqB,aAAarB,aAAa0B;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACf,gCAAgC,EAAE,GAAGe,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAOnB,WAAW+B,kBAAkBZ;QACpCF,WAAWnB,uCAET,OAAOuB,SAAS,YAAYd,UAAU,CAACc,KAAK,EAC5CA,SAAS,uCACT,OAAOA,SAAS,8CAChBM,8CACAV;kBAGF,cAAA,MAACf;YAASe,SAAS;YAAeM,YAAYC;WAAYK;;gBACvD9B,aAAauB,2BAAa,KAACW;oBAAIhB,SAAS;8BAAiBK;;gBACzDQ,+BACC,MAACG;oBACChB,WAAWnB,0CAET4B,cAAc,WAAWb,mBAAmB,CAACa,UAAU;;wBAGxD3B,aAAamB,wBAAU,KAACU;sCAAgBV;;wBACxCnB,aAAaqB,2BAAa,KAAChB;4BAASa,SAAS;sCAAoBG;;wBACjErB,aAAa0B,gCACZ,KAACrB;4BAASa,SAAS;sCAAoBQ;;;;;;;AAOrD,EAAE"}

package/dist/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.d.ts

@@ -7,7 +7,7 @@ export interface HorizontalCellShowMoreProps extends Omit<TappableProps, 'getRoo
      * Задаёт высоту компонента. Должeн соответствовать размеру картинок
      * внутри соседних `HorizontalCell` компонентов.
      *
-     * Используйте размеры, заданные дизайн-системой (см. типы).
+     * Используйте размеры, заданные дизайн-системой (смотри типы).
      *
      * > ⚠️ Использование кастомного размера – это пограничный кейс.
      *
@@ -26,7 +26,7 @@ export interface HorizontalCellShowMoreProps extends Omit<TappableProps, 'getRoo
      * */
     children?: SubheadProps['children'];
     /**
-     * Выравнивание по центру относительно родителя
+     * Выравнивание по центру относительно родителя.
      */
     centered?: boolean;
 }

package/dist/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.js

@@ -36,8 +36,7 @@ export const HorizontalCellShowMore = (_param)=>{
         }, restProps), {
             children: [
                 /*#__PURE__*/ _jsx(Icon28ChevronRightCircle, {
-                    className: "vkuiHorizontalCellShowMore__icon",
-                    fill: "currentColor"
+                    className: "vkuiHorizontalCellShowMore__icon"
                 }),
                 /*#__PURE__*/ _jsx(Subhead, {
                     className: "vkuiHorizontalCellShowMore__text",

package/dist/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size' | 'borderRadiusMode'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры, заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется, если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента.\n   *\n   * Значение `s` применяется для `<HorizontalCell size=\"s\"`, в остальных случаях рекомендуется `m`.\n   */\n  size?: 's' | 'm';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Выравнивание по центру относительно родителя\n   */\n  centered?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  centered = false,\n  ...restProps\n}: HorizontalCellShowMoreProps): React.ReactNode => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles.host,\n        centered && styles.centered,\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles.body}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle className={styles.icon} fill=\"currentColor\" />\n\n        <Subhead className={styles.text} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","sizeClassNames","s","m","HorizontalCellShowMore","className","style","getRef","getRootRef","height","size","children","centered","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":";;;;AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAA4B,6BAA0B;AACvE,SAASC,OAAO,QAA2B,sCAAmC;AAG9E,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAkCA,OAAO,MAAMC,yBAAyB;QAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChDE,WAAW,KAAK,EAEY,WADzBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACE;QACCR,OAAOA;QACPD,WAAWP,+CAETc,oDACAX,cAAc,CAACS,KAAK,EACpBL;QAEFU,KAAKP;kBAEL,cAAA,MAACT;YACCO,OAAOI,SAAS,MAAMM,YAAY;gBAAEP;YAAO;YAC3CJ,SAAS;YACTG,YAAYD;YACZU,YAAW;YACXC,WAAU;WACNL;;8BAEJ,KAAChB;oBAAyBQ,SAAS;oBAAec,MAAK;;8BAEvD,KAACnB;oBAAQK,SAAS;oBAAee,QAAO;8BACrCT;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size' | 'borderRadiusMode'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры, заданные дизайн-системой (смотри типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется, если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента.\n   *\n   * Значение `s` применяется для `<HorizontalCell size=\"s\"`, в остальных случаях рекомендуется `m`.\n   */\n  size?: 's' | 'm';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Выравнивание по центру относительно родителя.\n   */\n  centered?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  centered = false,\n  ...restProps\n}: HorizontalCellShowMoreProps): React.ReactNode => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles.host,\n        centered && styles.centered,\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles.body}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle className={styles.icon} />\n\n        <Subhead className={styles.text} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","sizeClassNames","s","m","HorizontalCellShowMore","className","style","getRef","getRootRef","height","size","children","centered","restProps","div","ref","undefined","activeMode","hoverMode","weight"],"mappings":";;;;AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAA4B,6BAA0B;AACvE,SAASC,OAAO,QAA2B,sCAAmC;AAG9E,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAkCA,OAAO,MAAMC,yBAAyB;QAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChDE,WAAW,KAAK,EAEY,WADzBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACE;QACCR,OAAOA;QACPD,WAAWP,+CAETc,oDACAX,cAAc,CAACS,KAAK,EACpBL;QAEFU,KAAKP;kBAEL,cAAA,MAACT;YACCO,OAAOI,SAAS,MAAMM,YAAY;gBAAEP;YAAO;YAC3CJ,SAAS;YACTG,YAAYD;YACZU,YAAW;YACXC,WAAU;WACNL;;8BAEJ,KAAChB;oBAAyBQ,SAAS;;8BAEnC,KAACL;oBAAQK,SAAS;oBAAec,QAAO;8BACrCR;;;;;AAKX,EAAE"}

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -4,19 +4,28 @@ import { type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 export type ScrollPositionHandler = (currentPosition: number) => number;
 export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
-     * Функция для расчета величины прокрутки при клике на левую стрелку.
+     * Функция для расчета величины прокрутки при нажатии на левую стрелку.
      */
     getScrollToLeft?: ScrollPositionHandler;
     /**
-     * Функция для расчета величины прокрутки при клике на правую стрелку.
+     * Функция для расчета величины прокрутки при нажатии на правую стрелку.
      */
     getScrollToRight?: ScrollPositionHandler;
+    /**
+     * Размер стрелок.
+     */
     arrowSize?: ScrollArrowProps['size'];
     /**
      * Смещает иконки кнопок навигации по вертикали.
      */
     arrowOffsetY?: number | string;
+    /**
+     * Показывать ли стрелки.
+     */
     showArrows?: boolean | 'always';
+    /**
+     * Длительность анимации скролла.
+     */
     scrollAnimationDuration?: number;
     /**
      * Добавляет возможность прокручивать контент на любое колесо мыши.
@@ -24,23 +33,23 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
      */
     scrollOnAnyWheel?: boolean;
     /**
-     * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента
+     * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.
      */
     prevButtonTestId?: string;
     /**
-     * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента
+     * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.
      */
     nextButtonTestId?: string;
     /**
-     * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`
+     * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.
      */
     ContentWrapperComponent?: React.ElementType;
     /**
-     * `ref` для обертки над контентом, прокинутым в `children`
+     * `ref` для обертки над контентом, прокинутым в `children`.
      */
     contentWrapperRef?: React.Ref<HTMLElement>;
     /**
-     * Специфичный `className` для обертки над контентом, прокинутым в `children`
+     * Специфичный `className` для обертки над контентом, прокинутым в `children`.
      */
     contentWrapperClassName?: string;
 }

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAmBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,gQAiB9B,qBAAqB,KAAG,KAAK,CAAC,SA+IhC,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAqBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,gQAiB9B,qBAAqB,KAAG,KAAK,CAAC,SA+IhC,CAAC"}

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -13,12 +13,12 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.j
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
 /**
- * timing method
+ * Timing method.
  */ function now() {
     return performance && performance.now ? performance.now() : Date.now();
 }
 /**
- * Округление к большему по модулю
+ * Округление к большему по модулю.
  *
  * ## Пример
  *
@@ -33,11 +33,11 @@ import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
 }
 /**
  * Округляем el.scrollLeft
- * https://github.com/VKCOM/VKUI/pull/2445
+ * https://github.com/VKCOM/VKUI/pull/2445.
  */ const roundUpElementScrollLeft = (el)=>roundingAwayFromZero(el.scrollLeft);
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
- * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
+ * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */ const SCROLL_ONE_FRAME_TIME = 250;
 function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToEndBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration, textDirection }) {
@@ -45,7 +45,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         return;
     }
     /**
-   * крайнее значение сдвига
+   * Крайнее значение сдвига.
    */ const extremeScrollLeft = (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
     const startScrollLeft = roundUpElementScrollLeft(scrollElement);
     const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);
@@ -56,7 +56,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     }
     onScrollStart();
     /**
-   * Если окончание прокрутки вышло за ноль
+   * Если окончание прокрутки вышло за ноль.
    */ if (startScrollLeft * endScrollLeft < 0) {
         endScrollLeft = 0;
     }
@@ -175,7 +175,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
             return noop;
         }
         /**
-       * Прокрутка с помощью любого колеса мыши
+       * Прокрутка с помощью любого колеса мыши.
        */ const onWheel = (e)=>{
             scrollerRef.current.scrollBy({
                 left: e.deltaX + e.deltaY,

package/dist/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента\n   */\n  prevButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента\n   */\n  nextButtonTestId?: string;\n  /**\n   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`\n   */\n  ContentWrapperComponent?: React.ElementType;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`\n   */\n  contentWrapperRef?: React.Ref<HTMLElement>;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`\n   */\n  contentWrapperClassName?: string;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * крайнее значение сдвига\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToStart}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToEnd}\n        />\n      )}\n      <div className={styles.in} ref={scrollerRef}>\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при нажатии на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при нажатии на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  /**\n   * Размер стрелок.\n   */\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  /**\n   * Показывать ли стрелки.\n   */\n  showArrows?: boolean | 'always';\n  /**\n   * Длительность анимации скролла.\n   */\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n   */\n  prevButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n   */\n  nextButtonTestId?: string;\n  /**\n   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n   */\n  ContentWrapperComponent?: React.ElementType;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperRef?: React.Ref<HTMLElement>;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperClassName?: string;\n}\n\n/**\n * Timing method.\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю.\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * Крайнее значение сдвига.\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль.\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши.\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToStart}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToEnd}\n        />\n      )}\n      <div className={styles.in} ref={scrollerRef}>\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}

package/dist/components/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { type TappableProps } from '../Tappable/Tappable';
 export interface IconButtonProps extends TappableProps {
     /**
-     * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий
+     * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.
      */
     label?: string;
 }

package/dist/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","sizeYClassNames","none","compact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa;QAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BC;QAApBF;QAAOC;;IAClC,MAAME,WAAWd;IACjB,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGhB;IAE3B,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAelB,kBAAkB;YACrCW,UAAU;gBAACA;gBAAUD;aAAM;WACxBE;QAGL,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;OAC9BR;QACJY,eAAe3B,mCAEbiB,UAAU,aAAaT,eAAe,CAACS,MAAM,EAC7CD,aAAa;;YAGdH,uBAAS,KAACN;0BAAgBM;;YAC1BC;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","sizeYClassNames","none","compact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa;QAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BC;QAApBF;QAAOC;;IAClC,MAAME,WAAWd;IACjB,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGhB;IAE3B,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAelB,kBAAkB;YACrCW,UAAU;gBAACA;gBAAUD;aAAM;WACxBE;QAGL,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;OAC9BR;QACJY,eAAe3B,mCAEbiB,UAAU,aAAaT,eAAe,CAACS,MAAM,EAC7CD,aAAa;;YAGdH,uBAAS,KAACN;0BAAgBM;;YAC1BC;;;AAGP,EAAE"}

package/dist/components/Image/Image.d.ts

@@ -8,19 +8,19 @@ export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
      */
     borderRadius?: 's' | 'l' | 'm';
     /**
-     * Размер закругления угла между сторонами начала блока и строки
+     * Размер закругления угла между сторонами начала блока и строки.
      */
     borderStartStartRadius?: 's' | 'l' | 'm';
     /**
-     * Размер закругления угла между стороной начала блока и стороной конца строки
+     * Размер закругления угла между стороной начала блока и стороной конца строки.
      */
     borderStartEndRadius?: 's' | 'l' | 'm';
     /**
-     * Размер закругления угла между стороной конца блока и стороной начала строки
+     * Размер закругления угла между стороной конца блока и стороной начала строки.
      */
     borderEndStartRadius?: 's' | 'l' | 'm';
     /**
-     * Размер закругления угла между сторонами конца блока и строки
+     * Размер закругления угла между сторонами конца блока и строки.
      */
     borderEndEndRadius?: 's' | 'l' | 'm';
 }

package/dist/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,SAAS,CAAC,YAAY,CAAC;CA2D7C,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,SAAS,CAAC,YAAY,CAAC;CA2D7C,CAAC"}

package/dist/components/Image/Image.js

@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { ImageBase } from "../ImageBase/ImageBase.js";
 import { ImageBadge } from "./ImageBadge/ImageBadge.js";
 const IMAGE_DEFAULT_SIZE = 48;
@@ -105,12 +106,13 @@ const getBorderRadiusBySizeInPx = (size, borderRadius)=>{
         className: classNames(className, "vkuiImage__host", borderStartStartRadius && "vkuiImage__borderStartStartRadius", borderStartEndRadius && "vkuiImage__borderStartEndRadius", borderEndStartRadius && "vkuiImage__borderEndStartRadius", borderEndEndRadius && "vkuiImage__borderEndEndRadius")
     }));
 };
-Image.displayName = 'Image';
 Image.Badge = ImageBadge;
-Image.Badge.displayName = 'Image.Badge';
 Image.Overlay = ImageBase.Overlay;
-Image.Overlay.displayName = 'Image.Overlay';
 Image.FloatElement = ImageBase.FloatElement;
-Image.FloatElement.displayName = 'Image.FloatElement';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(Image.Badge, 'Image.Badge');
+    defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');
+    defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');
+}
 
 //# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n  FloatElement: typeof ImageBase.FloatElement;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n\nImage.FloatElement = ImageBase.FloatElement;\nImage.FloatElement.displayName = 'Image.FloatElement';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","displayName","Badge","Overlay","FloatElement"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAK3E,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAIT;QAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EAER,WADRC;QATHZ;QACAC;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAwDpB,MAAMqB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACJ,mDACKgB;QACJD,WAAWA;QACXX,MAAMA;QACNS,OAAOd,WAAWkB,cAAcJ;QAChCC,WAAWhB,WACTgB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGnB;AACdO,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGrB,UAAUqB,OAAO;AACjCb,MAAMa,OAAO,CAACF,WAAW,GAAG;AAE5BX,MAAMc,YAAY,GAAGtB,UAAUsB,YAAY;AAC3Cd,MAAMc,YAAY,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки.\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки.\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки.\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки.\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n  FloatElement: typeof ImageBase.FloatElement;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\nImage.Overlay = ImageBase.Overlay;\nImage.FloatElement = ImageBase.FloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Image.Badge, 'Image.Badge');\n  defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');\n  defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');\n}\n"],"names":["React","classNames","mergeStyle","defineComponentDisplayNames","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","Badge","Overlay","FloatElement","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAK3E,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAIT;QAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EAER,WADRC;QATHZ;QACAC;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAwDrB,MAAMsB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACJ,mDACKgB;QACJD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,KAAK,GAAGlB;AACdO,MAAMY,OAAO,GAAGpB,UAAUoB,OAAO;AACjCZ,MAAMa,YAAY,GAAGrB,UAAUqB,YAAY;AAE3C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCzB,4BAA4BS,MAAMW,KAAK,EAAE;IACzCpB,4BAA4BS,MAAMY,OAAO,EAAE;IAC3CrB,4BAA4BS,MAAMa,YAAY,EAAE;AAClD"}

package/dist/components/Image/ImageBadge/ImageBadge.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type ImageBadgeProps = ImageBaseBadgeProps;
-export declare const ImageBadge: React.FC<ImageBadgeProps>;
+export declare const ImageBadge: ({ className, ...restProps }: ImageBadgeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImageBadge.d.ts.map

package/dist/components/Image/ImageBadge/ImageBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,KAAK,mBAAmB,EAAoB,MAAM,2BAA2B,CAAC;AAGlG,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAWhD,CAAC"}
+{"version":3,"file":"ImageBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,mBAAmB,EAAoB,MAAM,2BAA2B,CAAC;AAGlG,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,GAAI,6BAA6B,eAAe,4CAQtE,CAAC"}

package/dist/components/Image/ImageBadge/ImageBadge.js

@@ -15,6 +15,5 @@ export const ImageBadge = (_param)=>{
         className: classNames("vkuiImageBadge__host", size < 96 && "vkuiImageBadge__shifted", className)
     }));
 };
-ImageBadge.displayName = 'ImageBadge';
 
 //# sourceMappingURL=ImageBadge.js.map

package/dist/components/Image/ImageBadge/ImageBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge: React.FC<ImageBadgeProps> = ({\n  className,\n  ...restProps\n}: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(styles.host, size < 96 && styles.shifted, className)}\n    />\n  );\n};\n\nImageBadge.displayName = 'ImageBadge';\n"],"names":["React","classNames","ImageBase","ImageBaseContext","ImageBadge","className","restProps","size","useContext","Badge","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,+BAA4B;AAKlG,OAAO,MAAMC,aAAwC;QAAC,EACpDC,SAAS,EAEO,WADbC;QADHD;;IAGA,MAAM,EAAEE,IAAI,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IAClC,qBACE,KAACD,UAAUO,KAAK,0CACVH;QACJD,WAAWJ,mCAAwBM,OAAO,iCAAsBF;;AAGtE,EAAE;AAEFD,WAAWM,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(styles.host, size < 96 && styles.shifted, className)}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","ImageBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,+BAA4B;AAKlG,OAAO,MAAMC,aAAa;QAAC,EAAEC,SAAS,EAAiC,WAA5BC;QAAdD;;IAC3B,MAAM,EAAEE,IAAI,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IAClC,qBACE,KAACD,UAAUO,KAAK,0CACVH;QACJD,WAAWJ,mCAAwBM,OAAO,iCAAsBF;;AAGtE,EAAE"}

package/dist/components/ImageBase/ImageBase.d.ts

@@ -18,11 +18,11 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      */
     size?: LiteralUnion<ImageBaseSize, number>;
     /**
-     * Ширина изображения
+     * Ширина изображения.
      */
     widthSize?: number | string;
     /**
-     * Высота изображения
+     * Высота изображения.
      */
     heightSize?: number | string;
     /**
@@ -50,26 +50,26 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
     withTransparentBackground?: boolean;
     /**
      * Пользовательское значения стиля object-fit
-     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
      */
     objectFit?: React.CSSProperties['objectFit'];
     /**
      * Пользовательское значения стиля object-position
-     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)
+     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).
      */
     objectPosition?: React.CSSProperties['objectPosition'];
     /**
      * Флаг для сохранения пропорций картинки.
-     * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки
+     * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.
      */
     keepAspectRatio?: boolean;
     /**
-     * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
+     * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.
      */
     elementTiming?: string;
     /**
      * Пользовательское значения стиля filter
-     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
      */
     filter?: React.CSSProperties['filter'];
 }

package/dist/components/ImageBase/ImageBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,wBAAwB,EAExB,MAAM,EACN,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACxC;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CA4K5C,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,wBAAwB,EAExB,MAAM,EACN,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACxC;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CA4K5C,CAAC"}