@astral/ui 4.88.0 → 4.88.1

package/components/PageHeader/HeaderContent/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../../styled';
+import { tabsClassnames } from '../../Tabs';
 export const BreadcrumbsWrapper = styled.div `
   grid-column: 2;
   grid-row: 1;
@@ -13,10 +14,14 @@ export const TabsWrapper = styled.div `
   grid-column: 1 / -1;
   grid-row: 4;
 
-  padding-top:  ${({ theme }) => theme.spacing(3)};
+  padding-top:  ${({ theme }) => theme.spacing(4)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+    padding: ${({ theme }) => theme.spacing(0, 0, 4, 0)};
+
+    .${tabsClassnames.root} {
+      margin: ${({ theme }) => theme.spacing(0, 4)};
+    }
   }
 `;
 export const PageSubheader = styled.div `

package/components/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
 import type { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type TabsProps = WithoutEmotionSpecific<MuiTabsProps>;
-export declare const Tabs: ({ ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ className, ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/components/Tabs/Tabs.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useScrollToActiveElement } from '../useScrollToActiveElement';
+import { classNames } from '../utils/classNames';
+import { tabsClassnames } from './constants';
 import { Container, Divider, StyledTabs, Wrapper } from './styles';
-export const Tabs = ({ ...tabsProps }) => {
+export const Tabs = ({ className, ...tabsProps }) => {
     const { containerRef } = useScrollToActiveElement();
-    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef }), _jsx(Divider, {})] }) }));
+    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef, className: classNames(className, tabsClassnames.root) }), _jsx(Divider, {})] }) }));
 };

package/components/Tabs/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const tabsClassnames: {
+    root: string;
+};

package/components/Tabs/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const tabsClassnames = {
+    root: createUIKitClassname('tabs-root'),
+};

package/components/Tabs/index.d.ts

@@ -1,2 +1,3 @@
-export * from './Tabs';
+export { tabsClassnames } from './constants';
 export * from './Tab';
+export * from './Tabs';

package/components/Tabs/index.js

@@ -1,2 +1,3 @@
-export * from './Tabs';
+export { tabsClassnames } from './constants';
 export * from './Tab';
+export * from './Tabs';

package/components/Tabs/public.d.ts

@@ -1,2 +1,3 @@
+export { tabsClassnames } from './constants';
 export * from './Tab';
 export * from './Tabs';

package/components/Tabs/public.js

@@ -1,2 +1,3 @@
+export { tabsClassnames } from './constants';
 export * from './Tab';
 export * from './Tabs';

package/node/components/PageHeader/HeaderContent/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesktopTitleWrapper = exports.PageSubheader = exports.TabsWrapper = exports.BreadcrumbsWrapper = void 0;
 const styled_1 = require("../../styled");
+const Tabs_1 = require("../../Tabs");
 exports.BreadcrumbsWrapper = styled_1.styled.div `
   grid-column: 2;
   grid-row: 1;
@@ -16,10 +17,14 @@ exports.TabsWrapper = styled_1.styled.div `
   grid-column: 1 / -1;
   grid-row: 4;
 
-  padding-top:  ${({ theme }) => theme.spacing(3)};
+  padding-top:  ${({ theme }) => theme.spacing(4)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+    padding: ${({ theme }) => theme.spacing(0, 0, 4, 0)};
+
+    .${Tabs_1.tabsClassnames.root} {
+      margin: ${({ theme }) => theme.spacing(0, 4)};
+    }
   }
 `;
 exports.PageSubheader = styled_1.styled.div `

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

@@ -1,4 +1,4 @@
 import type { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type TabsProps = WithoutEmotionSpecific<MuiTabsProps>;
-export declare const Tabs: ({ ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ className, ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/Tabs/Tabs.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const Tabs = ({ ...tabsProps }) => {
+const Tabs = ({ className, ...tabsProps }) => {
     const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
-    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef, className: (0, classNames_1.classNames)(className, constants_1.tabsClassnames.root) }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
 };
 exports.Tabs = Tabs;

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

@@ -0,0 +1,3 @@
+export declare const tabsClassnames: {
+    root: string;
+};

package/node/components/Tabs/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.tabsClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('tabs-root'),
+};

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

@@ -1,2 +1,3 @@
-export * from './Tabs';
+export { tabsClassnames } from './constants';
 export * from './Tab';
+export * from './Tabs';

package/node/components/Tabs/index.js

@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Tabs"), exports);
+exports.tabsClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "tabsClassnames", { enumerable: true, get: function () { return constants_1.tabsClassnames; } });
 __exportStar(require("./Tab"), exports);
+__exportStar(require("./Tabs"), exports);

package/node/components/Tabs/public.d.ts

@@ -1,2 +1,3 @@
+export { tabsClassnames } from './constants';
 export * from './Tab';
 export * from './Tabs';

package/node/components/Tabs/public.js

@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "tabsClassnames", { enumerable: true, get: function () { return constants_1.tabsClassnames; } });
 __exportStar(require("./Tab"), exports);
 __exportStar(require("./Tabs"), exports);

package/package.json

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