@vkontakte/vkui 7.2.0 → 7.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AASxF,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACrE,IAAI,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,kCAA0C,UAAU,KAAG,KAAK,CAAC,SAQlF,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AASxF,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACrE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,kCAA0C,UAAU,KAAG,KAAK,CAAC,SAQlF,CAAC"}

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles.modeNew,\n  prominent: styles.modeProminent,\n};\n\nexport interface BadgeProps extends RootComponentProps<HTMLSpanElement> {\n  mode?: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles.host, 'vkuiInternalBadge', stylesMode[mode])}\n    {...restProps}\n  >\n    {children && <VisuallyHidden>{children}</VisuallyHidden>}\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","VisuallyHidden","stylesMode","new","prominent","Badge","mode","children","restProps","Component","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AAMA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EAAEC,OAAO,KAAK,EAAEC,QAAQ,EAA4B,WAAvBC;QAA3BF;QAAcC;;yBACpC,KAACP;QACCS,WAAU;QACVC,eAAeX,8BAAwB,qBAAqBG,UAAU,CAACI,KAAK;OACxEE;kBAEHD,0BAAY,KAACN;sBAAgBM;;;EAEhC"}
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles.modeNew,\n  prominent: styles.modeProminent,\n};\n\nexport interface BadgeProps extends RootComponentProps<HTMLSpanElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles.host, 'vkuiInternalBadge', stylesMode[mode])}\n    {...restProps}\n  >\n    {children && <VisuallyHidden>{children}</VisuallyHidden>}\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","VisuallyHidden","stylesMode","new","prominent","Badge","mode","children","restProps","Component","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AASA;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EAAEC,OAAO,KAAK,EAAEC,QAAQ,EAA4B,WAAvBC;QAA3BF;QAAcC;;yBACpC,KAACP;QACCS,WAAU;QACVC,eAAeX,8BAAwB,qBAAqBG,UAAU,CAACI,KAAK;OACxEE;kBAEHD,0BAAY,KAACN;sBAAgBM;;;EAEhC"}

package/dist/components/Banner/Banner.d.ts

