@alfalab/core-components-tab-bar 3.0.1 → 3.0.2

package/Component.d.ts

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

package/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":["forwardRef","__rest","Children","React","cn","styles","cloneElement","getDataTestId","Tab"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAM,eAAe,GAAGA,gBAAU,CAC9B,UACI,EAWC,EACD,GAAG,EAAA;;AAXC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAuB,EAAvB,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA,EACvB,EAAA,GAAA,EAAA,CAAA,OAA4B,EAA5B,OAAO,mBAAG,kBAAkB,GAAA,EAAA,EACzB,SAAS,GAAAC,YAAA,CAAA,EAAA,EAVhB,sHAWC,CADe;IAIhB,IAAIC,cAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACIC,6EACkB,UAAU,EAAA,EACpB,SAAS,EACb,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAEA,YAAM,CAAC,OAAO,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACtD,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA,CAAA,EAEDH,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,GAAG,EAAA;QACxB,OAAAI,kBAAY,CAAC,GAAG,EAAE;AACd,YAAA,OAAO,EAAA,OAAA;AACP,YAAA,WAAW,EAAA,WAAA;AACX,YAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;AACrC,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,aAAa,EAAA,aAAA;AACb,YAAA,UAAU,EAAEC,kCAAa,CAAC,UAAU,EAAE,KAAK,CAAC;SAC/C,CAAC;KAAA,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAAC,aAAA,EAAE;;;;"}
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { type TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":["forwardRef","__rest","Children","React","cn","styles","cloneElement","getDataTestId","Tab"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAM,eAAe,GAAGA,gBAAU,CAC9B,UACI,EAWC,EACD,GAAG,EAAA;;AAXC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAuB,EAAvB,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA,EACvB,EAAA,GAAA,EAAA,CAAA,OAA4B,EAA5B,OAAO,mBAAG,kBAAkB,GAAA,EAAA,EACzB,SAAS,GAAAC,YAAA,CAAA,EAAA,EAVhB,sHAWC,CADe;IAIhB,IAAIC,cAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACIC,6EACkB,UAAU,EAAA,EACpB,SAAS,EACb,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAEA,YAAM,CAAC,OAAO,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACtD,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA,CAAA,EAEDH,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,GAAG,EAAA;QACxB,OAAAI,kBAAY,CAAC,GAAG,EAAE;AACd,YAAA,OAAO,EAAA,OAAA;AACP,YAAA,WAAW,EAAA,WAAA;AACX,YAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;AACrC,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,aAAa,EAAA,aAAA;AACb,YAAA,UAAU,EAAEC,kCAAa,CAAC,UAAU,EAAE,KAAK,CAAC;SAC/C,CAAC;KAAA,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAAC,aAAA,EAAE;;;;"}

package/components/tab/Component.d.ts

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

package/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { PrivateTabProps, TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":["forwardRef","__rest","React","__assign","cn","styles","isValidElement","cloneElement","Text","Indicator","INDICATOR_BORDER_COLOR","INDICATOR_BG_COLOR"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, type MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { type PrivateTabProps, type TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":["forwardRef","__rest","React","__assign","cn","styles","isValidElement","cloneElement","Text","Indicator","INDICATOR_BORDER_COLOR","INDICATOR_BG_COLOR"],"mappings":"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"}

package/components/tab/index.css

@@ -3,13 +3,15 @@
     --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+} :root {
+    --border-radius-0: 0;
 } :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
