@astral/ui 4.113.1 → 4.113.2

package/components/NotificationList/Tabs/Tabs.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tab } from '../../Tabs';
-import { StyledTabs } from './styles';
+import { Tabs as AstralUITabs, Tab } from '../../Tabs';
 export const Tabs = ({ listType, notificationsCount, unreadNotificationsCount, onChange, }) => {
     const handleChange = (_, value) => {
         onChange(value);
     };
-    return (_jsxs(StyledTabs, { value: listType, onChange: handleChange, children: [_jsx(Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), _jsx(Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
+    return (_jsxs(AstralUITabs, { value: listType, onChange: handleChange, children: [_jsx(Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), _jsx(Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
 };

package/components/Tabs/Tab/styles.js

@@ -1,8 +1,8 @@
 import Tab from '@mui/material/Tab';
-import { HOVER_MEDIA } from '../../constants';
+import { HOVER_MEDIA, TABS_HEIGHT, TABS_HEIGHT_MOBILE } from '../../constants';
 import { styled } from '../../styled';
 export const StyledTab = styled(Tab) `
-  min-height: 36px;
+  min-height: ${TABS_HEIGHT};
   padding: 0;
 
   line-height: 20px;
@@ -10,6 +10,10 @@ export const StyledTab = styled(Tab) `
 
   border: 2px solid transparent;
 
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    min-height: ${TABS_HEIGHT_MOBILE};
+  }
+
   &:last-child {
     margin-right: 0;
   }

package/components/Tabs/styles.js

@@ -1,4 +1,5 @@
 import MuiTabs, { tabsClasses } from '@mui/material/Tabs';
+import { TABS_HEIGHT, TABS_HEIGHT_MOBILE } from '../constants';
 import { styled } from '../styled';
 export const Container = styled.div `
   overflow-x: auto;
@@ -20,8 +21,9 @@ export const Container = styled.div `
   }
 `;
 export const Divider = styled.div `
-  position: relative;
-  bottom: 2px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 
   width: 100%;
   height: 1px;
@@ -40,7 +42,14 @@ export const StyledTabs = styled(MuiTabs) `
   }
 `;
 export const Wrapper = styled.div `
+  position: relative;
+
   display: inline-block;
 
   min-width: 100%;
+  height: ${TABS_HEIGHT};
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    height: ${TABS_HEIGHT_MOBILE};
+  }
 `;

package/components/constants/index.d.ts

@@ -3,3 +3,4 @@ export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
 export * from './media';
+export * from './tabs';

package/components/constants/index.js

@@ -3,3 +3,4 @@ export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
 export * from './media';
+export * from './tabs';

package/components/constants/tabs.d.ts

@@ -0,0 +1,2 @@
+export declare const TABS_HEIGHT = "34px";
+export declare const TABS_HEIGHT_MOBILE = "40px";

package/components/constants/tabs.js

@@ -0,0 +1,2 @@
+export const TABS_HEIGHT = '34px';
+export const TABS_HEIGHT_MOBILE = '40px';

package/components/theme/components/MuiTabs.js

@@ -1,9 +1,13 @@
 export const MuiTabs = {
     styleOverrides: {
-        root() {
+        root({ theme }) {
             return {
-                minHeight: 38,
-                height: 38,
+                minHeight: 34,
+                height: 34,
+                [theme.breakpoints.down('mobile')]: {
+                    minHeight: 40,
+                    height: 40,
+                },
             };
         },
         indicator({ theme }) {

package/node/components/NotificationList/Tabs/Tabs.js

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tabs_1 = require("../../Tabs");
-const styles_1 = require("./styles");
 const Tabs = ({ listType, notificationsCount, unreadNotificationsCount, onChange, }) => {
     const handleChange = (_, value) => {
         onChange(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledTabs, { value: listType, onChange: handleChange, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: listType, onChange: handleChange, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "unread", label: "\u041D\u0435\u043F\u0440\u043E\u0447\u0438\u0442\u0430\u043D\u043D\u044B\u0435", count: unreadNotificationsCount }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { value: "all", label: "\u0412\u0441\u0435", count: notificationsCount })] }));
 };
 exports.Tabs = Tabs;

package/node/components/Tabs/Tab/styles.js

@@ -8,7 +8,7 @@ const Tab_1 = __importDefault(require("@mui/material/Tab"));
 const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
-  min-height: 36px;
+  min-height: ${constants_1.TABS_HEIGHT};
   padding: 0;
 
   line-height: 20px;
@@ -16,6 +16,10 @@ exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
 
   border: 2px solid transparent;
 
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    min-height: ${constants_1.TABS_HEIGHT_MOBILE};
+  }
+
   &:last-child {
     margin-right: 0;
   }

package/node/components/Tabs/styles.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = exports.StyledTabs = exports.Divider = exports.Container = void 0;
 const Tabs_1 = __importStar(require("@mui/material/Tabs"));
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 exports.Container = styled_1.styled.div `
   overflow-x: auto;
@@ -46,8 +47,9 @@ exports.Container = styled_1.styled.div `
   }
 `;
 exports.Divider = styled_1.styled.div `
-  position: relative;
-  bottom: 2px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 
   width: 100%;
   height: 1px;
@@ -66,7 +68,14 @@ exports.StyledTabs = (0, styled_1.styled)(Tabs_1.default) `
   }
 `;
 exports.Wrapper = styled_1.styled.div `
+  position: relative;
+
   display: inline-block;
 
   min-width: 100%;
+  height: ${constants_1.TABS_HEIGHT};
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    height: ${constants_1.TABS_HEIGHT_MOBILE};
+  }
 `;

package/node/components/constants/index.d.ts

@@ -3,3 +3,4 @@ export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
 export * from './media';
+export * from './tabs';

package/node/components/constants/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./scrollbar"), exports);
 __exportStar(require("./footer"), exports);
 __exportStar(require("./classnames"), exports);
 __exportStar(require("./media"), exports);
+__exportStar(require("./tabs"), exports);

package/node/components/constants/tabs.d.ts

@@ -0,0 +1,2 @@
+export declare const TABS_HEIGHT = "34px";
+export declare const TABS_HEIGHT_MOBILE = "40px";

package/node/components/constants/tabs.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TABS_HEIGHT_MOBILE = exports.TABS_HEIGHT = void 0;
+exports.TABS_HEIGHT = '34px';
+exports.TABS_HEIGHT_MOBILE = '40px';

package/node/components/theme/components/MuiTabs.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiTabs = void 0;
 exports.MuiTabs = {
     styleOverrides: {
-        root() {
+        root({ theme }) {
             return {
-                minHeight: 38,
-                height: 38,
+                minHeight: 34,
+                height: 34,
+                [theme.breakpoints.down('mobile')]: {
+                    minHeight: 40,
+                    height: 40,
+                },
             };
         },
         indicator({ theme }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.113.1",
+  "version": "4.113.2",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/NotificationList/Tabs/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const StyledTabs: import("../../styled").StyledComponent<import("../../Tabs").TabsProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/components/NotificationList/Tabs/styles.js

@@ -1,5 +0,0 @@
-import { styled } from '../../styled';
-import { Tabs } from '../../Tabs';
-export const StyledTabs = styled(Tabs) `
-  min-height: 36px;
-`;

package/node/components/NotificationList/Tabs/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const StyledTabs: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Tabs").TabsProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/node/components/NotificationList/Tabs/styles.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTabs = void 0;
-const styled_1 = require("../../styled");
-const Tabs_1 = require("../../Tabs");
-exports.StyledTabs = (0, styled_1.styled)(Tabs_1.Tabs) `
-  min-height: 36px;
-`;