@@ -5,20 +5,23 @@ export interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {
      * Тип баннера.
      */
     mode?: 'tint' | 'image';
+    /**
+     * Размер баннера.
+     */
     size?: 's' | 'm';
     /**
      * Тип действия в правой части баннера.
      *
-     * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.
-     * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
+     * - `dismiss` – отображается иконка крестика, при нажатии на неё сработает свойство `onDismiss`.
+     * - `chevron` – отображается иконка шеврона, которая подразумевает, что при нажатии на баннер можно куда-то перейти.
      */
     after?: 'dismiss' | 'chevron' | React.ReactNode;
     /**
-     * Срабатывает при клике на иконку крестика при `after="dismiss"`.
+     * Срабатывает при нажатии на иконку крестика при `after="dismiss"`.
      */
     onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
     /**
-     * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий
+     * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.
      */
     dismissLabel?: string;
     /**
@@ -62,7 +65,7 @@ export interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {
      * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:
      *
      * - `gap="m" mode="horizontal" stretched`
-     * - `gap="m" mode="vertical" stretched`
+     * - `gap="m" mode="vertical" stretched`.
      */
     actions?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IACxE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,uKAgBpB,WAAW,KAAG,KAAK,CAAC,SAiFtB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IACxE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,uKAgBpB,WAAW,KAAG,KAAK,CAAC,SAiFtB,CAAC"}

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при клике на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","className","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAsElD;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EAEG,WADTC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWxB;IAEjB,MAAMyB,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,MAAMuB,oBAAoBhB,SAAS,MAAML,OAAOD;IAEhD,MAAMuB,iBAAiBnB,SAAS,UAAUX,oBAAoBD;IAE9D,MAAMgC,wBACJ;;YACGpB,SAAS,WAAWU,4BACnB,KAACW;gBAAIC,aAAW;gBAACC,SAAS;0BACvBb;;YAIJP,wBAAU,KAACkB;gBAAIE,SAAS;0BAAkBpB;;0BAE3C,MAACkB;gBAAIE,SAAS;;oBACXhC,aAAae,wBACZ,KAACW;wBAAiBH,WAAU;wBAAMU,QAAO;wBAAIC,OAAOvB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJf,aAAagB,2BACZ,KAACW;wBAAkBJ,WAAU;wBAAMS,SAAS;kCACzChB;;oBAGJhB,aAAaiB,gCACZ,KAACX;wBAAKiB,WAAU;wBAAMS,SAAS;kCAC5Bf;;oBAGJjB,aAAaoB,YAAY1B,MAAMyC,QAAQ,CAACC,KAAK,CAAChB,WAAW,mBACxD,KAACU;wBAAIE,SAAS;kCAAmBZ;;;;;;IAMzC,MAAMiB,WAA4C;QAChDC,uBAAS,KAAC1C;YAAcoC,SAAS;;QACjCO,uBACE,KAACrC;YACCsC,OAAOlB;YACPU,SAAS;YACTS,SAASpB;YACTqB,WAAU;YACVC,WAAW;sBAEVlB,aAAa,sBAAQ,KAACG,oCAAoB,KAACjC;;IAGlD;IAEA,MAAMkB,QAAQC,2BACZ,KAACgB;QAAIE,SAAS;kBACX,OAAOlB,cAAc,WAAWuB,QAAQ,CAACvB,UAAU,GAAGA;;IAI3D,MAAM8B,cAAcpB,UAAUiB,OAAO,IAAIjB,UAAUqB,cAAc,IAAIrB,UAAUsB,IAAI;IAEnF,qBACE,MAAC3C;QACCoB,WAAWA,aAAc,CAAA,CAACqB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYvB,aAAa,QAAQ,YAAY;QAC7CwB,eAAelD,+BAEb0B,aAAa,4BACbhB,SAAS,oCACTE,SAAS,4BACTF,SAAS,WAAWC,eAAe;OAEjCc;;YAEHK;YACAhB;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends Omit<TappableProps, 'title' | 'size'> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  /**\n   * Размер баннера.\n   */\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при нажатии на неё сработает свойство `onDismiss`.\n   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при нажатии на баннер можно куда-то перейти.\n   */\n  after?: 'dismiss' | 'chevron' | React.ReactNode;\n  /**\n   * Срабатывает при нажатии на иконку крестика при `after=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительный подзаголовок баннера.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  after: afterProp,\n  title,\n  subtitle,\n  extraSubtitle,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  Component,\n  ...restProps\n}: BannerProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheadTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles.bg}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        {hasReactNode(title) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {title}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subtitle) && (\n          <SubheadTypography Component=\"div\" className={styles.subtitle}>\n            {subtitle}\n          </SubheadTypography>\n        )}\n        {hasReactNode(extraSubtitle) && (\n          <Text Component=\"div\" className={styles.extraSubtitle}>\n            {extraSubtitle}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles.actions}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  const afterMap: Record<string, React.ReactNode> = {\n    chevron: <Icon24Chevron className={styles.chevron} />,\n    dismiss: (\n      <IconButton\n        label={dismissLabel}\n        className={styles.dismiss}\n        onClick={onDismiss}\n        hoverMode=\"opacity\"\n        hasActive={false}\n      >\n        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n      </IconButton>\n    ),\n  };\n\n  const after = afterProp && (\n    <div className={styles.after}>\n      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}\n    </div>\n  );\n\n  const isClickable = restProps.onClick || restProps.onClickCapture || restProps.href;\n\n  return (\n    <Tappable\n      Component={Component || (!isClickable ? 'section' : undefined)}\n      activeMode={platform === 'ios' ? 'opacity' : 'background'}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'image' && styles.modeImage,\n        size === 'm' && styles.sizeM,\n        mode === 'image' && imageTheme === 'dark' && styles.inverted,\n      )}\n      {...restProps}\n    >\n      {content}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","after","afterProp","title","subtitle","extraSubtitle","children","background","actions","onDismiss","dismissLabel","Component","restProps","platform","HeaderTypography","SubheadTypography","IconDismissIOS","content","div","aria-hidden","className","weight","level","Children","count","afterMap","chevron","dismiss","label","onClick","hoverMode","hasActive","isClickable","onClickCapture","href","undefined","activeMode","baseClassName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAyElD;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,OAAOC,SAAS,EAChBC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EACvBC,SAAS,EAEG,WADTC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWxB;IAEjB,MAAMyB,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,MAAMuB,oBAAoBhB,SAAS,MAAML,OAAOD;IAEhD,MAAMuB,iBAAiBnB,SAAS,UAAUX,oBAAoBD;IAE9D,MAAMgC,wBACJ;;YACGpB,SAAS,WAAWU,4BACnB,KAACW;gBAAIC,aAAW;gBAACC,SAAS;0BACvBb;;YAIJP,wBAAU,KAACkB;gBAAIE,SAAS;0BAAkBpB;;0BAE3C,MAACkB;gBAAIE,SAAS;;oBACXhC,aAAae,wBACZ,KAACW;wBAAiBH,WAAU;wBAAMU,QAAO;wBAAIC,OAAOvB,SAAS,MAAM,MAAM;kCACtEI;;oBAGJf,aAAagB,2BACZ,KAACW;wBAAkBJ,WAAU;wBAAMS,SAAS;kCACzChB;;oBAGJhB,aAAaiB,gCACZ,KAACX;wBAAKiB,WAAU;wBAAMS,SAAS;kCAC5Bf;;oBAGJjB,aAAaoB,YAAY1B,MAAMyC,QAAQ,CAACC,KAAK,CAAChB,WAAW,mBACxD,KAACU;wBAAIE,SAAS;kCAAmBZ;;;;;;IAMzC,MAAMiB,WAA4C;QAChDC,uBAAS,KAAC1C;YAAcoC,SAAS;;QACjCO,uBACE,KAACrC;YACCsC,OAAOlB;YACPU,SAAS;YACTS,SAASpB;YACTqB,WAAU;YACVC,WAAW;sBAEVlB,aAAa,sBAAQ,KAACG,oCAAoB,KAACjC;;IAGlD;IAEA,MAAMkB,QAAQC,2BACZ,KAACgB;QAAIE,SAAS;kBACX,OAAOlB,cAAc,WAAWuB,QAAQ,CAACvB,UAAU,GAAGA;;IAI3D,MAAM8B,cAAcpB,UAAUiB,OAAO,IAAIjB,UAAUqB,cAAc,IAAIrB,UAAUsB,IAAI;IAEnF,qBACE,MAAC3C;QACCoB,WAAWA,aAAc,CAAA,CAACqB,cAAc,YAAYG,SAAQ;QAC5DC,YAAYvB,aAAa,QAAQ,YAAY;QAC7CwB,eAAelD,+BAEb0B,aAAa,4BACbhB,SAAS,oCACTE,SAAS,4BACTF,SAAS,WAAWC,eAAe;OAEjCc;;YAEHK;YACAhB;;;AAGP,EAAE"}

package/dist/components/Button/Button.d.ts

@@ -4,14 +4,41 @@ import { type TappableProps } from '../Tappable/Tappable';
 import '../Tappable/Tappable.module.css';
 import '../Spinner/Spinner.module.css';
 export interface VKUIButtonProps extends HasAlign {
+    /**
+     * Режим отображения кнопки.
+     */
     mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';
+    /**
+     * Цветовая схема кнопки.
+     */
     appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';
+    /**
+     * Размер кнопки.
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * Растягивает кнопку на всю ширину контейнера.
+     */
     stretched?: boolean;
+    /**
+     * Контент, отображаемый перед основным содержимым кнопки.
+     */
     before?: React.ReactNode;
+    /**
+     * Контент, отображаемый после основного содержимого кнопки.
+     */
     after?: React.ReactNode;
+    /**
+     * Включает состояние загрузки (отображает спиннер).
+     */
     loading?: boolean;
+    /**
+     * Отключает анимацию спиннера загрузки.
+     */
     disableSpinnerAnimation?: boolean;
+    /**
+     * Добавляет скругленные углы кнопке.
+     */
     rounded?: boolean;
 }
 export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AAoCvC,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACjE,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,mBAAmB,CAAC;IAC9F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,eAAe;CAAG;AAEpF;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,+JAgBpB,WAAW,KAAG,KAAK,CAAC,SAoEtB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AAoCvC,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACjE;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,mBAAmB,CAAC;IAC9F;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,eAAe;CAAG;AAEpF;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,+JAgBpB,WAAW,KAAG,KAAK,CAAC,SAoEtB,CAAC"}

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","right","sizeYClassNames","none","regular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","baseClassName","className","disableAnimation","noColor","span","role","data-testid","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAKpE,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,IAAI;AACN;AAEA,MAAMC,mBAAmB;IACvB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,mBAAmB;AACrB;AAEA,MAAMC,cAAc;IAClBC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAgBA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,GAAG,EACVC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,QAAQ,EAEI,WADTC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAc,CAACV,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGvC;IAC3B,MAAMwC,WAAWvC;IAEjB,qBACE,MAACE;QACCsC,SAAS;QACTC,UAAU;QACVC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBV,UAAUJ,WAAWI;OACjBC;QACJJ,SAASD,UAAUe,YAAYd;QAC/Be,eAAejD,+BAEbM,UAAU,CAACkB,KAAK,EAChBd,UAAU,CAACe,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BE,UAAU,YAAYX,WAAW,CAACW,MAAM,EACxCa,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CC,aAAa,4BACbf,sCACAY,eAAe,CAACZ,uCAChBM,kCACAG,kCACAC;QAEFL,YAAYA;;YAEXC,yBACC,KAAC7B;gBACCoB,MAAK;gBACL0B,SAAS;gBACTC,kBAAkBhB;gBAClBiB,OAAO;;0BAGX,MAACC;gBAAKH,SAAS;;oBACZjD,aAAa6B,yBACZ,KAACuB;wBACCH,SAAS;wBACTI,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWV;kCAEzDlB;;oBAGJ7B,aAAa4B,2BACZ,KAACwB;wBACCH,SAAS;wBACTK,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaV;kCAE3DnB;;oBAGJ5B,aAAa8B,wBACZ,KAACsB;wBACCH,SAAS;wBACTI,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUV;kCAExDjB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport '../Tappable/Tappable.module.css';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n  link: styles.modeLink,\n};\n\nconst stylesAppearance = {\n  'accent': styles.appearanceAccent,\n  'positive': styles.appearancePositive,\n  'negative': styles.appearanceNegative,\n  'neutral': styles.appearanceNeutral,\n  'overlay': styles.appearanceOverlay,\n  'accent-invariable': styles.appearanceAccentInvariable,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  right: styles.alignRight,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  /**\n   * Режим отображения кнопки.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  /**\n   * Цветовая схема кнопки.\n   */\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Растягивает кнопку на всю ширину контейнера.\n   */\n  stretched?: boolean;\n  /**\n   * Контент, отображаемый перед основным содержимым кнопки.\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент, отображаемый после основного содержимого кнопки.\n   */\n  after?: React.ReactNode;\n  /**\n   * Включает состояние загрузки (отображает спиннер).\n   */\n  loading?: boolean;\n  /**\n   * Отключает анимацию спиннера загрузки.\n   */\n  disableSpinnerAnimation?: boolean;\n  /**\n   * Добавляет скругленные углы кнопке.\n   */\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  disableSpinnerAnimation,\n  rounded,\n  disabled,\n  ...restProps\n}: ButtonProps): React.ReactNode => {\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      disabled={loading || disabled}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        align !== 'center' && stylesAlign[align],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        platform === 'ios' && styles.ios,\n        stretched && styles.stretched,\n        hasIconOnly && !stretched && styles.singleIcon,\n        loading && styles.loading,\n        rounded && styles.rounded,\n        disabled && styles.disabled,\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"s\"\n          className={styles.spinner}\n          disableAnimation={disableSpinnerAnimation}\n          noColor\n        />\n      )}\n      <span className={styles.in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Spinner","Tappable","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","right","sizeYClassNames","none","regular","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","disableSpinnerAnimation","rounded","disabled","restProps","hasIconOnly","Boolean","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","baseClassName","className","disableAnimation","noColor","span","role","data-testid","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAKpE,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,IAAI;AACN;AAEA,MAAMC,mBAAmB;IACvB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,mBAAmB;AACrB;AAEA,MAAMC,cAAc;IAClBC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AA2CA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,GAAG,EACVC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,QAAQ,EAEI,WADTC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAc,CAACV,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGvC;IAC3B,MAAMwC,WAAWvC;IAEjB,qBACE,MAACE;QACCsC,SAAS;QACTC,UAAU;QACVC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBV,UAAUJ,WAAWI;OACjBC;QACJJ,SAASD,UAAUe,YAAYd;QAC/Be,eAAejD,+BAEbM,UAAU,CAACkB,KAAK,EAChBd,UAAU,CAACe,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BE,UAAU,YAAYX,WAAW,CAACW,MAAM,EACxCa,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CC,aAAa,4BACbf,sCACAY,eAAe,CAACZ,uCAChBM,kCACAG,kCACAC;QAEFL,YAAYA;;YAEXC,yBACC,KAAC7B;gBACCoB,MAAK;gBACL0B,SAAS;gBACTC,kBAAkBhB;gBAClBiB,OAAO;;0BAGX,MAACC;gBAAKH,SAAS;;oBACZjD,aAAa6B,yBACZ,KAACuB;wBACCH,SAAS;wBACTI,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWV;kCAEzDlB;;oBAGJ7B,aAAa4B,2BACZ,KAACwB;wBACCH,SAAS;wBACTK,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaV;kCAE3DnB;;oBAGJ5B,aAAa8B,wBACZ,KAACsB;wBACCH,SAAS;wBACTI,MAAK;wBACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUV;kCAExDjB;;;;;;AAMb,EAAE"}

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -22,8 +22,5 @@ export interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */
-export declare const ButtonGroup: {
-    ({ mode, gap, stretched, align, ...restProps }: ButtonGroupProps): React.ReactNode;
-    displayName: string;
-};
+export declare const ButtonGroup: ({ mode, gap, stretched, align, ...restProps }: ButtonGroupProps) => React.ReactNode;
 //# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBxE,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;oDAMrB,gBAAgB,GAAG,KAAK,CAAC,SAAS;;CAcpC,CAAC"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBxE,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,+CAMzB,gBAAgB,KAAG,KAAK,CAAC,SAc3B,CAAC"}

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -31,6 +31,5 @@ const stylesAlign = {
         role: "group"
     }, restProps));
 };
