@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/components/TabbarItem/TabbarItem.js

@@ -1,24 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "selected", "label", "indicator", "text", "href", "Component", "disabled"];
+var _excluded = ["children", "selected", "indicator", "text", "href", "Component", "disabled"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { Counter } from "../Counter/Counter";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Platform } from "../../lib/platform";
-import { warnOnce } from "../../lib/warnOnce";
-var warn = warnOnce("TabbarItem");
+
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-
 export var TabbarItem = function TabbarItem(_ref) {
   var children = _ref.children,
       selected = _ref.selected,
-      label = _ref.label,
       indicator = _ref.indicator,
       text = _ref.text,
       href = _ref.href,
@@ -28,11 +24,6 @@ export var TabbarItem = function TabbarItem(_ref) {
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
-
-  if (label && process.env.NODE_ENV === "development") {
-    warn("Свойство label устарело и будет удалено в 5.0.0. Используйте indicator.");
-  }
-
   return createScopedElement(Component, _extends({}, restProps, {
     disabled: disabled,
     href: href,
@@ -51,10 +42,7 @@ export var TabbarItem = function TabbarItem(_ref) {
     vkuiClass: "TabbarItem__icon"
   }, children, createScopedElement("div", {
     vkuiClass: "TabbarItem__label"
-  }, hasReactNode(indicator) && indicator, !indicator && label && createScopedElement(Counter, {
-    size: "s",
-    mode: "prominent"
-  }, label))), text && createScopedElement(Footnote, {
+  }, hasReactNode(indicator) && indicator)), text && createScopedElement(Footnote, {
     Component: "div",
     vkuiClass: "TabbarItem__text",
     weight: "2"

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.js","names":["Counter","classNames","usePlatform","hasReactNode","Tappable","Footnote","Platform","warnOnce","warn","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","IOS","ANDROID"],"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Counter } from \"../Counter/Counter\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./TabbarItem.css\";\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, \"label\">, // TODO убрать Omit после удаления свойства label\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n   */\n  label?: 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  label,\n  indicator,\n  text,\n  href,\n  Component = href ? \"a\" : \"button\",\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (label && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство label устарело и будет удалено в 5.0.0. Используйте indicator.\"\n    );\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      vkuiClass={classNames(\n        \"TabbarItem\",\n        platform === Platform.IOS && \"TabbarItem--ios\",\n        platform === Platform.ANDROID && \"TabbarItem--android\",\n        selected && \"TabbarItem--selected\",\n        !!text && \"TabbarItem--text\"\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS\n            ? \"TabbarItem__tappable--active\"\n            : \"background\"\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        vkuiClass=\"TabbarItem__tappable\"\n      />\n      <div vkuiClass=\"TabbarItem__in\">\n        <div vkuiClass=\"TabbarItem__icon\">\n          {children}\n          <div vkuiClass=\"TabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n            {!indicator && label && (\n              <Counter size=\"s\" mode=\"prominent\">\n                {label}\n              </Counter>\n            )}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" vkuiClass=\"TabbarItem__text\" weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,OAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AAEA,SAASC,QAAT;AAsBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,YAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAa,OAUH;EAAA,IATrBC,QASqB,QATrBA,QASqB;EAAA,IARrBC,QAQqB,QARrBA,QAQqB;EAAA,IAPrBC,KAOqB,QAPrBA,KAOqB;EAAA,IANrBC,SAMqB,QANrBA,SAMqB;EAAA,IALrBC,IAKqB,QALrBA,IAKqB;EAAA,IAJrBC,IAIqB,QAJrBA,IAIqB;EAAA,0BAHrBC,SAGqB;EAAA,IAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;EAAA,IAFrBE,QAEqB,QAFrBA,QAEqB;EAAA,IADlBC,SACkB;;EACrB,IAAMC,QAAQ,GAAGjB,WAAW,EAA5B;;EAEA,IAAIU,KAAK,IAAIQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAtC,EAAqD;IACnDd,IAAI,CACF,yEADE,CAAJ;EAGD;;EAED,OACE,oBAAC,SAAD,eACMU,SADN;IAEE,QAAQ,EAAED,QAFZ;IAGE,IAAI,EAAEF,IAHR;IAIE,SAAS,EAAEd,UAAU,CACnB,YADmB,EAEnBkB,QAAQ,KAAKb,QAAQ,CAACiB,GAAtB,IAA6B,iBAFV,EAGnBJ,QAAQ,KAAKb,QAAQ,CAACkB,OAAtB,IAAiC,qBAHd,EAInBb,QAAQ,IAAI,sBAJO,EAKnB,CAAC,CAACG,IAAF,IAAU,kBALS;EAJvB,IAYE,oBAAC,QAAD;IACE,IAAI,EAAC,cADP;IAEE,SAAS,EAAC,KAFZ;IAGE,QAAQ,EAAEG,QAHZ;IAIE,UAAU,EACRE,QAAQ,KAAKb,QAAQ,CAACiB,GAAtB,GACI,8BADJ,GAEI,YAPR;IASE,iBAAiB,EAAEJ,QAAQ,KAAKb,QAAQ,CAACiB,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;IAUE,QAAQ,EAAE,KAVZ;IAWE,SAAS,EAAC;EAXZ,EAZF,EAyBE;IAAK,SAAS,EAAC;EAAf,GACE;IAAK,SAAS,EAAC;EAAf,GACGb,QADH,EAEE;IAAK,SAAS,EAAC;EAAf,GACGP,YAAY,CAACU,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,oBAAC,OAAD;IAAS,IAAI,EAAC,GAAd;IAAkB,IAAI,EAAC;EAAvB,GACGA,KADH,CAHJ,CAFF,CADF,EAYGE,IAAI,IACH,oBAAC,QAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,SAAS,EAAC,kBAApC;IAAuD,MAAM,EAAC;EAA9D,GACGA,IADH,CAbJ,CAzBF,CADF;AA8CD,CAjEM"}
+{"version":3,"file":"TabbarItem.js","names":["classNames","usePlatform","hasReactNode","Tappable","Footnote","Platform","TabbarItem","children","selected","indicator","text","href","Component","disabled","restProps","platform","IOS","ANDROID"],"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport \"./TabbarItem.css\";\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? \"a\" : \"button\",\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      vkuiClass={classNames(\n        \"TabbarItem\",\n        platform === Platform.IOS && \"TabbarItem--ios\",\n        platform === Platform.ANDROID && \"TabbarItem--android\",\n        selected && \"TabbarItem--selected\",\n        !!text && \"TabbarItem--text\"\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS\n            ? \"TabbarItem__tappable--active\"\n            : \"background\"\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        vkuiClass=\"TabbarItem__tappable\"\n      />\n      <div vkuiClass=\"TabbarItem__in\">\n        <div vkuiClass=\"TabbarItem__icon\">\n          {children}\n          <div vkuiClass=\"TabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" vkuiClass=\"TabbarItem__text\" weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;;AAmBA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OASH;EAAA,IARrBC,QAQqB,QARrBA,QAQqB;EAAA,IAPrBC,QAOqB,QAPrBA,QAOqB;EAAA,IANrBC,SAMqB,QANrBA,SAMqB;EAAA,IALrBC,IAKqB,QALrBA,IAKqB;EAAA,IAJrBC,IAIqB,QAJrBA,IAIqB;EAAA,0BAHrBC,SAGqB;EAAA,IAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;EAAA,IAFrBE,QAEqB,QAFrBA,QAEqB;EAAA,IADlBC,SACkB;;EACrB,IAAMC,QAAQ,GAAGd,WAAW,EAA5B;EAEA,OACE,oBAAC,SAAD,eACMa,SADN;IAEE,QAAQ,EAAED,QAFZ;IAGE,IAAI,EAAEF,IAHR;IAIE,SAAS,EAAEX,UAAU,CACnB,YADmB,EAEnBe,QAAQ,KAAKV,QAAQ,CAACW,GAAtB,IAA6B,iBAFV,EAGnBD,QAAQ,KAAKV,QAAQ,CAACY,OAAtB,IAAiC,qBAHd,EAInBT,QAAQ,IAAI,sBAJO,EAKnB,CAAC,CAACE,IAAF,IAAU,kBALS;EAJvB,IAYE,oBAAC,QAAD;IACE,IAAI,EAAC,cADP;IAEE,SAAS,EAAC,KAFZ;IAGE,QAAQ,EAAEG,QAHZ;IAIE,UAAU,EACRE,QAAQ,KAAKV,QAAQ,CAACW,GAAtB,GACI,8BADJ,GAEI,YAPR;IASE,iBAAiB,EAAED,QAAQ,KAAKV,QAAQ,CAACW,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;IAUE,QAAQ,EAAE,KAVZ;IAWE,SAAS,EAAC;EAXZ,EAZF,EAyBE;IAAK,SAAS,EAAC;EAAf,GACE;IAAK,SAAS,EAAC;EAAf,GACGT,QADH,EAEE;IAAK,SAAS,EAAC;EAAf,GACGL,YAAY,CAACO,SAAD,CAAZ,IAA2BA,SAD9B,CAFF,CADF,EAOGC,IAAI,IACH,oBAAC,QAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,SAAS,EAAC,kBAApC;IAAuD,MAAM,EAAC;EAA9D,GACGA,IADH,CARJ,CAzBF,CADF;AAyCD,CArDM"}

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

@@ -1,16 +1,8 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./Tabs.css";
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {
-    /**
-     * Задаёт вид кнопок.
-     *
-     * > ⚠️ Значения `"buttons"`, `"segmented"` устарели и будут удалены в 5.0.0. Вместо `"buttons"` используйте `"secondary"`.
-     * > Режим `"segmented"` переехал в отдельный компонент [`SegmentedControl`](https://vkcom.github.io/VKUI#/SegmentedControl),
-     * > поэтому используйте его вместо `Tabs`.
-     */
-    mode?: "buttons" | "segmented" | "default" | "accent" | "secondary";
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    mode?: "default" | "accent" | "secondary";
 }
 export interface TabsContextProps {
     mode: TabsProps["mode"];
@@ -20,4 +12,4 @@ export declare const TabsModeContext: React.Context<TabsContextProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
-export declare const Tabs: React.FC<Pick<TabsProps, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Tabs: ({ children, mode, getRootRef, ...restProps }: TabsProps) => JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -1,47 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "mode", "getRootRef", "sizeX"];
+var _excluded = ["children", "mode", "getRootRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
-import { IOS, VKCOM } from "../../lib/platform";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
-import { warnOnce } from "../../lib/warnOnce";
-var warn = warnOnce("Tabs");
+import { Platform } from "../../lib/platform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 export var TabsModeContext = /*#__PURE__*/React.createContext({
   mode: "default",
   withGaps: false
 });
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tabs
+ */
 
-var TabsComponent = function TabsComponent(_ref) {
+export var Tabs = function Tabs(_ref) {
   var children = _ref.children,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "default" : _ref$mode,
       getRootRef = _ref.getRootRef,
-      sizeX = _ref.sizeX,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
 
-  if ((mode === "buttons" || mode === "segmented") && process.env.NODE_ENV === "development") {
-    var expectedValueText = mode === "buttons" ? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \"secondary\"" : "компонент SegmentedControl";
-    warn("mode=\"".concat(mode, "\" \u0443\u0441\u0442\u0430\u0440\u0435\u043B\u043E \u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043B\u0435\u043D\u043E \u0432 5.0.0. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 ").concat(expectedValueText));
-  }
-
-  if (platform !== IOS && mode === "segmented") {
-    mode = "default";
-  }
-
-  if (mode === "buttons") {
-    mode = "secondary";
-  }
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX;
 
   var withGaps = mode === "accent" || mode === "secondary";
   return createScopedElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    vkuiClass: classNames("Tabs", (platform === IOS || platform === VKCOM) && "Tabs--".concat(platform), "Tabs--".concat(mode), withGaps && "Tabs--withGaps", // TODO v5.0.0 новая адаптивность
-    "Tabs--sizeX-".concat(sizeX))
+    vkuiClass: classNames("Tabs", (platform === Platform.IOS || platform === Platform.VKCOM) && "Tabs--".concat(platform), getSizeXClassName("Tabs", sizeX), withGaps && "Tabs--withGaps", "Tabs--mode-".concat(mode))
   }), createScopedElement("div", {
     vkuiClass: "Tabs__in"
   }, createScopedElement(TabsModeContext.Provider, {
@@ -51,13 +41,4 @@ var TabsComponent = function TabsComponent(_ref) {
     }
   }, children)));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Tabs
- */
-
-
-export var Tabs = withAdaptivity(TabsComponent, {
-  sizeX: true
-});
-Tabs.displayName = "Tabs";
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","IOS","VKCOM","withAdaptivity","warnOnce","warn","TabsModeContext","createContext","mode","withGaps","TabsComponent","children","getRootRef","sizeX","restProps","platform","process","env","NODE_ENV","expectedValueText","Tabs","displayName"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Tabs.css\";\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  /**\n   * Задаёт вид кнопок.\n   *\n   * > ⚠️ Значения `\"buttons\"`, `\"segmented\"` устарели и будут удалены в 5.0.0. Вместо `\"buttons\"` используйте `\"secondary\"`.\n   * > Режим `\"segmented\"` переехал в отдельный компонент [`SegmentedControl`](https://vkcom.github.io/VKUI#/SegmentedControl),\n   * > поэтому используйте его вместо `Tabs`.\n   */\n  mode?: \"buttons\" | \"segmented\" | \"default\" | \"accent\" | \"secondary\";\n}\n\nconst warn = warnOnce(\"Tabs\");\n\nexport interface TabsContextProps {\n  mode: TabsProps[\"mode\"];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: \"default\",\n  withGaps: false,\n});\n\nconst TabsComponent = ({\n  children,\n  mode = \"default\",\n  getRootRef,\n  sizeX,\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n\n  if (\n    (mode === \"buttons\" || mode === \"segmented\") &&\n    process.env.NODE_ENV === \"development\"\n  ) {\n    const expectedValueText =\n      mode === \"buttons\"\n        ? `значения \"secondary\"`\n        : \"компонент SegmentedControl\";\n    warn(\n      `mode=\"${mode}\" устарело и будет удалено в 5.0.0. Используйте ${expectedValueText}`\n    );\n  }\n\n  if (platform !== IOS && mode === \"segmented\") {\n    mode = \"default\";\n  }\n\n  if (mode === \"buttons\") {\n    mode = \"secondary\";\n  }\n\n  const withGaps = mode === \"accent\" || mode === \"secondary\";\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Tabs\",\n        (platform === IOS || platform === VKCOM) && `Tabs--${platform}`,\n        `Tabs--${mode}`,\n        withGaps && \"Tabs--withGaps\",\n        // TODO v5.0.0 новая адаптивность\n        `Tabs--sizeX-${sizeX}`\n      )}\n    >\n      <div vkuiClass=\"Tabs__in\">\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = withAdaptivity(TabsComponent, { sizeX: true });\n\nTabs.displayName = \"Tabs\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AAEA,SAASC,WAAT;AACA,SAASC,GAAT,EAAcC,KAAd;AACA,SAASC,cAAT;AACA,SAASC,QAAT;AAiBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAD,CAArB;AAOA,OAAO,IAAME,eAAe,gBAAGR,KAAK,CAACS,aAAN,CAAsC;EACnEC,IAAI,EAAE,SAD6D;EAEnEC,QAAQ,EAAE;AAFyD,CAAtC,CAAxB;;AAKP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAML;EAAA,IALfC,QAKe,QALfA,QAKe;EAAA,qBAJfH,IAIe;EAAA,IAJfA,IAIe,0BAJR,SAIQ;EAAA,IAHfI,UAGe,QAHfA,UAGe;EAAA,IAFfC,KAEe,QAFfA,KAEe;EAAA,IADZC,SACY;;EACf,IAAMC,QAAQ,GAAGf,WAAW,EAA5B;;EAEA,IACE,CAACQ,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAAhC,KACAQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAF3B,EAGE;IACA,IAAMC,iBAAiB,GACrBX,IAAI,KAAK,SAAT,sEAEI,4BAHN;IAIAH,IAAI,kBACOG,IADP,mOAC8DW,iBAD9D,EAAJ;EAGD;;EAED,IAAIJ,QAAQ,KAAKd,GAAb,IAAoBO,IAAI,KAAK,WAAjC,EAA8C;IAC5CA,IAAI,GAAG,SAAP;EACD;;EAED,IAAIA,IAAI,KAAK,SAAb,EAAwB;IACtBA,IAAI,GAAG,WAAP;EACD;;EAED,IAAMC,QAAQ,GAAGD,IAAI,KAAK,QAAT,IAAqBA,IAAI,KAAK,WAA/C;EAEA,OACE,wCACMM,SADN;IAEE,GAAG,EAAEF,UAFP;IAGE,SAAS,EAAEb,UAAU,CACnB,MADmB,EAEnB,CAACgB,QAAQ,KAAKd,GAAb,IAAoBc,QAAQ,KAAKb,KAAlC,qBAAqDa,QAArD,CAFmB,kBAGVP,IAHU,GAInBC,QAAQ,IAAI,gBAJO,EAKnB;IALmB,sBAMJI,KANI;EAHvB,IAYE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAEL,IAAI,EAAJA,IAAF;MAAQC,QAAQ,EAARA;IAAR;EAAjC,GACGE,QADH,CADF,CAZF,CADF;AAoBD,CApDD;AAsDA;AACA;AACA;;;AACA,OAAO,IAAMS,IAAI,GAAGjB,cAAc,CAACO,aAAD,EAAgB;EAAEG,KAAK,EAAE;AAAT,CAAhB,CAA3B;AAEPO,IAAI,CAACC,WAAL,GAAmB,MAAnB"}
+{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","Platform","useAdaptivity","getSizeXClassName","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","restProps","platform","sizeX","IOS","VKCOM"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport \"./Tabs.css\";\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: \"default\" | \"accent\" | \"secondary\";\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps[\"mode\"];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: \"default\",\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = \"default\",\n  getRootRef,\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  const withGaps = mode === \"accent\" || mode === \"secondary\";\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Tabs\",\n        (platform === Platform.IOS || platform === Platform.VKCOM) &&\n          `Tabs--${platform}`,\n        getSizeXClassName(\"Tabs\", sizeX),\n        withGaps && \"Tabs--withGaps\",\n        `Tabs--mode-${mode}`\n      )}\n    >\n      <div vkuiClass=\"Tabs__in\">\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AAEA,SAASC,WAAT;AACA,SAASC,QAAT;AACA,SAASC,aAAT;AACA,SAASC,iBAAT;AAcA,OAAO,IAAMC,eAAe,gBAAGN,KAAK,CAACO,aAAN,CAAsC;EACnEC,IAAI,EAAE,SAD6D;EAEnEC,QAAQ,EAAE;AAFyD,CAAtC,CAAxB;AAKP;AACA;AACA;;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAKH;EAAA,IAJfC,QAIe,QAJfA,QAIe;EAAA,qBAHfH,IAGe;EAAA,IAHfA,IAGe,0BAHR,SAGQ;EAAA,IAFfI,UAEe,QAFfA,UAEe;EAAA,IADZC,SACY;;EACf,IAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;EACA,qBAAkBE,aAAa,EAA/B;EAAA,IAAQW,KAAR,kBAAQA,KAAR;;EAEA,IAAMN,QAAQ,GAAGD,IAAI,KAAK,QAAT,IAAqBA,IAAI,KAAK,WAA/C;EAEA,OACE,wCACMK,SADN;IAEE,GAAG,EAAED,UAFP;IAGE,SAAS,EAAEX,UAAU,CACnB,MADmB,EAEnB,CAACa,QAAQ,KAAKX,QAAQ,CAACa,GAAtB,IAA6BF,QAAQ,KAAKX,QAAQ,CAACc,KAApD,qBACWH,QADX,CAFmB,EAInBT,iBAAiB,CAAC,MAAD,EAASU,KAAT,CAJE,EAKnBN,QAAQ,IAAI,gBALO,uBAMLD,IANK;EAHvB,IAYE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAEA,IAAI,EAAJA,IAAF;MAAQC,QAAQ,EAARA;IAAR;EAAjC,GACGE,QADH,CADF,CAZF,CADF;AAoBD,CA/BM"}

