@vkontakte/vkui 6.2.2 → 6.3.1

package/dist/cjs/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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  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 = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],\n        disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles['Switch__inputNative']}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles['Switch__inputFake']}>\n        <span className={styles['Switch__track']} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles['Switch__handle'],\n            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","compact","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","platform","usePlatform","sizeY","useAdaptivity","focusVisible","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","handleBlur","callMultiple","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","React","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","classNames","ref","VisuallyHidden","span","aria-hidden"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;iEAxBU;sBACI;+BACG;iCACE;0CACS;6BACb;8BACC;gCAE4B;AAGzD,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAUO,MAAMH,SAAS;QAAC,EACrBI,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EAEK,WADTC;QATHZ;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;QACAE;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,EAAEC,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGS,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QAAEH;QAAcI,MAAM;IAAU;IACxF,MAAMC,aAAaC,IAAAA,0BAAY,EAAChB,QAAQC;IACxC,MAAMgB,cAAcD,IAAAA,0BAAY,EAACd,SAASC;IAE1C,MAAM,CAACe,0BAA0BC,4BAA4B,GAAGC,OAAMC,QAAQ,CAC5EC,QAAQjB,UAAUkB,cAAc;IAElC,MAAMC,eAAe1B,gBAAgB2B;IAErC,MAAMC,sCAAsCN,OAAMO,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BX,4BAA4BU,aAAahC,OAAO;IAClD,GACA;QAAC2B;KAAa;IAGhB,MAAMO,aAAoD,4CACrD1B;QACH2B,WAAW;QACXrC,YAAYC;QACZqC,MAAM;QACNC,MAAM;QACNnC,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASY,IAAAA,0BAAY,EAACU,qCAAqCtB;;IAG7D,IAAIoB,cAAc;QAChBO,WAAWlC,OAAO,GAAGC;QACrBiC,UAAU,CAAC,eAAe,GAAGjC,cAAc,SAAS;IACtD,OAAO;QACLiC,UAAU,CAAC,eAAe,GAAGb,2BAA2B,SAAS;IACnE;IAEA,qBACE,sBAACiB;QACCzC,WAAW0C,IAAAA,gBAAU,gBAEnB5B,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CF,aAAa,mDACbP,oCACAa,wBACAlB;QAEFD,OAAOA;QACP4C,KAAK1C;;0BAEL,qBAAC2C,8BAAc,8CACTP;gBACJrC,SAAS;gBACTM,QAAQe;gBACRb,SAASe;;0BAEX,sBAACsB;gBAAKC,aAAW;gBAAC9C,SAAS;;kCACzB,qBAAC6C;wBAAK7C,SAAS;;kCACf,qBAAC6C;wBACCC,aAAW;wBACX9C,WAAW0C,IAAAA,gBAAU,wBAEnB9B,aAAa,SAAS,CAACP;;;;;;AAMnC"}
+{"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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  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 = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],\n        disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles['Switch__inputNative']}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles['Switch__inputFake']}>\n        <span className={styles['Switch__track']} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles['Switch__handle'],\n            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","compact","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","platform","usePlatform","sizeY","useAdaptivity","focusVisible","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","handleBlur","callMultiple","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","React","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","classNames","ref","VisuallyHidden","span","aria-hidden"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;iEAxBU;sBACI;+BACG;iCACE;0CACS;6BACb;8BACC;gCAE4B;AAGzD,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAUO,MAAMH,SAAS;QAAC,EACrBI,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EAEK,WADTC;QATHZ;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;QACAE;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,EAAEC,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGS,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QAAEH;QAAcI,MAAM;IAAU;IACxF,MAAMC,aAAaC,IAAAA,0BAAY,EAAChB,QAAQC;IACxC,MAAMgB,cAAcD,IAAAA,0BAAY,EAACd,SAASC;IAE1C,MAAM,CAACe,0BAA0BC,4BAA4B,GAAGC,OAAMC,QAAQ,CAC5EC,QAAQjB,UAAUkB,cAAc;IAElC,MAAMC,eAAe1B,gBAAgB2B;IAErC,MAAMC,sCAAsCN,OAAMO,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BX,4BAA4BU,aAAahC,OAAO;IAClD,GACA;QAAC2B;KAAa;IAGhB,MAAMO,aAAoD,4CACrD1B;QACH2B,WAAW;QACXrC,YAAYC;QACZqC,MAAM;QACNC,MAAM;QACNnC,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASY,IAAAA,0BAAY,EAACU,qCAAqCtB;;IAG7D,IAAIoB,cAAc;QAChBO,WAAWlC,OAAO,GAAGC;QACrBiC,UAAU,CAAC,eAAe,GAAGjC,cAAc,SAAS;IACtD,OAAO;QACLiC,UAAU,CAAC,eAAe,GAAGb,2BAA2B,SAAS;IACnE;IAEA,qBACE,sBAACiB;QACCzC,WAAW0C,IAAAA,gBAAU,gBAEnB5B,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CF,aAAa,mDACbP,oCACAa,wBACAlB;QAEFD,OAAOA;QACP4C,KAAK1C;;0BAEL,qBAAC2C,8BAAc,8CACTP;gBACJrC,SAAS;gBACTM,QAAQe;gBACRb,SAASe;;0BAEX,sBAACsB;gBAAKC,aAAW;gBAAC9C,SAAS;;kCACzB,qBAAC6C;wBAAK7C,SAAS;;kCACf,qBAAC6C;wBACCC,aAAW;wBACX9C,WAAW0C,IAAAA,gBAAU,wBAEnB9B,aAAa,SAAS,CAACP;;;;;;AAMnC"}

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
@@ -12,5 +13,5 @@ export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-export declare const Tabbar: ({ plain, mode, ...restProps }: TabbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabbar: ({ plain, mode, ...restProps }: TabbarProps) => React.ReactNode;
 //# sourceMappingURL=Tabbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;CAC3C;AAkBD;;GAEG;AACH,eAAO,MAAM,MAAM,kCAA2C,WAAW,4CAexE,CAAC"}
+{"version":3,"file":"Tabbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;CAC3C;AAkBD;;GAEG;AACH,eAAO,MAAM,MAAM,kCAA2C,WAAW,KAAG,KAAK,CAAC,SAejF,CAAC"}

package/dist/cjs/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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","plain","mode","restProps","platform","usePlatform","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;iEArCU;sBACI;6BACC;+BAEE;AAc9B,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,MAAMD,SAAS;QAAC,EAAEO,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,EACvB,oCAEAJ,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV"}
+{"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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","plain","mode","restProps","platform","usePlatform","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;iEArCU;sBACI;6BACC;+BAEE;AAc9B,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,MAAMD,SAAS;QAAC,EAAEO,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,EACvB,oCAEAJ,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV"}

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

@@ -14,5 +14,5 @@ export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, ...restProps }: TabbarItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, ...restProps }: TabbarItemProps) => React.ReactNode;
 //# sourceMappingURL=TabbarItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvD,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,qFASpB,eAAe,4CAgDjB,CAAC"}