-ButtonGroup.displayName = 'ButtonGroup';
 
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/components/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles.modeVertical,\n  horizontal: styles.modeHorizontal,\n};\n\nconst stylesGap = {\n  space: styles.gapSpace,\n  s: styles.gapS,\n  m: styles.gapM,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  center: styles.alignCenter,\n  right: styles.alignRight,\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps): React.ReactNode => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles.stretched,\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["classNames","RootComponent","stylesMode","vertical","horizontal","stylesGap","space","s","m","stylesAlign","left","center","right","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","role","displayName"],"mappings":";;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,aAAa;IACjBC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,YAAY;IAChBC,KAAK;IACLC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAuBA;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EAEG,WADdC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,KAAChB;QACCkB,eAAenB,oCAEbE,UAAU,CAACY,KAAK,EAChBC,QAAQ,UAAUV,SAAS,CAACU,IAAI,EAChCC,2CACAP,WAAW,CAACQ,MAAM;QAEpBG,MAAK;OACDF;AAGV,EAAE;AAEFL,YAAYQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles.modeVertical,\n  horizontal: styles.modeHorizontal,\n};\n\nconst stylesGap = {\n  space: styles.gapSpace,\n  s: styles.gapS,\n  m: styles.gapM,\n};\n\nconst stylesAlign = {\n  left: styles.alignLeft,\n  center: styles.alignCenter,\n  right: styles.alignRight,\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps): React.ReactNode => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles.stretched,\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","stylesMode","vertical","horizontal","stylesGap","space","s","m","stylesAlign","left","center","right","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","role"],"mappings":";;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,aAAa;IACjBC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,YAAY;IAChBC,KAAK;IACLC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAuBA;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EAEG,WADdC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,KAAChB;QACCkB,eAAenB,oCAEbE,UAAU,CAACY,KAAK,EAChBC,QAAQ,UAAUV,SAAS,CAACU,IAAI,EAChCC,2CACAP,WAAW,CAACQ,MAAM;QAEpBG,MAAK;OACDF;AAGV,EAAE"}

