@vkontakte/vkui 7.2.0 → 7.3.0

package/dist/components/SubnavigationButton/SubnavigationButton.d.ts

@@ -1,22 +1,37 @@
 import * as React from 'react';
 import { type TappableProps } from '../Tappable/Tappable';
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
+    /**
+     * Стиль отображения кнопки.
+     */
     mode?: 'primary' | 'outline' | 'tertiary';
+    /**
+     * Тип внешнего вида кнопки.
+     */
     appearance?: 'accent' | 'neutral';
+    /**
+     * Размер кнопки.
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * Выбранное состояние.
+     */
     selected?: boolean;
     /**
-     * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`
+     * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.
      */
     textLevel?: '1' | '2' | '3';
     /**
-     * Рекомендуется использовать только иконки с размером 24
+     * Рекомендуется использовать только иконки с размером 24.
      */
     before?: React.ReactNode;
     /**
-     * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`
+     * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`.
      */
     after?: React.ReactNode;
+    /**
+     * Нужно ли отображать иконку `"chevron"`.
+     */
     chevron?: boolean;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationButton.d.ts","sourceRoot":"","sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA2BpE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAC3E,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoBD;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,iGAWjC,wBAAwB,KAAG,KAAK,CAAC,SAgCnC,CAAC"}
+{"version":3,"file":"SubnavigationButton.d.ts","sourceRoot":"","sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA2BpE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAC3E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoBD;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,iGAWjC,wBAAwB,KAAG,KAAK,CAAC,SAgCnC,CAAC"}

package/dist/components/SubnavigationButton/SubnavigationButton.js

@@ -54,9 +54,10 @@ const SubnavigationButtonTypography = (_param)=>{
         "children"
     ]);
     const { sizeY = 'none' } = useAdaptivity();
