@vkontakte/vkui 5.3.2 → 5.4.0

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { HasRootRef } from '../../types';
-import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput';
-export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
+export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export declare const Switch: ({ style, className, getRootRef, ...restProps }: SwitchProps) => JSX.Element;
+export declare const Switch: ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => JSX.Element;

package/dist/components/Switch/Switch.js

@@ -11,34 +11,38 @@ import { SizeType } from "../../lib/adaptivity";
 import { callMultiple } from "../../lib/callMultiple";
 import { Platform } from "../../lib/platform";
 import { FocusVisible } from "../FocusVisible/FocusVisible";
-import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 var sizeYClassNames = _define_property({
     none: "vkuiSwitch--sizeY-none"
 }, SizeType.COMPACT, "vkuiSwitch--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */ export var Switch = function(_param) {
-    var style = _param.style, className = _param.className, getRootRef = _param.getRootRef, restProps = _object_without_properties(_param, [
+    var style = _param.style, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, restProps = _object_without_properties(_param, [
         "style",
         "className",
-        "getRootRef"
+        "getRootRef",
+        "getRef"
     ]);
     var platform = usePlatform();
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
-    var _useFocusVisible = useFocusVisible(), onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
+    var _useFocusVisible = useFocusVisible(), focusVisible = _useFocusVisible.focusVisible, onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames("vkuiSwitch", platform === Platform.IOS && "vkuiSwitch--ios", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && "vkuiSwitch--disabled", className),
         style: style,
-        ref: getRootRef
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, _object_spread_props(_object_spread({}, restProps), {
-        type: "checkbox",
-        className: "vkuiSwitch__self",
+        ref: getRootRef,
         onBlur: callMultiple(onBlur, restProps.onBlur),
         onFocus: callMultiple(onFocus, restProps.onFocus)
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, _object_spread_props(_object_spread({}, restProps), {
+        Component: "input",
+        getRootRef: getRef,
+        type: "checkbox",
+        className: "vkuiSwitch__self"
     })), /*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
         className: "vkuiSwitch__pseudo"
     }), /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
         mode: "outside"
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","restProps","platform","sizeY","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","type","span","aria-hidden","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SACEC,mBAAmB,QAEd,6CAA6C;AAGpD,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAKnB;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAAiE;QAA9DC,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAeC;QAAjCH;QAAOC;QAAWC;;IACzC,IAAME,WAAWd;IACjB,IAA2BF,iBAAAA,wCAAAA,eAAnBiB,OAAAA,0CAAQ;IAChB,IAA4BhB,mBAAAA,mBAApBiB,SAAoBjB,iBAApBiB,QAAQC,UAAYlB,iBAAZkB;IAEhB,qBACE,oBAACC;QACCP,WAAWd,yBAETiB,aAAaX,SAASgB,GAAG,uBACzBJ,UAAUd,SAASmB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF,UAAUQ,QAAQ,4BAClBV;QAEFD,OAAOA;QACPY,KAAKV;qBAEL,oBAACP,6DACKQ;QACJU,MAAK;QACLZ,SAAS;QACTK,QAAQd,aAAac,QAAQH,UAAUG,MAAM;QAC7CC,SAASf,aAAae,SAASJ,UAAUI,OAAO;uBAElD,oBAACO;QAAKC,eAAAA,IAAW;QAACd,SAAS;sBAC3B,oBAACP;QAAasB,MAAK;;AAGzB,EAAE"}
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHidden","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","getRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","Component","type","span","aria-hidden","visible","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAQnB;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAAyE;QAAtEC,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWf;IACjB,IAA2BF,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAChB,IAA0CjB,mBAAAA,mBAAlCkB,eAAkClB,iBAAlCkB,cAAcC,SAAoBnB,iBAApBmB,QAAQC,UAAYpB,iBAAZoB;IAE9B,qBACE,oBAACC;QACCT,WAAWd,yBAETkB,aAAaZ,SAASkB,GAAG,uBACzBL,UAAUf,SAASqB,OAAO,IAAIhB,eAAe,CAACU,MAAM,EACpDF,UAAUS,QAAQ,4BAClBZ;QAEFD,OAAOA;QACPc,KAAKZ;QACLM,QAAQhB,aAAagB,QAAQJ,UAAUI,MAAM;QAC7CC,SAASjB,aAAaiB,SAASL,UAAUK,OAAO;qBAEhD,oBAACd,wDACKS;QACJW,WAAU;QACVb,YAAYC;QACZa,MAAK;QACLf,SAAS;uBAEX,oBAACgB;QAAKC,eAAAA,IAAW;QAACjB,SAAS;sBAC3B,oBAACP;QAAayB,SAASZ;QAAca,MAAK;;AAGhD,EAAE"}

package/dist/components/Tabbar/Tabbar.js

@@ -25,10 +25,8 @@ var getItemsLayoutClassName = function(itemsLayout, children) {
     ]);
     var platform = usePlatform();
     return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames("vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
-    }, restProps), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiTabbar__in"
-    }, children));
+        className: classNames("vkuiInternalTabbar", "vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
+    }, restProps), children);
 };
 
 //# sourceMappingURL=Tabbar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      <div className={styles['Tabbar__in']}>{children}</div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAc9C,IAAMC,0BAA0B,SAC9BC,aACAC,UACW;IACX,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE,CAAC;IACjD;AACF;AAEA;;CAEC,GACD,OAAO,IAAMK,SAAS,iBAA6E;QAA1EH,kBAAAA,iCAAUI,QAAAA,oCAAS,IAAI,kBAAEC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWZ;IAEjB,qBACE,oBAACa;QACCH,WAAWX,yBAETa,aAAaX,SAASa,GAAG,uBACzBZ,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,0BAEJ,oBAACE;QAAIH,SAAS;OAAyBN;AAG7C,EAAE"}
+{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAc9C,IAAMC,0BAA0B,SAC9BC,aACAC,UACW;IACX,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE,CAAC;IACjD;AACF;AAEA;;CAEC,GACD,OAAO,IAAMK,SAAS,iBAA6E;QAA1EH,kBAAAA,iCAAUI,QAAAA,oCAAS,IAAI,kBAAEC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWZ;IAEjB,qBACE,oBAACa;QACCH,WAAWX,WACT,oCAEAa,aAAaX,SAASa,GAAG,uBACzBZ,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP,EAAE"}

package/dist/components/TabbarItem/TabbarItem.js

@@ -46,7 +46,7 @@ var warn = warnOnce("TabbarItem");
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiTabbarItem__icon"
     }, children, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiTabbarItem__label"
+        className: "vkuiInternalTabbarItem__label"
     }, hasReactNode(indicator) && indicator)), text && /*#__PURE__*/ React.createElement(Footnote, {
         Component: "div",
         className: "vkuiTabbarItem__text",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.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\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAkB3D,IAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMI,aAAa,iBAUH;QATrBC,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,QAAQ,qBACjCE,kBAAAA,UACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKJ,gBAAgBoB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA,mDACKG;QACJF,UAAUA;QACVF,MAAMA;QACNG,WAAWjB,6BAETmB,aAAahB,SAASsB,GAAG,2BACzBN,aAAahB,SAASuB,OAAO,+BAC7Bf,wCACA,CAAC,CAACE,gCACFI;sBAGF,oBAACX;QACCqB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAahB,SAASsB,GAAG,wCAA4C,YAAY;QAEnFI,mBAAmBV,aAAahB,SAASsB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,SAAS;sBAEX,oBAACc;QAAId,SAAS;qBACZ,oBAACc;QAAId,SAAS;OACXP,wBACD,oBAACqB;QAAId,SAAS;OAAgChB,aAAaW,cAAcA,aAE1EC,sBACC,oBAACN;QAASQ,WAAU;QAAME,SAAS;QAA8Be,QAAO;OACrEnB;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.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\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAkB3D,IAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMI,aAAa,iBAUH;QATrBC,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,QAAQ,qBACjCE,kBAAAA,UACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKJ,gBAAgBoB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA,mDACKG;QACJF,UAAUA;QACVF,MAAMA;QACNG,WAAWjB,6BAETmB,aAAahB,SAASsB,GAAG,2BACzBN,aAAahB,SAASuB,OAAO,+BAC7Bf,wCACA,CAAC,CAACE,gCACFI;sBAGF,oBAACX;QACCqB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAahB,SAASsB,GAAG,wCAA4C,YAAY;QAEnFI,mBAAmBV,aAAahB,SAASsB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,SAAS;sBAEX,oBAACc;QAAId,SAAS;qBACZ,oBAACc;QAAId,SAAS;OACXP,wBACD,oBAACqB;QAAId,WAAU;OACZhB,aAAaW,cAAcA,aAG/BC,sBACC,oBAACN;QAASQ,WAAU;QAAME,SAAS;QAA8Be,QAAO;OACrEnB;AAMb,EAAE"}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
+import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
 import { TouchProps } from '../Touch/Touch';
 type StateMode = 'opacity' | 'background';
 export type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'> & AnchorHTMLAttributesOnly;
-export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
+export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, HasChildren, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
     /**
      * Длительность показа active-состояния
      */
@@ -30,7 +30,6 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
      * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
     focusVisibleMode?: FocusVisibleMode | string;
-    children?: React.ReactNode;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
 }

package/dist/components/Tappable/Tappable.js

@@ -290,6 +290,7 @@ function useActivity(hasActive, stopDelay) {
         "aria-hidden": true,
         className: "vkuiTappable__stateLayer"
     }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
         mode: focusVisibleMode
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","onKeyDown","e","isCustomElement","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","top","left","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","childContext","useRef","ANDROID","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","mode"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    HasChildren,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible visible={focusVisible} mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","onKeyDown","e","isCustomElement","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","top","left","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","childContext","useRef","ANDROID","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","visible","mode"],"mappings":"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"}

package/dist/components/Typography/Caption/Caption.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { HasCaps, TypographyProps } from '../types';
+import { HasCaps, TypographyProps } from '../Typography';
 export interface CaptionProps extends TypographyProps, HasCaps {
     level?: '1' | '2' | '3';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
-export declare const Caption: ({ className, children, weight, level, caps, Component, ...restProps }: CaptionProps) => JSX.Element;
+export declare const Caption: ({ className, level, caps, Component, normalize, ...restProps }: CaptionProps) => JSX.Element;

package/dist/components/Typography/Caption/Caption.js

@@ -1,30 +1,27 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { Typography } from "../Typography";
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption
  */ export var Caption = function(_param) {
-    var className = _param.className, children = _param.children, weight = _param.weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, restProps = _object_without_properties(_param, [
+    var className = _param.className, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
         "className",
-        "children",
-        "weight",
         "level",
         "caps",
-        "Component"
+        "Component",
+        "normalize"
     ]);
-    return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
-        className: classNames(className, "vkuiCaption", caps && "vkuiCaption--caps", {
+    return /*#__PURE__*/ React.createElement(Typography, _object_spread({
+        Component: Component,
+        normalize: normalize,
+        className: classNames(className, caps && "vkuiCaption--caps", {
             "1": "vkuiCaption--level-1",
             "2": "vkuiCaption--level-2",
             "3": "vkuiCaption--level-3"
-        }[level], weight && ({
-            "1": "vkuiCaption--weight-1",
-            "2": "vkuiCaption--weight-2",
-            "3": "vkuiCaption--weight-3"
-        })[weight])
-    }), children);
+        }[level])
+    }, restProps));
 };
 
 //# sourceMappingURL=Caption.js.map

package/dist/components/Typography/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  children,\n  weight,\n  level = '1',\n  caps,\n  Component = 'span',\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Caption'],\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n        weight &&\n          {\n            '1': styles['Caption--weight-1'],\n            '2': styles['Caption--weight-2'],\n            '3': styles['Caption--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","Caption","className","children","weight","level","caps","Component","restProps"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAQ7C;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAQH;QAPlBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,8BACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,2BACTC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACA,mDACKC;QACJN,WAAWF,WACTE,0BAEAI,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM,EACRD,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","Typography","Caption","className","level","caps","Component","normalize","restProps"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AAOrE;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAOH;QANlBC,mBAAAA,iCACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,IAAI,qBACbC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACN;QACCK,WAAWA;QACXC,WAAWA;QACXJ,WAAWH,WACTG,WACAE,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM;OAENI;AAGV,EAAE"}

package/dist/components/Typography/Footnote/Footnote.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { HasCaps, TypographyProps } from '../types';
+import { HasCaps, TypographyProps } from '../Typography';
 export interface FootnoteProps extends TypographyProps, HasCaps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */
-export declare const Footnote: ({ className, children, weight, caps, Component, ...restProps }: FootnoteProps) => JSX.Element;
+export declare const Footnote: ({ className, caps, Component, normalize, ...restProps }: FootnoteProps) => JSX.Element;

package/dist/components/Typography/Footnote/Footnote.js

@@ -1,25 +1,22 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { Typography } from "../Typography";
 /**
  * @see https://vkcom.github.io/VKUI/#/Footnote
- */ export var Footnote = function(_param) {
-    var className = _param.className, children = _param.children, weight = _param.weight, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, restProps = _object_without_properties(_param, [
+ */ export var Footnote = function(_param) /*#__PURE__*/ {
+    var className = _param.className, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
         "className",
-        "children",
-        "weight",
         "caps",
-        "Component"
+        "Component",
+        "normalize"
     ]);
-    return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
-        className: classNames(className, "vkuiFootnote", caps && "vkuiFootnote--caps", weight && ({
-            "1": "vkuiFootnote--weight-1",
-            "2": "vkuiFootnote--weight-2",
-            "3": "vkuiFootnote--weight-3"
-        })[weight])
-    }), children);
+    return React.createElement(Typography, _object_spread({
+        Component: Component,
+        normalize: normalize,
+        className: classNames(className, "vkuiFootnote", caps && "vkuiFootnote--caps")
+    }, restProps));
 };
 
 //# sourceMappingURL=Footnote.js.map