package/dist/components/Calendar/Calendar.d.ts

@@ -5,8 +5,14 @@ import { type CalendarHeaderProps, type CalendarHeaderTestsProps } from '../Cale
 import { type CalendarDoneButtonProps, type CalendarTimeProps, type CalendarTimeTestsProps } from '../CalendarTime/CalendarTime';
 export type CalendarTestsProps = CalendarDaysTestsProps & CalendarHeaderTestsProps & CalendarTimeTestsProps;
 export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>, Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>, Pick<CalendarHeaderProps, 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>, CalendarDoneButtonProps, CalendarTestsProps {
-    value?: Date;
-    defaultValue?: Date;
+    /**
+     * Текущая выбранная дата.
+     */
+    value?: Date | null;
+    /**
+     * Начальная дата при монтировании.
+     */
+    defaultValue?: Date | null;
     /**
      * Запрещает выбор даты в прошлом.
      * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
@@ -17,15 +23,41 @@ export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
      * Применяется, если не задано `shouldDisableDate`.
      */
     disableFuture?: boolean;
+    /**
+     * Включает выбор времени.
+     */
     enableTime?: boolean;
+    /**
+     * Отключает селекторы выбора месяца/года.
+     */
     disablePickers?: boolean;
+    /**
+     * `aria-label` для изменения дня.
+     *
+     * @deprecated Будет удалeно в **VKUI v8**.
+     * Использовалось для задания aria-label для контейнера дней в календаре.
+     * Теперь этот контейнер является таблицей (с помощью role="grid") и
+     * в aria-label рендерится текущий открытый в календаре месяц и год.
+     */
     changeDayLabel?: string;
+    /**
+     * День недели, с которого начинается неделя.
+     */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Показывать дни соседних месяцев.
+     */
     showNeighboringMonth?: boolean;
+    /**
+     * Размер календаря.
+     */
     size?: 's' | 'm';
+    /**
+     * Обработчик изменения выбранной даты.
+     */
     onChange?: (value?: Date) => void;
     /**
-     * Позволяет запретить выбор даты.
+     * Функция для проверки запрета выбора даты.
      */
     shouldDisableDate?: (value: Date) => boolean;
     /**
@@ -34,11 +66,11 @@ export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
      */
     viewDate?: Date;
     /**
-     * Изменение даты в шапке календаря.
+     * Обработчик изменения даты в шапке календаря.
      */
     onHeaderChange?: (value: Date) => void;
     /**
-     * Минимальные дата и время, которые можно выбрать
+     * Минимальные дата и время, которые можно выбрать.
      * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.
      */
     minDateTime?: Date;
@@ -48,12 +80,12 @@ export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
      */
     maxDateTime?: Date;
     /**
-     * Свойство для отображения времени в нужной таймзоне
+     * Часовой пояс для отображения даты.
      */
     timezone?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */
-export declare const Calendar: ({ getRootRef, value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn, disablePickers, changeHoursLabel, changeMinutesLabel, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, showNeighboringMonth, changeDayLabel, size, viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props }: CalendarProps) => React.ReactNode;
+export declare const Calendar: ({ getRootRef, "value": valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn, disablePickers, "aria-label": ariaLabel, changeHoursLabel, changeMinutesLabel, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, showNeighboringMonth, size, "viewDate": externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props }: CalendarProps) => React.ReactNode;
 //# sourceMappingURL=Calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,KAAK,uBAAuB,EAE5B,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AAItC,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,wBAAwB,GACxB,sBAAsB,CAAC;AAEzB,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAClF,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,GAAG,oBAAoB,CAAC,EAClE,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,CACnB,EACD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,2BAA2B,GAAG,kBAAkB,CAAC,EACtF,uBAAuB,EACvB,kBAAkB;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,ovBAgDtB,aAAa,KAAG,KAAK,CAAC,SA+JxB,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,KAAK,uBAAuB,EAE5B,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AAItC,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,wBAAwB,GACxB,sBAAsB,CAAC;AAEzB,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAClF,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,GAAG,oBAAoB,CAAC,EAClE,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,CACnB,EACD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,2BAA2B,GAAG,kBAAkB,CAAC,EACtF,uBAAuB,EACvB,kBAAkB;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,iwBAgDtB,aAAa,KAAG,KAAK,CAAC,SA0OxB,CAAC"}

package/dist/components/Calendar/Calendar.js

@@ -5,11 +5,12 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { isSameDay, isSameMonth } from "date-fns";
+import { isSameDay, isSameMonth, startOfMonth } from "date-fns";
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from "../../lib/calendar.js";
 import { convertDateFromTimeZone, convertDateToTimeZone } from "../../lib/date.js";
+import { isHTMLElement } from "../../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
@@ -20,9 +21,9 @@ const warn = warnOnce('Calendar');
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */ export const Calendar = (_param)=>{
-    var { getRootRef, value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn = 1, disablePickers, changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, changeDayLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId } = _param, props = _object_without_properties(_param, [
+    var { getRootRef, 'value': valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn = 1, disablePickers, 'aria-label': ariaLabel = 'Календарь', changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, size = 'm', 'viewDate': externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId } = _param, props = _object_without_properties(_param, [
         "getRootRef",
-        "value",
+        'value',
         "defaultValue",
         "onChange",
         "disablePast",
@@ -36,6 +37,7 @@ const warn = warnOnce('Calendar');
         "DoneButton",
         "weekStartsOn",
         "disablePickers",
+        'aria-label',
         "changeHoursLabel",
         "changeMinutesLabel",
         "prevMonthLabel",
@@ -43,9 +45,8 @@ const warn = warnOnce('Calendar');
         "changeMonthLabel",
         "changeYearLabel",
         "showNeighboringMonth",
-        "changeDayLabel",
         "size",
-        "viewDate",
+        'viewDate',
         "onHeaderChange",
         "onNextMonth",
         "onPrevMonth",
@@ -79,11 +80,11 @@ const warn = warnOnce('Calendar');
         defaultValue,
         onChange: _onChange
     });
-    const timeZonedValue = React.useMemo(()=>convertDateToTimeZone(value, timezone) || undefined, [
+    const timeZonedValue = React.useMemo(()=>convertDateToTimeZone(value, timezone), [
         timezone,
         value
     ]);
-    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
+    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, focusableDay, setFocusableDay, isDayFocused, isDayDisabled, isMonthDisabled, isYearDisabled } = useCalendar({
         value: timeZonedValue,
         disableFuture,
         disablePast,
@@ -112,18 +113,35 @@ const warn = warnOnce('Calendar');
             'ArrowUp',
             'ArrowDown',
             'ArrowLeft',
-            'ArrowRight'
+            'ArrowRight',
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown'
         ].includes(event.key)) {
             event.preventDefault();
+            const newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : timeZonedValue, event.key);
+            if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
+                setViewDate(newFocusedDay);
+            }
+            setFocusedDay(newFocusedDay);
+            setFocusableDay(newFocusedDay);
+            return;
         }
-        const newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : timeZonedValue, event.key);
-        if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
-            setViewDate(newFocusedDay);
+        if (event.key === 'Tab') {
+            setFocusedDay(undefined);
+            setFocusableDay(focusedDay);
+            return;
+        }
+        if ((event.key === 'Enter' || event.key === ' ') && isHTMLElement(event.target)) {
+            var _event_target_click, _event_target;
+            event.preventDefault();
+            (_event_target_click = (_event_target = event.target).click) === null || _event_target_click === void 0 ? void 0 : _event_target_click.call(_event_target);
         }
-        setFocusedDay(newFocusedDay);
     }, [
         focusedDay,
         setFocusedDay,
+        setFocusableDay,
         setViewDate,
         timeZonedValue,
         viewDate
@@ -137,16 +155,59 @@ const warn = warnOnce('Calendar');
             });
         }
         updateValue(actualDate);