package/dist/components/TabsItem/TabsItem.js

@@ -5,12 +5,13 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import { IOS, VKCOM } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { TabsModeContext } from "../Tabs/Tabs";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
@@ -46,12 +47,11 @@ export var TabsItem = function TabsItem(_ref) {
   }
 
   return createScopedElement(Tappable, _extends({}, restProps, {
-    vkuiClass: classNames("TabsItem", (platform === IOS || platform === VKCOM) && "TabsItem--".concat(platform), mode && "TabsItem--".concat(mode), selected && "TabsItem--selected", // TODO v5.0.0 новая адаптивность
-    sizeY && "TabsItem--sizeY-".concat(sizeY), withGaps && "TabsItem--withGaps"),
+    vkuiClass: classNames("TabsItem", (platform === Platform.IOS || platform === Platform.VKCOM) && "TabsItem--".concat(platform), mode && "TabsItem--mode-".concat(mode), selected && "TabsItem--selected", getSizeYClassName("TabsItem", sizeY), withGaps && "TabsItem--withGaps"),
     hoverMode: "TabsItem--hover",
     activeMode: "TabsItem--active",
-    focusVisibleMode: mode === "segmented" ? "outside" : "inside",
-    hasActive: mode === "segmented"
+    focusVisibleMode: "inside",
+    hasActive: false
   }), before && createScopedElement("div", {
     vkuiClass: "TabsItem__before"
   }, before), createScopedElement(Headline, {

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNames","IOS","VKCOM","usePlatform","useAdaptivity","TabsModeContext","Headline","Subhead","TabsItem","before","children","status","after","selected","restProps","platform","sizeY","useContext","mode","withGaps","statusComponent"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\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\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  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,\n        mode && `TabsItem--${mode}`,\n        selected && \"TabsItem--selected\",\n        // TODO v5.0.0 новая адаптивность\n        sizeY && `TabsItem--sizeY-${sizeY}`,\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n      hasActive={mode === \"segmented\"}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,GAAT,EAAcC,KAAd;AACA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,SAASC,eAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;;AA6BA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAOH;EAAA,IANnBC,MAMmB,QANnBA,MAMmB;EAAA,IALnBC,QAKmB,QALnBA,QAKmB;EAAA,IAJnBC,MAImB,QAJnBA,MAImB;EAAA,IAHnBC,KAGmB,QAHnBA,KAGmB;EAAA,yBAFnBC,QAEmB;EAAA,IAFnBA,QAEmB,8BAFR,KAEQ;EAAA,IADhBC,SACgB;;EACnB,IAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;EACA,qBAAkBC,aAAa,EAA/B;EAAA,IAAQY,KAAR,kBAAQA,KAAR;;EACA,wBACElB,KAAK,CAACmB,UAAN,CAAiBZ,eAAjB,CADF;EAAA,IAAQa,IAAR,qBAAQA,IAAR;EAAA,IAAcC,QAAd,qBAAcA,QAAd;;EAEA,IAAIC,eAAe,GAAG,IAAtB;;EAEA,IAAIT,MAAJ,EAAY;IACVS,eAAe,GACb,OAAOT,MAAP,KAAkB,QAAlB,GACE,oBAAC,OAAD;MACE,SAAS,EAAC,MADZ;MAEE,SAAS,EAAC,0CAFZ;MAGE,MAAM,EAAC;IAHT,GAKGA,MALH,CADF,GASE;MAAM,SAAS,EAAC;IAAhB,GAAoCA,MAApC,CAVJ;EAYD;;EAED,OACE,oBAAC,QAAD,eACMG,SADN;IAEE,SAAS,EAAEd,UAAU,CACnB,UADmB,EAEnB,CAACe,QAAQ,KAAKd,GAAb,IAAoBc,QAAQ,KAAKb,KAAlC,yBAAyDa,QAAzD,CAFmB,EAGnBG,IAAI,wBAAiBA,IAAjB,CAHe,EAInBL,QAAQ,IAAI,oBAJO,EAKnB;IACAG,KAAK,8BAAuBA,KAAvB,CANc,EAOnBG,QAAQ,IAAI,oBAPO,CAFvB;IAWE,SAAS,EAAC,iBAXZ;IAYE,UAAU,EAAC,kBAZb;IAaE,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;IAcE,SAAS,EAAEA,IAAI,KAAK;EAdtB,IAgBGT,MAAM,IAAI;IAAK,SAAS,EAAC;EAAf,GAAmCA,MAAnC,CAhBb,EAiBE,oBAAC,QAAD;IACE,SAAS,EAAC,MADZ;IAEE,SAAS,EAAC,iBAFZ;IAGE,KAAK,EAAES,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;IAIE,MAAM,EAAC;EAJT,GAMGR,QANH,CAjBF,EAyBGU,eAzBH,EA0BGR,KAAK,IAAI;IAAK,SAAS,EAAC;EAAf,GAAkCA,KAAlC,CA1BZ,EA2BGM,IAAI,KAAK,SAAT,IACC;IACE,SAAS,EAAC,qBADZ;IAEE,mBAFF;IAGE,iBAAeL;EAHjB,EA5BJ,CADF;AAqCD,CAlEM"}
+{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNames","Platform","usePlatform","useAdaptivity","TabsModeContext","Headline","Subhead","getSizeYClassName","TabsItem","before","children","status","after","selected","restProps","platform","sizeY","useContext","mode","withGaps","statusComponent","IOS","VKCOM"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\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\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  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === Platform.IOS || platform === Platform.VKCOM) &&\n          `TabsItem--${platform}`,\n        mode && `TabsItem--mode-${mode}`,\n        selected && \"TabsItem--selected\",\n        getSizeYClassName(\"TabsItem\", sizeY),\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,SAASC,eAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA,SAASC,iBAAT;;AA6BA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAOH;EAAA,IANnBC,MAMmB,QANnBA,MAMmB;EAAA,IALnBC,QAKmB,QALnBA,QAKmB;EAAA,IAJnBC,MAImB,QAJnBA,MAImB;EAAA,IAHnBC,KAGmB,QAHnBA,KAGmB;EAAA,yBAFnBC,QAEmB;EAAA,IAFnBA,QAEmB,8BAFR,KAEQ;EAAA,IADhBC,SACgB;;EACnB,IAAMC,QAAQ,GAAGb,WAAW,EAA5B;;EACA,qBAAkBC,aAAa,EAA/B;EAAA,IAAQa,KAAR,kBAAQA,KAAR;;EACA,wBACElB,KAAK,CAACmB,UAAN,CAAiBb,eAAjB,CADF;EAAA,IAAQc,IAAR,qBAAQA,IAAR;EAAA,IAAcC,QAAd,qBAAcA,QAAd;;EAEA,IAAIC,eAAe,GAAG,IAAtB;;EAEA,IAAIT,MAAJ,EAAY;IACVS,eAAe,GACb,OAAOT,MAAP,KAAkB,QAAlB,GACE,oBAAC,OAAD;MACE,SAAS,EAAC,MADZ;MAEE,SAAS,EAAC,0CAFZ;MAGE,MAAM,EAAC;IAHT,GAKGA,MALH,CADF,GASE;MAAM,SAAS,EAAC;IAAhB,GAAoCA,MAApC,CAVJ;EAYD;;EAED,OACE,oBAAC,QAAD,eACMG,SADN;IAEE,SAAS,EAAEd,UAAU,CACnB,UADmB,EAEnB,CAACe,QAAQ,KAAKd,QAAQ,CAACoB,GAAtB,IAA6BN,QAAQ,KAAKd,QAAQ,CAACqB,KAApD,yBACeP,QADf,CAFmB,EAInBG,IAAI,6BAAsBA,IAAtB,CAJe,EAKnBL,QAAQ,IAAI,oBALO,EAMnBN,iBAAiB,CAAC,UAAD,EAAaS,KAAb,CANE,EAOnBG,QAAQ,IAAI,oBAPO,CAFvB;IAWE,SAAS,EAAC,iBAXZ;IAYE,UAAU,EAAC,kBAZb;IAaE,gBAAgB,EAAC,QAbnB;IAcE,SAAS,EAAE;EAdb,IAgBGV,MAAM,IAAI;IAAK,SAAS,EAAC;EAAf,GAAmCA,MAAnC,CAhBb,EAiBE,oBAAC,QAAD;IACE,SAAS,EAAC,MADZ;IAEE,SAAS,EAAC,iBAFZ;IAGE,KAAK,EAAES,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;IAIE,MAAM,EAAC;EAJT,GAMGR,QANH,CAjBF,EAyBGU,eAzBH,EA0BGR,KAAK,IAAI;IAAK,SAAS,EAAC;EAAf,GAAkCA,KAAlC,CA1BZ,EA2BGM,IAAI,KAAK,SAAT,IACC;IACE,SAAS,EAAC,qBADZ;IAEE,mBAFF;IAGE,iBAAeL;EAHjB,EA5BJ,CADF;AAqCD,CAlEM"}

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

@@ -1,11 +1,10 @@
 import * as React from "react";
 import { TouchProps } from "../Touch/Touch";
 import { HasComponent, HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import { FocusVisibleMode } from "../FocusVisible/FocusVisible";
-import "./Tappable.css";
+declare type StateMode = "opacity" | "background";
 export declare type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onMouseLeave">;
-export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent, Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
+export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
     /**
      * Длительность показа active-состояния
      */
@@ -22,11 +21,11 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
     /**
      * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
      */
-    activeMode?: "opacity" | "background" | string;
+    activeMode?: StateMode | string;
     /**
      * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
      */
-    hoverMode?: "opacity" | "background" | string;
+    hoverMode?: StateMode | string;
     /**
      * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
@@ -43,4 +42,5 @@ export declare const ACTIVE_EFFECT_DELAY = 600;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
  */
-export declare const Tappable: React.FC<Pick<TappableProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, ...props }: TappableProps) => JSX.Element;
+export {};

package/dist/components/Tappable/Tappable.js

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "sizeX", "hasMouse", "deviceHasHover", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave"];
+var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import mitt from "mitt";
 import { noop } from "../../lib/utils";
 import { Touch } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
-import { classNames } from "../../lib/classNames";
-import { IOS, ANDROID } from "../../lib/platform";
+import { classNamesString } from "../../lib/classNames";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import { Platform } from "../../lib/platform";
 import { getOffsetRect } from "../../lib/offset";
 import { coordX, coordY } from "../../lib/touch";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { shouldTriggerClickOnEnterOrSpace } from "../../lib/accessibility";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { FocusVisible } from "../FocusVisible/FocusVisible";
@@ -23,6 +23,30 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { callMultiple } from "../../lib/callMultiple";
 import { useBooleanState } from "../../hooks/useBooleanState";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getHoverClassName } from "../../helpers/getHoverClassName";