package/dist/components/Typography/Footnote/Footnote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  children,\n  weight,\n  caps,\n  Component = 'span',\n  ...restProps\n}: FootnoteProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Footnote'],\n        caps && styles['Footnote--caps'],\n        weight &&\n          {\n            '1': styles['Footnote--weight-1'],\n            '2': styles['Footnote--weight-2'],\n            '3': styles['Footnote--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","Footnote","className","children","weight","caps","Component","restProps"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAM7C;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAOH;QANnBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,QACAC,cAAAA,gCACAC,WAAAA,0CAAY,2BACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACA,mDACKC;QACJL,WAAWF,WACTE,2BAEAG,8BACAD,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: FootnoteProps) => (\n  <Typography\n    Component={Component}\n    normalize={normalize}\n    className={classNames(className, styles['Footnote'], caps && styles['Footnote--caps'])}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","Typography","Footnote","className","caps","Component","normalize","restProps"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AAKrE;;CAEC,GACD,OAAO,IAAMC,WAAW,+BAOtB;QANAC,mBAAAA,WACAC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,IAAI,qBACbC;QAJHJ;QACAC;QACAC;QACAC;;WAGA,oBAACL;QACCI,WAAWA;QACXC,WAAWA;QACXH,WAAWH,WAAWG,2BAA+BC;OACjDG;AACL,EACD"}

