@vkontakte/vkui 4.36.1 → 4.37.1

package/dist/cjs/components/SplitLayout/SplitLayout.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { HasRef, HasRootRef } from "../../types";
+import "./SplitLayout.css";
+export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
+    /**
+     * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
+     */
+    popout?: React.ReactNode;
+    /**
+     * Свойство для отрисовки `ModalRoot`.
+     */
+    modal?: React.ReactNode;
+    header?: React.ReactNode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/SplitLayout
+ */
+export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, ...restProps }: SplitLayoutProps) => JSX.Element;

package/dist/cjs/components/SplitLayout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform","IOS"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AAEA;;AACA;;;;AAkBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,MAPtBC,MAOsB,QAPtBA,MAOsB;AAAA,MANtBC,KAMsB,QANtBA,KAMsB;AAAA,MALtBC,MAKsB,QALtBA,MAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,SACmB;AACtB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,sBAAD;AACE,IAAA,SAAS,EAAE,4BACT,aADS,EAETA,QAAQ,KAAKC,aAAb,IAAoB,kBAFX,CADb;AAKE,IAAA,MAAM,EAAER,MALV;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,UAAU,EAAEG;AAPd,KASGF,MATH,EAUE,uEACMI,SADN;AAEE,IAAA,GAAG,EAAED,MAFP;AAGE,IAAA,SAAS,EAAE,4BACT,oBADS,EAET,CAAC,CAACH,MAAF,IAAY,4BAFH;AAHb,MAQGC,QARH,CAVF,CADF;AAuBD,CAlCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      vkuiClass={classNames(\n        \"SplitLayout\",\n        platform === IOS && \"SplitLayout--ios\"\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        vkuiClass={classNames(\n          \"SplitLayout__inner\",\n          !!header && \"SplitLayout__inner--header\"\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"file":"SplitLayout.js"}
+{"version":3,"file":"SplitLayout.js","names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform","usePlatform","classNames","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      vkuiClass={classNames(\n        \"SplitLayout\",\n        platform === IOS && \"SplitLayout--ios\"\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        vkuiClass={classNames(\n          \"SplitLayout__inner\",\n          !!header && \"SplitLayout__inner--header\"\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AAEA;;AACA;;;;AAkBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;EAAA,IAPtBC,MAOsB,QAPtBA,MAOsB;EAAA,IANtBC,KAMsB,QANtBA,KAMsB;EAAA,IALtBC,MAKsB,QALtBA,MAKsB;EAAA,IAJtBC,QAIsB,QAJtBA,QAIsB;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,MAEsB,QAFtBA,MAEsB;EAAA,IADnBC,SACmB;EACtB,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EAEA,OACE,qCAAC,sBAAD;IACE,SAAS,EAAE,IAAAC,sBAAA,EACT,aADS,EAETF,QAAQ,KAAKG,aAAb,IAAoB,kBAFX,CADb;IAKE,MAAM,EAAEV,MALV;IAME,KAAK,EAAEC,KANT;IAOE,UAAU,EAAEG;EAPd,GASGF,MATH,EAUE,uEACMI,SADN;IAEE,GAAG,EAAED,MAFP;IAGE,SAAS,EAAE,IAAAI,sBAAA,EACT,oBADS,EAET,CAAC,CAACP,MAAF,IAAY,4BAFH;EAHb,IAQGC,QARH,CAVF,CADF;AAuBD,CAlCM"}

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { HorizontalScrollProps } from "../HorizontalScroll/HorizontalScroll";
+import "./SubnavigationBar.css";
+export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, "showArrows" | "getScrollToLeft" | "getScrollToRight" | "scrollAnimationDuration"> {
+    mode?: "fixed" | "overflow";
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
+ */
+export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, ...restProps }: SubnavigationBarProps) => JSX.Element;

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"names":["defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;;;AAmBA,IAAMA,mBAA0C,GAAG,SAA7CA,mBAA6C,CAACC,CAAD;AAAA,SAAOA,CAAC,GAAG,GAAX;AAAA,CAAnD;;AAEA,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA8C,CAACD,CAAD;AAAA,SAAOA,CAAC,GAAG,GAAX;AAAA,CAApD;AAEA;AACA;AACA;;;AACO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,OAQH;AAAA,uBAP3BC,IAO2B;AAAA,MAP3BA,IAO2B,0BAPpB,UAOoB;AAAA,MAN3BC,QAM2B,QAN3BA,QAM2B;AAAA,6BAL3BC,UAK2B;AAAA,MAL3BA,UAK2B,gCALd,IAKc;AAAA,kCAJ3BC,eAI2B;AAAA,MAJ3BA,eAI2B,qCAJTP,mBAIS;AAAA,mCAH3BQ,gBAG2B;AAAA,MAH3BA,gBAG2B,sCAHRN,oBAGQ;AAAA,MAF3BO,uBAE2B,QAF3BA,uBAE2B;AAAA,MADxBC,SACwB;AAC3B,MAAIC,aAAJ;AACA,MAAIC,kBAAkB,GAAG,EAAzB;;AAEA,MAAIR,IAAI,KAAK,OAAb,EAAsB;AACpBO,IAAAA,aAAa,GAAG,KAAhB;AACD,GAFD,MAEO;AACLA,IAAAA,aAAa,GAAGE,kCAAhB;AACAD,IAAAA,kBAAkB,GAAG;AACnBN,MAAAA,UAAU,EAAVA,UADmB;AAEnBC,MAAAA,eAAe,EAAfA,eAFmB;AAGnBC,MAAAA,gBAAgB,EAAhBA,gBAHmB;AAInBC,MAAAA,uBAAuB,EAAvBA;AAJmB,KAArB;AAMD;;AAED,SACE,uEACMC,SADN;AAEE,IAAA,SAAS,EAAE,4BAAW,kBAAX,8BAAoDN,IAApD;AAFb,MAIE,qCAAC,aAAD;AAAe,IAAA,SAAS,EAAC;AAAzB,KAAoDQ,kBAApD,GACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6CP,QAA7C,CADF,CAJF,CADF;AAUD,CAlCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport \"./SubnavigationBar.css\";\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | \"showArrows\"\n      | \"getScrollToLeft\"\n      | \"getScrollToRight\"\n      | \"scrollAnimationDuration\"\n    > {\n  mode?: \"fixed\" | \"overflow\";\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = \"overflow\",\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === \"fixed\") {\n    ScrollWrapper = \"div\";\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\"SubnavigationBar\", `SubnavigationBar--${mode}`)}\n    >\n      <ScrollWrapper vkuiClass=\"SubnavigationBar__in\" {...scrollWrapperProps}>\n        <div vkuiClass=\"SubnavigationBar__scrollIn\">{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"file":"SubnavigationBar.js"}
+{"version":3,"file":"SubnavigationBar.js","names":["defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","classNames"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport \"./SubnavigationBar.css\";\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | \"showArrows\"\n      | \"getScrollToLeft\"\n      | \"getScrollToRight\"\n      | \"scrollAnimationDuration\"\n    > {\n  mode?: \"fixed\" | \"overflow\";\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = \"overflow\",\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === \"fixed\") {\n    ScrollWrapper = \"div\";\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\"SubnavigationBar\", `SubnavigationBar--${mode}`)}\n    >\n      <ScrollWrapper vkuiClass=\"SubnavigationBar__in\" {...scrollWrapperProps}>\n        <div vkuiClass=\"SubnavigationBar__scrollIn\">{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;;;AAmBA,IAAMA,mBAA0C,GAAG,SAA7CA,mBAA6C,CAACC,CAAD;EAAA,OAAOA,CAAC,GAAG,GAAX;AAAA,CAAnD;;AAEA,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA8C,CAACD,CAAD;EAAA,OAAOA,CAAC,GAAG,GAAX;AAAA,CAApD;AAEA;AACA;AACA;;;AACO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,OAQH;EAAA,qBAP3BC,IAO2B;EAAA,IAP3BA,IAO2B,0BAPpB,UAOoB;EAAA,IAN3BC,QAM2B,QAN3BA,QAM2B;EAAA,2BAL3BC,UAK2B;EAAA,IAL3BA,UAK2B,gCALd,IAKc;EAAA,gCAJ3BC,eAI2B;EAAA,IAJ3BA,eAI2B,qCAJTP,mBAIS;EAAA,iCAH3BQ,gBAG2B;EAAA,IAH3BA,gBAG2B,sCAHRN,oBAGQ;EAAA,IAF3BO,uBAE2B,QAF3BA,uBAE2B;EAAA,IADxBC,SACwB;EAC3B,IAAIC,aAAJ;EACA,IAAIC,kBAAkB,GAAG,EAAzB;;EAEA,IAAIR,IAAI,KAAK,OAAb,EAAsB;IACpBO,aAAa,GAAG,KAAhB;EACD,CAFD,MAEO;IACLA,aAAa,GAAGE,kCAAhB;IACAD,kBAAkB,GAAG;MACnBN,UAAU,EAAVA,UADmB;MAEnBC,eAAe,EAAfA,eAFmB;MAGnBC,gBAAgB,EAAhBA,gBAHmB;MAInBC,uBAAuB,EAAvBA;IAJmB,CAArB;EAMD;;EAED,OACE,uEACMC,SADN;IAEE,SAAS,EAAE,IAAAI,sBAAA,EAAW,kBAAX,8BAAoDV,IAApD;EAFb,IAIE,qCAAC,aAAD;IAAe,SAAS,EAAC;EAAzB,GAAoDQ,kBAApD,GACE;IAAK,SAAS,EAAC;EAAf,GAA6CP,QAA7C,CADF,CAJF,CADF;AAUD,CAlCM"}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { TappableProps } from "../Tappable/Tappable";
+import "./SubnavigationButton.css";
+export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
+    mode?: "primary" | "outline" | "tertiary";
+    size?: "s" | "m" | "l";
+    selected?: boolean;
+    /**
+     * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
+     */
+    textLevel?: 1 | 2 | 3;
+    /**
+     * Рекомендуется использовать только иконки с размером 24
+     */
+    before?: React.ReactNode;
+    /**
+     * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`
+     */
+    after?: React.ReactNode;
+    expandable?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
+ */
+export declare const SubnavigationButton: ({ mode, size, selected, textLevel, before, after, expandable, children, ...restProps }: SubnavigationButtonProps) => JSX.Element;

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js

@@ -15,22 +15,20 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classNames = require("../../lib/classNames");
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _utils = require("../../lib/utils");
 
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
 var _Tappable = require("../Tappable/Tappable");
 
 var _icons = require("@vkontakte/icons");
 
-var _usePlatform = require("../../hooks/usePlatform");
-
 var _Caption = require("../Typography/Caption/Caption");
 
 var _Subhead = require("../Typography/Subhead/Subhead");
 
 var _excluded = ["textLevel"],
-    _excluded2 = ["size", "selected", "textLevel", "before", "after", "expandable", "children"];
+    _excluded2 = ["mode", "size", "selected", "textLevel", "before", "after", "expandable", "children"];
 
 var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref) {
   var textLevel = _ref.textLevel,
@@ -41,7 +39,7 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
   }
 
   return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, (0, _extends2.default)({
-    level: textLevel === 2 ? "1" : "2"
+    level: textLevel === 2 ? "2" : "3"
   }, restProps));
 };
 /**
@@ -50,7 +48,9 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
 
 
 var SubnavigationButton = function SubnavigationButton(_ref2) {
-  var _ref2$size = _ref2.size,
+  var _ref2$mode = _ref2.mode,
+      mode = _ref2$mode === void 0 ? "primary" : _ref2$mode,
+      _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? "m" : _ref2$size,
       selected = _ref2.selected,
       _ref2$textLevel = _ref2.textLevel,
@@ -60,24 +60,28 @@ var SubnavigationButton = function SubnavigationButton(_ref2) {
       expandable = _ref2.expandable,
       children = _ref2.children,
       restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var platform = (0, _usePlatform.usePlatform)();
+
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
   return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
     hasActive: false,
     focusVisibleMode: "outside",
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("SubnavigationButton", platform), "SubnavigationButton--".concat(size), selected && "SubnavigationButton--selected"),
+    vkuiClass: (0, _classNames.classNames)("SubnavigationButton", "SubnavigationButton--".concat(size), "SubnavigationButton--mode-".concat(mode), selected && "SubnavigationButton--selected", "SubnavigationButton--sizeY-".concat(sizeY)),
     "aria-label": (0, _utils.getTitleFromChildren)(children)
   }), (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "SubnavigationButton__in"
-  }, (0, _utils.hasReactNode)(before) && (0, _jsxRuntime.createScopedElement)("span", {
+  }, before && (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "SubnavigationButton__before"
   }, before), (0, _jsxRuntime.createScopedElement)(SubnavigationButtonTypography, {
     textLevel: textLevel,
     vkuiClass: "SubnavigationButton__label",
     Component: "span"
-  }, children), (0, _utils.hasReactNode)(after) && (0, _jsxRuntime.createScopedElement)("span", {
+  }, children), after && (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "SubnavigationButton__after"
   }, after), expandable && (0, _jsxRuntime.createScopedElement)(_icons.Icon16Dropdown, {
-    vkuiClass: "SubnavigationButton__expandableIcon"
+    vkuiClass: "SubnavigationButton__expandableIcon",
+    "aria-hidden": true
   })));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","size","selected","before","after","expandable","children","platform"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AAyBA,IAAMA,6BAA6B,GAAG,SAAhCA,6BAAgC,OAGH;AAAA,MAFjCC,SAEiC,QAFjCA,SAEiC;AAAA,MAD9BC,SAC8B;;AACjC,MAAID,SAAS,KAAK,CAAlB,EAAqB;AACnB,WAAO,qCAAC,gBAAD,EAAaC,SAAb,CAAP;AACD;;AAED,SAAO,qCAAC,gBAAD;AAAS,IAAA,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB;AAAxC,KAAiDC,SAAjD,EAAP;AACD,CATD;AAWA;AACA;AACA;;;AACO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,QASH;AAAA,yBAR9BC,IAQ8B;AAAA,MAR9BA,IAQ8B,2BARvB,GAQuB;AAAA,MAP9BC,QAO8B,SAP9BA,QAO8B;AAAA,8BAN9BJ,SAM8B;AAAA,MAN9BA,SAM8B,gCANlB,CAMkB;AAAA,MAL9BK,MAK8B,SAL9BA,MAK8B;AAAA,MAJ9BC,KAI8B,SAJ9BA,KAI8B;AAAA,MAH9BC,UAG8B,SAH9BA,UAG8B;AAAA,MAF9BC,QAE8B,SAF9BA,QAE8B;AAAA,MAD3BP,SAC2B;AAC9B,MAAMQ,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,kBAAD,6BACMR,SADN;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,gBAAgB,EAAC,SAHnB;AAIE,IAAA,SAAS,EAAE,4BACT,gCAAa,qBAAb,EAAoCQ,QAApC,CADS,iCAEeN,IAFf,GAGTC,QAAQ,IAAI,+BAHH,CAJb;AASE,kBAAY,iCAAqBI,QAArB;AATd,MAWE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACG,yBAAaH,MAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA+CA,MAA/C,CAFJ,EAIE,qCAAC,6BAAD;AACE,IAAA,SAAS,EAAEL,SADb;AAEE,IAAA,SAAS,EAAC,4BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGQ,QALH,CAJF,EAWG,yBAAaF,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA8CA,KAA9C,CAZJ,EAcGC,UAAU,IACT,qCAAC,qBAAD;AAAgB,IAAA,SAAS,EAAC;AAA1B,IAfJ,CAXF,CADF;AAgCD,CA5CM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasChildren } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { getTitleFromChildren, hasReactNode } from \"../../lib/utils\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./SubnavigationButton.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n  size?: \"m\" | \"l\";\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"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  expandable?: boolean;\n}\n\ntype SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, \"textLevel\"> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavButtonTypographyProps) => {\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  size = \"m\",\n  selected,\n  textLevel = 1,\n  before,\n  after,\n  expandable,\n  children,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      vkuiClass={classNames(\n        getClassName(\"SubnavigationButton\", platform),\n        `SubnavigationButton--${size}`,\n        selected && \"SubnavigationButton--selected\"\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span vkuiClass=\"SubnavigationButton__in\">\n        {hasReactNode(before) && (\n          <span vkuiClass=\"SubnavigationButton__before\">{before}</span>\n        )}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          vkuiClass=\"SubnavigationButton__label\"\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {hasReactNode(after) && (\n          <span vkuiClass=\"SubnavigationButton__after\">{after}</span>\n        )}\n        {expandable && (\n          <Icon16Dropdown vkuiClass=\"SubnavigationButton__expandableIcon\" />\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"file":"SubnavigationButton.js"}
+{"version":3,"file":"SubnavigationButton.js","names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","useAdaptivity","sizeY","classNames","getTitleFromChildren"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasChildren } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./SubnavigationButton.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n  mode?: \"primary\" | \"outline\" | \"tertiary\";\n  size?: \"s\" | \"m\" | \"l\";\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"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  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  \"textLevel\"\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 ? \"2\" : \"3\"} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = \"primary\",\n  size = \"m\",\n  selected,\n  textLevel = 1,\n  before,\n  after,\n  expandable,\n  children,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      vkuiClass={classNames(\n        \"SubnavigationButton\",\n        `SubnavigationButton--${size}`,\n        `SubnavigationButton--mode-${mode}`,\n        selected && \"SubnavigationButton--selected\",\n        `SubnavigationButton--sizeY-${sizeY}`\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span vkuiClass=\"SubnavigationButton__in\">\n        {before && (\n          <span vkuiClass=\"SubnavigationButton__before\">{before}</span>\n        )}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          vkuiClass=\"SubnavigationButton__label\"\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span vkuiClass=\"SubnavigationButton__after\">{after}</span>}\n        {expandable && (\n          <Icon16Dropdown\n            vkuiClass=\"SubnavigationButton__expandableIcon\"\n            aria-hidden\n          />\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AA6BA,IAAMA,6BAA6B,GAAG,SAAhCA,6BAAgC,OAGI;EAAA,IAFxCC,SAEwC,QAFxCA,SAEwC;EAAA,IADrCC,SACqC;;EACxC,IAAID,SAAS,KAAK,CAAlB,EAAqB;IACnB,OAAO,qCAAC,gBAAD,EAAaC,SAAb,CAAP;EACD;;EAED,OAAO,qCAAC,gBAAD;IAAS,KAAK,EAAED,SAAS,KAAK,CAAd,GAAkB,GAAlB,GAAwB;EAAxC,GAAiDC,SAAjD,EAAP;AACD,CATD;AAWA;AACA;AACA;;;AACO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,QAUH;EAAA,uBAT9BC,IAS8B;EAAA,IAT9BA,IAS8B,2BATvB,SASuB;EAAA,uBAR9BC,IAQ8B;EAAA,IAR9BA,IAQ8B,2BARvB,GAQuB;EAAA,IAP9BC,QAO8B,SAP9BA,QAO8B;EAAA,4BAN9BL,SAM8B;EAAA,IAN9BA,SAM8B,gCANlB,CAMkB;EAAA,IAL9BM,MAK8B,SAL9BA,MAK8B;EAAA,IAJ9BC,KAI8B,SAJ9BA,KAI8B;EAAA,IAH9BC,UAG8B,SAH9BA,UAG8B;EAAA,IAF9BC,QAE8B,SAF9BA,QAE8B;EAAA,IAD3BR,SAC2B;;EAC9B,qBAAkB,IAAAS,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EAEA,OACE,qCAAC,kBAAD,6BACMV,SADN;IAEE,SAAS,EAAE,KAFb;IAGE,gBAAgB,EAAC,SAHnB;IAIE,SAAS,EAAE,IAAAW,sBAAA,EACT,qBADS,iCAEeR,IAFf,uCAGoBD,IAHpB,GAITE,QAAQ,IAAI,+BAJH,uCAKqBM,KALrB,EAJb;IAWE,cAAY,IAAAE,2BAAA,EAAqBJ,QAArB;EAXd,IAaE;IAAM,SAAS,EAAC;EAAhB,GACGH,MAAM,IACL;IAAM,SAAS,EAAC;EAAhB,GAA+CA,MAA/C,CAFJ,EAIE,qCAAC,6BAAD;IACE,SAAS,EAAEN,SADb;IAEE,SAAS,EAAC,4BAFZ;IAGE,SAAS,EAAC;EAHZ,GAKGS,QALH,CAJF,EAWGF,KAAK,IAAI;IAAM,SAAS,EAAC;EAAhB,GAA8CA,KAA9C,CAXZ,EAYGC,UAAU,IACT,qCAAC,qBAAD;IACE,SAAS,EAAC,qCADZ;IAEE;EAFF,EAbJ,CAbF,CADF;AAmCD,CAhDM"}

package/dist/cjs/components/Switch/Switch.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { HasRootRef } from "../../types";
+import { VisuallyHiddenInputProps } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import "./Switch.css";
+export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Switch
+ */
+export declare const Switch: ({ style, className, getRootRef, ...restProps }: SwitchProps) => JSX.Element;

