@alfalab/core-components-tab-bar 2.0.8 → 2.1.1

package/Component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"tab-bar__component_1ppo6","modal-bg-primary":"tab-bar__modal-bg-primary_1ppo6","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1ppo6","border":"tab-bar__border_1ppo6"};
+var styles = {"component":"tab-bar__component_9k0ye","modal-bg-primary":"tab-bar__modal-bg-primary_9k0ye","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_9k0ye","border":"tab-bar__border_9k0ye"};
 require('./index.css')
 
 var TabBarComponent = React.forwardRef(function (_a, ref) {

package/components/tab/Component.js

@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"tab-bar__component_bqjx3","primary":"tab-bar__primary_bqjx3","secondary":"tab-bar__secondary_bqjx3","icon":"tab-bar__icon_bqjx3","label":"tab-bar__label_bqjx3","labelSelected":"tab-bar__labelSelected_bqjx3","indicator":"tab-bar__indicator_bqjx3"};
+var styles = {"component":"tab-bar__component_1bx2r","primary":"tab-bar__primary_1bx2r","secondary":"tab-bar__secondary_1bx2r","icon":"tab-bar__icon_1bx2r","label":"tab-bar__label_1bx2r","labelSelected":"tab-bar__labelSelected_1bx2r","indicator":"tab-bar__indicator_1bx2r"};
 require('./index.css')
 
 var TabComponent = React.forwardRef(function (_a, ref) {

package/components/tab/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l5ez */
+/* hash: 1ahji */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
@@ -22,17 +22,18 @@
     --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-0: 0;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 } :root {
 } :root {
-} .tab-bar__component_bqjx3 {
+} .tab-bar__component_1bx2r {
     box-sizing: border-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
     outline: none;
     border: 0;
-    margin: 0;
+    margin: var(--gap-0);
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
@@ -48,19 +49,19 @@
     flex-direction: column;
     flex: 1 0 0;
     align-items: center;
-    padding: var(--gap-8) 0;
+    padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_bqjx3 {
+} .tab-bar__primary_1bx2r {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_bqjx3 {
+} .tab-bar__secondary_1bx2r {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_bqjx3 {
+} .tab-bar__icon_1bx2r {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_bqjx3 {
+} .tab-bar__label_1bx2r {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -69,9 +70,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_bqjx3 {
+} .tab-bar__labelSelected_1bx2r {
     color: inherit;
-} .tab-bar__indicator_bqjx3 {
+} .tab-bar__indicator_1bx2r {
     position: absolute;
     top: 3px;
     left: calc(50% + var(--gap-4));

package/cssm/components/tab/index.module.css

@@ -21,6 +21,7 @@
     --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-0: 0;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 } :root {
@@ -31,7 +32,7 @@
     -webkit-tap-highlight-color: transparent;
     outline: none;
     border: 0;
-    margin: 0;
+    margin: var(--gap-0);
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
@@ -47,7 +48,7 @@
     flex-direction: column;
     flex: 1 0 0;
     align-items: center;
-    padding: var(--gap-8) 0;
+    padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
 } .primary {
     color: var(--color-light-accent-primary);

package/esm/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { getDataTestId } from '@alfalab/core-components-shared/esm';
 import { Tab } from './components/tab/Component.js';
 
-var styles = {"component":"tab-bar__component_1ppo6","modal-bg-primary":"tab-bar__modal-bg-primary_1ppo6","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1ppo6","border":"tab-bar__border_1ppo6"};
+var styles = {"component":"tab-bar__component_9k0ye","modal-bg-primary":"tab-bar__modal-bg-primary_9k0ye","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_9k0ye","border":"tab-bar__border_9k0ye"};
 require('./index.css')
 
 var TabBarComponent = forwardRef(function (_a, ref) {

package/esm/components/tab/Component.js

@@ -5,7 +5,7 @@ import { Indicator } from '@alfalab/core-components-indicator/esm';
 import { Typography } from '@alfalab/core-components-typography/esm';
 import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
 
-var styles = {"component":"tab-bar__component_bqjx3","primary":"tab-bar__primary_bqjx3","secondary":"tab-bar__secondary_bqjx3","icon":"tab-bar__icon_bqjx3","label":"tab-bar__label_bqjx3","labelSelected":"tab-bar__labelSelected_bqjx3","indicator":"tab-bar__indicator_bqjx3"};
+var styles = {"component":"tab-bar__component_1bx2r","primary":"tab-bar__primary_1bx2r","secondary":"tab-bar__secondary_1bx2r","icon":"tab-bar__icon_1bx2r","label":"tab-bar__label_1bx2r","labelSelected":"tab-bar__labelSelected_1bx2r","indicator":"tab-bar__indicator_1bx2r"};
 require('./index.css')
 
 var TabComponent = forwardRef(function (_a, ref) {

package/esm/components/tab/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l5ez */
+/* hash: 1ahji */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
@@ -22,17 +22,18 @@
     --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-0: 0;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 } :root {
 } :root {
-} .tab-bar__component_bqjx3 {
+} .tab-bar__component_1bx2r {
     box-sizing: border-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
     outline: none;
     border: 0;
-    margin: 0;
+    margin: var(--gap-0);
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
@@ -48,19 +49,19 @@
     flex-direction: column;
     flex: 1 0 0;
     align-items: center;
-    padding: var(--gap-8) 0;
+    padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_bqjx3 {
+} .tab-bar__primary_1bx2r {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_bqjx3 {
+} .tab-bar__secondary_1bx2r {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_bqjx3 {
+} .tab-bar__icon_1bx2r {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_bqjx3 {
+} .tab-bar__label_1bx2r {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -69,9 +70,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_bqjx3 {
+} .tab-bar__labelSelected_1bx2r {
     color: inherit;
-} .tab-bar__indicator_bqjx3 {
+} .tab-bar__indicator_1bx2r {
     position: absolute;
     top: 3px;
     left: calc(50% + var(--gap-4));

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1cyul */
+/* hash: 1sc93 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-base-bg-alt-primary: #f2f3f5;
@@ -21,7 +21,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .tab-bar__component_1ppo6 {
+} .tab-bar__component_9k0ye {
     display: flex;
     justify-content: center;
     height: 64px;
@@ -29,10 +29,10 @@
     box-sizing: border-box;
     overflow: hidden;
     transition: box-shadow 0.2s ease
-} .tab-bar__component_1ppo6.tab-bar__modal-bg-primary_1ppo6 {
+} .tab-bar__component_9k0ye.tab-bar__modal-bg-primary_9k0ye {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_1ppo6.tab-bar__modal-bg-alt-primary_1ppo6 {
+    } .tab-bar__component_9k0ye.tab-bar__modal-bg-alt-primary_9k0ye {
         background-color: var(--color-light-base-bg-alt-primary);
-    } .tab-bar__border_1ppo6 {
+    } .tab-bar__border_9k0ye {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1cyul */
+/* hash: 1sc93 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-base-bg-alt-primary: #f2f3f5;
@@ -21,7 +21,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .tab-bar__component_1ppo6 {
+} .tab-bar__component_9k0ye {
     display: flex;
     justify-content: center;
     height: 64px;
@@ -29,10 +29,10 @@
     box-sizing: border-box;
     overflow: hidden;
     transition: box-shadow 0.2s ease
-} .tab-bar__component_1ppo6.tab-bar__modal-bg-primary_1ppo6 {
+} .tab-bar__component_9k0ye.tab-bar__modal-bg-primary_9k0ye {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_1ppo6.tab-bar__modal-bg-alt-primary_1ppo6 {
+    } .tab-bar__component_9k0ye.tab-bar__modal-bg-alt-primary_9k0ye {
         background-color: var(--color-light-base-bg-alt-primary);
-    } .tab-bar__border_1ppo6 {
+    } .tab-bar__border_9k0ye {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/modern/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { Tab } from './components/tab/Component.js';
 
-const styles = {"component":"tab-bar__component_1ppo6","modal-bg-primary":"tab-bar__modal-bg-primary_1ppo6","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1ppo6","border":"tab-bar__border_1ppo6"};
+const styles = {"component":"tab-bar__component_9k0ye","modal-bg-primary":"tab-bar__modal-bg-primary_9k0ye","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_9k0ye","border":"tab-bar__border_9k0ye"};
 require('./index.css')
 
 const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {

package/modern/components/tab/Component.js

@@ -4,7 +4,7 @@ import { Indicator } from '@alfalab/core-components-indicator/modern';
 import { Typography } from '@alfalab/core-components-typography/modern';
 import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
 
-const styles = {"component":"tab-bar__component_bqjx3","primary":"tab-bar__primary_bqjx3","secondary":"tab-bar__secondary_bqjx3","icon":"tab-bar__icon_bqjx3","label":"tab-bar__label_bqjx3","labelSelected":"tab-bar__labelSelected_bqjx3","indicator":"tab-bar__indicator_bqjx3"};
+const styles = {"component":"tab-bar__component_1bx2r","primary":"tab-bar__primary_1bx2r","secondary":"tab-bar__secondary_1bx2r","icon":"tab-bar__icon_1bx2r","label":"tab-bar__label_1bx2r","labelSelected":"tab-bar__labelSelected_1bx2r","indicator":"tab-bar__indicator_1bx2r"};
 require('./index.css')
 
 const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {

package/modern/components/tab/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l5ez */
+/* hash: 1ahji */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
@@ -22,17 +22,18 @@
     --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-0: 0;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 } :root {
 } :root {
-} .tab-bar__component_bqjx3 {
+} .tab-bar__component_1bx2r {
     box-sizing: border-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
     outline: none;
     border: 0;
-    margin: 0;
+    margin: var(--gap-0);
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
@@ -48,19 +49,19 @@
     flex-direction: column;
     flex: 1 0 0;
     align-items: center;
-    padding: var(--gap-8) 0;
+    padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_bqjx3 {
+} .tab-bar__primary_1bx2r {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_bqjx3 {
+} .tab-bar__secondary_1bx2r {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_bqjx3 {
+} .tab-bar__icon_1bx2r {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_bqjx3 {
+} .tab-bar__label_1bx2r {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -69,9 +70,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_bqjx3 {
+} .tab-bar__labelSelected_1bx2r {
     color: inherit;
-} .tab-bar__indicator_bqjx3 {
+} .tab-bar__indicator_1bx2r {
     position: absolute;
     top: 3px;
     left: calc(50% + var(--gap-4));

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1cyul */
+/* hash: 1sc93 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-base-bg-alt-primary: #f2f3f5;
@@ -21,7 +21,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .tab-bar__component_1ppo6 {
+} .tab-bar__component_9k0ye {
     display: flex;
     justify-content: center;
     height: 64px;
@@ -29,10 +29,10 @@
     box-sizing: border-box;
     overflow: hidden;
     transition: box-shadow 0.2s ease
-} .tab-bar__component_1ppo6.tab-bar__modal-bg-primary_1ppo6 {
+} .tab-bar__component_9k0ye.tab-bar__modal-bg-primary_9k0ye {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_1ppo6.tab-bar__modal-bg-alt-primary_1ppo6 {
+    } .tab-bar__component_9k0ye.tab-bar__modal-bg-alt-primary_9k0ye {
         background-color: var(--color-light-base-bg-alt-primary);
-    } .tab-bar__border_1ppo6 {
+    } .tab-bar__border_9k0ye {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/moderncssm/Component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabBarProps } from "./types";
+declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLElement>>;
+};
+export { TabBar };

package/moderncssm/Component.js

@@ -0,0 +1,26 @@
+import React, { forwardRef, Children, cloneElement } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { Tab } from './components/tab/Component.js';
+import styles from './index.module.css';
+
+const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
+    if (Children.count(children) > 5) {
+        // eslint-disable-next-line no-console
+        console.error('Компонент TabBar не может содержать больше 5 табов');
+    }
+    return (React.createElement("nav", { "data-test-id": dataTestId, ...restProps, ref: ref, className: cn(styles.component, styles[bgColor], className, {
+            [styles.border]: border,
+        }) }, Children.map(children, (tab) => cloneElement(tab, {
+        bgColor,
+        accentColor,
+        selected: tab.props.id === selectedId,
+        onChange,
+        tabClassNames,
+        dataTestId: getDataTestId(dataTestId, 'tab'),
+    }))));
+});
+TabBarComponent.displayName = 'TabBarComponent';
+const TabBar = Object.assign(TabBarComponent, { Tab });
+
+export { TabBar };

package/moderncssm/components/tab/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabProps } from "../../types";
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export { Tab };

package/moderncssm/components/tab/Component.js

@@ -0,0 +1,29 @@
+import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import cn from 'classnames';
+import { Indicator } from '@alfalab/core-components-indicator/moderncssm';
+import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
+import styles from './index.module.css';
+
+const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
+    const handleClick = (event) => {
+        onChange?.(id);
+        onClick?.(event);
+    };
+    const { className: commonClassName, labelClassName: commonLabelClassName, selectedClassName: commonSelectedClassName, iconClassName: commonIconClassName, } = tabClassNames;
+    return (React.createElement(Component, { "data-test-id": dataTestId, tabIndex: 0, ...(Component === 'button' ? { type: 'button' } : null), ...restProps, href: href, id: id, ref: ref, className: cn(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, {
+            [styles[accentColor]]: selected,
+        }), onClick: handleClick },
+        React.createElement("div", { className: cn(styles.icon, commonIconClassName, iconClassName) }, isValidElement(icon) ? cloneElement(icon, { selected }) : icon),
+        React.createElement(Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn(styles.label, commonLabelClassName, labelClassName, {
+                [styles.labelSelected]: selected,
+            }) }, isValidElement(label) ? cloneElement(label, { selected }) : label),
+        showIndicator && (React.createElement("div", { className: styles.indicator },
+            React.createElement(Indicator, { ...indicatorProps, height: indicatorProps?.value ? 16 : undefined, border: {
+                    width: 2,
+                    color: INDICATOR_BORDER_COLOR[bgColor],
+                }, backgroundColor: INDICATOR_BG_COLOR[accentColor] })))));
+});
+const Tab = TabComponent;
+
+export { Tab };

package/moderncssm/components/tab/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/tab/index.js

@@ -0,0 +1 @@
+export { Tab } from './Component.js';

package/moderncssm/components/tab/index.module.css

@@ -0,0 +1,66 @@
+/* */
+
+.component {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: var(--gap-0);
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    align-items: center;
+    padding: var(--gap-8) var(--gap-0);
+    color: var(--color-light-neutral-translucent-700);
+}
+
+.primary {
+    color: var(--color-light-accent-primary);
+}
+
+.secondary {
+    color: var(--color-light-accent-secondary);
+}
+
+.icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.label {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    flex-shrink: 0;
+
+    color: var(--color-light-text-secondary);
+}
+
+.labelSelected {
+    color: inherit;
+}
+
+.indicator {
+    position: absolute;
+    top: 3px;
+    left: calc(50% + var(--gap-4));
+    height: 16px;
+    min-width: 16px;
+}

package/moderncssm/consts.d.ts

@@ -0,0 +1,9 @@
+declare const INDICATOR_BORDER_COLOR: {
+    'modal-bg-primary': string;
+    'modal-bg-alt-primary': string;
+};
+declare const INDICATOR_BG_COLOR: {
+    primary: string;
+    secondary: string;
+};
+export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };

package/moderncssm/consts.js

@@ -0,0 +1,10 @@
+const INDICATOR_BORDER_COLOR = {
+    'modal-bg-primary': 'var(--color-light-base-bg-primary)',
+    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
+};
+const INDICATOR_BG_COLOR = {
+    primary: 'var(--color-light-accent-primary)',
+    secondary: 'var(--color-light-accent-secondary)',
+};
+
+export { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR };

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { TabBar } from "./Component";
+export { TabBarProps, TabProps } from "./types";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { TabBar } from './Component.js';

package/moderncssm/index.module.css

@@ -0,0 +1,23 @@
+/* */
+
+.component {
+    display: flex;
+    justify-content: center;
+    height: 64px;
+    max-height: 64px;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease
+}
+
+.component.modal-bg-primary {
+        background-color: var(--color-light-base-bg-primary);
+    }
+
+.component.modal-bg-alt-primary {
+        background-color: var(--color-light-base-bg-alt-primary);
+    }
+
+.border {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
+}

package/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getTabBarTestIds } from "../utils";

package/moderncssm/shared/index.js

@@ -0,0 +1 @@
+export { getTabBarTestIds } from '../utils.js';

package/moderncssm/types.d.ts

@@ -0,0 +1,107 @@
+import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import { IndicatorProps } from "@alfalab/core-components-indicator";
+type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
+interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для таба используется модификатор -tab
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные классы для таба.
+     */
+    tabClassNames?: {
+        /**
+         *  Дополнительный класс таба
+         */
+        className?: string;
+        /**
+         * Дополнительный класс таба в выбранном состоянии
+         */
+        selectedClassName?: string;
+        /**
+         * Дополнительный класс подписи
+         */
+        labelClassName?: string;
+        /**
+         * Дополнительный класс враппера иконки
+         */
+        iconClassName?: string;
+    };
+    /**
+     * Список табов
+     */
+    children: TabElementType[];
+    /**
+     * Идентификатор выбранного таба
+     */
+    selectedId?: string;
+    /**
+     * Включает верхний бордер
+     */
+    border?: boolean;
+    /**
+     * Обработчик изменения выбранного таба
+     */
+    onChange?: (id: string) => void;
+    /**
+     * Цвет активного таба
+     */
+    accentColor?: 'primary' | 'secondary';
+    /**
+     * Цвет фона
+     */
+    bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
+}
+type AdditionalTabProps = Record<string, unknown>;
+interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
+    /**
+     * Кастомный компонент таба.
+     * @default button
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор таба
+     */
+    id: string;
+    /**
+     *  Лейбл
+     */
+    label: ReactNode;
+    /**
+     * Иконка
+     */
+    icon: ReactNode;
+    /**
+     * Показать индикатор
+     */
+    showIndicator?: boolean;
+    /**
+     * Свойства индикатора
+     */
+    indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
+    /**
+     *  Дополнительный класс таба
+     */
+    className?: string;
+    /**
+     * Дополнительный класс таба в выбранном состоянии
+     */
+    selectedClassName?: string;
+    /**
+     * Дополнительный класс подписи
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс враппера иконки
+     */
+    iconClassName?: string;
+}
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
+    selected: boolean;
+}
+export { TabBarProps, TabProps, PrivateTabProps };

package/moderncssm/types.js

@@ -0,0 +1 @@
+

package/moderncssm/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTabBarTestIds(dataTestId: string): {
+    tabBar: string;
+    tab: string;
+};
+export { getTabBarTestIds };

package/moderncssm/utils.js

@@ -0,0 +1,10 @@
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+export { getTabBarTestIds };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tab-bar",
-    "version": "2.0.8",
+    "version": "2.1.1",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,12 +15,12 @@
         "react-dom": ">=16.8.0"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^4.9.0",
-        "@alfalab/core-components-indicator": "^2.1.1",
-        "@alfalab/core-components-shared": "^0.12.0",
+        "@alfalab/core-components-typography": "^4.10.1",
+        "@alfalab/core-components-indicator": "^2.2.1",
+        "@alfalab/core-components-shared": "^0.12.1",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.0"
 }

package/src/components/tab/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     @mixin button-reset;
@@ -8,7 +8,7 @@
     flex-direction: column;
     flex: 1 0 0;
     align-items: center;
-    padding: var(--gap-8) 0;
+    padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
 }
 

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;