@vkontakte/vkui 7.2.1 → 7.3.0

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения разделителя\n   */\n  appearance?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * Добавляет стандартные отступы у разделителя\n   */\n  padding?: boolean;\n  /**\n   * Направление отображения разделителя\n   */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Размер контейнера, в который вложен разделитель\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * Выравнивание разделителя в контейнере\n   */\n  align?: 'start' | 'center' | 'end';\n}\n\nconst appearanceClassNames = {\n  'primary': styles.appearancePrimary,\n  'secondary': styles.appearanceSecondary,\n  'primary-alpha': styles.appearancePrimaryAlpha,\n};\n\nconst directionClassNames = {\n  horizontal: styles.directionHorizontal,\n  vertical: styles.directionVertical,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  padding = false,\n  appearance = 'primary',\n  direction = 'horizontal',\n  align = 'center',\n  size,\n  ...restProps\n}: SeparatorProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_SIZE,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        padding && styles.padded,\n        appearanceClassNames[appearance],\n        directionClassNames[direction],\n        size !== undefined && styles.sized,\n        align !== 'center' && alignClassNames[align],\n        spacingSizeClassName,\n      )}\n      baseStyle={spacingSizeStyle}\n    >\n      <hr className={styles.in} />\n    </RootComponent>\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","directionClassNames","horizontal","vertical","alignClassNames","start","end","Separator","padding","appearance","direction","align","size","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","undefined","baseStyle","hr","className"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,iCAAiC,gCAAgC;AA2B9E,MAAMC,uBAAuB;IAC3B,SAAS;IACT,WAAW;IACX,eAAe;AACjB;AAEA,MAAMC,sBAAsB;IAC1BC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,IAAI,EAEW,WADZC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,sBAAsBC,iBAAiB,GAAGlB,mBAC/CE,gCACAa;IAEF,qBACE,KAACd,uDACKe;QACJG,eAAepB,WACbY,oCACAR,oBAAoB,CAACS,WAAW,EAChCR,mBAAmB,CAACS,UAAU,EAC9BE,SAASK,qCACTN,UAAU,YAAYP,eAAe,CAACO,MAAM,EAC5CG;QAEFI,WAAWH;kBAEX,cAAA,KAACI;YAAGC,SAAS;;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения разделителя.\n   */\n  appearance?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * Добавляет стандартные отступы у разделителя.\n   */\n  padding?: boolean;\n  /**\n   * Направление отображения разделителя.\n   */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Размер контейнера, в который вложен разделитель.\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные.\n   */\n  size?: SpacingSizeProp;\n  /**\n   * Выравнивание разделителя в контейнере.\n   */\n  align?: 'start' | 'center' | 'end';\n}\n\nconst appearanceClassNames = {\n  'primary': styles.appearancePrimary,\n  'secondary': styles.appearanceSecondary,\n  'primary-alpha': styles.appearancePrimaryAlpha,\n};\n\nconst directionClassNames = {\n  horizontal: styles.directionHorizontal,\n  vertical: styles.directionVertical,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  padding = false,\n  appearance = 'primary',\n  direction = 'horizontal',\n  align = 'center',\n  size,\n  ...restProps\n}: SeparatorProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_SIZE,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        padding && styles.padded,\n        appearanceClassNames[appearance],\n        directionClassNames[direction],\n        size !== undefined && styles.sized,\n        align !== 'center' && alignClassNames[align],\n        spacingSizeClassName,\n      )}\n      baseStyle={spacingSizeStyle}\n    >\n      <hr className={styles.in} />\n    </RootComponent>\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","directionClassNames","horizontal","vertical","alignClassNames","start","end","Separator","padding","appearance","direction","align","size","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","undefined","baseStyle","hr","className"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,iCAAiC,gCAAgC;AA2B9E,MAAMC,uBAAuB;IAC3B,SAAS;IACT,WAAW;IACX,eAAe;AACjB;AAEA,MAAMC,sBAAsB;IAC1BC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,IAAI,EAEW,WADZC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,sBAAsBC,iBAAiB,GAAGlB,mBAC/CE,gCACAa;IAEF,qBACE,KAACd,uDACKe;QACJG,eAAepB,WACbY,oCACAR,oBAAoB,CAACS,WAAW,EAChCR,mBAAmB,CAACS,UAAU,EAC9BE,SAASK,qCACTN,UAAU,YAAYP,eAAe,CAACO,MAAM,EAC5CG;QAEFI,WAAWH;kBAEX,cAAA,KAACI;YAAGC,SAAS;;;AAGnB,EAAE"}

package/dist/components/SimpleCell/Chevron/Chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,GAAI,wBAA8B,YAAY,KAAG,KAAK,CAAC,SAI1E,CAAC"}
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,GAAI,wBAA8B,YAAY,KAAG,KAAK,CAAC,SAI1E,CAAC"}

package/dist/components/SimpleCell/Chevron/Chevron.js

@@ -1,4 +1,4 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+/* eslint-disable jsdoc/require-jsdoc */ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";

package/dist/components/SimpleCell/Chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n  s: Icon16Chevron,\n  m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {\n  size?: 's' | 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps): React.ReactNode => {\n  const Icon = iconSize[size];\n\n  return <Icon {...restProps} />;\n};\n"],"names":["React","Icon16Chevron","Icon24ChevronCompactRight","iconSize","s","m","Chevron","size","restProps","Icon"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,mBAAmB;AAE5E,MAAMC,WAAW;IACfC,GAAGH;IACHI,GAAGH;AACL;AAMA,OAAO,MAAMI,UAAU;QAAC,EAAEC,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAON,QAAQ,CAACI,KAAK;IAE3B,qBAAO,KAACE,yBAASD;AACnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n  s: Icon16Chevron,\n  m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {\n  size?: 's' | 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps): React.ReactNode => {\n  const Icon = iconSize[size];\n\n  return <Icon {...restProps} />;\n};\n"],"names":["React","Icon16Chevron","Icon24ChevronCompactRight","iconSize","s","m","Chevron","size","restProps","Icon"],"mappings":"AAAA,sCAAsC;;;AAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,mBAAmB;AAE5E,MAAMC,WAAW;IACfC,GAAGH;IACHI,GAAGH;AACL;AAMA,OAAO,MAAMI,UAAU;QAAC,EAAEC,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAON,QAAQ,CAACI,KAAK;IAE3B,qBAAO,KAACE,yBAASD;AACnB,EAAE"}