-    return /*#__PURE__*/ _jsx(Tappable, _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ _jsx(Tappable, _object_spread_props(_object_spread({
         hasActive: false,
-        focusVisibleMode: "outside",
+        focusVisibleMode: "outside"
+    }, restProps), {
         baseClassName: classNames("vkuiSubnavigationButton__host", sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && "vkuiSubnavigationButton__selected", sizeY !== 'regular' && sizeYClassNames[sizeY], restProps.disabled && "vkuiSubnavigationButton__disabled"),
         children: /*#__PURE__*/ _jsxs("span", {
             className: "vkuiSubnavigationButton__in",

package/dist/components/SubnavigationButton/SubnavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","compact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","disabled","span","className","Component"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AAGxD,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AA6BA,MAAMC,gCAAgC;QAAC,EACrCC,SAAS,EAE0B,WADhCC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,KAAChB,4BAAYiB;IACtB;IAEA,qBAAO,KAAClB;QAAQmB,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB;QAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EAEiB,WADtBV;QATHG;QACAC;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG/B;IAE3B,qBACE,KAACC,kDACKmB;QACJY,WAAW;QACXC,kBAAiB;QACjBC,eAAenC,4CAEbY,UAAU,CAACc,KAAK,EAChBlB,UAAU,CAACgB,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,iDACAK,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CX,UAAUe,QAAQ;kBAGpB,cAAA,MAACC;YAAKC,SAAS;;gBACZV,wBAAU,KAACS;oBAAKC,SAAS;8BAAkBV;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXkB,SAAS;oBACTC,WAAU;8BAETR;;gBAEFF,uBAAS,KAACQ;oBAAKC,SAAS;8BAAiBT;;gBACzCC,yBAAW,KAAC/B;oBAAeuC,SAAS;;;;;AAI7C,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  /**\n   * Стиль отображения кнопки.\n   */\n  mode?: 'primary' | 'outline' | 'tertiary';\n  /**\n   * Тип внешнего вида кнопки.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Выбранное состояние.\n   */\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24.\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Нужно ли отображать иконку `\"chevron\"`.\n   */\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","compact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","disabled","span","className","Component"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AAGxD,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AA4CA,MAAMC,gCAAgC;QAAC,EACrCC,SAAS,EAE0B,WADhCC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,KAAChB,4BAAYiB;IACtB;IAEA,qBAAO,KAAClB;QAAQmB,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB;QAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EAEiB,WADtBV;QATHG;QACAC;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG/B;IAE3B,qBACE,KAACC;QACC+B,WAAW;QACXC,kBAAiB;OACbb;QACJc,eAAenC,4CAEbY,UAAU,CAACc,KAAK,EAChBlB,UAAU,CAACgB,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,iDACAK,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CX,UAAUe,QAAQ;kBAGpB,cAAA,MAACC;YAAKC,SAAS;;gBACZV,wBAAU,KAACS;oBAAKC,SAAS;8BAAkBV;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXkB,SAAS;oBACTC,WAAU;8BAETR;;gBAEFF,uBAAS,KAACQ;oBAAKC,SAAS;8BAAiBT;;gBACzCC,yBAAW,KAAC/B;oBAAeuC,SAAS;;;;;AAI7C,EAAE"}

package/dist/components/Tabbar/Tabbar.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
 export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
-     * Флаг, который скрывает тень (Android) или границы (iOS)
+     * Флаг, который скрывает тень (Android) или границы (iOS).
      */
     plain?: boolean;
     /**
-     * Задает расположение элементов (вертикальное/горизонтальное)
+     * Задает расположение элементов (вертикальное/горизонтальное).
      */
     mode?: 'vertical' | 'horizontal' | 'auto';
 }

package/dist/components/Tabbar/Tabbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles.host,\n        platform === 'ios' && styles.ios,\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles.shadow,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAc/D,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS;QAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWX;IAEjB,qBACE,KAACC;QACCW,eAAeb,WACb,0CAEAY,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV,EAAE"}
+{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS).\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное).\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles.host,\n        platform === 'ios' && styles.ios,\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles.shadow,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAc/D,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS;QAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWX;IAEjB,qBACE,KAACC;QACCW,eAAeb,WACb,0CAEAY,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV,EAAE"}

package/dist/components/TabbarItem/TabbarItem.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import type { HasComponent, HasRootRef } from '../../types';
 export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, HasRootRef<HTMLElement>, HasComponent {
+    /**
+     * Выбранное состояние компонента.
+     */
     selected?: boolean;
     /**
-     * Текст рядом с иконкой
+     * Текст рядом с иконкой.
      */
     label?: React.ReactNode;
     /**
-     * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`
+     * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`.
      */
     indicator?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM5D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACzD,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,6HAWxB,eAAe,KAAG,KAAK,CAAC,SA4D1B,CAAC"}
+{"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM5D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACzD,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,6HAWxB,eAAe,KAAG,KAAK,CAAC,SA4D1B,CAAC"}

package/dist/components/TabbarItem/TabbarItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  label?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  label,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = label || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  const {\n    focusVisible,\n    onFocus: handleFocusVisibleOnFocus,\n    onBlur: handleFocusVisibleOnBlur,\n  } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n      href={href}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        platform === 'android' && styles.android,\n        selected && styles.selected,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={classNames(styles.tappable, focusVisibleClassNames)}\n        onClick={noop}\n        tabIndex={-1}\n      />\n      <div className={styles.in}>\n        <div className={styles.icon}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {label && (\n          <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n            {label}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","tabIndex","div","weight"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAkB3D,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa;QAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAEF,WADbC;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAMG,WAAWrB;IAEjB,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKL,gBAAgBwB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAG/B;IACJ,MAAMgC,yBAAyB/B,yBAAyB;QACtD4B;IACF;IAEA,qBACE,MAACvB;QACCU,WAAWA;OACPM;QACJL,UAAUA;QACVC,SAASf,aAAa2B,2BAA2BX;QACjDC,QAAQjB,aAAa4B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAepC,mCAEb0B,aAAa,gCACbA,aAAa,wCACbX;;0BAGF,KAACL;gBACC2B,MAAK;gBACLjB,UAAUA;gBACVkB,YAAYZ,aAAa,2CAAgC;gBACzDa,mBAAmBb,aAAa,QAAQ,IAAI;gBAC5Cc,UAAU;gBACVC,WAAWzC,uCAA4BmC;gBACvCO,SAASxC;gBACTyC,UAAU,CAAC;;0BAEb,MAACC;gBAAIH,SAAS;;kCACZ,MAACG;wBAAIH,SAAS;;4BACX3B;0CACD,KAAC8B;gCAAIH,WAAU;0CACZxC,aAAae,cAAcA;;;;oBAG/BC,uBACC,KAACN;wBAASQ,WAAU;wBAAMsB,SAAS;wBAAgBI,QAAO;kCACvD5B;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Выбранное состояние компонента.\n   */\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой.\n   */\n  label?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`.\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  label,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = label || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  const {\n    focusVisible,\n    onFocus: handleFocusVisibleOnFocus,\n    onBlur: handleFocusVisibleOnBlur,\n  } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n      href={href}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        platform === 'android' && styles.android,\n        selected && styles.selected,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={classNames(styles.tappable, focusVisibleClassNames)}\n        onClick={noop}\n        tabIndex={-1}\n      />\n      <div className={styles.in}>\n        <div className={styles.icon}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {label && (\n          <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n            {label}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","tabIndex","div","weight"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAqB3D,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa;QAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAEF,WADbC;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAMG,WAAWrB;IAEjB,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKL,gBAAgBwB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAG/B;IACJ,MAAMgC,yBAAyB/B,yBAAyB;QACtD4B;IACF;IAEA,qBACE,MAACvB;QACCU,WAAWA;OACPM;QACJL,UAAUA;QACVC,SAASf,aAAa2B,2BAA2BX;QACjDC,QAAQjB,aAAa4B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAepC,mCAEb0B,aAAa,gCACbA,aAAa,wCACbX;;0BAGF,KAACL;gBACC2B,MAAK;gBACLjB,UAAUA;gBACVkB,YAAYZ,aAAa,2CAAgC;gBACzDa,mBAAmBb,aAAa,QAAQ,IAAI;gBAC5Cc,UAAU;gBACVC,WAAWzC,uCAA4BmC;gBACvCO,SAASxC;gBACTyC,UAAU,CAAC;;0BAEb,MAACC;gBAAIH,SAAS;;kCACZ,MAACG;wBAAIH,SAAS;;4BACX3B;0CACD,KAAC8B;gCAAIH,WAAU;0CACZxC,aAAae,cAAcA;;;;oBAG/BC,uBACC,KAACN;wBAASQ,WAAU;wBAAMsB,SAAS;wBAAgBI,QAAO;kCACvD5B;;;;;;AAMb,EAAE"}

package/dist/components/Tabs/Tabs.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
 export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Режим отображения компонента.
+     */
     mode?: 'default' | 'accent' | 'secondary';
     /**
-     * Включает прокрутку контейнера до активной (`selected`) вкладки
+     * Включает прокрутку контейнера до активной (`selected`) вкладки.
      * @since 5.10.0
      */
     withScrollToSelectedTab?: boolean;
@@ -18,7 +21,7 @@ export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
      *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`
      *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'
      * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,
-     * либо выравниваются по контенту соответственно
+     * либо выравниваются по контенту соответственно.
      */
     layoutFillMode?: 'auto' | 'stretched' | 'shrinked';
 }
@@ -33,8 +36,5 @@ export declare const TabsModeContext: React.Context<TabsContextProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
-export declare const Tabs: {
-    ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, ...restProps }: TabsProps): React.ReactNode;
-    displayName: string;
-};
+export declare const Tabs: ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, ...restProps }: TabsProps) => React.ReactNode;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAOxD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,IAAI;mHAQd,SAAS,GAAG,KAAK,CAAC,SAAS;;CAmC7B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAGD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAGD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAOxD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,8GAQlB,SAAS,KAAG,KAAK,CAAC,SAmCpB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -9,7 +9,7 @@ import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
-export const TabsModeContext = /*#__PURE__*/ React.createContext({
+/* eslint-enable jsdoc/require-jsdoc */ export const TabsModeContext = /*#__PURE__*/ React.createContext({
     mode: 'default',
     withGaps: false,
     layoutFillMode: 'auto',
@@ -51,8 +51,5 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
         })
     }));
 };
-// чтобы styleguidist не путал компонент
-// с другими именованными экспортами
-Tabs.displayName = 'Tabs';
 
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n\n// чтобы styleguidist не путал компонент\n// с другими именованными экспортами\nTabs.displayName = 'Tabs';\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","direction","isTabFlow","tabsRef","baseClassName","div","className","ref","Provider","value","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAkC/D,OAAO,MAAMC,gCACXN,MAAMO,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EAEb,WADPM;QANHF;QACAN;QACAO;QACAJ;QACAC;QACAF;;IAGA,MAAMO,WAAWd;IACjB,MAAMe,YAAYhB;IAClB,MAAMiB,YAAYJ,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEY,OAAO,EAAE,GAAGhB,kBAAkBe,WAAWD,cAAc;IAE/D,qBACE,KAACb,uDACKW;QACJK,eAAepB,6BAEb,oBACAgB,aAAa,WAAW,2BACxBR,YAAYR,iCAA4B,+BACxCO,SAAS;QAEXO,MAAMA;kBAEN,cAAA,KAACO;YAAIC,SAAS;YAAaC,KAAKJ;sBAC9B,cAAA,KAACd,gBAAgBmB,QAAQ;gBACvBC,OAAO;oBACLlB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE;AAEF,wCAAwC;AACxC,oCAAoC;AACpCD,KAAKc,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки.\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно.\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","direction","isTabFlow","tabsRef","baseClassName","div","className","ref","Provider","value"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAqC/D,qCAAqC,GAErC,OAAO,MAAMC,gCACXN,MAAMO,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EAEb,WADPM;QANHF;QACAN;QACAO;QACAJ;QACAC;QACAF;;IAGA,MAAMO,WAAWd;IACjB,MAAMe,YAAYhB;IAClB,MAAMiB,YAAYJ,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEY,OAAO,EAAE,GAAGhB,kBAAkBe,WAAWD,cAAc;IAE/D,qBACE,KAACb,uDACKW;QACJK,eAAepB,6BAEb,oBACAgB,aAAa,WAAW,2BACxBR,YAAYR,iCAA4B,+BACxCO,SAAS;QAEXO,MAAMA;kBAEN,cAAA,KAACO;YAAIC,SAAS;YAAaC,KAAKJ;sBAC9B,cAAA,KAACd,gBAAgBmB,QAAQ;gBACvBC,OAAO;oBACLlB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE"}

package/dist/components/TabsItem/TabsItem.d.ts

@@ -13,21 +13,27 @@ export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement>, A
      * Добавляет элемент слева от `after`.
      *
      * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode="prominent"`.
-     *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode="prominent" size="s"`.
+     *   Либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode="prominent" size="s"`.
      * - `number` – для показа текстового блока с переданным числом.
      */
     status?: React.ReactElement | number;
     /**
      * Добавляет иконку справа.
      *
-     * Например, `<Icon16Dropdown />`
+     * Например, `<Icon16Dropdown />`.
      */
     after?: React.ReactNode;
+    /**
+     * Флаг для отображения выбранного состояния.
+     */
     selected?: boolean;
+    /**
+     * Блокировка взаимодействия с компонентом.
+     */
     disabled?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export declare const TabsItem: ({ before, children, status, after, selected, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hovered, activated, hasHover, hasActive, focusVisibleMode, ...restProps }: TabsItemProps) => React.ReactNode;
+export declare const TabsItem: ({ before, children, status, after, selected, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hasActive, focusVisibleMode, ...restProps }: TabsItemProps) => React.ReactNode;
 //# sourceMappingURL=TabsItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,aAAa,EACX,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,yLAiBtB,aAAa,KAAG,KAAK,CAAC,SA+HxB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,aAAa,EACX,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,2JActB,aAAa,KAAG,KAAK,CAAC,SA4HxB,CAAC"}

package/dist/components/TabsItem/TabsItem.js

@@ -32,7 +32,7 @@ const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */ export const TabsItem = (_param)=>{
-    var { before, children, status, after, selected = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = "vkuiTabsItem__hover", activeMode = '', hovered, activated, hasHover, hasActive = false, focusVisibleMode = 'inside' } = _param, restProps = _object_without_properties(_param, [
+    var { before, children, status, after, selected = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = "vkuiTabsItem__hover", activeMode = '', hasActive = false, focusVisibleMode = 'inside' } = _param, restProps = _object_without_properties(_param, [
         "before",
         "children",
         "status",
@@ -43,9 +43,6 @@ const warn = warnOnce('TabsItem');
         "getRootRef",
         "hoverMode",
         "activeMode",
-        "hovered",
-        "activated",
-        "hasHover",
         "hasActive",
         "focusVisibleMode"
     ]);
@@ -116,19 +113,17 @@ const warn = warnOnce('TabsItem');
         shouldScrollToSelected,
         scrollBehaviorToSelectedTab
     ]);
-    return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
         getRootRef: rootRef,
-        baseClassName: classNames("vkuiTabsItem__host", mode && stylesMode[mode], selected && "vkuiTabsItem__selected", sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem__withGaps", layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode]),
         hoverMode: hoverMode,
         activeMode: activeMode,
-        hasHover: hasHover,
         hasActive: hasActive,
-        hovered: hovered,
-        activated: activated,
         focusVisibleMode: focusVisibleMode,
         role: role,
         "aria-selected": selected,
         tabIndex: tabIndex,
+        baseClassName: classNames("vkuiTabsItem__host", mode && stylesMode[mode], selected && "vkuiTabsItem__selected", sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem__withGaps", layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode])
+    }, restProps), {
         children: [
             before && /*#__PURE__*/ _jsx("div", {
                 className: "vkuiTabsItem__before",

package/dist/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","sizeYClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","baseClassName","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","sizeYClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","baseClassName","div","level","aria-hidden","data-selected"],"mappings":"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"}

package/dist/components/Tappable/Ripple.d.ts

@@ -11,7 +11,7 @@ interface Wave {
     pointerId: number;
 }
 /**
- * Хук для создания Ripple эффектов
+ * Хук для создания Ripple эффектов.
  */
 export declare const useRipple: (needRipple: boolean, hasPointerContext: boolean | undefined) => {
     clicks: Wave[];

package/dist/components/Tappable/Ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAY,MAAM,EAClB,YAAY,OAAO,GAAG,SAAS,KAC9B,OAIF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,GACpB,YAAY,OAAO,EACnB,mBAAmB,OAAO,GAAG,SAAS,KACrC;IACD,MAAM,EAAE,IAAI,EAAE,CAAC;IACf,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC1D,eAAe,EAAE,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;CA4D7D,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,GAAI,wBAA+B,WAAW,KAAG,KAAK,CAAC,SAQzE,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAY,MAAM,EAClB,YAAY,OAAO,GAAG,SAAS,KAC9B,OAIF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,GACpB,YAAY,OAAO,EACnB,mBAAmB,OAAO,GAAG,SAAS,KACrC;IACD,MAAM,EAAE,IAAI,EAAE,CAAC;IACf,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC1D,eAAe,EAAE,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;CA4D7D,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,GAAI,wBAA+B,WAAW,KAAG,KAAK,CAAC,SAQzE,CAAC"}

package/dist/components/Tappable/Ripple.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { classNames, hasMouse as hasPointerLib, noop } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { getOffsetRect } from "../../lib/offset.js";
-/**
+/* eslint-disable jsdoc/require-jsdoc */ /**
  * Возможно нужен Ripple эффект. Данный хук нужен для отказа
  * от двойного ререндера.
  */ export const useMaybeNeedRipple = (activeMode, hasPointer)=>{
@@ -13,11 +13,11 @@ import { getOffsetRect } from "../../lib/offset.js";
 const DELAY = 70;
 const WAVE_LIVE = 225;
 /**
- * Хук для создания Ripple эффектов
+ * Хук для создания Ripple эффектов.
  */ export const useRipple = (needRipple, hasPointerContext)=>{
     const [clicks, setClicks] = React.useState([]);
     /**
-   * Коллекция нажатий и таймеров задержки появления волны
+   * Коллекция нажатий и таймеров задержки появления волны.
    */ const pointerDelayTimers = React.useMemo(()=>new Map(), []);
     React.useEffect(function setClearClicksTimeout() {
         const clicksTimeoutId = clicks.length > 0 ? setTimeout(()=>setClicks([]), WAVE_LIVE) : null;

package/dist/components/Tappable/Ripple.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (\n  activeMode: string,\n  hasPointer: boolean | undefined,\n): boolean => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (\n  needRipple: boolean,\n  hasPointerContext: boolean | undefined,\n): {\n  clicks: Wave[];\n  onPointerDown: React.PointerEventHandler<HTMLSpanElement>;\n  onPointerCancel: React.PointerEventHandler<HTMLSpanElement>;\n} => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  React.useEffect(\n    function setClearClicksTimeout() {\n      const clicksTimeoutId = clicks.length > 0 ? setTimeout(() => setClicks([]), WAVE_LIVE) : null;\n      return function cancelClearClicksTimeout() {\n        if (clicksTimeoutId) {\n          clearTimeout(clicksTimeoutId);\n        }\n      };\n    },\n    [clicks],\n  );\n\n  function addClick(x: number, y: number, pointerId: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps): React.ReactNode => {\n  return (\n    <span aria-hidden className={classNames(styles.stateLayer, needRipple && styles.ripple)}>\n      {clicks.map((wave) => (\n        <span key={wave.id} className={styles.wave} style={{ top: wave.y, left: wave.x }} />\n      ))}\n    </span>\n  );\n};\n"],"names":["React","classNames","hasMouse","hasPointerLib","noop","usePlatform","getOffsetRect","useMaybeNeedRipple","activeMode","hasPointer","platform","DELAY","WAVE_LIVE","useRipple","needRipple","hasPointerContext","clicks","setClicks","useState","pointerDelayTimers","useMemo","Map","useEffect","setClearClicksTimeout","clicksTimeoutId","length","setTimeout","cancelClearClicksTimeout","clearTimeout","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","delete","onPointerDown","e","top","left","currentTarget","clientX","clientY","set","onPointerCancel","timer","get","reallyNeedRipple","Ripple","span","aria-hidden","className","map","wave","style"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAYC,aAAa,EAAEC,IAAI,QAAQ,kBAAkB;AAC9E,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,aAAa,QAAQ,sBAAmB;AAGjD;;;CAGC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,YACAC;IAEA,MAAMC,WAAWL;IAEjB,OAAOK,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE,EAAE;AASF,MAAMG,QAAQ;AACd,MAAMC,YAAY;AAElB;;CAEC,GACD,OAAO,MAAMC,YAAY,CACvBC,YACAC;IAMA,MAAM,CAACC,QAAQC,UAAU,GAAGjB,MAAMkB,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBnB,MAAMoB,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJrB,MAAMsB,SAAS,CACb,SAASC;QACP,MAAMC,kBAAkBR,OAAOS,MAAM,GAAG,IAAIC,WAAW,IAAMT,UAAU,EAAE,GAAGL,aAAa;QACzF,OAAO,SAASe;YACd,IAAIH,iBAAiB;gBACnBI,aAAaJ;YACf;QACF;IACF,GACA;QAACR;KAAO;IAGV,SAASa,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBpB,OAAOqB,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAG3B,YAAYqB;QAEvEhB,UAAU;eAAImB;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/Db,mBAAmBqB,MAAM,CAACR;IAC5B;IAEA;;GAEC,GACD,MAAMS,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGtC,cAAcoC,EAAEG,aAAa;QACnD,MAAMf,IAAIY,EAAEI,OAAO,GAAIF,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAA;QAC/B,MAAMb,IAAIW,EAAEK,OAAO,GAAIJ,CAAAA,gBAAAA,iBAAAA,MAAO,CAAA;QAE9BxB,mBAAmB6B,GAAG,CACpBN,EAAEV,SAAS,EACXN,WAAW,IAAMG,SAASC,GAAGC,GAAGW,EAAEV,SAAS,GAAGrB;IAElD;IAEA,MAAMsC,kBAA8D,CAACP;QACnE,MAAMQ,QAAQ/B,mBAAmBgC,GAAG,CAACT,EAAEV,SAAS;QAChDJ,aAAasB;QACb/B,mBAAmBqB,MAAM,CAACE,EAAEV,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMoB,mBAAmB,AAAC,CAAA,CAACjD,iBAAiBY,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACAyB,eAAeW,mBAAmBX,gBAAgBrC;QAClD6C,iBAAiBG,mBAAmBH,kBAAkB7C;IACxD;AACF,EAAE;AAOF,OAAO,MAAMiD,SAAS,CAAC,EAAEvC,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,KAACsC;QAAKC,aAAW;QAACC,WAAWvD,uCAA8Ba;kBACxDE,OAAOyC,GAAG,CAAC,CAACC,qBACX,KAACJ;gBAAmBE,SAAS;gBAAeG,OAAO;oBAAEhB,KAAKe,KAAK3B,CAAC;oBAAEa,MAAMc,KAAK5B,CAAC;gBAAC;eAApE4B,KAAKnB,EAAE;;AAI1B,EAAE"}
+{"version":3,"sources":["../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (\n  activeMode: string,\n  hasPointer: boolean | undefined,\n): boolean => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов.\n */\nexport const useRipple = (\n  needRipple: boolean,\n  hasPointerContext: boolean | undefined,\n): {\n  clicks: Wave[];\n  onPointerDown: React.PointerEventHandler<HTMLSpanElement>;\n  onPointerCancel: React.PointerEventHandler<HTMLSpanElement>;\n} => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны.\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  React.useEffect(\n    function setClearClicksTimeout() {\n      const clicksTimeoutId = clicks.length > 0 ? setTimeout(() => setClicks([]), WAVE_LIVE) : null;\n      return function cancelClearClicksTimeout() {\n        if (clicksTimeoutId) {\n          clearTimeout(clicksTimeoutId);\n        }\n      };\n    },\n    [clicks],\n  );\n\n  function addClick(x: number, y: number, pointerId: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps): React.ReactNode => {\n  return (\n    <span aria-hidden className={classNames(styles.stateLayer, needRipple && styles.ripple)}>\n      {clicks.map((wave) => (\n        <span key={wave.id} className={styles.wave} style={{ top: wave.y, left: wave.x }} />\n      ))}\n    </span>\n  );\n};\n"],"names":["React","classNames","hasMouse","hasPointerLib","noop","usePlatform","getOffsetRect","useMaybeNeedRipple","activeMode","hasPointer","platform","DELAY","WAVE_LIVE","useRipple","needRipple","hasPointerContext","clicks","setClicks","useState","pointerDelayTimers","useMemo","Map","useEffect","setClearClicksTimeout","clicksTimeoutId","length","setTimeout","cancelClearClicksTimeout","clearTimeout","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","delete","onPointerDown","e","top","left","currentTarget","clientX","clientY","set","onPointerCancel","timer","get","reallyNeedRipple","Ripple","span","aria-hidden","className","map","wave","style"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAYC,aAAa,EAAEC,IAAI,QAAQ,kBAAkB;AAC9E,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,aAAa,QAAQ,sBAAmB;AAGjD,sCAAsC,GAEtC;;;CAGC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,YACAC;IAEA,MAAMC,WAAWL;IAEjB,OAAOK,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE,EAAE;AASF,MAAMG,QAAQ;AACd,MAAMC,YAAY;AAElB;;CAEC,GACD,OAAO,MAAMC,YAAY,CACvBC,YACAC;IAMA,MAAM,CAACC,QAAQC,UAAU,GAAGjB,MAAMkB,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBnB,MAAMoB,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJrB,MAAMsB,SAAS,CACb,SAASC;QACP,MAAMC,kBAAkBR,OAAOS,MAAM,GAAG,IAAIC,WAAW,IAAMT,UAAU,EAAE,GAAGL,aAAa;QACzF,OAAO,SAASe;YACd,IAAIH,iBAAiB;gBACnBI,aAAaJ;YACf;QACF;IACF,GACA;QAACR;KAAO;IAGV,SAASa,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBpB,OAAOqB,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAG3B,YAAYqB;QAEvEhB,UAAU;eAAImB;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/Db,mBAAmBqB,MAAM,CAACR;IAC5B;IAEA;;GAEC,GACD,MAAMS,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGtC,cAAcoC,EAAEG,aAAa;QACnD,MAAMf,IAAIY,EAAEI,OAAO,GAAIF,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAA;QAC/B,MAAMb,IAAIW,EAAEK,OAAO,GAAIJ,CAAAA,gBAAAA,iBAAAA,MAAO,CAAA;QAE9BxB,mBAAmB6B,GAAG,CACpBN,EAAEV,SAAS,EACXN,WAAW,IAAMG,SAASC,GAAGC,GAAGW,EAAEV,SAAS,GAAGrB;IAElD;IAEA,MAAMsC,kBAA8D,CAACP;QACnE,MAAMQ,QAAQ/B,mBAAmBgC,GAAG,CAACT,EAAEV,SAAS;QAChDJ,aAAasB;QACb/B,mBAAmBqB,MAAM,CAACE,EAAEV,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMoB,mBAAmB,AAAC,CAAA,CAACjD,iBAAiBY,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACAyB,eAAeW,mBAAmBX,gBAAgBrC;QAClD6C,iBAAiBG,mBAAmBH,kBAAkB7C;IACxD;AACF,EAAE;AAOF,OAAO,MAAMiD,SAAS,CAAC,EAAEvC,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,KAACsC;QAAKC,aAAW;QAACC,WAAWvD,uCAA8Ba;kBACxDE,OAAOyC,GAAG,CAAC,CAACC,qBACX,KAACJ;gBAAmBE,SAAS;gBAAeG,OAAO;oBAAEhB,KAAKe,KAAK3B,CAAC;oBAAEa,MAAMc,KAAK5B,CAAC;gBAAC;eAApE4B,KAAKnB,EAAE;;AAI1B,EAAE"}

package/dist/components/Tappable/Tappable.d.ts

@@ -3,9 +3,21 @@ import { type StateProps } from './state';
 export interface TappableProps extends ClickableProps, StateProps {
     /**
      * Задает border-radius элементу
-     * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`
+     * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.
      */
     borderRadiusMode?: 'auto' | 'inherit';
+    /**
+     * @deprecated Since 7.3.0.
+     *
+     * Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`.
+     */
+    activeClassName?: string;
+    /**
+     * @deprecated Since 7.3.0.
+     *
+     * Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`.
+     */
+    hoverClassName?: string;
 }
 export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => React.ReactNode;
 //# sourceMappingURL=Tappable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExF,OAAO,EAA+C,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBvF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,GAAI,oHAStB,aAAa,KAAG,KAAK,CAAC,SAqCxB,CAAC"}
+{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExF,OAAO,EAA+C,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBvF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,GAAI,oHAStB,aAAa,KAAG,KAAK,CAAC,SAqCxB,CAAC"}

package/dist/components/Tappable/Tappable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","REGULAR","hoverClassName","activeClassName"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUA,OAAO,MAAMC,WAAW;QAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYZ,kBAAkB,EAC9Ba,aAAab,kBAAkB,EAC/Bc,aAAa,EACbC,eAAe,EAED,WADXC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcvB,eAAesB;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEZ,UAAU,EAAE,GAAGf;IAEvC,MAAM4B,aAAatB,mBAAmBgB,YAAYP;IAClD,MAAoCR,aAAAA,UAAUqB,YAAYb,aAApD,EAAEc,MAAM,EAAmB,GAAGtB,YAAjBuB,0CAAiBvB;QAA5BsB;;IAER,MAAME,WAAW7B,WAAW4B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC9B;QACCc,eAAenB,WACb,wBACAmB,qCAEAS,UAAU1B,SAASkC,OAAO,IAAIxB,eAAe,CAACgB,MAAM,EACpDR,qBAAqB,kDACrBL,oBAAoBC;QAEtBqB,gBAAgB1B,WAAWW;QAC3BgB,iBAAiB7B,YAAYc;OACzBU,WACAD,UACAN;;YAEHL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACjB;gBAAOuB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`.\n   */\n  activeClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","REGULAR","hoverClassName","activeClassName"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAsBA,OAAO,MAAMC,WAAW;QAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYZ,kBAAkB,EAC9Ba,aAAab,kBAAkB,EAC/Bc,aAAa,EACbC,eAAe,EAED,WADXC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcvB,eAAesB;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEZ,UAAU,EAAE,GAAGf;IAEvC,MAAM4B,aAAatB,mBAAmBgB,YAAYP;IAClD,MAAoCR,aAAAA,UAAUqB,YAAYb,aAApD,EAAEc,MAAM,EAAmB,GAAGtB,YAAjBuB,0CAAiBvB;QAA5BsB;;IAER,MAAME,WAAW7B,WAAW4B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC9B;QACCc,eAAenB,WACb,wBACAmB,qCAEAS,UAAU1B,SAASkC,OAAO,IAAIxB,eAAe,CAACgB,MAAM,EACpDR,qBAAqB,kDACrBL,oBAAoBC;QAEtBqB,gBAAgB1B,WAAWW;QAC3BgB,iBAAiB7B,YAAYc;OACzBU,WACAD,UACAN;;YAEHL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACjB;gBAAOuB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

package/dist/components/Tappable/state.d.ts

@@ -3,24 +3,24 @@ type StateMode = 'opacity' | 'background' | 'none';
 export type StateModeLiteral = LiteralUnion<StateMode, string>;
 export interface StateProps {
     /**
-     * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
+     * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active.
      */
     activeMode?: StateModeLiteral;
     /**
-     * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
+     * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover.
      */
     hoverMode?: StateModeLiteral;
 }
 /**
- * Состояние по умолчанию
+ * Состояние по умолчанию.
  */
 export declare const DEFAULT_STATE_MODE: StateMode;
 /**
- * Определяем класс наведения
+ * Определяем класс наведения.
  */
 export declare function hoverClass(hoverMode?: StateModeLiteral): string;
 /**
- * Определяем класс наведения
+ * Определяем класс наведения.
  */
 export declare function activeClass(activeMode?: StateModeLiteral): string;
 export {};