@alfalab/core-components-tab-bar 3.0.0 → 3.1.0-snapshot-92b8690

package/components/tab/index.css

@@ -9,7 +9,7 @@
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
-} .tab-bar__component_l5b05 {
+} .tab-bar__component_tbqmm {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
     background-color: transparent;
@@ -19,12 +19,12 @@
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+    -moz-user-select: none;
+    user-select: none;
     vertical-align: middle;
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     text-decoration: none;
     min-width: 0;
     cursor: pointer;
@@ -36,17 +36,17 @@
     align-items: center;
     padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_l5b05 {
+} .tab-bar__primary_tbqmm {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_l5b05 {
+} .tab-bar__secondary_tbqmm {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_l5b05 {
+} .tab-bar__icon_tbqmm {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_l5b05 {
+} .tab-bar__label_tbqmm {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -55,9 +55,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_l5b05 {
+} .tab-bar__labelSelected_tbqmm {
     color: inherit;
-} .tab-bar__indicator_l5b05 {
+} .tab-bar__indicator_tbqmm {
     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_l5b05","primary":"tab-bar__primary_l5b05","secondary":"tab-bar__secondary_l5b05","icon":"tab-bar__icon_l5b05","label":"tab-bar__label_l5b05","labelSelected":"tab-bar__labelSelected_l5b05","indicator":"tab-bar__indicator_l5b05"};
+var styles = {"component":"tab-bar__component_tbqmm","primary":"tab-bar__primary_tbqmm","secondary":"tab-bar__secondary_tbqmm","icon":"tab-bar__icon_tbqmm","label":"tab-bar__label_tbqmm","labelSelected":"tab-bar__labelSelected_tbqmm","indicator":"tab-bar__indicator_tbqmm"};
 
 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-dynamic-mixins-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/components/tab/index.module.css

@@ -19,12 +19,12 @@
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+    -moz-user-select: none;
+    user-select: none;
     vertical-align: middle;
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     text-decoration: none;
     min-width: 0;
     cursor: pointer;

package/dynamic-mixins/Component.d.ts

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

package/dynamic-mixins/Component.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
+var Component = require('./components/tab/Component.js');
+var index_module = require('./index.module.css.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var TabBarComponent = React.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
+    if (React.Children.count(children) > 5) {
+        // eslint-disable-next-line no-console
+        console.error('Компонент TabBar не может содержать больше 5 табов');
+    }
+    return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(index_module.component, index_module[bgColor], className, (_b = {},
+            _b[index_module.border] = border,
+            _b)) }), React.Children.map(children, function (tab) {
+        return React.cloneElement(tab, {
+            bgColor: bgColor,
+            accentColor: accentColor,
+            selected: tab.props.id === selectedId,
+            onChange: onChange,
+            tabClassNames: tabClassNames,
+            dataTestId: dynamicMixins.getDataTestId(dataTestId, 'tab'),
+        });
+    })));
+});
+TabBarComponent.displayName = 'TabBarComponent';
+var TabBar = Object.assign(TabBarComponent, { Tab: Component.Tab });
+
+exports.TabBar = TabBar;
+//# sourceMappingURL=Component.js.map

package/dynamic-mixins/Component.js.map

@@ -0,0 +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,2BAAa,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/dynamic-mixins/components/tab/Component.d.ts

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

package/dynamic-mixins/components/tab/Component.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var dynamicMixins$1 = require('@alfalab/core-components-indicator/dynamic-mixins');
+var dynamicMixins = require('@alfalab/core-components-typography/dynamic-mixins');
+var consts = require('../../consts.js');
+var index_module = require('./index.module.css.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var TabComponent = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
+    var handleClick = function (event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(id);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
+    return (React__default.default.createElement(Component, tslib.__assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn__default.default(index_module.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
+            _b[index_module[accentColor]] = selected,
+            _b)), onClick: handleClick }),
+        React__default.default.createElement("div", { className: cn__default.default(index_module.icon, commonIconClassName, iconClassName) }, React.isValidElement(icon) ? React.cloneElement(icon, { selected: selected }) : icon),
+        React__default.default.createElement(dynamicMixins.Text, { weight: 'medium', view: 'secondary-small', className: cn__default.default(index_module.label, commonLabelClassName, labelClassName, (_c = {},
+                _c[index_module.labelSelected] = selected,
+                _c)) }, React.isValidElement(label) ? React.cloneElement(label, { selected: selected }) : label),
+        showIndicator && (React__default.default.createElement("div", { className: index_module.indicator },
+            React__default.default.createElement(dynamicMixins$1.Indicator, tslib.__assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
+                    width: 2,
+                    color: consts.INDICATOR_BORDER_COLOR[bgColor],
+                }, backgroundColor: consts.INDICATOR_BG_COLOR[accentColor] }))))));
+});
+var Tab = TabComponent;
+
+exports.Tab = Tab;
+//# sourceMappingURL=Component.js.map