package/dist/components/Typography/Headline/Headline.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { HasRootRef } from '../../../types';
-import { TypographyProps } from '../types';
-export interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {
+import { TypographyProps } from '../Typography';
+export interface HeadlineProps extends TypographyProps {
     level?: '1' | '2';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
-export declare const Headline: ({ className, children, weight, level, Component, getRootRef, ...restProps }: HeadlineProps) => JSX.Element;
+export declare const Headline: ({ className, weight, level, Component, normalize, ...restProps }: HeadlineProps) => JSX.Element;

package/dist/components/Typography/Headline/Headline.js

@@ -1,37 +1,34 @@
 import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { SizeType } from "../../../lib/adaptivity";
+import { Typography } from "../Typography";
 var sizeYClassNames = _define_property({
     none: "vkuiHeadline--sizeY-none"
 }, SizeType.COMPACT, "vkuiHeadline--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */ export var Headline = function(_param) {
-    var className = _param.className, children = _param.children, _param_weight = _param.weight, weight = _param_weight === void 0 ? "3" : _param_weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h4" : _param_Component, getRootRef = _param.getRootRef, restProps = _object_without_properties(_param, [
+    var className = _param.className, _param_weight = _param.weight, weight = _param_weight === void 0 ? "3" : _param_weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h4" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
         "className",
-        "children",
         "weight",
         "level",
         "Component",
-        "getRootRef"
+        "normalize"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
-    return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
+    return /*#__PURE__*/ React.createElement(Typography, _object_spread({
+        Component: Component,
+        normalize: normalize,
+        weight: weight,
         className: classNames(className, "vkuiHeadline", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], {
             "1": "vkuiHeadline--level-1",
             "2": "vkuiHeadline--level-2"
-        }[level], {
-            "1": "vkuiHeadline--weight-1",
-            "2": "vkuiHeadline--weight-2",
-            "3": "vkuiHeadline--weight-3"
-        }[weight])
-    }), children);
+        }[level])
+    }, restProps));
 };
 
 //# sourceMappingURL=Headline.js.map

