@vkontakte/vkui 7.3.8 → 7.4.1

package/dist/components/Spinner/Spinner.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
+import { animationVisibilityDelayStyles } from "../../styles/animationVisibilityDelay.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { SpinnerAnimation } from "./SpinnerAnimation.js";
@@ -19,18 +20,20 @@ const spinnerIconMap = {
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
 export const Spinner = /*#__PURE__*/ React.memo((_param)=>{
-    var { size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false } = _param, restProps = _object_without_properties(_param, [
+    var { size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, visibilityDelay } = _param, restProps = _object_without_properties(_param, [
         "size",
         "children",
         "disableAnimation",
-        "noColor"
+        "noColor",
+        "visibilityDelay"
     ]);
     const SpinnerIcon = spinnerIconMap[size];
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
         Component: "span",
         role: "status"
     }, restProps), {
-        baseClassName: classNames("vkuiSpinner__host", noColor && "vkuiSpinner__noColor"),
+        baseClassName: classNames("vkuiSpinner__host", noColor && "vkuiSpinner__noColor", visibilityDelay && "vkuistyles__visibilityDelay"),
+        baseStyle: animationVisibilityDelayStyles(visibilityDelay),
         children: [
             /*#__PURE__*/ _jsx(SpinnerIcon, {
                 children: disableAnimation ? null : /*#__PURE__*/ _jsx(SpinnerAnimation, {

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Размер спиннера.\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя.\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles.host, noColor && styles.noColor)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","restProps","SpinnerIcon","Component","role","baseClassName","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AAGrF,MAAMC,iBAAiB;IACrBC,GAAGL;IACHM,GAAGL;IACHM,GAAGL;IACHM,IAAIL;AACN;AAiBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMM,wBAAUhB,MAAMiB,IAAI,CAC/B;QAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EAEF,WADVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcZ,cAAc,CAACO,KAAK;IAExC,qBACE,MAACd;QACCoB,WAAU;QACVC,MAAK;OACDH;QACJI,eAAezB,gCAAwBoB;;0BAEvC,KAACE;0BAAaH,mBAAmB,qBAAO,KAACd;oBAAiBY,MAAMA;;;YAC/DhB,aAAaiB,2BAAa,KAACd;0BAAgBc;;;;AAGlD,GACA;AAEF,IAAIQ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC1B,4BAA4Ba,SAAS;AACvC"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Размер спиннера.\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя.\n   */\n  noColor?: boolean;\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    visibilityDelay,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(\n          styles.host,\n          noColor && styles.noColor,\n          visibilityDelay && stylesDelay.visibilityDelay,\n        )}\n        baseStyle={animationVisibilityDelayStyles(visibilityDelay)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","animationVisibilityDelayStyles","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","visibilityDelay","restProps","SpinnerIcon","Component","role","baseClassName","baseStyle","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AAIrF,MAAMC,iBAAiB;IACrBC,GAAGL;IACHM,GAAGL;IACHM,GAAGL;IACHM,IAAIL;AACN;AAqBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMM,wBAAUjB,MAAMkB,IAAI,CAC/B;QAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACfC,eAAe,EAEF,WADVC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcb,cAAc,CAACO,KAAK;IAExC,qBACE,MAACd;QACCqB,WAAU;QACVC,MAAK;OACDH;QACJI,eAAe3B,gCAEbqB,mCACAC;QAEFM,WAAWzB,+BAA+BmB;;0BAE1C,KAACE;0BAAaJ,mBAAmB,qBAAO,KAACd;oBAAiBY,MAAMA;;;YAC/DjB,aAAakB,2BAAa,KAACd;0BAAgBc;;;;AAGlD,GACA;AAEF,IAAIU,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC7B,4BAA4Bc,SAAS;AACvC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TappableProps } from '../Tappable/Tappable';
-export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
+import { type TappableOmitProps } from '../Tappable/Tappable';
+export interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {
     /**
      * Стиль отображения кнопки.
      */

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;;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"}
+{"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,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA2BxE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC/E;;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.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  /**\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"}
+{"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 TappableOmitProps } 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<TappableOmitProps, '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,QAAgC,0BAAuB;AACxE,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/Tabs/Tabs.d.ts

@@ -24,17 +24,21 @@ export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
      * либо выравниваются по контенту соответственно.
      */
     layoutFillMode?: 'auto' | 'stretched' | 'shrinked';
+    /**
+     * Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.
+     */
+    selectedId?: string;
+    /**
+     * Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.
+     */
+    defaultSelectedId?: string;
+    /**
+     * Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.
+     */
+    onSelectedIdChange?: (id: string) => void;
 }
-export interface TabsContextProps {
-    mode: TabsProps['mode'];
-    withGaps: boolean;
-    layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;
-    withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
-    scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
-}
-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;
+export declare const Tabs: ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, selectedId, defaultSelectedId, onSelectedIdChange, ...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;;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"}
+{"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;AAM7D,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;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,iKAWlB,SAAS,KAAG,KAAK,CAAC,SAyCpB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -9,24 +9,27 @@ import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
-/* eslint-enable jsdoc/require-jsdoc */ export const TabsModeContext = /*#__PURE__*/ React.createContext({
-    mode: 'default',
-    withGaps: false,
-    layoutFillMode: 'auto',
-    withScrollToSelectedTab: false,
-    scrollBehaviorToSelectedTab: 'nearest'
-});
+import { useTabsController } from "./TabsController.js";
+import { TabsModeContext } from "./TabsModeContext.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */ export const Tabs = (_param)=>{
-    var { children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto' } = _param, restProps = _object_without_properties(_param, [
+    var { children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto', selectedId, defaultSelectedId, onSelectedIdChange } = _param, restProps = _object_without_properties(_param, [
         "children",
         "mode",
         "role",
         "withScrollToSelectedTab",
         "scrollBehaviorToSelectedTab",
-        "layoutFillMode"
+        "layoutFillMode",
+        "selectedId",
+        "defaultSelectedId",
+        "onSelectedIdChange"
     ]);
+    const controller = useTabsController({
+        selectedId,
+        defaultSelectedId,
+        onSelectedIdChange
+    });
     const platform = usePlatform();
     const direction = useConfigDirection();
     const isTabFlow = role === 'tablist';
@@ -44,7 +47,8 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
                     withGaps,
                     layoutFillMode,
                     withScrollToSelectedTab,
-                    scrollBehaviorToSelectedTab
+                    scrollBehaviorToSelectedTab,
+                    controller
                 },
                 children: children
             })

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  /**\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"}
+{"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 { useTabsController } from './TabsController';\nimport { TabsModeContext } from './TabsModeContext';\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   * Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  selectedId?: string;\n  /**\n   * Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  defaultSelectedId?: string;\n  /**\n   * Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  onSelectedIdChange?: (id: string) => void;\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  selectedId,\n  defaultSelectedId,\n  onSelectedIdChange,\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const controller = useTabsController({\n    selectedId,\n    defaultSelectedId,\n    onSelectedIdChange,\n  });\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            controller,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","useTabsController","TabsModeContext","Tabs","children","mode","role","withScrollToSelectedTab","scrollBehaviorToSelectedTab","layoutFillMode","selectedId","defaultSelectedId","onSelectedIdChange","restProps","controller","platform","direction","isTabFlow","withGaps","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;AAC/D,SAASC,iBAAiB,QAAQ,sBAAmB;AACrD,SAASC,eAAe,QAAQ,uBAAoB;AAyCpD;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBC,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCC,iBAAiB,MAAM,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAER,WADPC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,aAAab,kBAAkB;QACnCS;QACAC;QACAC;IACF;IACA,MAAMG,WAAWjB;IACjB,MAAMkB,YAAYnB;IAClB,MAAMoB,YAAYX,SAAS;IAC3B,MAAMY,WAAWb,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEc,OAAO,EAAE,GAAGpB,kBAAkBkB,WAAWD,cAAc;IAE/D,qBACE,KAAChB,uDACKa;QACJO,eAAexB,6BAEb,oBACAmB,aAAa,WAAW,2BACxBG,YAAYtB,iCAA4B,+BACxCS,SAAS;QAEXC,MAAMA;kBAEN,cAAA,KAACe;YAAIC,SAAS;YAAaC,KAAKJ;sBAC9B,cAAA,KAACjB,gBAAgBsB,QAAQ;gBACvBC,OAAO;oBACLpB;oBACAa;oBACAT;oBACAF;oBACAC;oBACAM;gBACF;0BAECV;;;;AAKX,EAAE"}

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

@@ -0,0 +1,7 @@
+import { type TabsProps } from './Tabs';
+export type TabsController = {
+    onChange: (id: string) => void;
+    selectedTab: string;
+};
+export declare const useTabsController: ({ selectedId, defaultSelectedId, onSelectedIdChange: onSelectedIdChangeProp, }: Pick<TabsProps, "selectedId" | "defaultSelectedId" | "onSelectedIdChange">) => TabsController | null;
+//# sourceMappingURL=TabsController.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,gFAI/B,IAAI,CACL,SAAS,EACT,YAAY,GAAG,mBAAmB,GAAG,oBAAoB,CAC1D,KAAG,cAAc,GAAG,IAkBpB,CAAC"}

package/dist/components/Tabs/TabsController.js

@@ -0,0 +1,19 @@
+import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
+import { useStableCallback } from "../../hooks/useStableCallback.js";
+/* eslint-enable jsdoc/require-jsdoc */ export const useTabsController = ({ selectedId, defaultSelectedId, onSelectedIdChange: onSelectedIdChangeProp })=>{
+    const onSelectedIdChange = useStableCallback((id)=>id && (onSelectedIdChangeProp === null || onSelectedIdChangeProp === void 0 ? void 0 : onSelectedIdChangeProp(id)));
+    const [value, onChange] = useCustomEnsuredControl({
+        onChange: onSelectedIdChange,
+        value: selectedId,
+        defaultValue: defaultSelectedId
+    });
+    if (!selectedId && !defaultSelectedId || !value) {
+        return null;
+    }
+    return {
+        onChange,
+        selectedTab: value
+    };
+};
+
+//# sourceMappingURL=TabsController.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tabs/TabsController.ts"],"sourcesContent":["import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { type TabsProps } from './Tabs';\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport type TabsController = {\n  onChange: (id: string) => void;\n  selectedTab: string;\n};\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const useTabsController = ({\n  selectedId,\n  defaultSelectedId,\n  onSelectedIdChange: onSelectedIdChangeProp,\n}: Pick<\n  TabsProps,\n  'selectedId' | 'defaultSelectedId' | 'onSelectedIdChange'\n>): TabsController | null => {\n  const onSelectedIdChange = useStableCallback(\n    (id: string | undefined) => id && onSelectedIdChangeProp?.(id),\n  );\n\n  const [value, onChange] = useCustomEnsuredControl<string | undefined>({\n    onChange: onSelectedIdChange,\n    value: selectedId,\n    defaultValue: defaultSelectedId,\n  });\n\n  if ((!selectedId && !defaultSelectedId) || !value) {\n    return null;\n  }\n  return {\n    onChange,\n    selectedTab: value,\n  };\n};\n"],"names":["useCustomEnsuredControl","useStableCallback","useTabsController","selectedId","defaultSelectedId","onSelectedIdChange","onSelectedIdChangeProp","id","value","onChange","defaultValue","selectedTab"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,mCAAgC;AACxE,SAASC,iBAAiB,QAAQ,mCAAgC;AAQlE,qCAAqC,GAErC,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,UAAU,EACVC,iBAAiB,EACjBC,oBAAoBC,sBAAsB,EAI3C;IACC,MAAMD,qBAAqBJ,kBACzB,CAACM,KAA2BA,OAAMD,mCAAAA,6CAAAA,uBAAyBC;IAG7D,MAAM,CAACC,OAAOC,SAAS,GAAGT,wBAA4C;QACpES,UAAUJ;QACVG,OAAOL;QACPO,cAAcN;IAChB;IAEA,IAAI,AAAC,CAACD,cAAc,CAACC,qBAAsB,CAACI,OAAO;QACjD,OAAO;IACT;IACA,OAAO;QACLC;QACAE,aAAaH;IACf;AACF,EAAE"}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type TabsProps } from './Tabs';
+import { type TabsController } from './TabsController';
+export interface TabsContextProps {
+    mode: TabsProps['mode'];
+    withGaps: boolean;
+    layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;
+    withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
+    scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
+    controller: TabsController | null;
+}
+export declare const TabsModeContext: React.Context<TabsContextProps>;
+//# sourceMappingURL=TabsModeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsModeContext.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsModeContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,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;IAChF,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;CACnC;AAGD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAQxD,CAAC"}

package/dist/components/Tabs/TabsModeContext.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+/* eslint-enable jsdoc/require-jsdoc */ export const TabsModeContext = React.createContext({
+    mode: 'default',
+    withGaps: false,
+    layoutFillMode: 'auto',
+    withScrollToSelectedTab: false,
+    scrollBehaviorToSelectedTab: 'nearest',
+    controller: null
+});
+
+//# sourceMappingURL=TabsModeContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tabs/TabsModeContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { type TabsProps } from './Tabs';\nimport { type TabsController } from './TabsController';\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  controller: TabsController | null;\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    controller: null,\n  });\n"],"names":["React","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B,qCAAqC,GAErC,OAAO,MAAMC,kBACXD,MAAME,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;IAC7BC,YAAY;AACd,GAAG"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
-import { type TappableProps } from '../Tappable/Tappable';
-export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement>, AnchorHTMLAttributesOnly, Pick<TappableProps, 'Component' | 'activeMode' | 'hoverMode' | 'hovered' | 'activated' | 'hasActive' | 'hasHover' | 'focusVisibleMode'> {
+import { type TappableOmitProps } from '../Tappable/Tappable';
+export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement>, AnchorHTMLAttributesOnly, Pick<TappableOmitProps, 'Component' | 'activeMode' | 'hoverMode' | 'hovered' | 'activated' | 'hasActive' | 'hasHover' | 'focusVisibleMode'> {
     /**
      * Добавляет иконку слева.
      *
@@ -35,5 +35,5 @@ export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement>, A
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export declare const TabsItem: ({ before, children, status, after, selected, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hasActive, focusVisibleMode, ...restProps }: TabsItemProps) => React.ReactNode;
+export declare const TabsItem: ({ before, children, status, after, selected: selectedProp, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hasActive, focusVisibleMode, id, onClick, ...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;;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"}
+{"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,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsBxE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,iBAAiB,EACf,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,sLAgBtB,aAAa,KAAG,KAAK,CAAC,SA2IxB,CAAC"}

package/dist/components/TabsItem/TabsItem.js

@@ -10,7 +10,7 @@ import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePrevious } from "../../hooks/usePrevious.js";
 import { useDOM } from "../../lib/dom.js";
 import { warnOnce } from "../../lib/warnOnce.js";
-import { TabsModeContext } from "../Tabs/Tabs.js";
+import { TabsModeContext } from "../Tabs/TabsModeContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { Headline } from "../Typography/Headline/Headline.js";
 import { Subhead } from "../Typography/Subhead/Subhead.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 = '', hasActive = false, focusVisibleMode = 'inside' } = _param, restProps = _object_without_properties(_param, [
+    var { before, children, status, after, selected: selectedProp = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = "vkuiTabsItem__hover", activeMode = '', hasActive = false, focusVisibleMode = 'inside', id, onClick } = _param, restProps = _object_without_properties(_param, [
         "before",
         "children",
         "status",
@@ -44,12 +44,15 @@ const warn = warnOnce('TabsItem');
         "hoverMode",
         "activeMode",
         "hasActive",
-        "focusVisibleMode"
+        "focusVisibleMode",
+        "id",
+        "onClick"
     ]);
     const { sizeY = 'none' } = useAdaptivity();
-    const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } = React.useContext(TabsModeContext);
+    const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab, controller } = React.useContext(TabsModeContext);
     let statusComponent = null;
     const isTabFlow = role === 'tab';
+    const selected = selectedProp || !!id && (controller === null || controller === void 0 ? void 0 : controller.selectedTab) === id;
     if (hasReactNode(status)) {
         statusComponent = typeof status === 'number' ? /*#__PURE__*/ _jsxs(Subhead, {
             Component: "span",
@@ -74,7 +77,7 @@ const warn = warnOnce('TabsItem');
     if (process.env.NODE_ENV === 'development' && isTabFlow) {
         if (!restProps['aria-controls']) {
             warn(`Передайте в "aria-controls" id контролируемого блока`, 'warn');
-        } else if (!restProps['id']) {
+        } else if (!id) {
             warn(`Передайте "id" компоненту для использования в "aria-labelledby" контролируемого блока`, 'warn');
         }
     }
@@ -113,6 +116,16 @@ const warn = warnOnce('TabsItem');
         shouldScrollToSelected,
         scrollBehaviorToSelectedTab
     ]);
+    const _onClick = React.useCallback((e)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (id) {
+            controller === null || controller === void 0 ? void 0 : controller.onChange(id);
+        }
+    }, [
+        id,
+        onClick,
+        controller
+    ]);
     return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
         getRootRef: rootRef,
         hoverMode: hoverMode,
@@ -122,7 +135,9 @@ const warn = warnOnce('TabsItem');
         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])
+        baseClassName: classNames("vkuiTabsItem__host", mode && stylesMode[mode], selected && "vkuiTabsItem__selected", sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem__withGaps", layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode]),
+        onClick: _onClick,
+        id: id
     }, restProps), {
         children: [
             before && /*#__PURE__*/ _jsx("div", {

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  /**\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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"}
+{"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/TabsModeContext';\nimport { Tappable, type TappableOmitProps } 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      TappableOmitProps,\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: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n    controller,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\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 (!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  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\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      onClick={_onClick}\n      id={id}\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","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","controller","useContext","statusComponent","isTabFlow","selectedTab","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","_onClick","useCallback","e","onChange","aria-selected","baseClassName","div","level","aria-hidden","data-selected"],"mappings":"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"}

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

@@ -19,5 +19,6 @@ export interface TappableProps extends ClickableProps, StateProps {
      */
     hoverClassName?: string;
 }
+export type TappableOmitProps = Omit<TappableProps, 'DefaultComponent'>;
 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;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"}
+{"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;AAKD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;AAExE,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   * @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"}
+{"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\n// TODO [>=8]: = React.AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>\n//\n// NOTE: Возможно стоит вообще запретить компонентам расширяться от TappableProps?\nexport type TappableOmitProps = Omit<TappableProps, 'DefaultComponent'>;\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;AA2BA,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/ToolButton/ToolButton.d.ts

@@ -1,6 +1,6 @@
 import { type AdaptiveIconRendererProps } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { type TappableProps } from '../Tappable/Tappable';
-export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
+import { type TappableOmitProps } from '../Tappable/Tappable';
+export interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {
     /**
      * Режим отображения компонента.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyBpE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,4FASxB,eAAe,KAAG,KAAK,CAAC,SAyB1B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,KAAK,GAAG,QAAQ,EAC3B,WAAW,EAAE,OAAO,GACnB,MAAM,GAAG,SAAS,CAOpB"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAyBxE,MAAM,WAAW,eAAgB,SAAQ,iBAAiB,EAAE,yBAAyB;IACnF;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,4FASxB,eAAe,KAAG,KAAK,CAAC,SAyB1B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,KAAK,GAAG,QAAQ,EAC3B,WAAW,EAAE,OAAO,GACnB,MAAM,GAAG,SAAS,CAOpB"}

package/dist/components/ToolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  /**\n   * Внешний вид компонента.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Направление контента.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","baseClassName","getRoundedClassName","span","className","undefined"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AAGpE,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM2B,cAAc5B,aAAasB;IAEjC,qBACE,MAACnB;QACC0B,SAAS;QACTC,UAAU;QACVC,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAenC,mCAEb0B,WAAWU,oBAAoBd,WAAWO,cAC1CA,eAAeP,cAAc,4CAC7BjB,UAAU,CAACe,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BR,eAAe,CAACS,UAAU,EAC1BM,UAAU,aAAaZ,eAAe,CAACY,MAAM;OAE3CD;;0BAEJ,KAACxB;gBAAqBqB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACQ;gBAAKC,SAAS;0BAAgBf;;;;AAGrD,EAAE;AAEF,OAAO,SAASa,oBACdd,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH;QACF,KAAK;YACH,OAAOO,cAAcU;IACzB;AACF"}
+{"version":3,"sources":["../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  /**\n   * Внешний вид компонента.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Направление контента.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","baseClassName","getRoundedClassName","span","className","undefined"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAAgC,0BAAuB;AAGxE,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM2B,cAAc5B,aAAasB;IAEjC,qBACE,MAACnB;QACC0B,SAAS;QACTC,UAAU;QACVC,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAenC,mCAEb0B,WAAWU,oBAAoBd,WAAWO,cAC1CA,eAAeP,cAAc,4CAC7BjB,UAAU,CAACe,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BR,eAAe,CAACS,UAAU,EAC1BM,UAAU,aAAaZ,eAAe,CAACY,MAAM;OAE3CD;;0BAEJ,KAACxB;gBAAqBqB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACQ;gBAAKC,SAAS;0BAAgBf;;;;AAGrD,EAAE;AAEF,OAAO,SAASa,oBACdd,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH;QACF,KAAK;YACH,OAAOO,cAAcU;IACzB;AACF"}