-} .tab-bar__component_1lfc5 {
+} .tab-bar__component_zwktl {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
     background-color: transparent;
@@ -17,7 +19,7 @@
     border: 0;
     margin: var(--gap-0);
     box-shadow: none;
-    border-radius: 0;
+    border-radius: var(--border-radius-0);
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
@@ -36,17 +38,17 @@
     align-items: center;
     padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_1lfc5 {
+} .tab-bar__primary_zwktl {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_1lfc5 {
+} .tab-bar__secondary_zwktl {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_1lfc5 {
+} .tab-bar__icon_zwktl {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_1lfc5 {
+} .tab-bar__label_zwktl {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -55,9 +57,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_1lfc5 {
+} .tab-bar__labelSelected_zwktl {
     color: inherit;
-} .tab-bar__indicator_1lfc5 {
+} .tab-bar__indicator_zwktl {
     position: absolute;
     top: 3px;
     left: calc(50% + var(--gap-4));

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"tab-bar__component_1lfc5","primary":"tab-bar__primary_1lfc5","secondary":"tab-bar__secondary_1lfc5","icon":"tab-bar__icon_1lfc5","label":"tab-bar__label_1lfc5","labelSelected":"tab-bar__labelSelected_1lfc5","indicator":"tab-bar__indicator_1lfc5"};
+var styles = {"component":"tab-bar__component_zwktl","primary":"tab-bar__primary_zwktl","secondary":"tab-bar__secondary_zwktl","icon":"tab-bar__icon_zwktl","label":"tab-bar__label_zwktl","labelSelected":"tab-bar__labelSelected_zwktl","indicator":"tab-bar__indicator_zwktl"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/tab/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    @mixin button-reset;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    align-items: center;\n    padding: var(--gap-8) var(--gap-0);\n    color: var(--color-light-neutral-translucent-700);\n}\n\n.primary {\n    color: var(--color-light-accent-primary);\n}\n\n.secondary {\n    color: var(--color-light-accent-secondary);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n    width: 100%;\n}\n\n.label {\n    @mixin row_limit 1;\n    word-break: break-all;\n    flex-shrink: 0;\n\n    color: var(--color-light-text-secondary);\n}\n\n.labelSelected {\n    color: inherit;\n}\n\n.indicator {\n    position: absolute;\n    top: 3px;\n    left: calc(50% + var(--gap-4));\n    height: 16px;\n    min-width: 16px;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,0BAA0B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    @mixin button-reset;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    align-items: center;\n    padding: var(--gap-8) var(--gap-0);\n    color: var(--color-light-neutral-translucent-700);\n}\n\n.primary {\n    color: var(--color-light-accent-primary);\n}\n\n.secondary {\n    color: var(--color-light-accent-secondary);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n    width: 100%;\n}\n\n.label {\n    @mixin row_limit 1;\n    word-break: break-all;\n    flex-shrink: 0;\n\n    color: var(--color-light-text-secondary);\n}\n\n.labelSelected {\n    color: inherit;\n}\n\n.indicator {\n    position: absolute;\n    top: 3px;\n    left: calc(50% + var(--gap-4));\n    height: 16px;\n    min-width: 16px;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,0BAA0B,CAAC;;;;"}

package/cssm/Component.d.ts

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

package/cssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":["forwardRef","__rest","Children","React","cn","styles","cloneElement","getDataTestId","Tab"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,eAAe,GAAGA,gBAAU,CAC9B,UACI,EAWC,EACD,GAAG,EAAA;;AAXC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAuB,EAAvB,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA,EACvB,EAAA,GAAA,EAAA,CAAA,OAA4B,EAA5B,OAAO,mBAAG,kBAAkB,GAAA,EAAA,EACzB,SAAS,GAAAC,YAAA,CAAA,EAAA,EAVhB,sHAWC,CADe;IAIhB,IAAIC,cAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACIC,6EACkB,UAAU,EAAA,EACpB,SAAS,EACb,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAAC,OAAO,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACtD,YAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA,CAAA,EAEDH,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,GAAG,EAAA;QACxB,OAAAI,kBAAY,CAAC,GAAG,EAAE;AACd,YAAA,OAAO,EAAA,OAAA;AACP,YAAA,WAAW,EAAA,WAAA;AACX,YAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;AACrC,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,aAAa,EAAA,aAAA;AACb,YAAA,UAAU,EAAEC,kBAAa,CAAC,UAAU,EAAE,KAAK,CAAC;SAC/C,CAAC;KAAA,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAAC,aAAA,EAAE;;;;"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { type TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":["forwardRef","__rest","Children","React","cn","styles","cloneElement","getDataTestId","Tab"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,eAAe,GAAGA,gBAAU,CAC9B,UACI,EAWC,EACD,GAAG,EAAA;;AAXC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAuB,EAAvB,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA,EACvB,EAAA,GAAA,EAAA,CAAA,OAA4B,EAA5B,OAAO,mBAAG,kBAAkB,GAAA,EAAA,EACzB,SAAS,GAAAC,YAAA,CAAA,EAAA,EAVhB,sHAWC,CADe;IAIhB,IAAIC,cAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACIC,6EACkB,UAAU,EAAA,EACpB,SAAS,EACb,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAAC,OAAO,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACtD,YAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA,CAAA,EAEDH,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,GAAG,EAAA;QACxB,OAAAI,kBAAY,CAAC,GAAG,EAAE;AACd,YAAA,OAAO,EAAA,OAAA;AACP,YAAA,WAAW,EAAA,WAAA;AACX,YAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;AACrC,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,aAAa,EAAA,aAAA;AACb,YAAA,UAAU,EAAEC,kBAAa,CAAC,UAAU,EAAE,KAAK,CAAC;SAC/C,CAAC;KAAA,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAAC,aAAA,EAAE;;;;"}

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

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

package/cssm/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { PrivateTabProps, TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":["forwardRef","__rest","React","__assign","cn","styles","isValidElement","cloneElement","Text","Indicator","INDICATOR_BORDER_COLOR","INDICATOR_BG_COLOR"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, type MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { type PrivateTabProps, type TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":["forwardRef","__rest","React","__assign","cn","styles","isValidElement","cloneElement","Text","Indicator","INDICATOR_BORDER_COLOR","INDICATOR_BG_COLOR"],"mappings":"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"}

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

@@ -3,6 +3,8 @@
     --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+} :root {
+    --border-radius-0: 0;
 } :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
@@ -17,7 +19,7 @@
     border: 0;
     margin: var(--gap-0);
     box-shadow: none;
-    border-radius: 0;
+    border-radius: var(--border-radius-0);
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;

package/cssm/index.module.css

@@ -13,13 +13,13 @@
     max-height: 64px;
     box-sizing: border-box;
     overflow: hidden;
-    transition: box-shadow 0.2s ease
+    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);
     } @media (display-mode: standalone) { .component {
-        padding-bottom: var(--sab)
+        padding-bottom: var(--sab);
 }
     } .border {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);

package/cssm/types.d.ts

@@ -1,5 +1,5 @@
-import type { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { IndicatorProps } from '@alfalab/core-components-indicator/cssm';
+import { type AllHTMLAttributes, type ElementType, type ForwardRefExoticComponent, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type IndicatorProps } from '@alfalab/core-components-indicator/cssm';
 declare type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**

package/esm/Component.d.ts

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

package/esm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":[],"mappings":";;;;;;;AAUA,IAAM,eAAe,GAAG,UAAU,CAC9B,UACI,EAWC,EACD,GAAG,EAAA;;AAXC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAuB,EAAvB,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA,EACvB,EAAA,GAAA,EAAA,CAAA,OAA4B,EAA5B,OAAO,mBAAG,kBAAkB,GAAA,EAAA,EACzB,SAAS,GAAA,MAAA,CAAA,EAAA,EAVhB,sHAWC,CADe;IAIhB,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACI,sDACkB,UAAU,EAAA,EACpB,SAAS,EACb,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACtD,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA,CAAA,EAED,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,GAAG,EAAA;QACxB,OAAA,YAAY,CAAC,GAAG,EAAE;AACd,YAAA,OAAO,EAAA,OAAA;AACP,YAAA,WAAW,EAAA,WAAA;AACX,YAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;AACrC,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,aAAa,EAAA,aAAA;AACb,YAAA,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;SAC/C,CAAC;KAAA,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAA,GAAA,EAAE;;;;"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { type TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":[],"mappings":";;;;;;;AAUA,IAAM,eAAe,GAAG,UAAU,CAC9B,UACI,EAWC,EACD,GAAG,EAAA;;AAXC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAuB,EAAvB,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA,EACvB,EAAA,GAAA,EAAA,CAAA,OAA4B,EAA5B,OAAO,mBAAG,kBAAkB,GAAA,EAAA,EACzB,SAAS,GAAA,MAAA,CAAA,EAAA,EAVhB,sHAWC,CADe;IAIhB,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACI,sDACkB,UAAU,EAAA,EACpB,SAAS,EACb,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACtD,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA,CAAA,EAED,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,GAAG,EAAA;QACxB,OAAA,YAAY,CAAC,GAAG,EAAE;AACd,YAAA,OAAO,EAAA,OAAA;AACP,YAAA,WAAW,EAAA,WAAA;AACX,YAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;AACrC,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,aAAa,EAAA,aAAA;AACb,YAAA,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;SAC/C,CAAC;KAAA,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAA,GAAA,EAAE;;;;"}

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

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

package/esm/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { PrivateTabProps, TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, type MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { type PrivateTabProps, type TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":[],"mappings":"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"}

package/esm/components/tab/index.css

@@ -3,13 +3,15 @@
     --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+} :root {
+    --border-radius-0: 0;
 } :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
-} .tab-bar__component_1lfc5 {
+} .tab-bar__component_zwktl {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
     background-color: transparent;
@@ -17,7 +19,7 @@
     border: 0;
     margin: var(--gap-0);
     box-shadow: none;
-    border-radius: 0;
+    border-radius: var(--border-radius-0);
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
@@ -36,17 +38,17 @@
     align-items: center;
     padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_1lfc5 {
+} .tab-bar__primary_zwktl {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_1lfc5 {
+} .tab-bar__secondary_zwktl {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_1lfc5 {
+} .tab-bar__icon_zwktl {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_1lfc5 {
+} .tab-bar__label_zwktl {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -55,9 +57,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_1lfc5 {
+} .tab-bar__labelSelected_zwktl {
     color: inherit;
-} .tab-bar__indicator_1lfc5 {
+} .tab-bar__indicator_zwktl {
     position: absolute;
     top: 3px;
     left: calc(50% + var(--gap-4));

package/esm/components/tab/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"tab-bar__component_1lfc5","primary":"tab-bar__primary_1lfc5","secondary":"tab-bar__secondary_1lfc5","icon":"tab-bar__icon_1lfc5","label":"tab-bar__label_1lfc5","labelSelected":"tab-bar__labelSelected_1lfc5","indicator":"tab-bar__indicator_1lfc5"};
+var styles = {"component":"tab-bar__component_zwktl","primary":"tab-bar__primary_zwktl","secondary":"tab-bar__secondary_zwktl","icon":"tab-bar__icon_zwktl","label":"tab-bar__label_zwktl","labelSelected":"tab-bar__labelSelected_zwktl","indicator":"tab-bar__indicator_zwktl"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/tab/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    @mixin button-reset;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    align-items: center;\n    padding: var(--gap-8) var(--gap-0);\n    color: var(--color-light-neutral-translucent-700);\n}\n\n.primary {\n    color: var(--color-light-accent-primary);\n}\n\n.secondary {\n    color: var(--color-light-accent-secondary);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n    width: 100%;\n}\n\n.label {\n    @mixin row_limit 1;\n    word-break: break-all;\n    flex-shrink: 0;\n\n    color: var(--color-light-text-secondary);\n}\n\n.labelSelected {\n    color: inherit;\n}\n\n.indicator {\n    position: absolute;\n    top: 3px;\n    left: calc(50% + var(--gap-4));\n    height: 16px;\n    min-width: 16px;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,0BAA0B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    @mixin button-reset;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    align-items: center;\n    padding: var(--gap-8) var(--gap-0);\n    color: var(--color-light-neutral-translucent-700);\n}\n\n.primary {\n    color: var(--color-light-accent-primary);\n}\n\n.secondary {\n    color: var(--color-light-accent-secondary);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n    width: 100%;\n}\n\n.label {\n    @mixin row_limit 1;\n    word-break: break-all;\n    flex-shrink: 0;\n\n    color: var(--color-light-text-secondary);\n}\n\n.labelSelected {\n    color: inherit;\n}\n\n.indicator {\n    position: absolute;\n    top: 3px;\n    left: calc(50% + var(--gap-4));\n    height: 16px;\n    min-width: 16px;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,0BAA0B,CAAC;;;;"}

package/esm/index.css

@@ -6,21 +6,21 @@
     --gap-0: 0px;
 } :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
-} .tab-bar__component_2kija {
+} .tab-bar__component_evcd0 {
     display: flex;
     justify-content: center;
     height: 64px;
     max-height: 64px;
     box-sizing: border-box;
     overflow: hidden;
-    transition: box-shadow 0.2s ease
-} .tab-bar__component_2kija.tab-bar__modal-bg-primary_2kija {
+    transition: box-shadow 0.2s ease;
+} .tab-bar__component_evcd0.tab-bar__modal-bg-primary_evcd0 {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_2kija.tab-bar__modal-bg-alt-primary_2kija {
+    } .tab-bar__component_evcd0.tab-bar__modal-bg-alt-primary_evcd0 {
         background-color: var(--color-light-base-bg-alt-primary);
-    } @media (display-mode: standalone) { .tab-bar__component_2kija {
-        padding-bottom: var(--sab)
+    } @media (display-mode: standalone) { .tab-bar__component_evcd0 {
+        padding-bottom: var(--sab);
 }
-    } .tab-bar__border_2kija {
+    } .tab-bar__border_evcd0 {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"tab-bar__component_2kija","modal-bg-primary":"tab-bar__modal-bg-primary_2kija","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_2kija","border":"tab-bar__border_2kija"};
+var styles = {"component":"tab-bar__component_evcd0","modal-bg-primary":"tab-bar__modal-bg-primary_evcd0","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_evcd0","border":"tab-bar__border_evcd0"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.component {\n    display: flex;\n    justify-content: center;\n    height: 64px;\n    max-height: 64px;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n\n    &.modal-bg-primary {\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    &.modal-bg-alt-primary {\n        background-color: var(--color-light-base-bg-alt-primary);\n    }\n\n    @media (display-mode: standalone) {\n        padding-bottom: var(--sab);\n    }\n}\n\n.border {\n    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.component {\n    display: flex;\n    justify-content: center;\n    height: 64px;\n    max-height: 64px;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n\n    &.modal-bg-primary {\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    &.modal-bg-alt-primary {\n        background-color: var(--color-light-base-bg-alt-primary);\n    }\n\n    @media (display-mode: standalone) {\n        padding-bottom: var(--sab);\n    }\n}\n\n.border {\n    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}

package/esm/types.d.ts

@@ -1,5 +1,5 @@
-import type { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { IndicatorProps } from '@alfalab/core-components-indicator/esm';
+import { type AllHTMLAttributes, type ElementType, type ForwardRefExoticComponent, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type IndicatorProps } from '@alfalab/core-components-indicator/esm';
 declare type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**

package/index.css

@@ -6,21 +6,21 @@
     --gap-0: 0px;
 } :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
-} .tab-bar__component_2kija {
+} .tab-bar__component_evcd0 {
     display: flex;
     justify-content: center;
     height: 64px;
     max-height: 64px;
     box-sizing: border-box;
     overflow: hidden;
-    transition: box-shadow 0.2s ease
-} .tab-bar__component_2kija.tab-bar__modal-bg-primary_2kija {
+    transition: box-shadow 0.2s ease;
+} .tab-bar__component_evcd0.tab-bar__modal-bg-primary_evcd0 {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_2kija.tab-bar__modal-bg-alt-primary_2kija {
+    } .tab-bar__component_evcd0.tab-bar__modal-bg-alt-primary_evcd0 {
         background-color: var(--color-light-base-bg-alt-primary);
-    } @media (display-mode: standalone) { .tab-bar__component_2kija {
-        padding-bottom: var(--sab)
+    } @media (display-mode: standalone) { .tab-bar__component_evcd0 {
+        padding-bottom: var(--sab);
 }
-    } .tab-bar__border_2kija {
+    } .tab-bar__border_evcd0 {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"tab-bar__component_2kija","modal-bg-primary":"tab-bar__modal-bg-primary_2kija","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_2kija","border":"tab-bar__border_2kija"};
+var styles = {"component":"tab-bar__component_evcd0","modal-bg-primary":"tab-bar__modal-bg-primary_evcd0","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_evcd0","border":"tab-bar__border_evcd0"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.component {\n    display: flex;\n    justify-content: center;\n    height: 64px;\n    max-height: 64px;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n\n    &.modal-bg-primary {\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    &.modal-bg-alt-primary {\n        background-color: var(--color-light-base-bg-alt-primary);\n    }\n\n    @media (display-mode: standalone) {\n        padding-bottom: var(--sab);\n    }\n}\n\n.border {\n    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.component {\n    display: flex;\n    justify-content: center;\n    height: 64px;\n    max-height: 64px;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n\n    &.modal-bg-primary {\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    &.modal-bg-alt-primary {\n        background-color: var(--color-light-base-bg-alt-primary);\n    }\n\n    @media (display-mode: standalone) {\n        padding-bottom: var(--sab);\n    }\n}\n\n.border {\n    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}

package/modern/Component.d.ts

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

package/modern/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,eAAe,GAAG,UAAU,CAC9B,CACI,EACI,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACf,EACD,GAAG,KACH;IACA,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,UAAU,EACpB,GAAA,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE;AACxD,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CAAC,EAED,EAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,KACxB,YAAY,CAAC,GAAG,EAAE;QACd,OAAO;QACP,WAAW;AACX,QAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;QACrC,QAAQ;QACR,aAAa;AACb,QAAA,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;KAC/C,CAAC,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE;;;;"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { type TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,eAAe,GAAG,UAAU,CAC9B,CACI,EACI,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACf,EACD,GAAG,KACH;IACA,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,UAAU,EACpB,GAAA,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE;AACxD,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CAAC,EAED,EAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,KACxB,YAAY,CAAC,GAAG,EAAE;QACd,OAAO;QACP,WAAW;AACX,QAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;QACrC,QAAQ;QACR,aAAa;AACb,QAAA,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;KAC/C,CAAC,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE;;;;"}

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

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

package/modern/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { PrivateTabProps, TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAG,UAAU,CAC3B,CACI,EACI,aAAa,EACb,cAAc,EACd,KAAK,EACL,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,EAAE,EAClB,UAAU,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,IAAI,EACJ,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,EACjC,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACa,EAC7B,GAAG,KACH;AACA,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACtC,QAAA,QAAQ,GAAG,EAAE,CAAC;AACd,QAAA,OAAO,GAAG,KAAK,CAAC;AACpB,KAAC;AAED,IAAA,MAAM,EACF,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAE,oBAAoB,EACpC,iBAAiB,EAAE,uBAAuB,EAC1C,aAAa,EAAE,mBAAmB,GACrC,GAAG,aAAa;AAEjB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACQ,UAAU,EACxB,QAAQ,EAAE,CAAC,EAAA,IACN,SAAS,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAA,GACpD,SAAS,EACb,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,eAAe,EACf,SAAS,EACT,QAAQ,IAAI,uBAAuB,EACnC,QAAQ,IAAI,iBAAiB,EAC7B;AACI,YAAA,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ;SAClC,CACJ,EACD,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,mBAAmB,EAAE,aAAa,CAAC,EAAA,EAC9D,cAAc,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,CAC7D;QAEN,KAAC,CAAA,aAAA,CAAA,IAAI,IACD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,iBAAiB,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ;aACnC,CAAC,EAAA,EAED,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,CAC/D;AAEN,QAAA,aAAa,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA;AAC5B,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACF,EAAA,GAAA,cAAc,EAClB,MAAM,EAAE,cAAc,EAAE,KAAK,GAAG,EAAE,GAAG,SAAS,EAC9C,MAAM,EAAE;AACJ,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC;iBACzC,EACD,eAAe,EAAE,kBAAkB,CAAC,WAAW,CAAC,EAAA,CAClD,CACA,CACT,CACO;AAEpB,CAAC,CACJ;AAEM,MAAM,GAAG,GAAG;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, type MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { type PrivateTabProps, type TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAG,UAAU,CAC3B,CACI,EACI,aAAa,EACb,cAAc,EACd,KAAK,EACL,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,EAAE,EAClB,UAAU,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,IAAI,EACJ,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,EACjC,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACa,EAC7B,GAAG,KACH;AACA,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACtC,QAAA,QAAQ,GAAG,EAAE,CAAC;AACd,QAAA,OAAO,GAAG,KAAK,CAAC;AACpB,KAAC;AAED,IAAA,MAAM,EACF,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAE,oBAAoB,EACpC,iBAAiB,EAAE,uBAAuB,EAC1C,aAAa,EAAE,mBAAmB,GACrC,GAAG,aAAa;AAEjB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACQ,UAAU,EACxB,QAAQ,EAAE,CAAC,EAAA,IACN,SAAS,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAA,GACpD,SAAS,EACb,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,eAAe,EACf,SAAS,EACT,QAAQ,IAAI,uBAAuB,EACnC,QAAQ,IAAI,iBAAiB,EAC7B;AACI,YAAA,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ;SAClC,CACJ,EACD,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,mBAAmB,EAAE,aAAa,CAAC,EAAA,EAC9D,cAAc,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,CAC7D;QAEN,KAAC,CAAA,aAAA,CAAA,IAAI,IACD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,iBAAiB,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ;aACnC,CAAC,EAAA,EAED,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,CAC/D;AAEN,QAAA,aAAa,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA;AAC5B,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACF,EAAA,GAAA,cAAc,EAClB,MAAM,EAAE,cAAc,EAAE,KAAK,GAAG,EAAE,GAAG,SAAS,EAC9C,MAAM,EAAE;AACJ,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC;iBACzC,EACD,eAAe,EAAE,kBAAkB,CAAC,WAAW,CAAC,EAAA,CAClD,CACA,CACT,CACO;AAEpB,CAAC,CACJ;AAEM,MAAM,GAAG,GAAG;;;;"}

package/modern/components/tab/index.css

@@ -3,13 +3,15 @@
     --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+} :root {
+    --border-radius-0: 0;
 } :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
-} .tab-bar__component_1lfc5 {
+} .tab-bar__component_zwktl {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
     background-color: transparent;
@@ -17,7 +19,7 @@
     border: 0;
     margin: var(--gap-0);
     box-shadow: none;
-    border-radius: 0;
+    border-radius: var(--border-radius-0);
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
@@ -36,17 +38,17 @@
     align-items: center;
     padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_1lfc5 {
+} .tab-bar__primary_zwktl {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_1lfc5 {
+} .tab-bar__secondary_zwktl {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_1lfc5 {
+} .tab-bar__icon_zwktl {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_1lfc5 {
+} .tab-bar__label_zwktl {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -55,9 +57,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_1lfc5 {
+} .tab-bar__labelSelected_zwktl {
     color: inherit;
-} .tab-bar__indicator_1lfc5 {
+} .tab-bar__indicator_zwktl {
     position: absolute;
     top: 3px;
     left: calc(50% + var(--gap-4));

package/modern/components/tab/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"tab-bar__component_1lfc5","primary":"tab-bar__primary_1lfc5","secondary":"tab-bar__secondary_1lfc5","icon":"tab-bar__icon_1lfc5","label":"tab-bar__label_1lfc5","labelSelected":"tab-bar__labelSelected_1lfc5","indicator":"tab-bar__indicator_1lfc5"};
+const styles = {"component":"tab-bar__component_zwktl","primary":"tab-bar__primary_zwktl","secondary":"tab-bar__secondary_zwktl","icon":"tab-bar__icon_zwktl","label":"tab-bar__label_zwktl","labelSelected":"tab-bar__labelSelected_zwktl","indicator":"tab-bar__indicator_zwktl"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/tab/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    @mixin button-reset;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    align-items: center;\n    padding: var(--gap-8) var(--gap-0);\n    color: var(--color-light-neutral-translucent-700);\n}\n\n.primary {\n    color: var(--color-light-accent-primary);\n}\n\n.secondary {\n    color: var(--color-light-accent-secondary);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n    width: 100%;\n}\n\n.label {\n    @mixin row_limit 1;\n    word-break: break-all;\n    flex-shrink: 0;\n\n    color: var(--color-light-text-secondary);\n}\n\n.labelSelected {\n    color: inherit;\n}\n\n.indicator {\n    position: absolute;\n    top: 3px;\n    left: calc(50% + var(--gap-4));\n    height: 16px;\n    min-width: 16px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,0BAA0B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n    @mixin button-reset;\n\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1 0 0;\n    align-items: center;\n    padding: var(--gap-8) var(--gap-0);\n    color: var(--color-light-neutral-translucent-700);\n}\n\n.primary {\n    color: var(--color-light-accent-primary);\n}\n\n.secondary {\n    color: var(--color-light-accent-secondary);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n    width: 100%;\n}\n\n.label {\n    @mixin row_limit 1;\n    word-break: break-all;\n    flex-shrink: 0;\n\n    color: var(--color-light-text-secondary);\n}\n\n.labelSelected {\n    color: inherit;\n}\n\n.indicator {\n    position: absolute;\n    top: 3px;\n    left: calc(50% + var(--gap-4));\n    height: 16px;\n    min-width: 16px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,0BAA0B,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,0BAA0B,CAAC;;;;"}

package/modern/index.css

@@ -6,21 +6,21 @@
     --gap-0: 0px;
 } :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
-} .tab-bar__component_2kija {
+} .tab-bar__component_evcd0 {
     display: flex;
     justify-content: center;
     height: 64px;
     max-height: 64px;
     box-sizing: border-box;
     overflow: hidden;
-    transition: box-shadow 0.2s ease
-} .tab-bar__component_2kija.tab-bar__modal-bg-primary_2kija {
+    transition: box-shadow 0.2s ease;
+} .tab-bar__component_evcd0.tab-bar__modal-bg-primary_evcd0 {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_2kija.tab-bar__modal-bg-alt-primary_2kija {
+    } .tab-bar__component_evcd0.tab-bar__modal-bg-alt-primary_evcd0 {
         background-color: var(--color-light-base-bg-alt-primary);
-    } @media (display-mode: standalone) { .tab-bar__component_2kija {
-        padding-bottom: var(--sab)
+    } @media (display-mode: standalone) { .tab-bar__component_evcd0 {
+        padding-bottom: var(--sab);
 }
-    } .tab-bar__border_2kija {
+    } .tab-bar__border_evcd0 {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"tab-bar__component_2kija","modal-bg-primary":"tab-bar__modal-bg-primary_2kija","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_2kija","border":"tab-bar__border_2kija"};
+const styles = {"component":"tab-bar__component_evcd0","modal-bg-primary":"tab-bar__modal-bg-primary_evcd0","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_evcd0","border":"tab-bar__border_evcd0"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.component {\n    display: flex;\n    justify-content: center;\n    height: 64px;\n    max-height: 64px;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n\n    &.modal-bg-primary {\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    &.modal-bg-alt-primary {\n        background-color: var(--color-light-base-bg-alt-primary);\n    }\n\n    @media (display-mode: standalone) {\n        padding-bottom: var(--sab);\n    }\n}\n\n.border {\n    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.component {\n    display: flex;\n    justify-content: center;\n    height: 64px;\n    max-height: 64px;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: box-shadow 0.2s ease;\n\n    &.modal-bg-primary {\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    &.modal-bg-alt-primary {\n        background-color: var(--color-light-base-bg-alt-primary);\n    }\n\n    @media (display-mode: standalone) {\n        padding-bottom: var(--sab);\n    }\n}\n\n.border {\n    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}

package/modern/types.d.ts

@@ -1,5 +1,5 @@
-import type { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { IndicatorProps } from '@alfalab/core-components-indicator/modern';
+import { type AllHTMLAttributes, type ElementType, type ForwardRefExoticComponent, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type IndicatorProps } from '@alfalab/core-components-indicator/modern';
 declare type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**

package/moderncssm/Component.d.ts

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

package/moderncssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,eAAe,GAAG,UAAU,CAC9B,CACI,EACI,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACf,EACD,GAAG,KACH;IACA,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,UAAU,EACpB,GAAA,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE;AACxD,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CAAC,EAED,EAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,KACxB,YAAY,CAAC,GAAG,EAAE;QACd,OAAO;QACP,WAAW;AACX,QAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;QACrC,QAAQ;QACR,aAAa;AACb,QAAA,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;KAC/C,CAAC,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE;;;;"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { Children, cloneElement, forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { Tab } from './components/tab';\nimport { type TabBarProps } from './types';\n\nimport styles from './index.module.css';\n\nconst TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(\n    (\n        {\n            children,\n            className,\n            selectedId,\n            border,\n            dataTestId,\n            tabClassNames,\n            onChange,\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        },\n        ref,\n    ) => {\n        if (Children.count(children) > 5) {\n            // eslint-disable-next-line no-console\n            console.error('Компонент TabBar не может содержать больше 5 табов');\n        }\n\n        return (\n            <nav\n                data-test-id={dataTestId}\n                {...restProps}\n                ref={ref}\n                className={cn(styles.component, styles[bgColor], className, {\n                    [styles.border]: border,\n                })}\n            >\n                {Children.map(children, (tab) =>\n                    cloneElement(tab, {\n                        bgColor,\n                        accentColor,\n                        selected: tab.props.id === selectedId,\n                        onChange,\n                        tabClassNames,\n                        dataTestId: getDataTestId(dataTestId, 'tab'),\n                    }),\n                )}\n            </nav>\n        );\n    },\n);\n\nTabBarComponent.displayName = 'TabBarComponent';\n\nexport const TabBar = Object.assign(TabBarComponent, { Tab });\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,eAAe,GAAG,UAAU,CAC9B,CACI,EACI,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACf,EACD,GAAG,KACH;IACA,IAAI,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;;AAE9B,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACtE;IAED,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,UAAU,EACpB,GAAA,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE;AACxD,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CAAC,EAED,EAAA,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,KACxB,YAAY,CAAC,GAAG,EAAE;QACd,OAAO;QACP,WAAW;AACX,QAAA,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,UAAU;QACrC,QAAQ;QACR,aAAa;AACb,QAAA,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;KAC/C,CAAC,CACL,CACC;AAEd,CAAC,CACJ;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAExC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE;;;;"}

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

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

package/moderncssm/components/tab/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { PrivateTabProps, TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAG,UAAU,CAC3B,CACI,EACI,aAAa,EACb,cAAc,EACd,KAAK,EACL,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,EAAE,EAClB,UAAU,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,IAAI,EACJ,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,EACjC,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACa,EAC7B,GAAG,KACH;AACA,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACtC,QAAA,QAAQ,GAAG,EAAE,CAAC;AACd,QAAA,OAAO,GAAG,KAAK,CAAC;AACpB,KAAC;AAED,IAAA,MAAM,EACF,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAE,oBAAoB,EACpC,iBAAiB,EAAE,uBAAuB,EAC1C,aAAa,EAAE,mBAAmB,GACrC,GAAG,aAAa;AAEjB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACQ,UAAU,EACxB,QAAQ,EAAE,CAAC,EAAA,IACN,SAAS,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAA,GACpD,SAAS,EACb,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,eAAe,EACf,SAAS,EACT,QAAQ,IAAI,uBAAuB,EACnC,QAAQ,IAAI,iBAAiB,EAC7B;AACI,YAAA,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ;SAClC,CACJ,EACD,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,mBAAmB,EAAE,aAAa,CAAC,EAAA,EAC9D,cAAc,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,CAC7D;QAEN,KAAC,CAAA,aAAA,CAAA,IAAI,IACD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,iBAAiB,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ;aACnC,CAAC,EAAA,EAED,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,CAC/D;AAEN,QAAA,aAAa,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA;AAC5B,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACF,EAAA,GAAA,cAAc,EAClB,MAAM,EAAE,cAAc,EAAE,KAAK,GAAG,EAAE,GAAG,SAAS,EAC9C,MAAM,EAAE;AACJ,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC;iBACzC,EACD,eAAe,EAAE,kBAAkB,CAAC,WAAW,CAAC,EAAA,CAClD,CACA,CACT,CACO;AAEpB,CAAC,CACJ;AAEM,MAAM,GAAG,GAAG;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/tab/Component.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, type MouseEvent } from 'react';\nimport cn from 'classnames';\n\nimport { Indicator } from '@alfalab/core-components-indicator';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';\nimport { type PrivateTabProps, type TabProps } from '../../types';\n\nimport styles from './index.module.css';\n\nconst TabComponent = forwardRef(\n    (\n        {\n            showIndicator,\n            indicatorProps,\n            label,\n            icon,\n            id,\n            selected,\n            onChange,\n            onClick,\n            tabClassNames = {},\n            dataTestId,\n            className,\n            labelClassName,\n            selectedClassName,\n            iconClassName,\n            href,\n            Component = href ? 'a' : 'button',\n            accentColor = 'primary',\n            bgColor = 'modal-bg-primary',\n            ...restProps\n        }: PrivateTabProps & TabProps,\n        ref,\n    ) => {\n        const handleClick = (event: MouseEvent) => {\n            onChange?.(id);\n            onClick?.(event);\n        };\n\n        const {\n            className: commonClassName,\n            labelClassName: commonLabelClassName,\n            selectedClassName: commonSelectedClassName,\n            iconClassName: commonIconClassName,\n        } = tabClassNames;\n\n        return (\n            <Component\n                data-test-id={dataTestId}\n                tabIndex={0}\n                {...(Component === 'button' ? { type: 'button' } : null)}\n                {...restProps}\n                href={href}\n                id={id}\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    commonClassName,\n                    className,\n                    selected && commonSelectedClassName,\n                    selected && selectedClassName,\n                    {\n                        [styles[accentColor]]: selected,\n                    },\n                )}\n                onClick={handleClick}\n            >\n                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>\n                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}\n                </div>\n\n                <Text\n                    weight='medium'\n                    view='secondary-small'\n                    className={cn(styles.label, commonLabelClassName, labelClassName, {\n                        [styles.labelSelected]: selected,\n                    })}\n                >\n                    {isValidElement(label) ? cloneElement(label, { selected }) : label}\n                </Text>\n\n                {showIndicator && (\n                    <div className={styles.indicator}>\n                        <Indicator\n                            {...indicatorProps}\n                            height={indicatorProps?.value ? 16 : undefined}\n                            border={{\n                                width: 2,\n                                color: INDICATOR_BORDER_COLOR[bgColor],\n                            }}\n                            backgroundColor={INDICATOR_BG_COLOR[accentColor]}\n                        />\n                    </div>\n                )}\n            </Component>\n        );\n    },\n);\n\nexport const Tab = TabComponent as React.ForwardRefExoticComponent<\n    TabProps & React.RefAttributes<HTMLElement>\n>;\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAG,UAAU,CAC3B,CACI,EACI,aAAa,EACb,cAAc,EACd,KAAK,EACL,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,EAAE,EAClB,UAAU,EACV,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,IAAI,EACJ,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,EACjC,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,kBAAkB,EAC5B,GAAG,SAAS,EACa,EAC7B,GAAG,KACH;AACA,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACtC,QAAA,QAAQ,GAAG,EAAE,CAAC;AACd,QAAA,OAAO,GAAG,KAAK,CAAC;AACpB,KAAC;AAED,IAAA,MAAM,EACF,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAE,oBAAoB,EACpC,iBAAiB,EAAE,uBAAuB,EAC1C,aAAa,EAAE,mBAAmB,GACrC,GAAG,aAAa;AAEjB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACQ,UAAU,EACxB,QAAQ,EAAE,CAAC,EAAA,IACN,SAAS,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAA,GACpD,SAAS,EACb,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,eAAe,EACf,SAAS,EACT,QAAQ,IAAI,uBAAuB,EACnC,QAAQ,IAAI,iBAAiB,EAC7B;AACI,YAAA,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ;SAClC,CACJ,EACD,OAAO,EAAE,WAAW,EAAA;AAEpB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,mBAAmB,EAAE,aAAa,CAAC,EAAA,EAC9D,cAAc,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,CAC7D;QAEN,KAAC,CAAA,aAAA,CAAA,IAAI,IACD,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,iBAAiB,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ;aACnC,CAAC,EAAA,EAED,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,CAC/D;AAEN,QAAA,aAAa,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA;AAC5B,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACF,EAAA,GAAA,cAAc,EAClB,MAAM,EAAE,cAAc,EAAE,KAAK,GAAG,EAAE,GAAG,SAAS,EAC9C,MAAM,EAAE;AACJ,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC;iBACzC,EACD,eAAe,EAAE,kBAAkB,CAAC,WAAW,CAAC,EAAA,CAClD,CACA,CACT,CACO;AAEpB,CAAC,CACJ;AAEM,MAAM,GAAG,GAAG;;;;"}

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

@@ -1,3 +1,5 @@
+
+
 .component {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
@@ -6,7 +8,7 @@
     border: 0;
     margin: var(--gap-0);
     box-shadow: none;
-    border-radius: 0;
+    border-radius: var(--border-radius-0);
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;

package/moderncssm/index.module.css

@@ -1,6 +1,7 @@
 :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
+
 .component {
     display: flex;
     justify-content: center;
@@ -8,19 +9,24 @@
     max-height: 64px;
     box-sizing: border-box;
     overflow: hidden;
-    transition: box-shadow 0.2s ease
+    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);
     }
+
 @media (display-mode: standalone) {
+
 .component {
-        padding-bottom: var(--sab)
+        padding-bottom: var(--sab);
 }
     }
+
 .border {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/moderncssm/types.d.ts

@@ -1,5 +1,5 @@
-import type { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { IndicatorProps } from '@alfalab/core-components-indicator/moderncssm';
+import { type AllHTMLAttributes, type ElementType, type ForwardRefExoticComponent, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type IndicatorProps } from '@alfalab/core-components-indicator/moderncssm';
 declare type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tab-bar",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -12,7 +12,7 @@
     "dependencies": {
         "@alfalab/core-components-indicator": "^3.0.0",
         "@alfalab/core-components-shared": "^1.1.0",
-        "@alfalab/core-components-typography": "^5.0.1",
+        "@alfalab/core-components-typography": "^5.0.2",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
     },
@@ -24,6 +24,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.2",
     "varsVersion": "10.1.0"
 }

package/src/Component.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
 import { Tab } from './components/tab';
-import { TabBarProps } from './types';
+import { type TabBarProps } from './types';
 
 import styles from './index.module.css';
 

package/src/components/tab/Component.tsx

@@ -1,11 +1,11 @@
-import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';
+import React, { cloneElement, forwardRef, isValidElement, type MouseEvent } from 'react';
 import cn from 'classnames';
 
 import { Indicator } from '@alfalab/core-components-indicator';
 import { Text } from '@alfalab/core-components-typography';
 
 import { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR } from '../../consts';
-import { PrivateTabProps, TabProps } from '../../types';
+import { type PrivateTabProps, type TabProps } from '../../types';
 
 import styles from './index.module.css';
 

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .component {
     @mixin button-reset;

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '@alfalab/core-components-vars/src/safe-area.css';
 
 .component {

package/src/types.ts

@@ -1,14 +1,14 @@
-import type {
-    AllHTMLAttributes,
-    ElementType,
-    ForwardRefExoticComponent,
-    HTMLAttributes,
-    ReactElement,
-    ReactNode,
-    RefAttributes,
+import {
+    type AllHTMLAttributes,
+    type ElementType,
+    type ForwardRefExoticComponent,
+    type HTMLAttributes,
+    type ReactElement,
+    type ReactNode,
+    type RefAttributes,
 } from 'react';
 
-import type { IndicatorProps } from '@alfalab/core-components-indicator';
+import { type IndicatorProps } from '@alfalab/core-components-indicator';
 
 type TabElementType = ReactElement<
     TabProps,

package/types.d.ts

@@ -1,5 +1,5 @@
-import type { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { IndicatorProps } from '@alfalab/core-components-indicator';
+import { type AllHTMLAttributes, type ElementType, type ForwardRefExoticComponent, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type IndicatorProps } from '@alfalab/core-components-indicator';
 declare type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**