+var styles = {
+  "Tappable": "vkuiTappable",
+  "Tappable--hover-has-not": "vkuiTappable--hover-has-not",
+  "Tappable--hover-has": "vkuiTappable--hover-has",
+  "Tappable--hasActive": "vkuiTappable--hasActive",
+  "Tappable--hover-none": "vkuiTappable--hover-none",
+  "Tappable--active": "vkuiTappable--active",
+  "Tappable--focus-visible": "vkuiTappable--focus-visible",
+  "Tappable--active-background": "vkuiTappable--active-background",
+  "Tappable--active-opacity": "vkuiTappable--active-opacity",
+  "Tappable__hoverShadow": "vkuiTappable__hoverShadow",
+  "Tappable--hover-background": "vkuiTappable--hover-background",
+  "Tappable--hover-opacity": "vkuiTappable--hover-opacity",
+  "Tappable--mouse": "vkuiTappable--mouse",
+  "Tappable--ios": "vkuiTappable--ios",
+  "Tappable__waves": "vkuiTappable__waves",
+  "Tappable__wave": "vkuiTappable__wave",
+  "vkui-animation-wave": "vkui-animation-wave",
+  "Tappable--sizeX-regular": "vkuiTappable--sizeX-regular",
+  "Tappable--sizeX-compact": "vkuiTappable--sizeX-compact",
+  "Tappable--sizeX-none": "vkuiTappable--sizeX-none"
+};
 var WAVE_LIVE = 225;
 export var ACTIVE_DELAY = 70;
 export var ACTIVE_EFFECT_DELAY = 600;