package/dist/components/Typography/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { HasRootRef } from '../../../types';\nimport { TypographyProps } from '../types';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  children,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  getRootRef,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n        {\n          '1': styles['Headline--weight-1'],\n          '2': styles['Headline--weight-2'],\n          '3': styles['Headline--weight-3'],\n        }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","sizeYClassNames","none","COMPACT","Headline","className","children","weight","level","Component","getRootRef","restProps","sizeY","ref","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AAKnD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAOnB;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAQH;QAPnBC,mBAAAA,WACAC,kBAAAA,iCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,yBACZC,oBAAAA,YACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BX,iBAAAA,wCAAAA,eAAnBa,OAAAA,0CAAQ;IAEhB,qBACE,oBAACH,mDACKE;QACJE,KAAKH;QACLL,WAAWP,WACTO,2BAEAO,UAAUZ,SAASc,OAAO,IAAIb,eAAe,CAACW,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACJ,MAAM,EACR;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,OAAO;QAGVD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  normalize = true,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      weight={weight}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","Typography","sizeYClassNames","none","COMPACT","Headline","className","weight","level","Component","normalize","restProps","sizeY","REGULAR"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,UAAU,QAAyB,gBAAgB;AAG5D,IAAMC;IACJC,IAAI;GACHH,SAASI,OAAO;AAOnB;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAOH;QANnBC,mBAAAA,kCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,IAAI,qBACbC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BX,iBAAAA,wCAAAA,eAAnBa,OAAAA,0CAAQ;IAEhB,qBACE,oBAACX;QACCQ,WAAWA;QACXC,WAAWA;QACXH,QAAQA;QACRD,WAAWR,WACTQ,2BAEAM,UAAUZ,SAASa,OAAO,IAAIX,eAAe,CAACU,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACJ,MAAM;OAENG;AAGV,EAAE"}