package/dist/components/SimpleCell/SimpleCell.d.ts

@@ -3,7 +3,7 @@ import type { HasComponent } from '../../types';
 import { type TappableProps } from '../Tappable/Tappable';
 export interface SimpleCellOwnProps extends HasComponent {
     /**
-     * Иконка 28 или `<Avatar size={28|32|40|48|72} />`
+     * Иконка 28 или `<Avatar size={28|32|40|48|72} />`.
      */
     before?: React.ReactNode;
     /**
@@ -43,22 +43,22 @@ export interface SimpleCellOwnProps extends HasComponent {
      */
     after?: React.ReactNode;
     /**
-     * Помечает ячейку неактивной
+     * Блокировка взаимодействия с компонентом.
      */
     disabled?: boolean;
     /**
-     * Управляет видимостью иконки шеврона `›`
+     * Управляет видимостью иконки шеврона `›`.
      *
      * - `auto` - добавляет шеврон справа только для платформы `ios`;
      * - `always` - всегда показывает шеврон.
      */
     chevron?: 'auto' | 'always';
     /**
-     * Размер chevron
+     * Размер chevron.
      */
     chevronSize?: 's' | 'm';
     /**
-     * Включает многострочный режим для отображения текста
+     * Включает многострочный режим для отображения текста.
      */
     multiline?: boolean;
 }

