@vkontakte/vkui 6.1.2 → 6.2.0

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.module.css

@@ -111,7 +111,7 @@
  */
 
 .SubnavigationButton--mode-primary {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation3);
 }
 

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

@@ -5,5 +5,5 @@ export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export declare const Switch: ({ style, className, getRootRef, getRef, checked: checkedProp, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ style, className, getRootRef, getRef, checked: checkedProp, disabled, onBlur: onBlurProp, onFocus: onFocusProp, onClick, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASjD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,MAAM,iFAOhB,WAAW,4CAqDb,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASjD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,MAAM,8IAWhB,WAAW,4CA2Eb,CAAC"}

package/dist/cssm/components/Switch/Switch.js

@@ -10,11 +10,11 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Switch.module.css';
 const sizeYClassNames = {
     none: styles['Switch--sizeY-none'],
-    ['compact']: styles['Switch--sizeY-compact']
+    compact: styles['Switch--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
- */ export const Switch = ({ style, className, getRootRef, getRef, checked: checkedProp, ...restProps })=>{
+ */ export const Switch = ({ style, className, getRootRef, getRef, checked: checkedProp, disabled, onBlur: onBlurProp, onFocus: onFocusProp, onClick, ...restProps })=>{
     const platform = usePlatform();
     const { sizeY = 'none' } = useAdaptivity();
     const { focusVisible, onBlur, onFocus } = useFocusVisible();
@@ -22,6 +22,8 @@ const sizeYClassNames = {
         focusVisible,
         mode: 'outside'
     });
+    const handleBlur = callMultiple(onBlur, onBlurProp);
+    const handleFocus = callMultiple(onFocus, onFocusProp);
     const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(Boolean(restProps.defaultChecked));
     const isControlled = checkedProp !== undefined;
     const syncUncontrolledCheckedStateOnClick = React.useCallback((e)=>{
@@ -33,30 +35,46 @@ const sizeYClassNames = {
     }, [
         isControlled
     ]);
-    const ariaCheckedState = isControlled ? checkedProp : localUncontrolledChecked;
+    const inputProps = {
+        ...restProps,
+        Component: 'input',
+        getRootRef: getRef,
+        type: 'checkbox',
+        role: 'switch',
+        disabled: disabled,
+        onBlur: onBlurProp,
+        onFocus: onFocusProp,
+        onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick)
+    };
+    if (isControlled) {
+        inputProps.checked = checkedProp;
+        inputProps['aria-checked'] = checkedProp ? 'true' : 'false';
+    } else {
+        inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';
+    }
     return /*#__PURE__*/ _jsxs("label", {
-        className: classNames(styles['Switch'], platform === 'ios' && styles['Switch--ios'], sizeY !== 'regular' && sizeYClassNames[sizeY], restProps.disabled && styles['Switch--disabled'], focusVisibleClassNames, className),
+        className: classNames(styles['Switch'], sizeY !== 'regular' && sizeYClassNames[sizeY], platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'], disabled && styles['Switch--disabled'], focusVisibleClassNames, className),
         style: style,
         ref: getRootRef,
-        onBlur: callMultiple(onBlur, restProps.onBlur),
-        onFocus: callMultiple(onFocus, restProps.onFocus),
         children: [
             /*#__PURE__*/ _jsx(VisuallyHidden, {
-                ...restProps,
-                ...isControlled && {
-                    checked: checkedProp
-                },
-                Component: "input",
-                getRootRef: getRef,
-                onClick: callMultiple(syncUncontrolledCheckedStateOnClick, restProps.onClick),
-                type: "checkbox",
-                role: "switch",
-                "aria-checked": ariaCheckedState ? 'true' : 'false',
-                className: styles['Switch__self']
+                ...inputProps,
+                className: styles['Switch__inputNative'],
+                onBlur: handleBlur,
+                onFocus: handleFocus
             }),
-            /*#__PURE__*/ _jsx("span", {
+            /*#__PURE__*/ _jsxs("span", {
                 "aria-hidden": true,
-                className: styles['Switch__pseudo']
+                className: styles['Switch__inputFake'],
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: styles['Switch__track']
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": true,
+                        className: classNames(styles['Switch__handle'], platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'])
+                    })
+                ]
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  ['compact']: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const ariaCheckedState = isControlled ? checkedProp : localUncontrolledChecked;\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === 'ios' && styles['Switch--ios'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        {...(isControlled && { checked: checkedProp })}\n        Component=\"input\"\n        getRootRef={getRef}\n        onClick={callMultiple(syncUncontrolledCheckedStateOnClick, restProps.onClick)}\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-checked={ariaCheckedState ? 'true' : 'false'}\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","styles","sizeYClassNames","none","Switch","style","className","getRootRef","getRef","checked","checkedProp","restProps","platform","sizeY","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","ariaCheckedState","label","disabled","ref","Component","onClick","type","role","aria-checked","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAAC,UAAU,EAAEA,MAAM,CAAC,wBAAwB;AAC9C;AAOA;;CAEC,GACD,OAAO,MAAMG,SAAS,CAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpB,GAAGC,WACS;IACZ,MAAMC,WAAWd;IACjB,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAM,EAAEmB,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGpB;IAC1C,MAAMqB,yBAAyBpB,yBAAyB;QAAEiB;QAAcI,MAAM;IAAU;IAExF,MAAM,CAACC,0BAA0BC,4BAA4B,GAAG3B,MAAM4B,QAAQ,CAC5EC,QAAQX,UAAUY,cAAc;IAElC,MAAMC,eAAed,gBAAgBe;IAErC,MAAMC,sCAAsCjC,MAAMkC,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAapB,OAAO;IAClD,GACA;QAACe;KAAa;IAGhB,MAAMO,mBAAmBP,eAAed,cAAcS;IACtD,qBACE,MAACa;QACC1B,WAAWZ,WACTO,MAAM,CAAC,SAAS,EAChBW,aAAa,SAASX,MAAM,CAAC,cAAc,EAC3CY,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CF,UAAUsB,QAAQ,IAAIhC,MAAM,CAAC,mBAAmB,EAChDgB,wBACAX;QAEFD,OAAOA;QACP6B,KAAK3B;QACLQ,QAAQhB,aAAagB,QAAQJ,UAAUI,MAAM;QAC7CC,SAASjB,aAAaiB,SAASL,UAAUK,OAAO;;0BAEhD,KAAChB;gBACE,GAAGW,SAAS;gBACZ,GAAIa,gBAAgB;oBAAEf,SAASC;gBAAY,CAAC;gBAC7CyB,WAAU;gBACV5B,YAAYC;gBACZ4B,SAASrC,aAAa2B,qCAAqCf,UAAUyB,OAAO;gBAC5EC,MAAK;gBACLC,MAAK;gBACLC,gBAAcR,mBAAmB,SAAS;gBAC1CzB,WAAWL,MAAM,CAAC,eAAe;;0BAEnC,KAACuC;gBAAKC,aAAW;gBAACnC,WAAWL,MAAM,CAAC,iBAAiB;;;;AAG3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  compact: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],\n        disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles['Switch__inputNative']}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles['Switch__inputFake']}>\n        <span className={styles['Switch__track']} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles['Switch__handle'],\n            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","styles","sizeYClassNames","none","compact","Switch","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","platform","sizeY","focusVisible","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","ref","span","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,cAAc,QAAkC,mCAAmC;AAC5F,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClCG,SAASH,MAAM,CAAC,wBAAwB;AAC1C;AAOA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EACP,GAAGC,WACS;IACZ,MAAMC,WAAWrB;IACjB,MAAM,EAAEsB,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAM,EAAE0B,YAAY,EAAER,MAAM,EAAEE,OAAO,EAAE,GAAGnB;IAC1C,MAAM0B,yBAAyBzB,yBAAyB;QAAEwB;QAAcE,MAAM;IAAU;IACxF,MAAMC,aAAazB,aAAac,QAAQC;IACxC,MAAMW,cAAc1B,aAAagB,SAASC;IAE1C,MAAM,CAACU,0BAA0BC,4BAA4B,GAAGlC,MAAMmC,QAAQ,CAC5EC,QAAQX,UAAUY,cAAc;IAElC,MAAMC,eAAepB,gBAAgBqB;IAErC,MAAMC,sCAAsCxC,MAAMyC,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAa1B,OAAO;IAClD,GACA;QAACqB;KAAa;IAGhB,MAAMO,aAAoD;QACxD,GAAGpB,SAAS;QACZqB,WAAW;QACX/B,YAAYC;QACZ+B,MAAM;QACNC,MAAM;QACN7B,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASlB,aAAakC,qCAAqChB;IAC7D;IAEA,IAAIc,cAAc;QAChBO,WAAW5B,OAAO,GAAGC;QACrB2B,UAAU,CAAC,eAAe,GAAG3B,cAAc,SAAS;IACtD,OAAO;QACL2B,UAAU,CAAC,eAAe,GAAGZ,2BAA2B,SAAS;IACnE;IAEA,qBACE,MAACgB;QACCnC,WAAWb,WACTO,MAAM,CAAC,SAAS,EAChBmB,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CD,aAAa,QAAQlB,MAAM,CAAC,cAAc,GAAGA,MAAM,CAAC,kBAAkB,EACtEW,YAAYX,MAAM,CAAC,mBAAmB,EACtCqB,wBACAf;QAEFD,OAAOA;QACPqC,KAAKnC;;0BAEL,KAACR;gBACE,GAAGsC,UAAU;gBACd/B,WAAWN,MAAM,CAAC,sBAAsB;gBACxCY,QAAQW;gBACRT,SAASU;;0BAEX,MAACmB;gBAAKC,aAAW;gBAACtC,WAAWN,MAAM,CAAC,oBAAoB;;kCACtD,KAAC2C;wBAAKrC,WAAWN,MAAM,CAAC,gBAAgB;;kCACxC,KAAC2C;wBACCC,aAAW;wBACXtC,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxBkB,aAAa,SAAS,CAACP,YAAYX,MAAM,CAAC,6BAA6B;;;;;;AAMnF,EAAE"}

package/dist/cssm/components/Switch/Switch.module.css

@@ -1,196 +1,252 @@
 .Switch {
+  /* Switch__track */
+  --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
+  --vkui_internal--Switch__track_outline_width: 2px;
+  --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--not-checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
+
+  position: relative;
+  display: block;
+  border-radius: var(--vkui_internal--Switch__track_shape);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  position: relative;
-  display: block;
   cursor: pointer;
-
-  /* Добавляем отступы, если пин больше трека */
-  padding: calc(
-    (var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2
-  );
+  -webkit-tap-highlight-color: transparent;
 }
 
-.Switch--sizeY-compact {
-  padding: calc(
-    (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
-  );
+.Switch--disabled {
+  cursor: not-allowed;
+  opacity: var(--vkui_internal--Switch_disabled);
 }
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none {
-    padding: calc(
-      (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
-    );
-  }
+.Switch--default {
+  --vkui_internal--Switch_disabled: 0.5;
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 52px;
+  --vkui_internal--Switch__track_height: 32px;
+  --vkui_internal--Switch__track_color: var(--vkui--color_background);
+  --vkui_internal--Switch__track_color_duration: 67ms;
+  /* prettier-ignore */
+  --vkui_internal--Switch__track_shadow: inset 0 0 0 var(--vkui_internal--Switch__track_outline_width) var(--vkui--color_field_border_alpha);
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 28px;
+  --vkui_internal--Switch__handle_widthNoUnit--checked: 24;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 16;
+  --vkui_internal--Switch__handle_height: 28px;
+  --vkui_internal--Switch__handle_heightNoUnit: 28;
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_medium);
+  --vkui_internal--Switch__handle_color_duration: 67ms;
+  --vkui_internal--Switch__handle_scale_duration: 250ms;
+  --vkui_internal--Switch__handle_shift_x_duration: 300ms;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --vkui_internal--Switch__handle_shadow: none;
 }
 
-.Switch--disabled {
-  cursor: default;
+.Switch--default.Switch--sizeY-compact {
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 42px;
+  --vkui_internal--Switch__track_height: 26px;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 22px;
+  --vkui_internal--Switch__handle_widthNoUnit--checked: 20;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 12;
+  --vkui_internal--Switch__handle_height: 22px;
+  --vkui_internal--Switch__handle_heightNoUnit: 22;
 }
 
-.Switch__pseudo {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch--default.Switch--sizeY-none {
+    /* Switch__track */
+    --vkui_internal--Switch__track_width: 42px;
+    --vkui_internal--Switch__track_height: 26px;
+
+    /* Switch__handle */
+    --vkui_internal--Switch__handle_width: 22px;
+    --vkui_internal--Switch__handle_widthNoUnit--checked: 20;
+    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 12;
+    --vkui_internal--Switch__handle_height: 22px;
+    --vkui_internal--Switch__handle_heightNoUnit: 22;
+  }
 }
 
-/**
- * Пин
- */
+.Switch--ios {
+  --vkui_internal--Switch_disabled: 0.7;
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 51px;
+  --vkui_internal--Switch__track_height: 31px;
+  --vkui_internal--Switch__track_color: var(--vkui--color_track_background);
+  --vkui_internal--Switch__track_color_duration: 200ms;
+  --vkui_internal--Switch__track_shadow: none;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 27px;
+  --vkui_internal--Switch__handle_widthNoUnit--pressed: 27px;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 27px;
+  --vkui_internal--Switch__handle_height: 27px;
+  --vkui_internal--Switch__handle_heightNoUnit: 27;
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
+  --vkui_internal--Switch__handle_color_duration: 200ms;
+  --vkui_internal--Switch__handle_scale_duration: 200ms;
+  --vkui_internal--Switch__handle_shift_x_duration: 200ms;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shadow:
+    0 3px 8px rgba(0, 0, 0, 0.15),
+    0 3px 1px rgba(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+}
 
-.Switch__pseudo::before {
-  position: absolute;
-  content: '';
-  border-radius: 50%;
-  box-sizing: border-box;
-  background: var(--vkui--color_icon_contrast_secondary);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
-
-  /* Делаем пин по центру */
-  inset-block-start: calc(
-    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
-  );
-  inset-inline-start: calc(
-    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
-  );
-  inline-size: var(--vkui--size_switch_pin--regular);
-  block-size: var(--vkui--size_switch_pin--regular);
-}
-
-.Switch--sizeY-compact .Switch__pseudo::before {
-  inset-block-start: calc(
-    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-  );
-  inset-inline-start: calc(
-    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-  );
-  inline-size: var(--vkui--size_switch_pin--compact);
-  block-size: var(--vkui--size_switch_pin--compact);
+.Switch--ios.Switch--sizeY-compact {
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 47px;
+  --vkui_internal--Switch__track_height: 27px;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 23px;
+  --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
+  --vkui_internal--Switch__handle_height: 23px;
+  --vkui_internal--Switch__handle_heightNoUnit: 23;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none .Switch__pseudo::before {
-    inset-block-start: calc(
-      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-    );
-    inset-inline-start: calc(
-      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-    );
-    inline-size: var(--vkui--size_switch_pin--compact);
-    block-size: var(--vkui--size_switch_pin--compact);
+  .Switch--ios.Switch--sizeY-none {
+    /* Switch__track */
+    --vkui_internal--Switch__track_width: 47px;
+    --vkui_internal--Switch__track_height: 27px;
+
+    /* Switch__handle */
+    --vkui_internal--Switch__handle_width: 23px;
+    --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
+    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
+    --vkui_internal--Switch__handle_height: 23px;
+    --vkui_internal--Switch__handle_heightNoUnit: 23;
   }
 }
 
-.Switch__self:checked + .Switch__pseudo::before {
-  background: var(--vkui--color_icon_accent);
-  transform: translateX(
-    calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular))
-  );
-}
-
-/**
- * Трек
- */
-
-.Switch__pseudo::after {
-  content: '';
+.Switch__inputFake {
   display: block;
-  background: var(--vkui--color_icon_tertiary_alpha);
-  border-radius: calc(var(--vkui--size_switch_width--regular) / 2);
-  inline-size: var(--vkui--size_switch_width--regular);
-  block-size: var(--vkui--size_switch_height--regular);
 }
 
-.Switch--sizeY-compact .Switch__pseudo::after {
-  border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
-  inline-size: var(--vkui--size_switch_width--compact);
-  block-size: var(--vkui--size_switch_height--compact);
-}
+.Switch__inputNative:checked + .Switch__inputFake {
+  /* Switch__track */
+  --vkui_internal--Switch__track_color: var(--vkui--color_background_accent);
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none .Switch__pseudo::after {
-    border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
-    inline-size: var(--vkui--size_switch_width--compact);
-    block-size: var(--vkui--size_switch_height--compact);
-  }
+  /* Switch__handle */
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
 }
 
-.Switch__self:checked + .Switch__pseudo::after {
-  opacity: 0.48;
-  background: var(--vkui--color_icon_accent);
+.Switch--default:not(.Switch--disabled) .Switch__inputFake:active {
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_scale: 1;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.2, 0, 0, 1);
 }
 
-.Switch--sizeY-compact .Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(
-    calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
-  );
+.Switch__track {
+  position: relative;
+  display: block;
+  inline-size: var(--vkui_internal--Switch__track_width);
+  block-size: var(--vkui_internal--Switch__track_height);
+  border-radius: var(--vkui_internal--Switch__track_shape);
+  background-color: var(--vkui_internal--Switch__track_color);
+  box-shadow: var(--vkui_internal--Switch__track_shadow);
+  transition: background-color var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none .Switch__self:checked + .Switch__pseudo::before {
-    transform: translateX(
-      calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
-    );
-  }
+.Switch__handle {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inline-size: var(--vkui_internal--Switch__handle_width);
+  block-size: var(--vkui_internal--Switch__handle_height);
+  border-radius: 9999px;
+  /* prettier-ignore */
+  transform: translate(var(--vkui_internal--Switch__handle_shift_x), var(--vkui_internal--Switch__handle_shift_y));
+  /* prettier-ignore */
+  transition: transform var(--vkui_internal--Switch__handle_shift_x_duration) var(--vkui_internal--Switch__handle_shift_x_easing);
 }
 
-.Switch__self[disabled] + .Switch__pseudo {
-  opacity: var(--vkui--opacity_disable);
+.Switch__handle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--vkui_internal--Switch__handle_color);
+  box-shadow: var(--vkui_internal--Switch__handle_shadow);
+  transform: scale(var(--vkui_internal--Switch__handle_scale));
+  transition-property: transform, background-color;
+  transition-timing-function: var(--vkui_internal--Switch__handle_shift_x_easing), linear;
+  /* prettier-ignore */
+  transition-duration: var(--vkui_internal--Switch__handle_scale_duration), var(--vkui_internal--Switch__handle_color_duration);
 }
 
-/**
- * Пин
- */
+.Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_opacity: 0;
+  --vkui_internal--Switch__handleRipple_opacity_duration: 15ms;
+  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_icon_medium);
+  --vkui_internal--Switch__handleRipple_color_duration: 15ms;
 
-.Switch--ios .Switch__pseudo::before {
-  background: var(--vkui_internal--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 40px;
+  block-size: 40px;
+  border-radius: inherit;
+  background-color: var(--vkui_internal--Switch__handleRipple_color);
+  opacity: var(--vkui_internal--Switch__handleRipple_opacity);
+  transform: translate(-50%, -50%);
+  transition-property: opacity, background-color;
+  /* prettier-ignore */
+  transition-duration:
+    var(--vkui_internal--Switch__handleRipple_opacity_duration),
+    var(--vkui_internal--Switch__handleRipple_color_duration);
+  transition-timing-function: linear;
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--vkui_internal--white);
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch__handle--withRipple::before {
+    inline-size: 32px;
+    block-size: 32px;
+  }
 }
 
-/**
- * Трек
- */
+/* устройства с мышкой */
 
-.Switch--ios .Switch__pseudo::after {
-  background: var(--vkui--color_track_background);
+@media (hover: hover) and (pointer: fine) {
+  .Switch__inputFake:hover .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity: 0.08;
+  }
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::after {
-  opacity: 1;
+.Switch__inputFake:active .Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_opacity: 0.12;
 }
 
-/**
- * [a11y]
- * add animation for browsers that support prefers-reduced-motion
- * so that users with vestibular motion disorders have no problem
- * navigating accessible vkui apps via keyboard
- */
-
-@media (prefers-reduced-motion: no-preference) {
-  .Switch__pseudo::after {
-    transition: background-color 0.1s ease;
-  }
+.Switch__inputNative:checked + .Switch__inputFake .Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_background_accent);
+}
 
-  .Switch__pseudo::before {
-    transition: transform 0.1s ease;
-  }
+/* тач-устройства */
 
-  .Switch--ios .Switch__pseudo::after {
-    transition: background-color 0.2s ease;
+@media (hover: none) {
+  .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity_duration: 375ms;
   }
 
-  .Switch--ios .Switch__pseudo::before {
-    transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  .Switch__inputFake:active .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity_duration: 105ms;
   }
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,MAAM,CAAC,SAAS,EAChBU,aAAa,SAASV,MAAM,CAAC,cAAc,EAC3CC,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,MAAM,CAAC,iBAAiB;QAEnC,GAAGS,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,MAAM,CAAC,SAAS,EAChBU,aAAa,SAASV,MAAM,CAAC,cAAc,EAC3CC,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,MAAM,CAAC,iBAAiB;QAEnC,GAAGS,SAAS;;AAGnB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","usePlatform","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACR,GAAGC,WACa;IAChB,MAAMC,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBT,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBd,KAAKN,gBAAgBqB,IAAI,CAACR,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,MAACX;QACCW,WAAWA;QACV,GAAGE,SAAS;QACbD,UAAUA;QACVF,MAAMA;QACNU,eAAe1B,WACbS,MAAM,CAAC,aAAa,EACpBW,aAAa,SAASX,MAAM,CAAC,kBAAkB,EAC/CW,aAAa,aAAaX,MAAM,CAAC,sBAAsB,EACvDI,YAAYJ,MAAM,CAAC,uBAAuB;;0BAG5C,KAACF;gBACCoB,MAAK;gBACLT,UAAUA;gBACVU,YAAYR,aAAa,QAAQX,MAAM,CAAC,+BAA+B,GAAG;gBAC1EoB,mBAAmBT,aAAa,QAAQ,IAAI;gBAC5CU,UAAU;gBACVC,WAAWtB,MAAM,CAAC,uBAAuB;gBACzCuB,SAAS9B;;0BAEX,MAAC+B;gBAAIF,WAAWtB,MAAM,CAAC,iBAAiB;;kCACtC,MAACwB;wBAAIF,WAAWtB,MAAM,CAAC,mBAAmB;;4BACvCG;0CACD,KAACqB;gCAAIF,WAAU;0CACZ9B,aAAaa,cAAcA;;;;oBAG/BC,sBACC,KAACP;wBAASS,WAAU;wBAAMc,WAAWtB,MAAM,CAAC,mBAAmB;wBAAEyB,QAAO;kCACrEnB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","usePlatform","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACR,GAAGC,WACa;IAChB,MAAMC,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBT,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBd,KAAKN,gBAAgBqB,IAAI,CAACR,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,MAACX;QACCW,WAAWA;QACV,GAAGE,SAAS;QACbD,UAAUA;QACVF,MAAMA;QACNU,eAAe1B,WACbS,MAAM,CAAC,aAAa,EACpBW,aAAa,SAASX,MAAM,CAAC,kBAAkB,EAC/CW,aAAa,aAAaX,MAAM,CAAC,sBAAsB,EACvDI,YAAYJ,MAAM,CAAC,uBAAuB;;0BAG5C,KAACF;gBACCoB,MAAK;gBACLT,UAAUA;gBACVU,YAAYR,aAAa,QAAQX,MAAM,CAAC,+BAA+B,GAAG;gBAC1EoB,mBAAmBT,aAAa,QAAQ,IAAI;gBAC5CU,UAAU;gBACVC,WAAWtB,MAAM,CAAC,uBAAuB;gBACzCuB,SAAS9B;;0BAEX,MAAC+B;gBAAIF,WAAWtB,MAAM,CAAC,iBAAiB;;kCACtC,MAACwB;wBAAIF,WAAWtB,MAAM,CAAC,mBAAmB;;4BACvCG;0CACD,KAACqB;gCAAIF,WAAU;0CACZ9B,aAAaa,cAAcA;;;;oBAG/BC,sBACC,KAACP;wBAASS,WAAU;wBAAMc,WAAWtB,MAAM,CAAC,mBAAmB;wBAAEyB,QAAO;kCACrEnB;;;;;;AAMb,EAAE"}