package/dynamic-mixins/components/tab/Component.js.map

@@ -0,0 +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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"}

package/dynamic-mixins/components/tab/index.css

@@ -0,0 +1,66 @@
+:root {
+    --color-light-accent-primary: #ef3124;
+    --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 {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-0: 0px;
+    --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
+} .tab-bar__component_tbqmm {
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+    background-color: transparent;
+    outline: none;
+    border: 0;
+    margin: var(--gap-0);
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    align-items: center;
+    padding: var(--gap-8) var(--gap-0);
+    color: var(--color-light-neutral-translucent-700);
+} .tab-bar__primary_tbqmm {
+    color: var(--color-light-accent-primary);
+} .tab-bar__secondary_tbqmm {
+    color: var(--color-light-accent-secondary);
+} .tab-bar__icon_tbqmm {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    width: 100%;
+} .tab-bar__label_tbqmm {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    flex-shrink: 0;
+
+    color: var(--color-light-text-secondary);
+} .tab-bar__labelSelected_tbqmm {
+    color: inherit;
+} .tab-bar__indicator_tbqmm {
+    position: absolute;
+    top: 3px;
+    left: calc(50% + var(--gap-4));
+    height: 16px;
+    min-width: 16px;
+}

package/dynamic-mixins/components/tab/index.d.ts

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

package/dynamic-mixins/components/tab/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Tab = Component.Tab;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/components/tab/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"component":"tab-bar__component_tbqmm","primary":"tab-bar__primary_tbqmm","secondary":"tab-bar__secondary_tbqmm","icon":"tab-bar__icon_tbqmm","label":"tab-bar__label_tbqmm","labelSelected":"tab-bar__labelSelected_tbqmm","indicator":"tab-bar__indicator_tbqmm"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/components/tab/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/tab/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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/dynamic-mixins/consts.d.ts

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

package/dynamic-mixins/consts.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var INDICATOR_BORDER_COLOR = {
+    'modal-bg-primary': 'var(--color-light-base-bg-primary)',
+    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
+};
+var INDICATOR_BG_COLOR = {
+    primary: 'var(--color-light-accent-primary)',
+    secondary: 'var(--color-light-accent-secondary)',
+};
+
+exports.INDICATOR_BG_COLOR = INDICATOR_BG_COLOR;
+exports.INDICATOR_BORDER_COLOR = INDICATOR_BORDER_COLOR;
+//# sourceMappingURL=consts.js.map

package/dynamic-mixins/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sources":["../src/consts.ts"],"sourcesContent":["export const INDICATOR_BORDER_COLOR = {\n    'modal-bg-primary': 'var(--color-light-base-bg-primary)',\n    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',\n};\n\nexport const INDICATOR_BG_COLOR = {\n    primary: 'var(--color-light-accent-primary)',\n    secondary: 'var(--color-light-accent-secondary)',\n};\n"],"names":[],"mappings":";;;;AAAa,IAAA,sBAAsB,GAAG;AAClC,IAAA,kBAAkB,EAAE,oCAAoC;AACxD,IAAA,sBAAsB,EAAE,wCAAwC;;AAGvD,IAAA,kBAAkB,GAAG;AAC9B,IAAA,OAAO,EAAE,mCAAmC;AAC5C,IAAA,SAAS,EAAE,qCAAqC;;;;;;"}

package/dynamic-mixins/index.css

@@ -0,0 +1,26 @@
+:root {
+    --color-light-base-bg-alt-primary: #f2f3f5;
+    --color-light-base-bg-primary: #fff;
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+} :root {
+    --gap-0: 0px;
+} :root {
+    --sab: env(safe-area-inset-bottom, var(--gap-0));
+} .tab-bar__component_xtycj {
+    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_xtycj.tab-bar__modal-bg-primary_xtycj {
+        background-color: var(--color-light-base-bg-primary);
+    } .tab-bar__component_xtycj.tab-bar__modal-bg-alt-primary_xtycj {
+        background-color: var(--color-light-base-bg-alt-primary);
+    } @media (display-mode: standalone) { .tab-bar__component_xtycj {
+        padding-bottom: var(--sab)
+}
+    } .tab-bar__border_xtycj {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
+}

package/dynamic-mixins/index.d.ts

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

package/dynamic-mixins/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.TabBar = Component.TabBar;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"component":"tab-bar__component_xtycj","modal-bg-primary":"tab-bar__modal-bg-primary_xtycj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_xtycj","border":"tab-bar__border_xtycj"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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/dynamic-mixins/shared/index.d.ts

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

package/dynamic-mixins/shared/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getTabBarTestIds = utils.getTabBarTestIds;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/types.d.ts

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

package/dynamic-mixins/types.js

@@ -0,0 +1,3 @@
+'use strict';
+
+//# sourceMappingURL=types.js.map

package/dynamic-mixins/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dynamic-mixins/utils.d.ts

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

package/dynamic-mixins/utils.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: dynamicMixins.getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+exports.getTabBarTestIds = getTabBarTestIds;
+//# sourceMappingURL=utils.js.map

package/dynamic-mixins/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getTabBarTestIds(dataTestId: string) {\n    return {\n        tabBar: dataTestId,\n        tab: getDataTestId(dataTestId, 'tab'),\n    };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,gBAAgB,CAAC,UAAkB,EAAA;IAC/C,OAAO;AACH,QAAA,MAAM,EAAE,UAAU;AAClB,QAAA,GAAG,EAAEA,2BAAa,CAAC,UAAU,EAAE,KAAK,CAAC;KACxC;AACL;;;;"}

package/esm/components/tab/index.css

@@ -9,7 +9,7 @@
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
-} .tab-bar__component_l5b05 {
+} .tab-bar__component_tbqmm {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
     background-color: transparent;
@@ -19,12 +19,12 @@
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+    -moz-user-select: none;
+    user-select: none;
     vertical-align: middle;
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     text-decoration: none;
     min-width: 0;
     cursor: pointer;
@@ -36,17 +36,17 @@
     align-items: center;
     padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_l5b05 {
+} .tab-bar__primary_tbqmm {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_l5b05 {
+} .tab-bar__secondary_tbqmm {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_l5b05 {
+} .tab-bar__icon_tbqmm {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_l5b05 {
+} .tab-bar__label_tbqmm {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -55,9 +55,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_l5b05 {
+} .tab-bar__labelSelected_tbqmm {
     color: inherit;
-} .tab-bar__indicator_l5b05 {
+} .tab-bar__indicator_tbqmm {
     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_l5b05","primary":"tab-bar__primary_l5b05","secondary":"tab-bar__secondary_l5b05","icon":"tab-bar__icon_l5b05","label":"tab-bar__label_l5b05","labelSelected":"tab-bar__labelSelected_l5b05","indicator":"tab-bar__indicator_l5b05"};
+var styles = {"component":"tab-bar__component_tbqmm","primary":"tab-bar__primary_tbqmm","secondary":"tab-bar__secondary_tbqmm","icon":"tab-bar__icon_tbqmm","label":"tab-bar__label_tbqmm","labelSelected":"tab-bar__labelSelected_tbqmm","indicator":"tab-bar__indicator_tbqmm"};
 
 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-dynamic-mixins-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,7 +6,7 @@
     --gap-0: 0px;
 } :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
-} .tab-bar__component_j8zh2 {
+} .tab-bar__component_xtycj {
     display: flex;
     justify-content: center;
     height: 64px;
@@ -14,13 +14,13 @@
     box-sizing: border-box;
     overflow: hidden;
     transition: box-shadow 0.2s ease
-} .tab-bar__component_j8zh2.tab-bar__modal-bg-primary_j8zh2 {
+} .tab-bar__component_xtycj.tab-bar__modal-bg-primary_xtycj {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_j8zh2.tab-bar__modal-bg-alt-primary_j8zh2 {
+    } .tab-bar__component_xtycj.tab-bar__modal-bg-alt-primary_xtycj {
         background-color: var(--color-light-base-bg-alt-primary);
-    } @media (display-mode: standalone) { .tab-bar__component_j8zh2 {
+    } @media (display-mode: standalone) { .tab-bar__component_xtycj {
         padding-bottom: var(--sab)
 }
-    } .tab-bar__border_j8zh2 {
+    } .tab-bar__border_xtycj {
     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_j8zh2","modal-bg-primary":"tab-bar__modal-bg-primary_j8zh2","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_j8zh2","border":"tab-bar__border_j8zh2"};
+var styles = {"component":"tab-bar__component_xtycj","modal-bg-primary":"tab-bar__modal-bg-primary_xtycj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_xtycj","border":"tab-bar__border_xtycj"};
 
 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-dynamic-mixins-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/index.css

@@ -6,7 +6,7 @@
     --gap-0: 0px;
 } :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
-} .tab-bar__component_j8zh2 {
+} .tab-bar__component_xtycj {
     display: flex;
     justify-content: center;
     height: 64px;
@@ -14,13 +14,13 @@
     box-sizing: border-box;
     overflow: hidden;
     transition: box-shadow 0.2s ease
-} .tab-bar__component_j8zh2.tab-bar__modal-bg-primary_j8zh2 {
+} .tab-bar__component_xtycj.tab-bar__modal-bg-primary_xtycj {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_j8zh2.tab-bar__modal-bg-alt-primary_j8zh2 {
+    } .tab-bar__component_xtycj.tab-bar__modal-bg-alt-primary_xtycj {
         background-color: var(--color-light-base-bg-alt-primary);
-    } @media (display-mode: standalone) { .tab-bar__component_j8zh2 {
+    } @media (display-mode: standalone) { .tab-bar__component_xtycj {
         padding-bottom: var(--sab)
 }
-    } .tab-bar__border_j8zh2 {
+    } .tab-bar__border_xtycj {
     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_j8zh2","modal-bg-primary":"tab-bar__modal-bg-primary_j8zh2","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_j8zh2","border":"tab-bar__border_j8zh2"};
+var styles = {"component":"tab-bar__component_xtycj","modal-bg-primary":"tab-bar__modal-bg-primary_xtycj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_xtycj","border":"tab-bar__border_xtycj"};
 
 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-dynamic-mixins-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/components/tab/index.css

@@ -9,7 +9,7 @@
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
-} .tab-bar__component_l5b05 {
+} .tab-bar__component_tbqmm {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
     background-color: transparent;
@@ -19,12 +19,12 @@
     box-shadow: none;
     border-radius: 0;
     -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+    -moz-user-select: none;
+    user-select: none;
     vertical-align: middle;
     -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     text-decoration: none;
     min-width: 0;
     cursor: pointer;
@@ -36,17 +36,17 @@
     align-items: center;
     padding: var(--gap-8) var(--gap-0);
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_l5b05 {
+} .tab-bar__primary_tbqmm {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_l5b05 {
+} .tab-bar__secondary_tbqmm {
     color: var(--color-light-accent-secondary);
-} .tab-bar__icon_l5b05 {
+} .tab-bar__icon_tbqmm {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_l5b05 {
+} .tab-bar__label_tbqmm {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -55,9 +55,9 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_l5b05 {
+} .tab-bar__labelSelected_tbqmm {
     color: inherit;
-} .tab-bar__indicator_l5b05 {
+} .tab-bar__indicator_tbqmm {
     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_l5b05","primary":"tab-bar__primary_l5b05","secondary":"tab-bar__secondary_l5b05","icon":"tab-bar__icon_l5b05","label":"tab-bar__label_l5b05","labelSelected":"tab-bar__labelSelected_l5b05","indicator":"tab-bar__indicator_l5b05"};
+const styles = {"component":"tab-bar__component_tbqmm","primary":"tab-bar__primary_tbqmm","secondary":"tab-bar__secondary_tbqmm","icon":"tab-bar__icon_tbqmm","label":"tab-bar__label_tbqmm","labelSelected":"tab-bar__labelSelected_tbqmm","indicator":"tab-bar__indicator_tbqmm"};
 
 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-dynamic-mixins-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,7 +6,7 @@
     --gap-0: 0px;
 } :root {
     --sab: env(safe-area-inset-bottom, var(--gap-0));
-} .tab-bar__component_j8zh2 {
+} .tab-bar__component_xtycj {
     display: flex;
     justify-content: center;
     height: 64px;
@@ -14,13 +14,13 @@
     box-sizing: border-box;
     overflow: hidden;
     transition: box-shadow 0.2s ease
-} .tab-bar__component_j8zh2.tab-bar__modal-bg-primary_j8zh2 {
+} .tab-bar__component_xtycj.tab-bar__modal-bg-primary_xtycj {
         background-color: var(--color-light-base-bg-primary);
-    } .tab-bar__component_j8zh2.tab-bar__modal-bg-alt-primary_j8zh2 {
+    } .tab-bar__component_xtycj.tab-bar__modal-bg-alt-primary_xtycj {
         background-color: var(--color-light-base-bg-alt-primary);
-    } @media (display-mode: standalone) { .tab-bar__component_j8zh2 {
+    } @media (display-mode: standalone) { .tab-bar__component_xtycj {
         padding-bottom: var(--sab)
 }
-    } .tab-bar__border_j8zh2 {
+    } .tab-bar__border_xtycj {
     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_j8zh2","modal-bg-primary":"tab-bar__modal-bg-primary_j8zh2","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_j8zh2","border":"tab-bar__border_j8zh2"};
+const styles = {"component":"tab-bar__component_xtycj","modal-bg-primary":"tab-bar__modal-bg-primary_xtycj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_xtycj","border":"tab-bar__border_xtycj"};
 
 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-dynamic-mixins-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/moderncssm/components/tab/index.module.css

@@ -1,3 +1,5 @@
+
+
 .component {
     -webkit-tap-highlight-color: transparent;
     box-sizing: border-box;
@@ -7,13 +9,9 @@
     margin: var(--gap-0);
     box-shadow: none;
     border-radius: 0;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
+    user-select: none;
     vertical-align: middle;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    appearance: none;
     text-decoration: none;
     min-width: 0;
     cursor: pointer;

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;
@@ -10,17 +11,22 @@
     overflow: hidden;
     transition: box-shadow 0.2s ease
 }
+
 .component.modal-bg-primary {
         background-color: var(--color-light-base-bg-primary);
     }
+
 .component.modal-bg-alt-primary {
         background-color: var(--color-light-base-bg-alt-primary);
     }
+
 @media (display-mode: standalone) {
+
 .component {
         padding-bottom: var(--sab)
 }
     }
+
 .border {
     box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tab-bar",
-    "version": "3.0.0",
+    "version": "3.1.0-snapshot-92b8690",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -10,9 +10,9 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-indicator": "^3.0.0",
-        "@alfalab/core-components-shared": "^1.0.0",
-        "@alfalab/core-components-typography": "^5.0.0",
+        "@alfalab/core-components-indicator": "3.1.0-snapshot-92b8690",
+        "@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
+        "@alfalab/core-components-typography": "5.1.0-snapshot-92b8690",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
     },
@@ -24,6 +24,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.0.0",
-    "varsVersion": "10.0.0"
+    "themesVersion": "14.1.0-snapshot-92b8690",
+    "varsVersion": "10.1.0-snapshot-92b8690"
 }

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-dynamic-mixins-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-dynamic-mixins-index.css';
 @import '@alfalab/core-components-vars/src/safe-area.css';
 
 .component {