+{"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvD,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,qFASpB,eAAe,KAAG,KAAK,CAAC,SAgD1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends 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  ...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    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\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    </RootComponent>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","RootComponent","baseClassName","classNames","Tappable","role","activeMode","activeEffectDelay","hasHover","className","onClick","noop","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;iEA9BU;sBACwB;6BACnB;0BACc;+BAEZ;0BACL;0BACA;AAkBzB,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,aAAa;QAAC,EACzBG,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EAEQ,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBf,KAAKgB,yBAAe,CAACC,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,sBAACW,4BAAa;QACZX,WAAWA;OACPE;QACJD,UAAUA;QACVF,MAAMA;QACNa,eAAeC,IAAAA,gBAAU,oBAEvBV,aAAa,gCACbA,aAAa,wCACbP;;0BAGF,qBAACkB,kBAAQ;gBACPC,MAAK;gBACLd,UAAUA;gBACVe,YAAYb,aAAa,6CAAiD;gBAC1Ec,mBAAmBd,aAAa,QAAQ,IAAI;gBAC5Ce,UAAU;gBACVC,SAAS;gBACTC,SAASC,UAAI;;0BAEf,sBAACC;gBAAIH,SAAS;;kCACZ,sBAACG;wBAAIH,SAAS;;4BACXxB;0CACD,qBAAC2B;gCAAIH,WAAU;0CACZI,IAAAA,kBAAY,EAAC1B,cAAcA;;;;oBAG/BC,sBACC,qBAAC0B,kBAAQ;wBAACxB,WAAU;wBAAMmB,SAAS;wBAA8BM,QAAO;kCACrE3B;;;;;;AAMb"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends 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  ...restProps\n}: TabbarItemProps): React.ReactNode => {\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    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\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    </RootComponent>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","RootComponent","baseClassName","classNames","Tappable","role","activeMode","activeEffectDelay","hasHover","className","onClick","noop","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;iEA9BU;sBACwB;6BACnB;0BACc;+BAEZ;0BACL;0BACA;AAkBzB,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,aAAa;QAAC,EACzBG,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EAEQ,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBf,KAAKgB,yBAAe,CAACC,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,sBAACW,4BAAa;QACZX,WAAWA;OACPE;QACJD,UAAUA;QACVF,MAAMA;QACNa,eAAeC,IAAAA,gBAAU,oBAEvBV,aAAa,gCACbA,aAAa,wCACbP;;0BAGF,qBAACkB,kBAAQ;gBACPC,MAAK;gBACLd,UAAUA;gBACVe,YAAYb,aAAa,6CAAiD;gBAC1Ec,mBAAmBd,aAAa,QAAQ,IAAI;gBAC5Ce,UAAU;gBACVC,SAAS;gBACTC,SAASC,UAAI;;0BAEf,sBAACC;gBAAIH,SAAS;;kCACZ,sBAACG;wBAAIH,SAAS;;4BACXxB;0CACD,qBAAC2B;gCAAIH,WAAU;0CACZI,IAAAA,kBAAY,EAAC1B,cAAcA;;;;oBAG/BC,sBACC,qBAAC0B,kBAAQ;wBAACxB,WAAU;wBAAMmB,SAAS;wBAA8BM,QAAO;kCACrE3B;;;;;;AAMb"}

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

@@ -33,5 +33,5 @@ export declare const TabsModeContext: React.Context<TabsContextProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
-export declare const Tabs: ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, ...restProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, ...restProps }: TabsProps) => React.ReactNode;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,iCAM1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,IAAI,iHAQd,SAAS,4CAiIX,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAOxD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,IAAI,iHAQd,SAAS,KAAG,KAAK,CAAC,SAiIpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n  layoutFillMode: 'auto',\n  withScrollToSelectedTab: false,\n  scrollBehaviorToSelectedTab: 'nearest',\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["Tabs","TabsModeContext","React","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","children","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","RootComponent","baseClassName","classNames","div","className","ref","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["Tabs","TabsModeContext","React","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","children","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","RootComponent","baseClassName","classNames","div","className","ref","Provider","value"],"mappings":"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"}

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

@@ -29,5 +29,5 @@ export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement>, A
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export declare const TabsItem: ({ before, children, status, after, selected, className, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hovered, activated, hasHover, hasActive, focusVisibleMode, ...restProps }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsItem: ({ before, children, status, after, selected, className, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hovered, activated, hasHover, hasActive, focusVisibleMode, ...restProps }: TabsItemProps) => React.ReactNode;
 //# sourceMappingURL=TabsItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsB/D,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,aAAa,EACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,uMAkBlB,aAAa,4CAgIf,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsB/D,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,aAAa,EACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,uMAkBlB,aAAa,KAAG,KAAK,CAAC,SAgIxB,CAAC"}

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

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

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

@@ -22,6 +22,6 @@ export interface RippleProps {
     needRipple: boolean;
     clicks: Wave[];
 }
-export declare const Ripple: ({ needRipple, clicks }: RippleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Ripple: ({ needRipple, clicks }: RippleProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=Ripple.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CA2DpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CAkBhE,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eACjB,MAAM,cACN,OAAO,GAAG,SAAS,KAC9B,OAIF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eACR,OAAO,qBACA,OAAO,GAAG,SAAS,KACrC;IACD,MAAM,EAAE,IAAI,EAAE,CAAC;IACf,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC1D,eAAe,EAAE,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;CA4D7D,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,KAAG,KAAK,CAAC,SAkBzE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (activeMode: string, hasPointer: boolean | undefined) => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (needRipple: boolean, hasPointerContext: boolean | undefined) => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  React.useEffect(\n    function setClearClicksTimeout() {\n      const clicksTimeoutId = clicks.length > 0 ? setTimeout(() => setClicks([]), WAVE_LIVE) : null;\n      return function cancelClearClicksTimeout() {\n        if (clicksTimeoutId) {\n          clearTimeout(clicksTimeoutId);\n        }\n      };\n    },\n    [clicks],\n  );\n\n  function addClick(x: number, y: number, pointerId: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps) => {\n  return (\n    <span\n      aria-hidden\n      className={classNames(\n        styles['Tappable__stateLayer'],\n        needRipple && styles['Tappable__ripple'],\n      )}\n    >\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};\n"],"names":["Ripple","useMaybeNeedRipple","useRipple","activeMode","hasPointer","platform","usePlatform","DELAY","WAVE_LIVE","needRipple","hasPointerContext","clicks","setClicks","React","useState","pointerDelayTimers","useMemo","Map","useEffect","setClearClicksTimeout","clicksTimeoutId","length","setTimeout","cancelClearClicksTimeout","clearTimeout","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","delete","onPointerDown","e","top","left","getOffsetRect","currentTarget","clientX","clientY","set","onPointerCancel","timer","get","reallyNeedRipple","hasPointerLib","noop","span","aria-hidden","className","classNames","map","wave","style"],"mappings":";;;;;;;;;;;IA+FaA,MAAM;eAANA;;IArFAC,kBAAkB;eAAlBA;;IAmBAC,SAAS;eAATA;;;;;iEA7BU;sBACqC;6BAChC;wBACE;AAOvB,MAAMD,qBAAqB,CAACE,YAAoBC;IACrD,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOD,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE;AASA,MAAMI,QAAQ;AACd,MAAMC,YAAY;AAKX,MAAMN,YAAY,CAACO,YAAqBC;IAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBF,OAAMG,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJJ,OAAMK,SAAS,CACb,SAASC;QACP,MAAMC,kBAAkBT,OAAOU,MAAM,GAAG,IAAIC,WAAW,IAAMV,UAAU,EAAE,GAAGJ,aAAa;QACzF,OAAO,SAASe;YACd,IAAIH,iBAAiB;gBACnBI,aAAaJ;YACf;QACF;IACF,GACA;QAACT;KAAO;IAGV,SAASc,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBrB,OAAOsB,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAG3B,YAAYqB;QAEvEjB,UAAU;eAAIoB;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/Db,mBAAmBqB,MAAM,CAACR;IAC5B;IAEA;;GAEC,GACD,MAAMS,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,IAAAA,qBAAa,EAACH,EAAEI,aAAa;QACnD,MAAMhB,IAAIY,EAAEK,OAAO,GAAIH,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAA;QAC/B,MAAMb,IAAIW,EAAEM,OAAO,GAAIL,CAAAA,gBAAAA,iBAAAA,MAAO,CAAA;QAE9BxB,mBAAmB8B,GAAG,CACpBP,EAAEV,SAAS,EACXN,WAAW,IAAMG,SAASC,GAAGC,GAAGW,EAAEV,SAAS,GAAGrB;IAElD;IAEA,MAAMuC,kBAA8D,CAACR;QACnE,MAAMS,QAAQhC,mBAAmBiC,GAAG,CAACV,EAAEV,SAAS;QAChDJ,aAAauB;QACbhC,mBAAmBqB,MAAM,CAACE,EAAEV,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMqB,mBAAmB,AAAC,CAAA,CAACC,cAAa,IAAIxC,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACA0B,eAAeY,mBAAmBZ,gBAAgBc,UAAI;QACtDL,iBAAiBG,mBAAmBH,kBAAkBK,UAAI;IAC5D;AACF;AAOO,MAAMnD,SAAS,CAAC,EAAES,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,qBAACyC;QACCC,aAAW;QACXC,WAAWC,IAAAA,gBAAU,8BAEnB9C;kBAGDE,OAAO6C,GAAG,CAAC,CAACC,qBACX,qBAACL;gBAECE,SAAS;gBACTI,OAAO;oBAAEnB,KAAKkB,KAAK9B,CAAC;oBAAEa,MAAMiB,KAAK/B,CAAC;gBAAC;eAF9B+B,KAAKtB,EAAE;;AAOtB"}
+{"version":3,"sources":["../../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (\n  activeMode: string,\n  hasPointer: boolean | undefined,\n): boolean => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (\n  needRipple: boolean,\n  hasPointerContext: boolean | undefined,\n): {\n  clicks: Wave[];\n  onPointerDown: React.PointerEventHandler<HTMLSpanElement>;\n  onPointerCancel: React.PointerEventHandler<HTMLSpanElement>;\n} => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  React.useEffect(\n    function setClearClicksTimeout() {\n      const clicksTimeoutId = clicks.length > 0 ? setTimeout(() => setClicks([]), WAVE_LIVE) : null;\n      return function cancelClearClicksTimeout() {\n        if (clicksTimeoutId) {\n          clearTimeout(clicksTimeoutId);\n        }\n      };\n    },\n    [clicks],\n  );\n\n  function addClick(x: number, y: number, pointerId: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps): React.ReactNode => {\n  return (\n    <span\n      aria-hidden\n      className={classNames(\n        styles['Tappable__stateLayer'],\n        needRipple && styles['Tappable__ripple'],\n      )}\n    >\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};\n"],"names":["Ripple","useMaybeNeedRipple","useRipple","activeMode","hasPointer","platform","usePlatform","DELAY","WAVE_LIVE","needRipple","hasPointerContext","clicks","setClicks","React","useState","pointerDelayTimers","useMemo","Map","useEffect","setClearClicksTimeout","clicksTimeoutId","length","setTimeout","cancelClearClicksTimeout","clearTimeout","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","delete","onPointerDown","e","top","left","getOffsetRect","currentTarget","clientX","clientY","set","onPointerCancel","timer","get","reallyNeedRipple","hasPointerLib","noop","span","aria-hidden","className","classNames","map","wave","style"],"mappings":";;;;;;;;;;;IAyGaA,MAAM;eAANA;;IA/FAC,kBAAkB;eAAlBA;;IAsBAC,SAAS;eAATA;;;;;iEAhCU;sBACqC;6BAChC;wBACE;AAOvB,MAAMD,qBAAqB,CAChCE,YACAC;IAEA,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOD,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE;AASA,MAAMI,QAAQ;AACd,MAAMC,YAAY;AAKX,MAAMN,YAAY,CACvBO,YACAC;IAMA,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBF,OAAMG,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJJ,OAAMK,SAAS,CACb,SAASC;QACP,MAAMC,kBAAkBT,OAAOU,MAAM,GAAG,IAAIC,WAAW,IAAMV,UAAU,EAAE,GAAGJ,aAAa;QACzF,OAAO,SAASe;YACd,IAAIH,iBAAiB;gBACnBI,aAAaJ;YACf;QACF;IACF,GACA;QAACT;KAAO;IAGV,SAASc,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBrB,OAAOsB,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAG3B,YAAYqB;QAEvEjB,UAAU;eAAIoB;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/Db,mBAAmBqB,MAAM,CAACR;IAC5B;IAEA;;GAEC,GACD,MAAMS,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,IAAAA,qBAAa,EAACH,EAAEI,aAAa;QACnD,MAAMhB,IAAIY,EAAEK,OAAO,GAAIH,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAA;QAC/B,MAAMb,IAAIW,EAAEM,OAAO,GAAIL,CAAAA,gBAAAA,iBAAAA,MAAO,CAAA;QAE9BxB,mBAAmB8B,GAAG,CACpBP,EAAEV,SAAS,EACXN,WAAW,IAAMG,SAASC,GAAGC,GAAGW,EAAEV,SAAS,GAAGrB;IAElD;IAEA,MAAMuC,kBAA8D,CAACR;QACnE,MAAMS,QAAQhC,mBAAmBiC,GAAG,CAACV,EAAEV,SAAS;QAChDJ,aAAauB;QACbhC,mBAAmBqB,MAAM,CAACE,EAAEV,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMqB,mBAAmB,AAAC,CAAA,CAACC,cAAa,IAAIxC,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACA0B,eAAeY,mBAAmBZ,gBAAgBc,UAAI;QACtDL,iBAAiBG,mBAAmBH,kBAAkBK,UAAI;IAC5D;AACF;AAOO,MAAMnD,SAAS,CAAC,EAAES,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,qBAACyC;QACCC,aAAW;QACXC,WAAWC,IAAAA,gBAAU,8BAEnB9C;kBAGDE,OAAO6C,GAAG,CAAC,CAACC,qBACX,qBAACL;gBAECE,SAAS;gBACTI,OAAO;oBAAEnB,KAAKkB,KAAK9B,CAAC;oBAAEa,MAAMiB,KAAK/B,CAAC;gBAAC;eAF9B+B,KAAKtB,EAAE;;AAOtB"}

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

@@ -7,5 +7,5 @@ export interface TappableProps extends ClickableProps, StateProps {
      */
     borderRadiusMode?: 'auto' | 'inherit';
 }
-export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => React.ReactNode;
 //# sourceMappingURL=Tappable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA6B,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAA+C,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBlF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,4CAoCf,CAAC"}
+{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA6B,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAA+C,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBlF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,KAAG,KAAK,CAAC,SAoCxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles['Tappable--hasPointer-none'];\n    case false:\n      return styles['Tappable--hasPointer-false'];\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps) => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles['Tappable'],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["Tappable","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","baseClassName","borderRadiusMode","children","hoverMode","DEFAULT_STATE_MODE","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","checkClickable","sizeX","useAdaptivity","needRipple","useMaybeNeedRipple","useRipple","clicks","rippleEvents","handlers","mergeCalls","typeProps","Component","type","Clickable","classNames","SizeType","REGULAR","hoverClassName","hoverClass","activeClassName","activeClass","Ripple"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;sBAjCc;+BACG;4BACL;4BACE;2BAC+B;wBACJ;uBACkB;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUO,MAAMN,WAAW;QAAC,EACvBO,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYC,yBAAkB,EAC9BC,aAAaD,yBAAkB,EAC/BE,aAAa,EACbC,eAAe,EAED,WADXC;QAPHR;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,cAAcC,IAAAA,yBAAc,EAACF;IAEnC,MAAM,EAAEG,QAAQ,MAAM,EAAEb,UAAU,EAAE,GAAGc,IAAAA,4BAAa;IAEpD,MAAMC,aAAaC,IAAAA,0BAAkB,EAACT,YAAYP;IAClD,MAAoCiB,aAAAA,IAAAA,iBAAS,EAACF,YAAYf,aAApD,EAAEkB,MAAM,EAAmB,GAAGD,YAAjBE,4CAAiBF;QAA5BC;;IAER,MAAME,WAAWC,IAAAA,sBAAU,EAACF,cAAc;QACxCX;QACAC;IACF;IAEA,MAAMa,YAAYZ,UAAUa,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,sBAACC,oBAAS;QACRvB,eAAewB,IAAAA,gBAAU,EACvBxB,+BAEAW,UAAUc,oBAAQ,CAACC,OAAO,IAAIhC,eAAe,CAACiB,MAAM,EACpDV,qBAAqB,kDACrBJ,oBAAoBC;QAEtB6B,gBAAgBC,IAAAA,iBAAU,EAACzB;QAC3B0B,iBAAiBC,IAAAA,kBAAW,EAACzB;OACzBe,WACAF,UACAV;;YAEHN;YACAO,eAAgBN,CAAAA,cAAc,gBAAgBE,eAAe,YAAW,mBACvE,qBAAC0B,cAAM;gBAAClB,YAAYA;gBAAYG,QAAQA;;;;AAIhD"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles['Tappable--hasPointer-none'];\n    case false:\n      return styles['Tappable--hasPointer-false'];\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles['Tappable'],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["Tappable","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","baseClassName","borderRadiusMode","children","hoverMode","DEFAULT_STATE_MODE","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","checkClickable","sizeX","useAdaptivity","needRipple","useMaybeNeedRipple","useRipple","clicks","rippleEvents","handlers","mergeCalls","typeProps","Component","type","Clickable","classNames","SizeType","REGULAR","hoverClassName","hoverClass","activeClassName","activeClass","Ripple"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;sBAjCc;+BACG;4BACL;4BACE;2BAC+B;wBACJ;uBACkB;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAUO,MAAMN,WAAW;QAAC,EACvBO,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYC,yBAAkB,EAC9BC,aAAaD,yBAAkB,EAC/BE,aAAa,EACbC,eAAe,EAED,WADXC;QAPHR;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,cAAcC,IAAAA,yBAAc,EAACF;IAEnC,MAAM,EAAEG,QAAQ,MAAM,EAAEb,UAAU,EAAE,GAAGc,IAAAA,4BAAa;IAEpD,MAAMC,aAAaC,IAAAA,0BAAkB,EAACT,YAAYP;IAClD,MAAoCiB,aAAAA,IAAAA,iBAAS,EAACF,YAAYf,aAApD,EAAEkB,MAAM,EAAmB,GAAGD,YAAjBE,4CAAiBF;QAA5BC;;IAER,MAAME,WAAWC,IAAAA,sBAAU,EAACF,cAAc;QACxCX;QACAC;IACF;IAEA,MAAMa,YAAYZ,UAAUa,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,sBAACC,oBAAS;QACRvB,eAAewB,IAAAA,gBAAU,EACvBxB,+BAEAW,UAAUc,oBAAQ,CAACC,OAAO,IAAIhC,eAAe,CAACiB,MAAM,EACpDV,qBAAqB,kDACrBJ,oBAAoBC;QAEtB6B,gBAAgBC,IAAAA,iBAAU,EAACzB;QAC3B0B,iBAAiBC,IAAAA,kBAAW,EAACzB;OACzBe,WACAF,UACAV;;YAEHN;YACAO,eAAgBN,CAAAA,cAAc,gBAAgBE,eAAe,YAAW,mBACvE,qBAAC0B,cAAM;gBAAClB,YAAYA;gBAAYG,QAAQA;;;;AAIhD"}

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

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,KAAK,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAwB,CAAC;AAQ1D;;GAEG;AACH,wBAAgB,UAAU,CAAC,SAAS,GAAE,gBAAqC,UAI1E;AAQD;;GAEG;AACH,wBAAgB,WAAW,CAAC,UAAU,GAAE,gBAAqC,UAI5E"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,KAAK,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAwB,CAAC;AAQ1D;;GAEG;AACH,wBAAgB,UAAU,CAAC,SAAS,GAAE,gBAAqC,GAAG,MAAM,CAInF;AAQD;;GAEG;AACH,wBAAgB,WAAW,CAAC,UAAU,GAAE,gBAAqC,GAAG,MAAM,CAIrF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' | 'background' | 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateModeLiteral;\n\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateModeLiteral;\n}\n\n/**\n * Состояние по умолчанию\n */\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n  background: styles['Tappable--hovered-background'],\n  opacity: styles['Tappable--hovered-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesHovered[hoverMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n  background: styles['Tappable--activated-background'],\n  opacity: styles['Tappable--activated-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesActivated[activeMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["DEFAULT_STATE_MODE","activeClass","hoverClass","stylesHovered","background","opacity","none","hoverMode","presetClass","undefined","stylesActivated","activeMode"],"mappings":";;;;;;;;;;;IAqBaA,kBAAkB;eAAlBA;;IA0BGC,WAAW;eAAXA;;IAfAC,UAAU;eAAVA;;;AAXT,MAAMF,qBAAgC;AAE7C,MAAMG,gBAAwC;IAC5CC,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASJ,WAAWK,YAA8BP,kBAAkB;IACzE,MAAMQ,cAAcL,aAAa,CAACI,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CN,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASL,YAAYU,aAA+BX,kBAAkB;IAC3E,MAAMQ,cAAcE,eAAe,CAACC,WAAW;IAE/C,OAAOH,gBAAgBC,YAAYD,cAAcG;AACnD"}
+{"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' | 'background' | 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateModeLiteral;\n\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateModeLiteral;\n}\n\n/**\n * Состояние по умолчанию\n */\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n  background: styles['Tappable--hovered-background'],\n  opacity: styles['Tappable--hovered-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE): string {\n  const presetClass = stylesHovered[hoverMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n  background: styles['Tappable--activated-background'],\n  opacity: styles['Tappable--activated-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE): string {\n  const presetClass = stylesActivated[activeMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["DEFAULT_STATE_MODE","activeClass","hoverClass","stylesHovered","background","opacity","none","hoverMode","presetClass","undefined","stylesActivated","activeMode"],"mappings":";;;;;;;;;;;IAqBaA,kBAAkB;eAAlBA;;IA0BGC,WAAW;eAAXA;;IAfAC,UAAU;eAAVA;;;AAXT,MAAMF,qBAAgC;AAE7C,MAAMG,gBAAwC;IAC5CC,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASJ,WAAWK,YAA8BP,kBAAkB;IACzE,MAAMQ,cAAcL,aAAa,CAACI,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CN,UAAU;IACVC,OAAO;IACPC,MAAM;AACR;AAKO,SAASL,YAAYU,aAA+BX,kBAAkB;IAC3E,MAAMQ,cAAcE,eAAe,CAACC,WAAW;IAE/C,OAAOH,gBAAgBC,YAAYD,cAAcG;AACnD"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
-export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, HasAlign, Pick<FormFieldProps, 'status' | 'mode'> {
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, HasAlign, FormFieldProps {
     grow?: boolean;
     onResize?: (el: HTMLTextAreaElement) => void;
     defaultValue?: string;
@@ -9,5 +9,5 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-export declare const Textarea: ({ grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange, align, mode, ...restProps }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange, align, mode, after, before, afterAlign, beforeAlign, ...restProps }: TextareaProps) => React.ReactNode;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/cjs/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,2HAclB,aAAa,4CAkCf,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAUnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,QAAQ,EACR,cAAc;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,mKAkBlB,aAAa,KAAG,KAAK,CAAC,SAsCxB,CAAC"}

package/dist/cjs/components/Textarea/Textarea.js

@@ -26,7 +26,7 @@ const sizeYClassNames = {
     ['compact']: "vkuiTextarea--sizeY-compact"
 };
 const Textarea = (_param)=>{
-    var { grow = true, style, onResize, className, getRootRef, getRef, rows = 2, maxHeight, status, onChange, align, mode } = _param, restProps = _object_without_properties._(_param, [
+    var { grow = true, style, onResize, className, getRootRef, getRef, rows = 2, maxHeight, status, onChange, align, mode, after, before, afterAlign, beforeAlign } = _param, restProps = _object_without_properties._(_param, [
         "grow",
         "style",
         "onResize",
@@ -38,7 +38,11 @@ const Textarea = (_param)=>{
         "status",
         "onChange",
         "align",
-        "mode"
+        "mode",
+        "after",
+        "before",
+        "afterAlign",
+        "beforeAlign"
     ]);
     const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const [refResizeTextarea, resize] = (0, _useResizeTextarea.useResizeTextarea)(onResize, grow);
@@ -54,6 +58,10 @@ const Textarea = (_param)=>{
         disabled: restProps.disabled,
         status: status,
         mode: mode,
+        after: after,
+        before: before,
+        afterAlign: afterAlign,
+        beforeAlign: beforeAlign,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnstyledTextField.UnstyledTextField, _object_spread_props._(_object_spread._({}, restProps), {
             as: "textarea",
             style: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  ['compact']: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    HasAlign,\n    Pick<FormFieldProps, 'status' | 'mode'> {\n  grow?: boolean;\n  onResize?: (el: HTMLTextAreaElement) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  ...restProps\n}: TextareaProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n  const elementRef = useExternRef(getRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, sizeY]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles['Textarea--align-right'],\n        align === 'center' && styles['Textarea--align-center'],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"textarea\"\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        onChange={callMultiple(onChange, resize)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Textarea","sizeYClassNames","none","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","restProps","sizeY","useAdaptivity","refResizeTextarea","resize","useResizeTextarea","elementRef","useExternRef","React","useEffect","FormField","classNames","disabled","UnstyledTextField","as","callMultiple"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;iEA/BU;sBACI;+BACG;8BACD;8BACA;2BAEa;mCACR;mCACA;AAGlC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAiBO,MAAMF,WAAW;QAAC,EACvBG,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EAEU,WADXC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAM,CAACC,mBAAmBC,OAAO,GAAGC,IAAAA,oCAAiB,EAACf,UAAUF;IAChE,MAAMkB,aAAaC,IAAAA,0BAAY,EAACd,QAAQU;IAExCK,OAAMC,SAAS,CAACL,QAAQ;QAACA;QAAQH;KAAM;IAEvC,qBACE,qBAACS,oBAAS;QACRnB,WAAWoB,IAAAA,gBAAU,kBAEnBV,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CH,UAAU,wCACVA,UAAU,0CACVP;QAEFF,OAAOA;QACPG,YAAYA;QACZoB,UAAUZ,UAAUY,QAAQ;QAC5BhB,QAAQA;QACRG,MAAMA;kBAEN,cAAA,qBAACc,oCAAiB,8CACZb;YACJc,IAAG;YACHzB,OAAO;gBAAEM;YAAU;YACnBD,MAAMA;YACNH,SAAS;YACTM,UAAUkB,IAAAA,0BAAY,EAAClB,UAAUO;YACjCZ,YAAYc;;;AAIpB"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  ['compact']: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    HasAlign,\n    FormFieldProps {\n  grow?: boolean;\n  onResize?: (el: HTMLTextAreaElement) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  after,\n  before,\n  afterAlign,\n  beforeAlign,\n  ...restProps\n}: TextareaProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n  const elementRef = useExternRef(getRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, sizeY]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles['Textarea--align-right'],\n        align === 'center' && styles['Textarea--align-center'],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n      after={after}\n      before={before}\n      afterAlign={afterAlign}\n      beforeAlign={beforeAlign}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"textarea\"\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        onChange={callMultiple(onChange, resize)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Textarea","sizeYClassNames","none","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","restProps","sizeY","useAdaptivity","refResizeTextarea","resize","useResizeTextarea","elementRef","useExternRef","React","useEffect","FormField","classNames","disabled","UnstyledTextField","as","callMultiple"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;iEA/BU;sBACI;+BACG;8BACD;8BACA;2BAEa;mCACR;mCACA;AAGlC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAiBO,MAAMF,WAAW;QAAC,EACvBG,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EAEG,WADXC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAM,CAACC,mBAAmBC,OAAO,GAAGC,IAAAA,oCAAiB,EAACnB,UAAUF;IAChE,MAAMsB,aAAaC,IAAAA,0BAAY,EAAClB,QAAQc;IAExCK,OAAMC,SAAS,CAACL,QAAQ;QAACA;QAAQH;KAAM;IAEvC,qBACE,qBAACS,oBAAS;QACRvB,WAAWwB,IAAAA,gBAAU,kBAEnBV,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7CP,UAAU,wCACVA,UAAU,0CACVP;QAEFF,OAAOA;QACPG,YAAYA;QACZwB,UAAUZ,UAAUY,QAAQ;QAC5BpB,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;kBAEb,cAAA,qBAACc,oCAAiB,8CACZb;YACJc,IAAG;YACH7B,OAAO;gBAAEM;YAAU;YACnBD,MAAMA;YACNH,SAAS;YACTM,UAAUsB,IAAAA,0BAAY,EAACtB,UAAUW;YACjChB,YAAYkB;;;AAIpB"}

package/dist/cjs/components/Textarea/useResizeTextarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeTextarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/useResizeTextarea.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC,GAAG,SAAS,EACzD,IAAI,UAAO,+DA8BZ"}
+{"version":3,"file":"useResizeTextarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/useResizeTextarea.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC,GAAG,SAAS,EACzD,IAAI,UAAO,GACV,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC,CA6B7D"}

package/dist/cjs/components/Textarea/useResizeTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/useResizeTextarea.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useResizeTextarea(\n  onResize: ((el: HTMLTextAreaElement) => void) | undefined,\n  grow = true,\n) {\n  const elementRef = React.useRef<HTMLTextAreaElement>(null);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resizeElement = React.useCallback(\n    (el: HTMLTextAreaElement) => {\n      if (grow && el.offsetParent) {\n        el.style.height = '';\n        el.style.height = `${el.scrollHeight}px`;\n\n        if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n          onResize(el);\n          currentScrollHeight.current = el.scrollHeight;\n        }\n      }\n    },\n    [grow, onResize],\n  );\n\n  const resize = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) {\n      return;\n    }\n\n    resizeElement(el);\n  }, [elementRef, resizeElement]);\n\n  return [elementRef, resize] as const;\n}\n"],"names":["useResizeTextarea","onResize","grow","elementRef","React","useRef","currentScrollHeight","resizeElement","useCallback","el","offsetParent","style","height","scrollHeight","current","resize"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;iEAFO;AAEhB,SAASA,kBACdC,QAAyD,EACzDC,OAAO,IAAI;IAEX,MAAMC,aAAaC,OAAMC,MAAM,CAAsB;IACrD,MAAMC,sBAAsBF,OAAMC,MAAM;IAExC,MAAME,gBAAgBH,OAAMI,WAAW,CACrC,CAACC;QACC,IAAIP,QAAQO,GAAGC,YAAY,EAAE;YAC3BD,GAAGE,KAAK,CAACC,MAAM,GAAG;YAClBH,GAAGE,KAAK,CAACC,MAAM,GAAG,CAAC,EAAEH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKP,oBAAoBQ,OAAO,IAAIb,UAAU;gBAC/DA,SAASQ;gBACTH,oBAAoBQ,OAAO,GAAGL,GAAGI,YAAY;YAC/C;QACF;IACF,GACA;QAACX;QAAMD;KAAS;IAGlB,MAAMc,SAASX,OAAMI,WAAW,CAAC;QAC/B,MAAMC,KAAKN,WAAWW,OAAO;QAC7B,IAAI,CAACL,IAAI;YACP;QACF;QAEAF,cAAcE;IAChB,GAAG;QAACN;QAAYI;KAAc;IAE9B,OAAO;QAACJ;QAAYY;KAAO;AAC7B"}
+{"version":3,"sources":["../../../../src/components/Textarea/useResizeTextarea.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useResizeTextarea(\n  onResize: ((el: HTMLTextAreaElement) => void) | undefined,\n  grow = true,\n): readonly [React.RefObject<HTMLTextAreaElement>, () => void] {\n  const elementRef = React.useRef<HTMLTextAreaElement>(null);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resizeElement = React.useCallback(\n    (el: HTMLTextAreaElement) => {\n      if (grow && el.offsetParent) {\n        el.style.height = '';\n        el.style.height = `${el.scrollHeight}px`;\n\n        if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n          onResize(el);\n          currentScrollHeight.current = el.scrollHeight;\n        }\n      }\n    },\n    [grow, onResize],\n  );\n\n  const resize = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) {\n      return;\n    }\n\n    resizeElement(el);\n  }, [elementRef, resizeElement]);\n\n  return [elementRef, resize];\n}\n"],"names":["useResizeTextarea","onResize","grow","elementRef","React","useRef","currentScrollHeight","resizeElement","useCallback","el","offsetParent","style","height","scrollHeight","current","resize"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;iEAFO;AAEhB,SAASA,kBACdC,QAAyD,EACzDC,OAAO,IAAI;IAEX,MAAMC,aAAaC,OAAMC,MAAM,CAAsB;IACrD,MAAMC,sBAAsBF,OAAMC,MAAM;IAExC,MAAME,gBAAgBH,OAAMI,WAAW,CACrC,CAACC;QACC,IAAIP,QAAQO,GAAGC,YAAY,EAAE;YAC3BD,GAAGE,KAAK,CAACC,MAAM,GAAG;YAClBH,GAAGE,KAAK,CAACC,MAAM,GAAG,CAAC,EAAEH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKP,oBAAoBQ,OAAO,IAAIb,UAAU;gBAC/DA,SAASQ;gBACTH,oBAAoBQ,OAAO,GAAGL,GAAGI,YAAY;YAC/C;QACF;IACF,GACA;QAACX;QAAMD;KAAS;IAGlB,MAAMc,SAASX,OAAMI,WAAW,CAAC;QAC/B,MAAMC,KAAKN,WAAWW,OAAO;QAC7B,IAAI,CAACL,IAAI;YACP;QACF;QAEAF,cAAcE;IAChB,GAAG;QAACN;QAAYI;KAAc;IAE9B,OAAO;QAACJ;QAAYY;KAAO;AAC7B"}

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

@@ -18,5 +18,5 @@ export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProp
  *
  * @see https://vkcom.github.io/VKUI/#/ToolButton
  */
-export declare const ToolButton: ({ mode, appearance, direction, onClick, className, children, IconCompact, IconRegular, rounded, ...restProps }: ToolButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolButton: ({ mode, appearance, direction, onClick, className, children, IconCompact, IconRegular, rounded, ...restProps }: ToolButtonProps) => React.ReactNode;
 //# sourceMappingURL=ToolButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,KAAG,KAAK,CAAC,SA0B1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  regular: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при передаче `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles['ToolButton__text']}>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["ToolButton","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","mode","appearance","direction","onClick","noop","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","useAdaptivity","hasChildren","hasReactNode","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","classNames","AdaptiveIconRenderer","span"],"mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;sBAlDkC;+BACjB;sCAIvB;0BACiC;AAGxC,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAqBO,MAAMd,aAAa;QAAC,EACzBe,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUC,UAAI,EACdC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHV;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcC,IAAAA,kBAAY,EAACR;IAEjC,qBACE,sBAACS,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBjB,SAASA;QACTE,WAAWgB,IAAAA,gBAAU,EACnBhB,6BAEAI,WAAW,CAACI,0CACZ3B,UAAU,CAACc,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BP,eAAe,CAACQ,UAAU,EAC1BS,UAAU,aAAad,eAAe,CAACc,MAAM;OAE3CD;;0BAEJ,qBAACY,0CAAoB;gBAACf,aAAaA;gBAAaC,aAAaA;;YAC5DK,6BAAe,qBAACU;gBAAKlB,SAAS;0BAA+BC;;;;AAGpE"}
+{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  regular: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при передаче `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles['ToolButton__text']}>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["ToolButton","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","mode","appearance","direction","onClick","noop","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","useAdaptivity","hasChildren","hasReactNode","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","classNames","AdaptiveIconRenderer","span"],"mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;sBAlDkC;+BACjB;sCAIvB;0BACiC;AAGxC,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAqBO,MAAMd,aAAa;QAAC,EACzBe,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUC,UAAI,EACdC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHV;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcC,IAAAA,kBAAY,EAACR;IAEjC,qBACE,sBAACS,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBjB,SAASA;QACTE,WAAWgB,IAAAA,gBAAU,EACnBhB,6BAEAI,WAAW,CAACI,0CACZ3B,UAAU,CAACc,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BP,eAAe,CAACQ,UAAU,EAC1BS,UAAU,aAAad,eAAe,CAACc,MAAM;OAE3CD;;0BAEJ,qBAACY,0CAAoB;gBAACf,aAAaA;gBAAaC,aAAaA;;YAC5DK,6BAAe,qBAACU;gBAAKlB,SAAS;0BAA+BC;;;;AAGpE"}

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { type FloatingComponentProps } from '../../lib/floating';
 import { type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrowHeight' | 'arrowPadding' | 'hoverDelay' | 'placement' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'onShownChange' | 'hideWhenReferenceHidden' | 'children' | 'zIndex' | 'usePortal' | 'onPlacementChange' | 'disableFlipMiddleware'>;
@@ -26,6 +27,6 @@ export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTool
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ placement: placementProp, arrowPadding, arrowHeight, offsetByMainAxis, offsetByCrossAxis, hideWhenReferenceHidden, disableFlipMiddleware, defaultShown, shown: shownProp, onShownChange, hoverDelay, enableInteractive, disableArrow, disableCloseAfterClick, children, usePortal, id: idProp, getRootRef, text, header, appearance, style: styleProp, className, zIndex, onPlacementChange, ...popperProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ placement: placementProp, arrowPadding, arrowHeight, offsetByMainAxis, offsetByCrossAxis, hideWhenReferenceHidden, disableFlipMiddleware, defaultShown, shown: shownProp, onShownChange, hoverDelay, enableInteractive, disableArrow, disableCloseAfterClick, children, usePortal, id: idProp, getRootRef, text, header, appearance, style: styleProp, className, zIndex, onPlacementChange, ...popperProps }: TooltipProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/cjs/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,sBAAsB,EAK5B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGhF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,eAAe,GACf,yBAAyB,GACzB,UAAU,GACV,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,6BAA6B,EAAE,uBAAuB;IAC1F;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,oZAsCjB,YAAY,4CA2Fd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,KAAK,sBAAsB,EAK5B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAGhF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,eAAe,GACf,yBAAyB,GACzB,UAAU,GACV,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,6BAA6B,EAAE,uBAAuB;IAC1F;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,oZAsCjB,YAAY,KAAG,KAAK,CAAC,SA2FvB,CAAC"}