package/dist/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.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 { HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Помечает ячейку неактивной\n   */\n  disabled?: boolean;\n  /**\n   * Управляет видимостью иконки шеврона `›`\n   *\n   * - `auto` - добавляет шеврон справа только для платформы `ios`;\n   * - `always` - всегда показывает шеврон.\n   */\n  chevron?: 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  chevron,\n  multiline,\n  overTitle,\n  subtitle,\n  extraSubtitle,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        restProps.disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles.mult,\n      )}\n    >\n      <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>\n        {before}\n      </div>\n      <div className={styles.middle}>\n        {overTitle && (\n          <Subhead Component=\"span\" className={classNames(styles.text, styles.overTitle)}>\n            {overTitle}\n          </Subhead>\n        )}\n        <div className={styles.content}>\n          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}\n          <Headline Component=\"span\" className={styles.children} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}\n        </div>\n        {subtitle && (\n          <div className={styles.content}>\n            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}\n            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles.indicator}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles.after, 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && <Chevron size={chevronSize} className={styles.chevronIcon} />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","sizeYClassNames","none","compact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","chevron","multiline","overTitle","subtitle","extraSubtitle","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","baseClassName","disabled","div","className","Component","span","weight","normalize","size"],"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,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,uBAAoB;AAG5C,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAkEA;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,cAAc,GAAG,EAED,WADbC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWzB;IAEjB,MAAM0B,aAAaR,YAAY,YAAaA,YAAY,UAAUO,aAAa;IAE/E,MAAME,WAAW7B,aAAamB,UAAUS;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG7B;IAE3B,qBACE,MAACE,kDACKuB;QACJK,eAAehC,mCAEb2B,UAAUM,QAAQ,gCAClBF,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CT;;0BAGF,KAACY;gBAAIC,WAAWnC,qCAA0B4B,aAAa;0BACpDX;;0BAEH,MAACiB;gBAAIC,SAAS;;oBACXZ,2BACC,KAAChB;wBAAQ6B,WAAU;wBAAOD,WAAWnC;kCAClCuB;;kCAGL,MAACW;wBAAIC,SAAS;;4BACXtB,kCAAoB,KAACwB;gCAAKF,SAAS;0CAAiBtB;;0CACrD,KAACP;gCAAS8B,WAAU;gCAAOD,SAAS;gCAAmBG,QAAO;0CAC3DnB;;4BAEFlB,aAAaa,kCAAoB,KAACuB;gCAAKF,SAAS;0CAAiBrB;;;;oBAEnEU,0BACC,MAACU;wBAAIC,SAAS;;4BACXpB,qCAAuB,KAACsB;gCAAKF,SAAS;0CAAiBpB;;0CACxD,KAACV;gCAASkC,WAAW;gCAAOJ,WAAWnC;0CACpCwB;;4BAEFR,oCAAsB,KAACqB;gCAAKF,SAAS;0CAAiBnB;;;;oBAG1DS,+BACC,KAACpB;wBAAS8B,WAAWnC;kCAClByB;;;;YAINxB,aAAaiB,4BACZ,KAACZ;gBAAS8B,WAAU;gBAAOE,QAAO;gBAAIH,SAAS;0BAC5CjB;;YAGJY,0BACC,MAACI;gBAAIC,WAAWnC,oCAAyB;;oBACtCoB;oBACAS,4BAAc,KAACrB;wBAAQgC,MAAMd;wBAAaS,SAAS;;;;;;AAK9D,EAAE"}
+{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.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 { HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Управляет видимостью иконки шеврона `›`.\n   *\n   * - `auto` - добавляет шеврон справа только для платформы `ios`;\n   * - `always` - всегда показывает шеврон.\n   */\n  chevron?: 'auto' | 'always';\n  /**\n   * Размер chevron.\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста.\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  chevron,\n  multiline,\n  overTitle,\n  subtitle,\n  extraSubtitle,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        restProps.disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles.mult,\n      )}\n    >\n      <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>\n        {before}\n      </div>\n      <div className={styles.middle}>\n        {overTitle && (\n          <Subhead Component=\"span\" className={classNames(styles.text, styles.overTitle)}>\n            {overTitle}\n          </Subhead>\n        )}\n        <div className={styles.content}>\n          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}\n          <Headline Component=\"span\" className={styles.children} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}\n        </div>\n        {subtitle && (\n          <div className={styles.content}>\n            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}\n            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles.indicator}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles.after, 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && <Chevron size={chevronSize} className={styles.chevronIcon} />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","sizeYClassNames","none","compact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","chevron","multiline","overTitle","subtitle","extraSubtitle","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","baseClassName","disabled","div","className","Component","span","weight","normalize","size"],"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,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,uBAAoB;AAG5C,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAkEA;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,cAAc,GAAG,EAED,WADbC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWzB;IAEjB,MAAM0B,aAAaR,YAAY,YAAaA,YAAY,UAAUO,aAAa;IAE/E,MAAME,WAAW7B,aAAamB,UAAUS;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG7B;IAE3B,qBACE,MAACE,kDACKuB;QACJK,eAAehC,mCAEb2B,UAAUM,QAAQ,gCAClBF,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CT;;0BAGF,KAACY;gBAAIC,WAAWnC,qCAA0B4B,aAAa;0BACpDX;;0BAEH,MAACiB;gBAAIC,SAAS;;oBACXZ,2BACC,KAAChB;wBAAQ6B,WAAU;wBAAOD,WAAWnC;kCAClCuB;;kCAGL,MAACW;wBAAIC,SAAS;;4BACXtB,kCAAoB,KAACwB;gCAAKF,SAAS;0CAAiBtB;;0CACrD,KAACP;gCAAS8B,WAAU;gCAAOD,SAAS;gCAAmBG,QAAO;0CAC3DnB;;4BAEFlB,aAAaa,kCAAoB,KAACuB;gCAAKF,SAAS;0CAAiBrB;;;;oBAEnEU,0BACC,MAACU;wBAAIC,SAAS;;4BACXpB,qCAAuB,KAACsB;gCAAKF,SAAS;0CAAiBpB;;0CACxD,KAACV;gCAASkC,WAAW;gCAAOJ,WAAWnC;0CACpCwB;;4BAEFR,oCAAsB,KAACqB;gCAAKF,SAAS;0CAAiBnB;;;;oBAG1DS,+BACC,KAACpB;wBAAS8B,WAAWnC;kCAClByB;;;;YAINxB,aAAaiB,4BACZ,KAACZ;gBAAS8B,WAAU;gBAAOE,QAAO;gBAAIH,SAAS;0BAC5CjB;;YAGJY,0BACC,MAACI;gBAAIC,WAAWnC,oCAAyB;;oBACtCoB;oBACAS,4BAAc,KAACrB;wBAAQgC,MAAMd;wBAAaS,SAAS;;;;;;AAK9D,EAAE"}

package/dist/components/SimpleGrid/SimpleGrid.d.ts

@@ -2,7 +2,7 @@ import { type GapsProp } from '../../lib/layouts';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 export interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {
     /**
-     * Количество колонок
+     * Количество колонок.
      */
     columns?: number;
     /**
@@ -16,15 +16,15 @@ export interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, '
      * Значение `none` позволяет отключить отступы
      * Значение `auto` позволяет задать платформенные отступы
      * Значение `auto-inline` позволяет задать платформенные inline-отступы
-     * Значение `auto-block` позволяет задать платформенные block-отступы
+     * Значение `auto-block` позволяет задать платформенные block-отступы.
      */
     margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';
     /**
-     * Вместо задания количества колонок, можно указать минимальную ширину элементов
+     * Вместо задания количества колонок, можно указать минимальную ширину элементов.
      */
     minColWidth?: number;
     /**
-     * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`
+     * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.
      */
     align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
 }

package/dist/components/SimpleGrid/SimpleGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nexport interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Количество колонок\n   */\n  columns?: number;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов\n   */\n  minColWidth?: number;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.host,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n      )}\n      baseStyle={style}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","marginClassNames","alignClassNames","start","end","center","stretch","baseline","SimpleGrid","columns","gap","margin","minColWidth","align","props","style","rowGap","columnGap","baseClassName","baseStyle"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,6BAAoB;AAE3B,SAASC,aAAa,QAAQ,oCAAiC;AAI/D,MAAMC,mBAAmB;IACvB,MAAM;IACN,aAAa;IACb,YAAY;AACd;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AA+BA,OAAO,MAAMC,aAAa;QAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EAED,WADbC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGpB,aAAaa;IACzC,IAAI,OAAOM,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGN,SAAS;IACrD,IAAIG,aAAa;QACfG,KAAK,CAAC,iCAAiC,GAAG,GAAGH,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACZ,uDACKc;QACJI,eAAetB,mCAEbe,WAAW,UAAUV,gBAAgB,CAACU,OAAO,EAC7CT,eAAe,CAACW,MAAM,EACtBD,+CACA,OAAOK,cAAc,YAAYnB,mBAAmB,CAACmB,UAAU,EAC/D,OAAOD,WAAW,YAAYjB,gBAAgB,CAACiB,OAAO;QAExDG,WAAWJ;;AAGjB,EAAE"}
+{"version":3,"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nexport interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Количество колонок.\n   */\n  columns?: number;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы.\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов.\n   */\n  minColWidth?: number;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.host,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n      )}\n      baseStyle={style}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","marginClassNames","alignClassNames","start","end","center","stretch","baseline","SimpleGrid","columns","gap","margin","minColWidth","align","props","style","rowGap","columnGap","baseClassName","baseStyle"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,6BAAoB;AAE3B,SAASC,aAAa,QAAQ,oCAAiC;AAI/D,MAAMC,mBAAmB;IACvB,MAAM;IACN,aAAa;IACb,YAAY;AACd;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AA+BA,OAAO,MAAMC,aAAa;QAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EAED,WADbC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGpB,aAAaa;IACzC,IAAI,OAAOM,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGN,SAAS;IACrD,IAAIG,aAAa;QACfG,KAAK,CAAC,iCAAiC,GAAG,GAAGH,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACZ,uDACKc;QACJI,eAAetB,mCAEbe,WAAW,UAAUV,gBAAgB,CAACU,OAAO,EAC7CT,eAAe,CAACW,MAAM,EACtBD,+CACA,OAAOK,cAAc,YAAYnB,mBAAmB,CAACmB,UAAU,EAC/D,OAAOD,WAAW,YAAYjB,gBAAgB,CAACiB,OAAO;QAExDG,WAAWJ;;AAGjB,EAAE"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -2,19 +2,19 @@ import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
 export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>, Pick<React.CSSProperties, 'width' | 'height' | 'inlineSize' | 'blockSize' | 'maxWidth' | 'maxInlineSize' | 'borderRadius' | 'margin'> {
     /**
-     * Начальный цвет анимации
+     * Начальный цвет анимации.
      */
     colorFrom?: string;
     /**
-     * Финальный цвет анимации
+     * Финальный цвет анимации.
      */
     colorTo?: string;
     /**
-     * Выключает анимацию, в результате чего показывается только один цвет
+     * Выключает анимацию, в результате чего показывается только один цвет.
      */
     noAnimation?: boolean;
     /**
-     * Длительность анимации в секундах
+     * Длительность анимации в секундах.
      */
     duration?: number;
 }

package/dist/components/Skeleton/Skeleton.js

@@ -13,18 +13,18 @@ import { useDOM } from "../../lib/dom.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
 /**
- * Синхронизирует анимацию скелетонов с помощью временных отрезков
+ * Синхронизирует анимацию скелетонов с помощью временных отрезков.
  *
  * ## visibilitychange
  *
  * В синхронизацию не заложен механизм перехода на оптимизации браузеров при
  * переходе на другую вкладку, поскольку нет уверенности в реальности таких
  * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать
- * событие `visibilitychange` используя функцию `syncAnimation`
+ * событие `visibilitychange` используя функцию `syncAnimation`.
  *
- * https://developer.chrome.com/blog/page-lifecycle-api/
+ * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.
  *
- * @param duration длительность анимации в секундах
+ * @param duration Длительность анимации в секундах.
  */ function useSkeletonSyncAnimation(disableAnimation, duration = 1.5) {
     const [isAnimationStarted, setIsAnimationStarted] = React.useState(false);
     const timer = React.useRef(undefined);
@@ -55,7 +55,7 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
     return isAnimationStarted;
 }
 /**
- * Вычисляет позицию скелетона
+ * Вычисляет позицию скелетона.
  */ function useSkeletonPosition(rootRef) {
     const { document, window } = useDOM();
     const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] = useStateWithPrev('0');

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`\n *\n * https://developer.chrome.com/blog/page-lifecycle-api/\n *\n * @param duration длительность анимации в секундах\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(styles.host, disableAnimation && styles.disableAnimation)}\n      baseStyle={skeletonStyle}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useResizeObserver","useStateWithPrev","useDOM","RootComponent","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","baseStyle"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(styles.host, disableAnimation && styles.disableAnimation)}\n      baseStyle={skeletonStyle}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useResizeObserver","useStateWithPrev","useDOM","RootComponent","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","baseStyle"],"mappings":"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"}

package/dist/components/Slider/Slider.d.ts

@@ -2,9 +2,21 @@ import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { type CustomTouchEvent } from '../Touch/Touch';
 export interface SliderBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
+    /**
+     * Минимальное значение слайдера.
+     */
     min?: number;
+    /**
+     * Максимальное значение слайдера.
+     */
     max?: number;
+    /**
+     * Шаг изменения значения слайдера.
+     */
     step?: number;
+    /**
+     * Блокировка взаимодействия с компонентом.
+     */
     disabled?: boolean;
     /**
      * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.
@@ -20,30 +32,57 @@ export interface SliderBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
      * > Перебивает `aria-valuetext`.
      */
     getAriaValueText?: (value: number, index: number) => string;
+    /**
+     * Включает отображение всплывающей подсказки при взаимодействии с ползунком.
+     */
     withTooltip?: boolean;
     /**
      * Размер ползунка.
      */
     size?: 's' | 'm' | 'l';
     /**
-     * Передает атрибут `data-testid` для первого ползунка
+     * Передает атрибут `data-testid` для первого ползунка.
      */
     startThumbTestId?: string;
     /**
-     * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`
+     * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`.
      */
     endThumbTestId?: string;
 }
 export interface SliderProps extends SliderBaseProps {
+    /**
+     * Флаг множественного выбора (должен быть false или не указан).
+     */
     multiple?: false;
+    /**
+     * Текущее значение слайдера.
+     */
     value?: number;
+    /**
+     * Значение слайдера по умолчанию.
+     */
     defaultValue?: number;
+    /**
+     * Обработчик изменения значения слайдера.
+     */
     onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;
 }
 export interface SliderMultipleProps extends SliderBaseProps {
+    /**
+     * Флаг множественного выбора (должен быть true).
+     */
     multiple: true;
+    /**
+     * Текущие значения слайдера в виде массива [начальное, конечное].
+     */
     value?: [number, number];
+    /**
+     * Значения слайдера по умолчанию в виде массива [начальное, конечное].
+     */
     defaultValue?: [number, number];
+    /**
+     * Обработчик изменения значений слайдера.
+     */
     onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAClF,OAAO,EAAE,KAAK,gBAAgB,EAAuC,MAAM,gBAAgB,CAAC;AA0B5F,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACjF;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3F;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,4OAmBpB,WAAW,GAAG,mBAAmB,KAAG,KAAK,CAAC,SAkN5C,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAClF,OAAO,EAAE,KAAK,gBAAgB,EAAuC,MAAM,gBAAgB,CAAC;AA0B5F,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACjF;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3F;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,4OAmBpB,WAAW,GAAG,mBAAmB,KAAG,KAAK,CAAC,SAkN5C,CAAC"}

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst sizeClassNames = {\n  l: styles.sizeL,\n  m: styles.sizeM,\n  s: styles.sizeS,\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?: (index: number) => string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, index: number) => string;\n  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Передает атрибут `data-testid` для первого ползунка\n   */\n  startThumbTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`\n   */\n  endThumbTestId?: string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  step = 1,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  startThumbTestId,\n  endThumbTestId,\n  onChange,\n  withTooltip,\n  size = 'l',\n  style: styleProp,\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (\n    nextValue: InternalValueState,\n    event: CustomTouchEvent | React.ChangeEvent,\n  ) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    let nextStartX = event.startX - nextContainerX;\n    if (isRtl) {\n      nextStartX = nextContainerWidth - nextStartX;\n    }\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n    setActiveThumb(gesture.dragging);\n  };\n\n  const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + (isRtl ? -shiftX : shiftX);\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: CustomTouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n    setActiveThumb(null);\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      event,\n    );\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal--Slider_start_value': String(startValueInPercent),\n    '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles.host,\n        disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        sizeClassNames[size],\n        multiple && styles.multiple,\n        isRtl && styles.rtl,\n        className,\n      )}\n      style={mergeStyle(styleProp, style)}\n      getRootRef={getRootRef}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles.track} />\n      <div className={styles.trackFill} />\n      <div ref={thumbsContainerRef} className={styles.thumbs}>\n        <SliderThumb\n          data-type=\"start\"\n          className={classNames(styles.thumb, styles.thumbStart)}\n          style={{\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'data-testid': startThumbTestId,\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n          isActive={activeThumb === 'start'}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={classNames(styles.thumb, styles.thumbEnd)}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'data-testid': endThumbTestId,\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n            isActive={activeThumb === 'end'}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","mergeStyle","useAdaptivity","useConfigDirection","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","compact","sizeClassNames","l","m","s","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","startThumbTestId","endThumbTestId","onChange","withTooltip","size","style","styleProp","restProps","sizeY","direction","isRtl","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","String","data-value","onStart","onMove","onEnd","div","ref","data-type","zIndex","inputProps","isActive"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SAA8DC,KAAK,QAAQ,oBAAiB;AAC5F,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SACEC,wCAAwC,EACxCC,8BAA8B,EAC9BC,gBAAgB,EAChBC,aAAa,EACbC,aAAa,EACbC,SAAS,EACTC,wBAAwB,EACxBC,sCAAsC,QACjC,eAAY;AAInB,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAmDA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,CAAC,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,eAAeD,eAAe;QAACL;QAAKC;KAAI,GAAGD,GAAG,EAC9CO,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,QAAQ,EACRC,WAAW,EACXC,OAAO,GAAG,EACVC,OAAOC,SAAS,EAEkB,WAD/BC;QAjBHpB;QACAC;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG1C;IAC3B,MAAM2C,YAAY1C;IAClB,MAAM2C,QAAQD,cAAc;IAE5B,MAAME,eAAepB,cAAcqB;IACnC,MAAM,CAACC,YAAYC,SAAS,GAAGpD,MAAMqD,QAAQ,CAACrB;IAE9C,MAAMJ,QAAQ5B,MAAMsD,OAAO,CAAqB;QAC9C,MAAMC,gBAAgBN,eAAepB,YAAYsB;QACjD,OAAOK,MAAMC,OAAO,CAACF,iBACjB;YAACrD,MAAMqD,aAAa,CAAC,EAAE,EAAE7B,KAAKC;YAAMzB,MAAMqD,aAAa,CAAC,EAAE,EAAE7B,KAAKC;SAAK,GACtE;YAACzB,MAAMqD,eAAe7B,KAAKC;YAAM;SAAK;IAC5C,GAAG;QAACsB;QAAcpB;QAAWsB;QAAYzB;QAAKC;KAAI;IAElD,MAAM,CAAC+B,YAAYC,SAAS,GAAG/B;IAC/B,MAAME,WAAWC,gBAAgB4B,aAAa;IAC9C,MAAMC,sBAAsB9C,UAAU4C,YAAYhC,KAAKC;IACvD,MAAMkC,4BAA4B/B,WAAWhB,UAAU6C,UAAUjC,KAAKC,OAAO;IAC7E,MAAM,CAACmC,aAAaC,eAAe,GAAG/D,MAAMqD,QAAQ,CAA8B;IAElF,MAAMW,UAAUhE,MAAMiE,MAAM,CAAqB;QAC/CC,UAAU;QACVC,QAAQ;QACRC,gBAAgB;IAClB,GAAGC,OAAO;IACV,MAAMC,qBAAqBhE,aAAa6B;IACxC,MAAMoC,qBAAqBvE,MAAMiE,MAAM,CAAmB;IAC1D,MAAMO,mBAAmBxE,MAAMiE,MAAM,CAAmB;IAExD,MACExD,4CAAAA,yCAAyCoC,YADrC,EAAE4B,SAAS,EAAEC,aAAa,EAAEC,cAAc,EAAqC,GACnFlE,2CADmDmE,4DACnDnE;QADMgE;QAAWC;QAAeC;;IAGlC,MAAME,cAAc,CAClBC,WACAC;QAEA,IAAI9C,YAAaL,KAAK,CAAC,EAAE,KAAKkD,SAAS,CAAC,EAAE,IAAIlD,KAAK,CAAC,EAAE,KAAKkD,SAAS,CAAC,EAAE,EAAG;YACxE;QACF;QAEA,IAAI/C,cAAc;YAChB,IAAIpB,iBAAiBmE,YAAY;gBAC/B,CAAC7B,gBAAgBG,SAAS0B;gBAC1BtC,YAAYA,SAASsC,WAAWC;YAClC;QACF,OAAO;YACL,CAAC9B,gBAAgBG,SAAS0B,SAAS,CAAC,EAAE;YACtCtC,YAAYA,SAASsC,SAAS,CAAC,EAAE,EAAEC;QACrC;IACF;IAEA,MAAMC,qBAA8C,CAACD;QACnD,IAAI,CAACT,mBAAmBD,OAAO,EAAE;YAC/B;QACF;QAEA,MAAM,EAAEY,MAAMC,cAAc,EAAEC,OAAOC,kBAAkB,EAAE,GACvDd,mBAAmBD,OAAO,CAACgB,qBAAqB;QAElD,mGAAmG;QACnG,MAAMC,oBAAoB5E,+BAA+BqE,MAAMQ,aAAa,CAACC,MAAM;QAEnF,IAAIC,aAAaV,MAAMZ,MAAM,GAAGe;QAChC,IAAIlC,OAAO;YACTyC,aAAaL,qBAAqBK;QACpC;QACA,MAAMX,YAAYlE,cAAc6E,YAAYL,oBAAoB1D,KAAKC,KAAKF;QAC1E,MAAMiE,eAAe7E,cAAce,OAAOkD,WAAWQ;QAErDtB,QAAQE,QAAQ,GAAGwB;QACnB1B,QAAQI,cAAc,GAAGgB;QACzBpB,QAAQG,MAAM,GAAGsB;QAEjB,MAAME,4BAA4B5E,yBAChCa,OACAkD,WACApD,KACAC,KACA+D;QAGF,MAAM,CAACE,gBAAgBC,aAAa,GAAGF;QACvC,IACEpB,mBAAmBF,OAAO,IACzBiB,CAAAA,sBAAsB,WACpBM,mBAAmBlC,cAAcmC,iBAAiBlC,QAAQ,GAC7D;YACAY,mBAAmBF,OAAO,CAACyB,KAAK;YAChCf,MAAMQ,aAAa,CAACQ,cAAc;QACpC,OAAO,IACLvB,iBAAiBH,OAAO,IACvBiB,CAAAA,sBAAsB,SAAUO,iBAAiBlC,YAAYiC,mBAAmBlC,UAAU,GAC3F;YACAc,iBAAiBH,OAAO,CAACyB,KAAK;YAC9Bf,MAAMQ,aAAa,CAACQ,cAAc;QACpC;QAEAlB,YAAYc,2BAA2BZ;QAEvCA,MAAMQ,aAAa,CAACS,eAAe;QACnCjC,eAAeC,QAAQE,QAAQ;IACjC;IAEA,MAAM+B,oBAA6C,CAAClB;QAClD,MAAM,EAAEZ,MAAM,EAAEC,cAAc,EAAEF,QAAQ,EAAE,GAAGF;QAE7C,MAAM,EAAEkC,SAAS,CAAC,EAAE,GAAGnB;QACvB,MAAMU,aAAatB,SAAUnB,CAAAA,QAAQ,CAACkD,SAASA,MAAK;QACpD,MAAMpB,YAAYlE,cAAc6E,YAAYrB,gBAAgB1C,KAAKC,KAAKF;QAEtEoD,YAAY9D,yBAAyBa,OAAOkD,WAAWpD,KAAKC,KAAKuC,WAAWa;QAE5EA,MAAMQ,aAAa,CAACS,eAAe;QACnCjB,MAAMQ,aAAa,CAACQ,cAAc;IACpC;IAEA,MAAMI,mBAA4C,CAACpB;QACjDf,QAAQE,QAAQ,GAAG;QACnBa,MAAMQ,aAAa,CAACS,eAAe;QACnCjC,eAAe;IACjB;IAEA,MAAMqC,4BAA4B,CAACrB;QACjCF,YACE7D,uCACEY,OACAyE,OAAOtB,MAAMS,MAAM,CAAC5D,KAAK,GACzBlB,+BAA+BqE,MAAMS,MAAM,IAE7CT;IAEJ;IAEA,MAAMpC,QAA6B;QACjC,uCAAuC2D,OAAO1C;QAC9C,qCAAqC0C,OAAOzC;IAC9C;IAEA,qBACE,MAACtD;QACCgG,cAAYzE,WAAW,GAAG4B,WAAW,CAAC,EAAEC,UAAU,GAAGD;OACjDkB;QACJ1C,WAAWjC,+BAETgC,oCACAa,UAAU,aAAa7B,eAAe,CAAC6B,MAAM,EAC7C1B,cAAc,CAACsB,KAAK,EACpBZ,oCACAkB,4BACAd;QAEFS,OAAOxC,WAAWyC,WAAWD;QAC7BR,YAAYA;QACZqE,SAASvE,WAAWiB,YAAY8B;QAChCyB,QAAQxE,WAAWiB,YAAY+C;QAC/BS,OAAOzE,WAAWiB,YAAYiD;;0BAE9B,KAACQ;gBAAIzE,SAAS;;0BACd,KAACyE;gBAAIzE,SAAS;;0BACd,MAACyE;gBAAIC,KAAKtC;gBAAoBpC,SAAS;;kCACrC,KAAC1B;wBACCqG,aAAU;wBACV3E,WAAWjC;wBACX0C,OAAO;4BACL,6GAA6G;4BAC7GmE,QAAQhF,YAAY8B,uBAAuB,KAAK,IAAIV;wBACtD;wBACAT,aAAaA;wBACbsE,YAAY;4BACV,aAAa;4BACb,eAAezE;4BACf,OAAOiC;4BACP,QAAQ9C;4BACR,OAAOC;4BACP,SAASgC;4BACT,OAAO5B,WAAW6B,WAAWhC;4BAC7B,YAAYM;4BACZ,cAAcG,eAAeA,aAAa,KAAKqC;4BAC/C,kBAAkBpC,mBAAmBA,iBAAiBqB,YAAY,KAAKgB;4BACvE,mBAAmBC;4BACnB,YAAYyB;wBACd;wBACAY,UAAUlD,gBAAgB;;oBAE3BhC,0BACC,KAACtB;wBACCqG,aAAU;wBACV3E,WAAWjC;wBACXwC,aAAaA;wBACbsE,YAAY;4BACV,aAAa;4BACb,eAAexE;4BACf,OAAOiC;4BACP,QAAQ/C;4BACR,OAAOiC;4BACP,SAASC;4BACT,OAAOhC;4BACP,YAAYM;4BACZ,cAAcG,eAAeA,aAAa,KAAKqC;4BAC/C,kBAAkBpC,mBAAmBA,iBAAiBsB,UAAU,KAAKe;4BACrE,mBAAmBC;4BACnB,YAAYyB;wBACd;wBACAY,UAAUlD,gBAAgB;;;;;;AAMtC,EAAE"}
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst sizeClassNames = {\n  l: styles.sizeL,\n  m: styles.sizeM,\n  s: styles.sizeS,\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  /**\n   * Минимальное значение слайдера.\n   */\n  min?: number;\n  /**\n   * Максимальное значение слайдера.\n   */\n  max?: number;\n  /**\n   * Шаг изменения значения слайдера.\n   */\n  step?: number;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?: (index: number) => string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, index: number) => string;\n  /**\n   * Включает отображение всплывающей подсказки при взаимодействии с ползунком.\n   */\n  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Передает атрибут `data-testid` для первого ползунка.\n   */\n  startThumbTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`.\n   */\n  endThumbTestId?: string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  /**\n   * Флаг множественного выбора (должен быть false или не указан).\n   */\n  multiple?: false;\n  /**\n   * Текущее значение слайдера.\n   */\n  value?: number;\n  /**\n   * Значение слайдера по умолчанию.\n   */\n  defaultValue?: number;\n  /**\n   * Обработчик изменения значения слайдера.\n   */\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  /**\n   * Флаг множественного выбора (должен быть true).\n   */\n  multiple: true;\n  /**\n   * Текущие значения слайдера в виде массива [начальное, конечное].\n   */\n  value?: [number, number];\n  /**\n   * Значения слайдера по умолчанию в виде массива [начальное, конечное].\n   */\n  defaultValue?: [number, number];\n  /**\n   * Обработчик изменения значений слайдера.\n   */\n  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  step = 1,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  startThumbTestId,\n  endThumbTestId,\n  onChange,\n  withTooltip,\n  size = 'l',\n  style: styleProp,\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (\n    nextValue: InternalValueState,\n    event: CustomTouchEvent | React.ChangeEvent,\n  ) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    let nextStartX = event.startX - nextContainerX;\n    if (isRtl) {\n      nextStartX = nextContainerWidth - nextStartX;\n    }\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n    setActiveThumb(gesture.dragging);\n  };\n\n  const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + (isRtl ? -shiftX : shiftX);\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: CustomTouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n    setActiveThumb(null);\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      event,\n    );\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal--Slider_start_value': String(startValueInPercent),\n    '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles.host,\n        disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        sizeClassNames[size],\n        multiple && styles.multiple,\n        isRtl && styles.rtl,\n        className,\n      )}\n      style={mergeStyle(styleProp, style)}\n      getRootRef={getRootRef}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles.track} />\n      <div className={styles.trackFill} />\n      <div ref={thumbsContainerRef} className={styles.thumbs}>\n        <SliderThumb\n          data-type=\"start\"\n          className={classNames(styles.thumb, styles.thumbStart)}\n          style={{\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'data-testid': startThumbTestId,\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n          isActive={activeThumb === 'start'}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={classNames(styles.thumb, styles.thumbEnd)}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'data-testid': endThumbTestId,\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n            isActive={activeThumb === 'end'}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","mergeStyle","useAdaptivity","useConfigDirection","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","compact","sizeClassNames","l","m","s","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","startThumbTestId","endThumbTestId","onChange","withTooltip","size","style","styleProp","restProps","sizeY","direction","isRtl","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","String","data-value","onStart","onMove","onEnd","div","ref","data-type","zIndex","inputProps","isActive"],"mappings":"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"}

package/dist/components/Slider/SliderThumb/SliderThumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,4EAOzB,gBAAgB,KAAG,KAAK,CAAC,SAkG3B,CAAC"}
+{"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,4EAOzB,gBAAgB,KAAG,KAAK,CAAC,SAkG3B,CAAC"}

package/dist/components/Slider/SliderThumb/SliderThumb.js

@@ -3,7 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useBooleanState } from "../../../hooks/useBooleanState.js";
 import { useExternRef } from "../../../hooks/useExternRef.js";

package/dist/components/Slider/SliderThumb/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n  arrowMiddleware,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n  withTooltip?: boolean;\n  isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  isActive,\n  ...restProps\n}: SliderThumbProps): React.ReactNode => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n    mode: styles.focusVisible,\n  });\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    return [\n      offsetMiddleware({\n        crossAxis: 0,\n        mainAxis: 15,\n      }),\n      flipMiddleware(),\n      shiftMiddleware({ padding: 8 }),\n      arrowMiddleware({\n        element: arrowRef,\n      }),\n    ];\n  }, [arrowRef]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    strategy: floatingPositionStrategy,\n    middlewareData: { arrow: arrowCoords },\n    update: updateTooltipPosition,\n  } = useFloating({\n    placement: 'top',\n    middleware: memoizedMiddlewares,\n  });\n\n  const {\n    value: isHovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n  const shouldShowTooltip = withTooltip && (focusVisible || isHovered || isActive);\n\n  const inputValue = inputProps && inputProps.value;\n  React.useEffect(\n    function udpateTooltipPositionOnValueChange() {\n      if (shouldShowTooltip && inputValue !== 'undefined') {\n        updateTooltipPosition();\n      }\n    },\n    [inputValue, updateTooltipPosition, shouldShowTooltip],\n  );\n\n  return (\n    <React.Fragment>\n      <span\n        {...restProps}\n        ref={handleRootRef}\n        onMouseEnter={setHoveredTrue}\n        onMouseLeave={setHoveredFalse}\n        className={classNames(\n          styles.host,\n          focusVisibleClassNames,\n          isActive && styles.active,\n          isHovered && styles.hover,\n          className,\n        )}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles.nativeInput}\n          aria-orientation=\"horizontal\"\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n      </span>\n      {shouldShowTooltip && (\n        <TooltipBase\n          appearance=\"neutral\"\n          getRootRef={refs.setFloating}\n          style={convertFloatingDataToReactCSSProperties({\n            strategy: floatingPositionStrategy,\n            x: floatingDataX,\n            y: floatingDataY,\n          })}\n          arrowProps={{\n            coords: arrowCoords,\n            placement: resolvedPlacement,\n            getRootRef: setArrowRef,\n          }}\n          description={inputValue}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","useFocusVisibleClassName","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","TooltipBase","SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","arrowRef","setArrowRef","useState","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","input","type","aria-orientation","appearance","setFloating","style","arrowProps","coords","description"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,iCAAwB;AAE/B,SAASC,WAAW,QAAQ,mCAAgC;AAa5D,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EAES,WADdC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGlB;IAC1C,MAAMmB,yBAAyBlB,yBAAyB;QACtDe;QACAI,IAAI;IACN;IACA,MAAM,CAACC,UAAUC,YAAY,GAAG1B,MAAM2B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB5B,MAAM6B,OAAO,CAAC;QACxC,OAAO;YACLpB,iBAAiB;gBACfqB,WAAW;gBACXC,UAAU;YACZ;YACAvB;YACAE,gBAAgB;gBAAEsB,SAAS;YAAE;YAC7B1B,gBAAgB;gBACd2B,SAASR;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJS,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGpC,YAAY;QACd2B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,EACJqB,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGpD,gBAAgB;IAEpB,MAAMqD,gBAAgBpD,aAA8BY,YAAYyB,KAAKgB,YAAY;IAEjF,MAAMC,oBAAoBxC,eAAgBG,CAAAA,gBAAgB8B,aAAahC,QAAO;IAE9E,MAAMwC,aAAa1C,cAAcA,WAAWiC,KAAK;IACjDjD,MAAM2D,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDX;QACF;IACF,GACA;QAACW;QAAYX;QAAuBU;KAAkB;IAGxD,qBACE,MAACzD,MAAM6D,QAAQ;;0BACb,KAACC,gDACK3C;gBACJ4C,KAAKR;gBACLS,cAAcZ;gBACda,cAAcX;gBACdxC,WAAWb,oCAETsB,wBACAL,uCACAgC,uCACApC;0BAGF,cAAA,KAACoD,iDACKlD;oBACJmD,MAAK;oBACLrD,SAAS;oBACTsD,oBAAiB;oBACjB/C,QAAQA;oBACRC,SAASA;;;YAGZmC,mCACC,KAAC7C;gBACCyD,YAAW;gBACXtD,YAAYyB,KAAK8B,WAAW;gBAC5BC,OAAOhE,wCAAwC;oBAC7CkC,UAAUC;oBACVR,GAAGC;oBACHC,GAAGC;gBACL;gBACAmC,YAAY;oBACVC,QAAQ5B;oBACRP,WAAWC;oBACXxB,YAAYW;gBACd;gBACAgD,aAAahB;;;;AAKvB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n  arrowMiddleware,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n  withTooltip?: boolean;\n  isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  isActive,\n  ...restProps\n}: SliderThumbProps): React.ReactNode => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n    mode: styles.focusVisible,\n  });\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    return [\n      offsetMiddleware({\n        crossAxis: 0,\n        mainAxis: 15,\n      }),\n      flipMiddleware(),\n      shiftMiddleware({ padding: 8 }),\n      arrowMiddleware({\n        element: arrowRef,\n      }),\n    ];\n  }, [arrowRef]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    strategy: floatingPositionStrategy,\n    middlewareData: { arrow: arrowCoords },\n    update: updateTooltipPosition,\n  } = useFloating({\n    placement: 'top',\n    middleware: memoizedMiddlewares,\n  });\n\n  const {\n    value: isHovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n  const shouldShowTooltip = withTooltip && (focusVisible || isHovered || isActive);\n\n  const inputValue = inputProps && inputProps.value;\n  React.useEffect(\n    function udpateTooltipPositionOnValueChange() {\n      if (shouldShowTooltip && inputValue !== 'undefined') {\n        updateTooltipPosition();\n      }\n    },\n    [inputValue, updateTooltipPosition, shouldShowTooltip],\n  );\n\n  return (\n    <React.Fragment>\n      <span\n        {...restProps}\n        ref={handleRootRef}\n        onMouseEnter={setHoveredTrue}\n        onMouseLeave={setHoveredFalse}\n        className={classNames(\n          styles.host,\n          focusVisibleClassNames,\n          isActive && styles.active,\n          isHovered && styles.hover,\n          className,\n        )}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles.nativeInput}\n          aria-orientation=\"horizontal\"\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n      </span>\n      {shouldShowTooltip && (\n        <TooltipBase\n          appearance=\"neutral\"\n          getRootRef={refs.setFloating}\n          style={convertFloatingDataToReactCSSProperties({\n            strategy: floatingPositionStrategy,\n            x: floatingDataX,\n            y: floatingDataY,\n          })}\n          arrowProps={{\n            coords: arrowCoords,\n            placement: resolvedPlacement,\n            getRootRef: setArrowRef,\n          }}\n          description={inputValue}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","useFocusVisibleClassName","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","TooltipBase","SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","arrowRef","setArrowRef","useState","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","input","type","aria-orientation","appearance","setFloating","style","arrowProps","coords","description"],"mappings":"AAAA;;;;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,iCAAwB;AAE/B,SAASC,WAAW,QAAQ,mCAAgC;AAa5D,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EAES,WADdC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGlB;IAC1C,MAAMmB,yBAAyBlB,yBAAyB;QACtDe;QACAI,IAAI;IACN;IACA,MAAM,CAACC,UAAUC,YAAY,GAAG1B,MAAM2B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB5B,MAAM6B,OAAO,CAAC;QACxC,OAAO;YACLpB,iBAAiB;gBACfqB,WAAW;gBACXC,UAAU;YACZ;YACAvB;YACAE,gBAAgB;gBAAEsB,SAAS;YAAE;YAC7B1B,gBAAgB;gBACd2B,SAASR;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJS,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGpC,YAAY;QACd2B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,EACJqB,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGpD,gBAAgB;IAEpB,MAAMqD,gBAAgBpD,aAA8BY,YAAYyB,KAAKgB,YAAY;IAEjF,MAAMC,oBAAoBxC,eAAgBG,CAAAA,gBAAgB8B,aAAahC,QAAO;IAE9E,MAAMwC,aAAa1C,cAAcA,WAAWiC,KAAK;IACjDjD,MAAM2D,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDX;QACF;IACF,GACA;QAACW;QAAYX;QAAuBU;KAAkB;IAGxD,qBACE,MAACzD,MAAM6D,QAAQ;;0BACb,KAACC,gDACK3C;gBACJ4C,KAAKR;gBACLS,cAAcZ;gBACda,cAAcX;gBACdxC,WAAWb,oCAETsB,wBACAL,uCACAgC,uCACApC;0BAGF,cAAA,KAACoD,iDACKlD;oBACJmD,MAAK;oBACLrD,SAAS;oBACTsD,oBAAiB;oBACjB/C,QAAQA;oBACRC,SAASA;;;YAGZmC,mCACC,KAAC7C;gBACCyD,YAAW;gBACXtD,YAAYyB,KAAK8B,WAAW;gBAC5BC,OAAOhE,wCAAwC;oBAC7CkC,UAAUC;oBACVR,GAAGC;oBACHC,GAAGC;gBACL;gBACAmC,YAAY;oBACVC,QAAQ5B;oBACRP,WAAWC;oBACXxB,YAAYW;gBACd;gBACAgD,aAAahB;;;;AAKvB,EAAE"}

package/dist/components/Slider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;CACxB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;CACxB"}

package/dist/components/Slider/types.js

@@ -1,3 +1,3 @@
-export { };
+/* eslint-disable jsdoc/require-jsdoc */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/components/Slider/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/types.ts"],"sourcesContent":["export type InternalValueState = [number, number | null];\n\nexport type InternalDraggingType = 'start' | 'end';\n\nexport interface InternalGestureRef {\n  dragging: InternalDraggingType | null;\n  startX: number;\n  containerWidth: number;\n}\n"],"names":[],"mappings":"AAIA,WAIC"}
+{"version":3,"sources":["../../../src/components/Slider/types.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nexport type InternalValueState = [number, number | null];\n\nexport type InternalDraggingType = 'start' | 'end';\n\nexport interface InternalGestureRef {\n  dragging: InternalDraggingType | null;\n  startX: number;\n  containerWidth: number;\n}\n"],"names":[],"mappings":"AAAA,sCAAsC,GAMtC,WAIC"}

package/dist/components/Snackbar/Snackbar.d.ts

@@ -17,19 +17,19 @@ export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
     placement?: SnackbarPlacement;
     /**
      * Название кнопки действия в уведомлении
-     * Не может использоваться одновременно с `subtitle`
+     * Не может использоваться одновременно с `subtitle`.
      */
     action?: React.ReactNode;
     /**
-     * Будет вызвано при клике на кнопку действия
+     * Будет вызвано при нажатии на кнопку действия.
      */
     onActionClick?: (event: React.MouseEvent) => void;
     /**
-     * Время в миллисекундах, через которое плашка скроется
+     * Время в миллисекундах, через которое плашка скроется.
      */
     duration?: number;
     /**
-     * Обработчик закрытия уведомления
+     * Обработчик закрытия уведомления.
      */
     onClose: () => void;
     /**