+        setFocusedDay(actualDate);
+        setFocusableDay(actualDate);
     }, [
         timeZonedValue,
         updateValue,
         maxDateTime,
-        minDateTime
+        minDateTime,
+        setFocusedDay,
+        setFocusableDay
+    ]);
+    const onDayFocus = React.useCallback((date)=>{
+        if (focusedDay && isSameDay(focusedDay, date)) {
+            return;
+        }
+        setFocusedDay(date);
+    }, [
+        focusedDay,
+        setFocusedDay
     ]);
+    // activeDay это день в календаре соответствующий значению в инпуте
     const isDayActive = React.useCallback((day)=>Boolean(timeZonedValue && isSameDay(day, timeZonedValue)), [
         timeZonedValue
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, props), {
+    const isFocusableDayInViewDateMonth = focusableDay && isSameMonth(focusableDay, viewDate);
+    const isInputValueDateInViewDateMonth = timeZonedValue && isSameMonth(timeZonedValue, viewDate);
+    /**
+   * Функция позволяет проверить является ли день в календаре днём на который
+   * можно попасть с помощью Tab.
+   * Единственный день в таблице календаря у которого есть tabIndex="0"
+   * Чтобы на него можно было попасть из заголовка календаря.
+   */ const isDayFocusable = React.useCallback((day)=>{
+        // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex="0",
+        if (isFocusableDayInViewDateMonth) {
+            return isSameDay(focusableDay, day);
+        }
+        // при открытии календаря focusableDay не определён,
+        // поэтому tabIndex="0" будет у дня, соответствующего дню в инпуте
+        if (isInputValueDateInViewDateMonth) {
+            return isDayActive(day);
+        }
+        // при переключении месяца любая навигация с помощью Tab начинается
+        // с первого дня месяца.
+        return isSameDay(startOfMonth(viewDate), day);
+    }, [
+        focusableDay,
+        viewDate,
+        isDayActive,
+        isFocusableDayInViewDateMonth,
+        isInputValueDateInViewDateMonth
+    ]);
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+        "aria-label": ariaLabel
+    }, props), {
         baseClassName: classNames("vkuiCalendar__host", size === 's' && "vkuiCalendar__sizeS"),
         getRootRef: getRootRef,
         children: [
@@ -176,16 +237,15 @@ const warn = warnOnce('Calendar');
                 viewDate: externalViewDate || viewDate,
                 value: timeZonedValue,
                 weekStartsOn: weekStartsOn,
-                isDayFocused: isDayFocused,
-                tabIndex: 0,
-                "aria-label": changeDayLabel,
                 onKeyDown: handleKeyDown,
                 onDayChange: onDayChange,
                 isDayActive: isDayActive,
+                onDayFocus: onDayFocus,
+                isDayFocused: isDayFocused,
+                isDayFocusable: isDayFocusable,
                 isDaySelectionStart: isFirstDay,
                 isDaySelectionEnd: isLastDay,
                 isDayDisabled: isDayDisabled,
-                onBlur: resetSelectedDay,
                 showNeighboringMonth: showNeighboringMonth,
                 size: size,
                 dayProps: dayProps,