@@ -37,6 +61,17 @@ var TappableContext = /*#__PURE__*/React.createContext({
   onHoverChange: noop
 });
 
+function isPresetStateMode(stateMode) {
+  switch (stateMode) {
+    case "opacity":
+    case "background":
+      return true;
+
+    default:
+      return false;
+  }
+}
+
 function useActivity(hasActive, stopDelay) {
   var id = React.useMemo(function () {
     return Math.round(Math.random() * 1e8).toString(16);
@@ -110,8 +145,12 @@ function useActivity(hasActive, stopDelay) {
     stop: stop
   }];
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tappable
+ */
 
-var TappableComponent = function TappableComponent(_ref) {
+
+export var Tappable = function Tappable(_ref) {
   var children = _ref.children,
       Component = _ref.Component,
       onClick = _ref.onClick,
@@ -121,9 +160,6 @@ var TappableComponent = function TappableComponent(_ref) {
       _ref$stopPropagation = _ref.stopPropagation,
       stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
       getRootRef = _ref.getRootRef,
-      sizeX = _ref.sizeX,
-      hasMouse = _ref.hasMouse,
-      deviceHasHover = _ref.deviceHasHover,
       _ref$hasHover = _ref.hasHover,
       _hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
       _ref$hoverMode = _ref.hoverMode,
@@ -136,6 +172,7 @@ var TappableComponent = function TappableComponent(_ref) {
       focusVisibleMode = _ref$focusVisibleMode === void 0 ? "inside" : _ref$focusVisibleMode,
       onEnter = _ref.onEnter,
       onLeave = _ref.onLeave,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   Component = Component || (props.href ? "a" : "div");
@@ -151,6 +188,11 @@ var TappableComponent = function TappableComponent(_ref) {
       onBlur = _useFocusVisible.onBlur,
       onFocus = _useFocusVisible.onFocus;
 
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX,
+      hasMouse = _useAdaptivity.hasMouse,
+      deviceHasHover = _useAdaptivity.deviceHasHover;
+
   var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       clicks = _React$useState4[0],
@@ -168,10 +210,10 @@ var TappableComponent = function TappableComponent(_ref) {
 
   var hovered = _hovered && !props.disabled;
   var hasActive = _hasActive && !childHover && !props.disabled;
-  var hasHover = deviceHasHover && _hasHover && !childHover;
-  var isCustomElement = Component !== "a" && Component !== "button" && Component !== "label" && !props.contentEditable;
-  var isPresetHoverMode = ["opacity", "background"].includes(hoverMode);
-  var isPresetActiveMode = ["opacity", "background"].includes(activeMode);
+  var hasHover = deviceHasHover !== false && _hasHover && !childHover;
+  var isCustomElement = Component !== "a" && Component !== "button" && !props.contentEditable;
+  var isPresetHoverMode = isPresetStateMode(hoverMode);
+  var isPresetActiveMode = isPresetStateMode(activeMode);
   var isPresetFocusVisibleMode = ["inside", "outside"].includes(focusVisibleMode);
 
   var _useActivity = useActivity(hasActive, activeEffectDelay),
@@ -215,7 +257,7 @@ var TappableComponent = function TappableComponent(_ref) {
     }
   }
 
-  var needWaves = platform === ANDROID && !hasMouse && hasActive && activeMode === "background";
+  var needWaves = platform === Platform.ANDROID && !hasMouse && hasActive && activeMode === "background";
   var clearClicks = useTimeout(function () {
     return setClicks([]);
   }, WAVE_LIVE);
@@ -281,7 +323,7 @@ var TappableComponent = function TappableComponent(_ref) {
     stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
-  var classes = classNames("Tappable", platform === IOS && "Tappable--ios", "Tappable--sizeX-".concat(sizeX), hasHover && "Tappable--hasHover", hasActive && "Tappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && "Tappable--active", hasMouse && "Tappable--mouse", hasHover && hovered && isPresetHoverMode && "Tappable--hover-".concat(hoverMode), hasActive && active && isPresetActiveMode && "Tappable--active-".concat(activeMode), focusVisible && "Tappable--focus-visible");
+  var classes = classNamesString(className, styles.Tappable, platform === Platform.IOS && styles["Tappable--ios"], getSizeXClassName("Tappable", sizeX, styles), getHoverClassName("Tappable", deviceHasHover, styles), hasActive && styles["Tappable--hasActive"], hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && styles["Tappable--active"], hasMouse && styles["Tappable--mouse"], hasHover && hovered && isPresetHoverMode && styles["Tappable--hover-".concat(hoverMode)], hasActive && active && isPresetActiveMode && styles["Tappable--active-".concat(activeMode)], focusVisible && styles["Tappable--focus-visible"]);
   var handlers = {
     onStart: callMultiple(onStart, props.onStart),
     onMove: callMultiple(onMove, props.onMove),
@@ -301,7 +343,7 @@ var TappableComponent = function TappableComponent(_ref) {
   }, props, {
     slideThreshold: 20,
     usePointerHover: true,
-    vkuiClass: classes,
+    className: classes,
     Component: Component,
     getRootRef: containerRef,
     onBlur: callMultiple(onBlur, props.onBlur),
@@ -310,11 +352,11 @@ var TappableComponent = function TappableComponent(_ref) {
     value: childContext
   }, children), needWaves && createScopedElement("span", {
     "aria-hidden": "true",
-    vkuiClass: "Tappable__waves"
+    className: styles.Tappable__waves
   }, clicks.map(function (wave) {
     return createScopedElement("span", {
       key: wave.id,
-      vkuiClass: "Tappable__wave",
+      className: styles.Tappable__wave,
       style: {
         top: wave.y,
         left: wave.x
@@ -322,20 +364,9 @@ var TappableComponent = function TappableComponent(_ref) {
     });
   })), hasHover && hoverMode === "background" && createScopedElement("span", {
     "aria-hidden": "true",
-    vkuiClass: "Tappable__hoverShadow"
+    className: styles.Tappable__hoverShadow
   }), !props.disabled && isPresetFocusVisibleMode && createScopedElement(FocusVisible, {
     mode: focusVisibleMode
   }));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Tappable
- */
-
-
-export var Tappable = withAdaptivity(TappableComponent, {
-  sizeX: true,
-  hasMouse: true,
-  deviceHasHover: true
-});
-Tappable.displayName = "Tappable";
 //# sourceMappingURL=Tappable.js.map