package/dist/components/Typography/Paragraph/Paragraph.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { HasRootRef } from '../../../types';
-import { TypographyProps } from '../types';
-export interface ParagraphProps extends TypographyProps, HasRootRef<HTMLElement> {
-}
+import { TypographyProps } from '../Typography';
+export type ParagraphProps = TypographyProps;
 /**
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */
-export declare const Paragraph: ({ className, Component, getRootRef, weight, children, ...restProps }: ParagraphProps) => JSX.Element;
+export declare const Paragraph: ({ className, Component, normalize, ...restProps }: ParagraphProps) => JSX.Element;

package/dist/components/Typography/Paragraph/Paragraph.js

@@ -1,26 +1,21 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { Typography } from "../Typography";
 /**
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */ export var Paragraph = function(_param) {
-    var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, getRootRef = _param.getRootRef, weight = _param.weight, children = _param.children, restProps = _object_without_properties(_param, [
+    var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? false : _param_normalize, restProps = _object_without_properties(_param, [
         "className",
         "Component",
-        "getRootRef",
-        "weight",
-        "children"
+        "normalize"
     ]);
-    return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
-        className: classNames(className, "vkuiParagraph", weight && ({
-            "1": "vkuiParagraph--weight-1",
-            "2": "vkuiParagraph--weight-2",
-            "3": "vkuiParagraph--weight-3"
-        })[weight])
-    }), children);
+    return /*#__PURE__*/ React.createElement(Typography, _object_spread({
+        Component: Component,
+        normalize: normalize,
+        className: classNames(className, "vkuiParagraph")
+    }, restProps));
 };
 
 //# sourceMappingURL=Paragraph.js.map

package/dist/components/Typography/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../../types';\nimport { TypographyProps } from '../types';\nimport styles from './Paragraph.module.css';\n\nexport interface ParagraphProps extends TypographyProps, HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n  className,\n  Component = 'span',\n  getRootRef,\n  weight,\n  children,\n  ...restProps\n}: ParagraphProps) => {\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        className,\n        styles['Paragraph'],\n        weight &&\n          {\n            '1': styles['Paragraph--weight-1'],\n            '2': styles['Paragraph--weight-2'],\n            '3': styles['Paragraph--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","classNames","Paragraph","className","Component","getRootRef","weight","children","restProps","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,YAAY,iBAOH;QANpBC,mBAAAA,qCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACH,mDACKI;QACJC,KAAKJ;QACLF,WAAWF,WACTE,4BAEAG,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZC;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Paragraph.module.css';\n\nexport type ParagraphProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n  className,\n  Component = 'span',\n  normalize = false,\n  ...restProps\n}: ParagraphProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(className, styles['Paragraph'])}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","Typography","Paragraph","className","Component","normalize","restProps"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,gBAAgB;AAK5D;;CAEC,GACD,OAAO,IAAMC,YAAY,iBAKH;QAJpBC,mBAAAA,qCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,KAAK,qBACdC;QAHHH;QACAC;QACAC;;IAGA,qBACE,oBAACJ;QACCG,WAAWA;QACXC,WAAWA;QACXF,WAAWH,WAAWG;OAClBG;AAGV,EAAE"}