package/dist/cjs/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"names":["Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAIA;;AACA;;;;AAOA;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKH;AAAA,MAJjBC,KAIiB,QAJjBA,KAIiB;AAAA,MAHjBC,SAGiB,QAHjBA,SAGiB;AAAA,MAFjBC,UAEiB,QAFjBA,UAEiB;AAAA,MADdC,SACc;AACjB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,yBAA0C,wCAA1C;AAAA,MAAQC,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,gCAAa,QAAb,EAAuBJ,QAAvB,CADS,0BAEQC,KAFR,GAGTF,SAAS,CAACM,QAAV,IAAsB,kBAHb,EAITH,YAAY,IAAI,uBAJP,CADb;AAOE,IAAA,SAAS,EAAEL,SAPb;AAQE,IAAA,KAAK,EAAED,KART;AASE,IAAA,GAAG,EAAEE,UATP;AAUE,IAAA,IAAI,EAAC;AAVP,KAYE,qCAAC,wCAAD,6BACMC,SADN;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,SAAS,EAAC,cAHZ;AAIE,IAAA,MAAM,EAAE,gCAAaI,MAAb,EAAqBJ,SAAS,CAACI,MAA/B,CAJV;AAKE,IAAA,OAAO,EAAE,gCAAaC,OAAb,EAAsBL,SAAS,CAACK,OAAhC;AALX,KAZF,EAmBE;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,SAAS,EAAC;AAApC,IAnBF,EAoBE,qCAAC,0BAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IApBF,CADF;AAwBD,CAlCM","sourcesContent":["import { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n  extends VisuallyHiddenInputProps,\n    HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      vkuiClass={classNames(\n        getClassName(\"Switch\", platform),\n        `Switch--sizeY-${sizeY}`,\n        restProps.disabled && \"Switch--disabled\",\n        focusVisible && \"Switch--focus-visible\"\n      )}\n      className={className}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        vkuiClass=\"Switch__self\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"file":"Switch.js"}
+{"version":3,"file":"Switch.js","names":["Switch","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","classNames","getClassName","disabled","callMultiple"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n  extends VisuallyHiddenInputProps,\n    HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      vkuiClass={classNames(\n        getClassName(\"Switch\", platform),\n        `Switch--sizeY-${sizeY}`,\n        restProps.disabled && \"Switch--disabled\",\n        focusVisible && \"Switch--focus-visible\"\n      )}\n      className={className}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        vkuiClass=\"Switch__self\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAIA;;AACA;;;;AAOA;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKH;EAAA,IAJjBC,KAIiB,QAJjBA,KAIiB;EAAA,IAHjBC,SAGiB,QAHjBA,SAGiB;EAAA,IAFjBC,UAEiB,QAFjBA,UAEiB;EAAA,IADdC,SACc;EACjB,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;;EACA,qBAAkB,IAAAC,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,uBAA0C,IAAAC,iCAAA,GAA1C;EAAA,IAAQC,YAAR,oBAAQA,YAAR;EAAA,IAAsBC,MAAtB,oBAAsBA,MAAtB;EAAA,IAA8BC,OAA9B,oBAA8BA,OAA9B;;EAEA,OACE;IACE,SAAS,EAAE,IAAAC,sBAAA,EACT,IAAAC,0BAAA,EAAa,QAAb,EAAuBT,QAAvB,CADS,0BAEQG,KAFR,GAGTJ,SAAS,CAACW,QAAV,IAAsB,kBAHb,EAITL,YAAY,IAAI,uBAJP,CADb;IAOE,SAAS,EAAER,SAPb;IAQE,KAAK,EAAED,KART;IASE,GAAG,EAAEE,UATP;IAUE,IAAI,EAAC;EAVP,GAYE,qCAAC,wCAAD,6BACMC,SADN;IAEE,IAAI,EAAC,UAFP;IAGE,SAAS,EAAC,cAHZ;IAIE,MAAM,EAAE,IAAAY,0BAAA,EAAaL,MAAb,EAAqBP,SAAS,CAACO,MAA/B,CAJV;IAKE,OAAO,EAAE,IAAAK,0BAAA,EAAaJ,OAAb,EAAsBR,SAAS,CAACQ,OAAhC;EALX,GAZF,EAmBE;IAAM,IAAI,EAAC,cAAX;IAA0B,SAAS,EAAC;EAApC,EAnBF,EAoBE,qCAAC,0BAAD;IAAc,IAAI,EAAC;EAAnB,EApBF,CADF;AAwBD,CAlCM"}

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import "./Tabbar.css";
+export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
+     */
+    shadow?: boolean;
+    /**
+     * @deprecated будет удалено в 5.0.0. Используйте `mode`
+     */
+    itemsLayout?: "vertical" | "horizontal" | "auto";
+    /**
+     * Задает расположение элементов (вертикальное/горизонтальное)
+     */
+    mode?: "vertical" | "horizontal" | "auto";
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tabbar
+ */
+export declare const Tabbar: ({ children, shadow, itemsLayout, mode, ...restProps }: TabbarProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["getItemsLayout","itemsLayout","children","React","Children","count","Tabbar","shadow","mode","restProps","platform","Platform","IOS"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAkBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CACrBC,WADqB,EAErBC,QAFqB,EAGlB;AACH,UAAQD,WAAR;AACE,SAAK,YAAL;AACA,SAAK,UAAL;AACE,aAAOA,WAAP;;AACF;AACE,aAAOE,KAAK,CAACC,QAAN,CAAeC,KAAf,CAAqBH,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,CAXD;AAaA;AACA;AACA;;;AACO,IAAMI,MAAM,GAAG,SAATA,MAAS,OAMH;AAAA,MALjBJ,QAKiB,QALjBA,QAKiB;AAAA,yBAJjBK,MAIiB;AAAA,MAJjBA,MAIiB,4BAJR,IAIQ;AAAA,MAHjBN,WAGiB,QAHjBA,WAGiB;AAAA,MAFjBO,IAEiB,QAFjBA,IAEiB;AAAA,MADdC,SACc;AACjB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,QADS,EAETA,QAAQ,KAAKC,mBAASC,GAAtB,IAA6B,aAFpB,sBAGIZ,cAAc,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBO,IAAhB,EAAsBN,QAAtB,CAHlB,GAITK,MAAM,IAAI,gBAJD;AADb,KAOME,SAPN,GASE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6BP,QAA7B,CATF,CADF;AAaD,CAtBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `mode`\n   */\n  itemsLayout?: \"vertical\" | \"horizontal\" | \"auto\"; // TODO v5.0.0 удалить, будет использоваться mode\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayout = (\n  itemsLayout: TabbarProps[\"mode\"],\n  children: TabbarProps[\"children\"]\n) => {\n  switch (itemsLayout) {\n    case \"horizontal\":\n    case \"vertical\":\n      return itemsLayout;\n    default:\n      return React.Children.count(children) > 2 ? \"vertical\" : \"horizontal\";\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  itemsLayout,\n  mode,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Tabbar\",\n        platform === Platform.IOS && \"Tabbar--ios\",\n        `Tabbar--l-${getItemsLayout(itemsLayout ?? mode, children)}`,\n        shadow && \"Tabbar--shadow\"\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n"],"file":"Tabbar.js"}
+{"version":3,"file":"Tabbar.js","names":["getItemsLayout","itemsLayout","children","React","Children","count","Tabbar","shadow","mode","restProps","platform","usePlatform","classNames","Platform","IOS"],"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `mode`\n   */\n  itemsLayout?: \"vertical\" | \"horizontal\" | \"auto\"; // TODO v5.0.0 удалить, будет использоваться mode\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayout = (\n  itemsLayout: TabbarProps[\"mode\"],\n  children: TabbarProps[\"children\"]\n) => {\n  switch (itemsLayout) {\n    case \"horizontal\":\n    case \"vertical\":\n      return itemsLayout;\n    default:\n      return React.Children.count(children) > 2 ? \"vertical\" : \"horizontal\";\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  itemsLayout,\n  mode,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Tabbar\",\n        platform === Platform.IOS && \"Tabbar--ios\",\n        `Tabbar--l-${getItemsLayout(itemsLayout ?? mode, children)}`,\n        shadow && \"Tabbar--shadow\"\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAkBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CACrBC,WADqB,EAErBC,QAFqB,EAGlB;EACH,QAAQD,WAAR;IACE,KAAK,YAAL;IACA,KAAK,UAAL;MACE,OAAOA,WAAP;;IACF;MACE,OAAOE,KAAK,CAACC,QAAN,CAAeC,KAAf,CAAqBH,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;EALJ;AAOD,CAXD;AAaA;AACA;AACA;;;AACO,IAAMI,MAAM,GAAG,SAATA,MAAS,OAMH;EAAA,IALjBJ,QAKiB,QALjBA,QAKiB;EAAA,uBAJjBK,MAIiB;EAAA,IAJjBA,MAIiB,4BAJR,IAIQ;EAAA,IAHjBN,WAGiB,QAHjBA,WAGiB;EAAA,IAFjBO,IAEiB,QAFjBA,IAEiB;EAAA,IADdC,SACc;EACjB,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EAEA,OACE;IACE,SAAS,EAAE,IAAAC,sBAAA,EACT,QADS,EAETF,QAAQ,KAAKG,kBAAA,CAASC,GAAtB,IAA6B,aAFpB,sBAGId,cAAc,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBO,IAAhB,EAAsBN,QAAtB,CAHlB,GAITK,MAAM,IAAI,gBAJD;EADb,GAOME,SAPN,GASE;IAAK,SAAS,EAAC;EAAf,GAA6BP,QAA7B,CATF,CADF;AAaD,CAtBM"}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { HasComponent, HasRootRef } from "../../types";
+import "./TabbarItem.css";
+export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "label">, // TODO убрать Omit после удаления свойства label
+HasRootRef<HTMLElement>, HasComponent {
+    selected?: boolean;
+    /**
+     * Текст рядом с иконкой
+     */
+    text?: React.ReactNode;
+    /**
+     * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`
+     */
+    indicator?: React.ReactNode;
+    /**
+     * @deprecated будет удалено в 5.0.0. Используйте `indicator`
+     */
+    label?: React.ReactNode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/TabbarItem
+ */
+export declare const TabbarItem: ({ children, selected, label, indicator, text, href, Component, disabled, ...restProps }: TabbarItemProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["warn","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","Platform","IOS","ANDROID"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;AAsBA,IAAMA,IAAI,GAAG,wBAAS,YAAT,CAAb;AAEA;AACA;AACA;;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAUH;AAAA,MATrBC,QASqB,QATrBA,QASqB;AAAA,MARrBC,QAQqB,QARrBA,QAQqB;AAAA,MAPrBC,KAOqB,QAPrBA,KAOqB;AAAA,MANrBC,SAMqB,QANrBA,SAMqB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,4BAHrBC,SAGqB;AAAA,MAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;AAAA,MAFrBE,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;AACrB,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MAAIP,KAAK,IAAIQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAtC,EAAqD;AACnDd,IAAAA,IAAI,CACF,yEADE,CAAJ;AAGD;;AAED,SACE,qCAAC,SAAD,6BACMU,SADN;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,IAAI,EAAEF,IAHR;AAIE,IAAA,SAAS,EAAE,4BACT,YADS,EAETI,QAAQ,KAAKI,mBAASC,GAAtB,IAA6B,iBAFpB,EAGTL,QAAQ,KAAKI,mBAASE,OAAtB,IAAiC,qBAHxB,EAITd,QAAQ,IAAI,sBAJH,EAKT,CAAC,CAACG,IAAF,IAAU,kBALD;AAJb,MAYE,qCAAC,kBAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EACRE,QAAQ,KAAKI,mBAASC,GAAtB,GACI,8BADJ,GAEI,YAPR;AASE,IAAA,iBAAiB,EAAEL,QAAQ,KAAKI,mBAASC,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;AAUE,IAAA,QAAQ,EAAE,KAVZ;AAWE,IAAA,SAAS,EAAC;AAXZ,IAZF,EAyBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGd,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaG,SAAb,KAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,qCAAC,gBAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACGA,KADH,CAHJ,CAFF,CADF,EAYGE,IAAI,IACH,qCAAC,kBAAD;AAAU,IAAA,SAAS,EAAC,KAApB;AAA0B,IAAA,SAAS,EAAC,kBAApC;AAAuD,IAAA,MAAM,EAAC;AAA9D,KACGA,IADH,CAbJ,CAzBF,CADF;AA8CD,CAjEM","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"],"file":"TabbarItem.js"}
+{"version":3,"file":"TabbarItem.js","names":["warn","warnOnce","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","usePlatform","process","env","NODE_ENV","classNames","Platform","IOS","ANDROID","hasReactNode"],"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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;AAsBA,IAAMA,IAAI,GAAG,IAAAC,kBAAA,EAAS,YAAT,CAAb;AAEA;AACA;AACA;;AACO,IAAMC,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,GAAG,IAAAC,wBAAA,GAAjB;;EAEA,IAAIR,KAAK,IAAIS,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAtC,EAAqD;IACnDhB,IAAI,CACF,yEADE,CAAJ;EAGD;;EAED,OACE,qCAAC,SAAD,6BACMW,SADN;IAEE,QAAQ,EAAED,QAFZ;IAGE,IAAI,EAAEF,IAHR;IAIE,SAAS,EAAE,IAAAS,sBAAA,EACT,YADS,EAETL,QAAQ,KAAKM,kBAAA,CAASC,GAAtB,IAA6B,iBAFpB,EAGTP,QAAQ,KAAKM,kBAAA,CAASE,OAAtB,IAAiC,qBAHxB,EAIThB,QAAQ,IAAI,sBAJH,EAKT,CAAC,CAACG,IAAF,IAAU,kBALD;EAJb,IAYE,qCAAC,kBAAD;IACE,IAAI,EAAC,cADP;IAEE,SAAS,EAAC,KAFZ;IAGE,QAAQ,EAAEG,QAHZ;IAIE,UAAU,EACRE,QAAQ,KAAKM,kBAAA,CAASC,GAAtB,GACI,8BADJ,GAEI,YAPR;IASE,iBAAiB,EAAEP,QAAQ,KAAKM,kBAAA,CAASC,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;IAUE,QAAQ,EAAE,KAVZ;IAWE,SAAS,EAAC;EAXZ,EAZF,EAyBE;IAAK,SAAS,EAAC;EAAf,GACE;IAAK,SAAS,EAAC;EAAf,GACGhB,QADH,EAEE;IAAK,SAAS,EAAC;EAAf,GACG,IAAAkB,mBAAA,EAAaf,SAAb,KAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,qCAAC,gBAAD;IAAS,IAAI,EAAC,GAAd;IAAkB,IAAI,EAAC;EAAvB,GACGA,KADH,CAHJ,CAFF,CADF,EAYGE,IAAI,IACH,qCAAC,kBAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,SAAS,EAAC,kBAApC;IAAuD,MAAM,EAAC;EAA9D,GACGA,IADH,CAbJ,CAzBF,CADF;AA8CD,CAjEM"}

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

@@ -0,0 +1,23 @@
+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 TabsContextProps {
+    mode: TabsProps["mode"];
+    withGaps: boolean;
+}
+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>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":["warn","TabsModeContext","React","createContext","mode","withGaps","TabsComponent","children","getRootRef","sizeX","restProps","platform","process","env","NODE_ENV","expectedValueText","IOS","VKCOM","Tabs","displayName"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;AAiBA,IAAMA,IAAI,GAAG,wBAAS,MAAT,CAAb;AAOO,IAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,CAAsC;AACnEC,EAAAA,IAAI,EAAE,SAD6D;AAEnEC,EAAAA,QAAQ,EAAE;AAFyD,CAAtC,CAAxB;;;AAKP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAML;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,uBAJfH,IAIe;AAAA,MAJfA,IAIe,0BAJR,SAIQ;AAAA,MAHfI,UAGe,QAHfA,UAGe;AAAA,MAFfC,KAEe,QAFfA,KAEe;AAAA,MADZC,SACY;AACf,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MACE,CAACP,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAAhC,KACAQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAF3B,EAGE;AACA,QAAMC,iBAAiB,GACrBX,IAAI,KAAK,SAAT,sEAEI,4BAHN;AAIAJ,IAAAA,IAAI,kBACOI,IADP,mOAC8DW,iBAD9D,EAAJ;AAGD;;AAED,MAAIJ,QAAQ,KAAKK,aAAb,IAAoBZ,IAAI,KAAK,WAAjC,EAA8C;AAC5CA,IAAAA,IAAI,GAAG,SAAP;AACD;;AAED,MAAIA,IAAI,KAAK,SAAb,EAAwB;AACtBA,IAAAA,IAAI,GAAG,WAAP;AACD;;AAED,MAAMC,QAAQ,GAAGD,IAAI,KAAK,QAAT,IAAqBA,IAAI,KAAK,WAA/C;AAEA,SACE,uEACMM,SADN;AAEE,IAAA,GAAG,EAAEF,UAFP;AAGE,IAAA,SAAS,EAAE,4BACT,MADS,EAET,CAACG,QAAQ,KAAKK,aAAb,IAAoBL,QAAQ,KAAKM,eAAlC,qBAAqDN,QAArD,CAFS,kBAGAP,IAHA,GAITC,QAAQ,IAAI,gBAJH,EAKT;AALS,0BAMMI,KANN;AAHb,MAYE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAE;AAAEL,MAAAA,IAAI,EAAJA,IAAF;AAAQC,MAAAA,QAAQ,EAARA;AAAR;AAAjC,KACGE,QADH,CADF,CAZF,CADF;AAoBD,CApDD;AAsDA;AACA;AACA;;;AACO,IAAMW,IAAI,GAAG,oCAAeZ,aAAf,EAA8B;AAAEG,EAAAA,KAAK,EAAE;AAAT,CAA9B,CAAb;;AAEPS,IAAI,CAACC,WAAL,GAAmB,MAAnB","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"],"file":"Tabs.js"}
+{"version":3,"file":"Tabs.js","names":["warn","warnOnce","TabsModeContext","React","createContext","mode","withGaps","TabsComponent","children","getRootRef","sizeX","restProps","platform","usePlatform","process","env","NODE_ENV","expectedValueText","IOS","classNames","VKCOM","Tabs","withAdaptivity","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;;AACA;;AAEA;;AACA;;AACA;;AACA;;;AAiBA,IAAMA,IAAI,GAAG,IAAAC,kBAAA,EAAS,MAAT,CAAb;AAOO,IAAMC,eAAe,gBAAGC,KAAK,CAACC,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,GAAG,IAAAC,wBAAA,GAAjB;;EAEA,IACE,CAACR,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAAhC,KACAS,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAF3B,EAGE;IACA,IAAMC,iBAAiB,GACrBZ,IAAI,KAAK,SAAT,sEAEI,4BAHN;IAIAL,IAAI,kBACOK,IADP,mOAC8DY,iBAD9D,EAAJ;EAGD;;EAED,IAAIL,QAAQ,KAAKM,aAAb,IAAoBb,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,uEACMM,SADN;IAEE,GAAG,EAAEF,UAFP;IAGE,SAAS,EAAE,IAAAU,sBAAA,EACT,MADS,EAET,CAACP,QAAQ,KAAKM,aAAb,IAAoBN,QAAQ,KAAKQ,eAAlC,qBAAqDR,QAArD,CAFS,kBAGAP,IAHA,GAITC,QAAQ,IAAI,gBAJH,EAKT;IALS,sBAMMI,KANN;EAHb,IAYE;IAAK,SAAS,EAAC;EAAf,GACE,qCAAC,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;;;AACO,IAAMa,IAAI,GAAG,IAAAC,8BAAA,EAAef,aAAf,EAA8B;EAAEG,KAAK,EAAE;AAAT,CAA9B,CAAb;;AAEPW,IAAI,CAACE,WAAL,GAAmB,MAAnB"}

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import "./TabsItem.css";
+export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Добавляет иконку слева.
+     *
+     * - Для `mode="default"` используйте иконки размером 24.
+     * - Для всех остальных `mode` используйте иконки размером 20.
+     */
+    before?: React.ReactNode;
+    /**
+     * Добавляет элемент слева от `after`.
+     *
+     * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode="prominent"`.
+     *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode="prominent" size="s"`.
+     * - `number` – для показа текстового блока с переданным числом.
+     */
+    status?: React.ReactElement | number;
+    /**
+     * Добавляет иконку справа.
+     *
+     * Например, `<Icon16Dropdown />`
+     */
+    after?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/TabsItem
+ */
+export declare const TabsItem: ({ before, children, status, after, selected, ...restProps }: TabsItemProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["TabsItem","before","children","status","after","selected","restProps","platform","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","IOS","VKCOM"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA6BA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAOH;AAAA,MANnBC,MAMmB,QANnBA,MAMmB;AAAA,MALnBC,QAKmB,QALnBA,QAKmB;AAAA,MAJnBC,MAImB,QAJnBA,MAImB;AAAA,MAHnBC,KAGmB,QAHnBA,KAGmB;AAAA,2BAFnBC,QAEmB;AAAA,MAFnBA,QAEmB,8BAFR,KAEQ;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,0BACEC,KAAK,CAACC,UAAN,CAAiBC,qBAAjB,CADF;AAAA,MAAQC,IAAR,qBAAQA,IAAR;AAAA,MAAcC,QAAd,qBAAcA,QAAd;;AAEA,MAAIC,eAAe,GAAG,IAAtB;;AAEA,MAAIX,MAAJ,EAAY;AACVW,IAAAA,eAAe,GACb,OAAOX,MAAP,KAAkB,QAAlB,GACE,qCAAC,gBAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,SAAS,EAAC,0CAFZ;AAGE,MAAA,MAAM,EAAC;AAHT,OAKGA,MALH,CADF,GASE;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAoCA,MAApC,CAVJ;AAYD;;AAED,SACE,qCAAC,kBAAD,6BACMG,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,UADS,EAET,CAACC,QAAQ,KAAKQ,aAAb,IAAoBR,QAAQ,KAAKS,eAAlC,yBAAyDT,QAAzD,CAFS,EAGTK,IAAI,wBAAiBA,IAAjB,CAHK,EAITP,QAAQ,IAAI,oBAJH,EAKT;AACAG,IAAAA,KAAK,8BAAuBA,KAAvB,CANI,EAOTK,QAAQ,IAAI,oBAPH,CAFb;AAWE,IAAA,SAAS,EAAC,iBAXZ;AAYE,IAAA,UAAU,EAAC,kBAZb;AAaE,IAAA,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;AAcE,IAAA,SAAS,EAAEA,IAAI,KAAK;AAdtB,MAgBGX,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,MAAnC,CAhBb,EAiBE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,IAAA,KAAK,EAAEW,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;AAIE,IAAA,MAAM,EAAC;AAJT,KAMGV,QANH,CAjBF,EAyBGY,eAzBH,EA0BGV,KAAK,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CA1BZ,EA2BGQ,IAAI,KAAK,SAAT,IACC;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,uBAFF;AAGE,qBAAeP;AAHjB,IA5BJ,CADF;AAqCD,CAlEM","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"],"file":"TabsItem.js"}
+{"version":3,"file":"TabsItem.js","names":["TabsItem","before","children","status","after","selected","restProps","platform","usePlatform","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","classNames","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 { 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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA6BA;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,wBAAA,GAAjB;;EACA,qBAAkB,IAAAC,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,wBACEC,KAAK,CAACC,UAAN,CAAiBC,qBAAjB,CADF;EAAA,IAAQC,IAAR,qBAAQA,IAAR;EAAA,IAAcC,QAAd,qBAAcA,QAAd;;EAEA,IAAIC,eAAe,GAAG,IAAtB;;EAEA,IAAIb,MAAJ,EAAY;IACVa,eAAe,GACb,OAAOb,MAAP,KAAkB,QAAlB,GACE,qCAAC,gBAAD;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,qCAAC,kBAAD,6BACMG,SADN;IAEE,SAAS,EAAE,IAAAW,sBAAA,EACT,UADS,EAET,CAACV,QAAQ,KAAKW,aAAb,IAAoBX,QAAQ,KAAKY,eAAlC,yBAAyDZ,QAAzD,CAFS,EAGTO,IAAI,wBAAiBA,IAAjB,CAHK,EAITT,QAAQ,IAAI,oBAJH,EAKT;IACAK,KAAK,8BAAuBA,KAAvB,CANI,EAOTK,QAAQ,IAAI,oBAPH,CAFb;IAWE,SAAS,EAAC,iBAXZ;IAYE,UAAU,EAAC,kBAZb;IAaE,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;IAcE,SAAS,EAAEA,IAAI,KAAK;EAdtB,IAgBGb,MAAM,IAAI;IAAK,SAAS,EAAC;EAAf,GAAmCA,MAAnC,CAhBb,EAiBE,qCAAC,kBAAD;IACE,SAAS,EAAC,MADZ;IAEE,SAAS,EAAC,iBAFZ;IAGE,KAAK,EAAEa,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;IAIE,MAAM,EAAC;EAJT,GAMGZ,QANH,CAjBF,EAyBGc,eAzBH,EA0BGZ,KAAK,IAAI;IAAK,SAAS,EAAC;EAAf,GAAkCA,KAAlC,CA1BZ,EA2BGU,IAAI,KAAK,SAAT,IACC;IACE,SAAS,EAAC,qBADZ;IAEE,mBAFF;IAGE,iBAAeT;EAHjB,EA5BJ,CADF;AAqCD,CAlEM"}

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

@@ -0,0 +1,46 @@
+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";
+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"> {
+    /**
+     * Длительность показа active-состояния
+     */
+    activeEffectDelay?: number;
+    stopPropagation?: boolean;
+    /**
+     * Указывает, должен ли компонент реагировать на hover-состояние
+     */
+    hasHover?: boolean;
+    /**
+     * Указывает, должен ли компонент реагировать на active-состояние
+     */
+    hasActive?: boolean;
+    /**
+     * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
+     */
+    activeMode?: "opacity" | "background" | string;
+    /**
+     * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
+     */
+    hoverMode?: "opacity" | "background" | string;
+    /**
+     * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
+     */
+    focusVisibleMode?: FocusVisibleMode | string;
+    children?: React.ReactNode;
+    onEnter?(outputEvent: MouseEvent): void;
+    onLeave?(outputEvent: MouseEvent): void;
+}
+export interface RootComponentProps extends TouchProps {
+    ref?: React.Ref<HTMLElement>;
+}
+export declare const ACTIVE_DELAY = 70;
+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>;