@astral/ui 4.71.4 → 4.72.0

package/components/PageContent/PageContentHeader/Description/Description.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 type DescriptionProps = {
     description?: ReactNode;
     isLoading?: boolean;
+    className?: string;
 };
-export declare const Description: ({ description, isLoading }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Description: ({ className, description, isLoading, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageContent/PageContentHeader/Description/Description.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from '../../../Skeleton';
 import { Typography } from '../../../Typography';
-export const Description = ({ description, isLoading }) => {
+export const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return _jsx(Skeleton, { height: 20, width: 300 });
+        return _jsx(Skeleton, { className: className, height: 20, width: 300 });
     }
     if (typeof description === 'string') {
-        return _jsx(Typography, { variant: "body1", children: description });
+        return (_jsx(Typography, { className: className, variant: "body1", children: description }));
     }
-    return (_jsx(Typography, { component: "div", variant: "body1", children: description }));
+    return (_jsx(Typography, { className: className, component: "div", variant: "body1", children: description }));
 };

package/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pageContentHeaderClassnames } from './constants';
 import { Description } from './Description';
 import { TitleBlock, Wrapper } from './styles';
 import { Title } from './Title';
 export const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return (_jsxs(Wrapper, { children: [_jsxs(TitleBlock, { children: [_jsx(Title, { title: title, isLoading: isLoading, children: children }), _jsx(Description, { description: description, isLoading: isLoading })] }), actions && actions] }));
+    return (_jsxs(Wrapper, { className: pageContentHeaderClassnames.pageContentHeader, children: [_jsxs(TitleBlock, { children: [_jsx(Title, { title: title, isLoading: isLoading, children: children }), _jsx(Description, { className: pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
 };

package/components/PageContent/PageContentHeader/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageContentHeaderClassnames: {
+    pageContentHeader: string;
+    description: string;
+};

package/components/PageContent/PageContentHeader/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const pageContentHeaderClassnames = {
+    pageContentHeader: createUIKitClassname('page-content-header'),
+    description: createUIKitClassname('page-content-header__description'),
+};

package/components/PageContent/PageContentHeader/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../../styled';
+import { pageContentHeaderClassnames } from './constants';
 export const Wrapper = styled.header `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -23,4 +24,10 @@ export const TitleBlock = styled.div `
   overflow: hidden;
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${pageContentHeaderClassnames.description} {
+      display: none;
+    }
+  }
 `;

package/node/components/PageContent/PageContentHeader/Description/Description.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 type DescriptionProps = {
     description?: ReactNode;
     isLoading?: boolean;
+    className?: string;
 };
-export declare const Description: ({ description, isLoading }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Description: ({ className, description, isLoading, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/PageContent/PageContentHeader/Description/Description.js

@@ -4,13 +4,13 @@ exports.Description = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../../Skeleton");
 const Typography_1 = require("../../../Typography");
-const Description = ({ description, isLoading }) => {
+const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 300 });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 20, width: 300 });
     }
     if (typeof description === 'string') {
-        return (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", children: description });
+        return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, variant: "body1", children: description }));
     }
-    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "body1", children: description }));
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, component: "div", variant: "body1", children: description }));
 };
 exports.Description = Description;

package/node/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContentHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
 const Description_1 = require("./Description");
 const styles_1 = require("./styles");
 const Title_1 = require("./Title");
 const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading })] }), actions && actions] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.pageContentHeaderClassnames.pageContentHeader, children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
 };
 exports.PageContentHeader = PageContentHeader;

package/node/components/PageContent/PageContentHeader/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageContentHeaderClassnames: {
+    pageContentHeader: string;
+    description: string;
+};

package/node/components/PageContent/PageContentHeader/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageContentHeaderClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.pageContentHeaderClassnames = {
+    pageContentHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-content-header'),
+    description: (0, createUIKitClassname_1.createUIKitClassname)('page-content-header__description'),
+};

package/node/components/PageContent/PageContentHeader/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TitleBlock = exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.header `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -26,4 +27,10 @@ exports.TitleBlock = styled_1.styled.div `
   overflow: hidden;
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${constants_1.pageContentHeaderClassnames.description} {
+      display: none;
+    }
+  }
 `;

package/package.json

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