@akinon/ui-layout 0.6.0 → 1.0.1

package/dist/esm/Layout/Sider/types.d.ts

@@ -1,68 +1,128 @@
 // TODO integrate with antd menu types
+/**
+ * Interface for items within the left sider.
+ */
 export type LeftSiderItem = {
+  /**
+   * Unique key for the menu item.
+   */
   key: string;
+
+  /**
+   * Display label for the menu item.
+   */
   label: string;
+
+  /**
+   * Optional icon for the menu item.
+   */
   icon?: React.ReactNode;
+
+  /**
+   * Additional CSS class for the menu item.
+   */
   className?: string;
+
+  /**
+   * Callback function triggered when the menu item is clicked.
+   */
   onClick?: () => void;
+
+  /**
+   * Nested children items for creating submenus.
+   */
   children?: LeftSiderItem[];
+
+  /**
+   * Whether the menu item is disabled.
+   */
   disabled?: boolean;
 };
 
 export type SiderProps = Omit<AntSiderProps, 'prefixCls' | 'style' | 'styles'>;
 
 export interface AntSiderProps extends React.HTMLAttributes<HTMLDivElement> {
-  prefixCls?: string;
+  /**
+   * Sider position for border position.
+   * If it is left, the border will be on the right side.
+   * Other is other side.
+   *
+   * @default left
+   */
+  position?: 'left' | 'right';
+
   /**
    * Whether can be collapsed
    */
   collapsible?: boolean;
+
   /**
    * To set the current status
    */
   collapsed?: boolean;
+
   /**
    * To set the initial status
    */
   defaultCollapsed?: boolean;
+
   /**
    * Reverse direction of arrow, for a sider that expands from the right
    */
   reverseArrow?: boolean;
+
   /**
    * The callback function, executed by clicking the trigger or activating the responsive layout
    */
   onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+
   /**
    * To customize the styles of the special trigger that appears when <code>collapsedWidth</code> is 0
    */
   zeroWidthTriggerStyle?: React.CSSProperties;
+
   /**
    * Specify the customized trigger, set to null to hide the trigger
    */
   trigger?: React.ReactNode;
+
   /**
    * Width of the sidebar
    */
   width?: number | string;
+
   /**
    * Width of the collapsed sidebar, by setting to 0 a special trigger will appear
    */
   collapsedWidth?: number | string;
+
   /**
    * Breakpoints of the responsive layout
    */
   breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
   /**
    * Color theme of the sidebar
    */
   theme?: SiderTheme;
+
   /**
    * The callback function, executed when breakpoints changed
    */
   onBreakpoint?: (broken: boolean) => void;
+
+  /**
+   * URL for the sidebar's custom icon. This can be used for branding or visual enhancement.
+   * If provided, the icon will be displayed in the sidebar header or a designated area.
+   */
   iconUrl?: string;
+
+  /**
+   * URL for the sidebar's brand image. Typically used to display a logo or branding element in the sidebar.
+   * This can enhance the sidebar's appearance and provide a visual identity for the application.
+   */
   brandImageUrl?: string;
+
   /**
    * The additional css class
    */

package/dist/esm/Layout/index.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import type { LayoutProps } from './types';
 export type { LayoutProps } from './types';
+/**
+ * Layout component, which acts as the container for building structured page layouts.
+ * It provides a framework to integrate Sider, Header, Footer, and Content components cohesively.
+ *
+ * This component is commonly used in applications to establish a consistent and flexible layout structure.
+ */
 export declare const Layout: ({ children, ...restLayoutProps }: LayoutProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;GAKG;AAEH,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/esm/Layout/index.js

@@ -13,6 +13,12 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Layout as AntLayout } from 'antd';
 import * as React from 'react';
+/**
+ * Layout component, which acts as the container for building structured page layouts.
+ * It provides a framework to integrate Sider, Header, Footer, and Content components cohesively.
+ *
+ * This component is commonly used in applications to establish a consistent and flexible layout structure.
+ */
 export const Layout = (_a) => {
     var { children } = _a, restLayoutProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

package/dist/esm/Layout/types.d.ts

@@ -4,19 +4,29 @@ export type LayoutProps = Omit<
 >;
 
 export interface AntLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-  prefixCls?: string;
+  /**
+   * Suffix class for custom styling.
+   */
   suffixCls?: string;
+
   /**
-   * ClassName on the root element
+   * ClassName on the root element.
    */
   rootClassName?: string;
+
   /**
-   * Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
+   * Indicates whether the layout contains a Sider component.
+   * This property is usually inferred automatically but can be explicitly set to avoid style flickering in SSR scenarios.
    */
   hasSider?: boolean;
+
+  /**
+   * The children elements to render within the layout.
+   */
   children: React.ReactNode;
+
   /**
-   * The additional css class
+   * The additional CSS class for styling.
    */
   className?: string;
 }

package/dist/esm/NavCard/__tests__/navcard.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=navcard.test.d.ts.map

package/dist/esm/NavCard/__tests__/navcard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navcard.test.d.ts","sourceRoot":"","sources":["../../../../src/NavCard/__tests__/navcard.test.tsx"],"names":[],"mappings":""}

package/dist/esm/NavCard/__tests__/navcard.test.js

@@ -0,0 +1,38 @@
+import { render, screen } from '@akinon/utils';
+import * as React from 'react';
+import { describe, expect, it } from 'vitest';
+import { NavCard } from '..';
+describe('NavCard', () => {
+    it('renders with required props', () => {
+        render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search" }));
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+        expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+    it('renders with default variant', () => {
+        render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", variant: "default" }));
+        const iconContainer = screen.getByTestId('icon-container');
+        expect(iconContainer).toHaveClass('akinon-navcard-icon-default');
+    });
+    it('renders with akinon variant', () => {
+        render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", variant: "akinon" }));
+        const iconContainer = screen.getByTestId('icon-container');
+        expect(iconContainer).toHaveClass('akinon-navcard-icon-akinon');
+    });
+    it('applies custom background color', () => {
+        const customBackground = '#ff0000';
+        render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", background: customBackground }));
+        const iconContainer = screen.getByTestId('icon-container');
+        expect(iconContainer).toHaveStyle({ background: customBackground });
+    });
+    it('applies custom icon color', () => {
+        render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", iconColor: "red" }));
+        const icon = screen.getByTestId('icon');
+        expect(icon).toHaveStyle({ fill: 'red' });
+    });
+    it('applies custom className', () => {
+        const customClass = 'custom-nav-card';
+        render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", className: customClass }));
+        const navCard = screen.getByTestId('nav-card');
+        expect(navCard).toHaveClass(customClass);
+    });
+});

package/dist/esm/NavCard/__tests__/navcard.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen } from '@akinon/utils';
+import * as React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { NavCard } from '..';
+
+describe('NavCard', () => {
+  it('renders with required props', () => {
+    render(
+      <NavCard
+        title="Test Title"
+        description="Test Description"
+        icon="search"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+
+  it('renders with default variant', () => {
+    render(
+      <NavCard
+        title="Test Title"
+        description="Test Description"
+        icon="search"
+        variant="default"
+      />
+    );
+
+    const iconContainer = screen.getByTestId('icon-container');
+    expect(iconContainer).toHaveClass('akinon-navcard-icon-default');
+  });
+
+  it('renders with akinon variant', () => {
+    render(
+      <NavCard
+        title="Test Title"
+        description="Test Description"
+        icon="search"
+        variant="akinon"
+      />
+    );
+
+    const iconContainer = screen.getByTestId('icon-container');
+    expect(iconContainer).toHaveClass('akinon-navcard-icon-akinon');
+  });
+
+  it('applies custom background color', () => {
+    const customBackground = '#ff0000';
+    render(
+      <NavCard
+        title="Test Title"
+        description="Test Description"
+        icon="search"
+        background={customBackground}
+      />
+    );
+
+    const iconContainer = screen.getByTestId('icon-container');
+    expect(iconContainer).toHaveStyle({ background: customBackground });
+  });
+
+  it('applies custom icon color', () => {
+    render(
+      <NavCard
+        title="Test Title"
+        description="Test Description"
+        icon="search"
+        iconColor="red"
+      />
+    );
+
+    const icon = screen.getByTestId('icon');
+    expect(icon).toHaveStyle({ fill: 'red' });
+  });
+
+  it('applies custom className', () => {
+    const customClass = 'custom-nav-card';
+    render(
+      <NavCard
+        title="Test Title"
+        description="Test Description"
+        icon="search"
+        className={customClass}
+      />
+    );
+
+    const navCard = screen.getByTestId('nav-card');
+    expect(navCard).toHaveClass(customClass);
+  });
+});

package/dist/esm/NavCard/index.d.ts

@@ -1,6 +1,23 @@
-import './index.css';
 import * as React from 'react';
 import type { NavCardProps } from './types';
-export type { NavCardProps } from './types';
-export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
+export type * from './types';
+/**
+ * NavCard component for navigation or highlighting sections in the interface.
+ *
+ * The NavCard component is designed to provide a visually engaging and functional card
+ * that serves as a navigation element or as a callout section in a user interface.
+ *
+ * Features:
+ * - **Title**: A required title to provide the primary context for the NavCard.
+ * - **Description**: A short description to elaborate on the title or purpose of the card.
+ * - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
+ * - **Color Variants**: Offers a range of predefined color options for theming, including:
+ *   - `default`
+ *   - `akinon`
+ * - **Custom Styling**: Allows additional customizations via the `className` prop.
+ *
+ * Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
+ * and thematically consistent navigation elements are required.
+ */
+export declare const NavCard: ({ title, description, icon, variant, className, background, iconColor }: NavCardProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/NavCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,OAAO,4EAQjB,YAAY,sBAwFd,CAAC"}

package/dist/esm/NavCard/index.js

@@ -1,11 +1,82 @@
-import './index.css';
+import { Icon } from '@akinon/icons';
+import { useToken } from '@akinon/ui-theme';
+import { Title } from '@akinon/ui-typography';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
 import clsx from 'clsx';
 import * as React from 'react';
-export const NavCard = ({ title, description, icon, variant, className }) => {
-    const variantClass = variant ? `nav-card-${variant}` : '';
-    return (React.createElement("div", { className: clsx('nav-card', variantClass, className) },
-        icon && React.createElement("div", { className: "nav-card__icon" }, icon),
-        React.createElement("div", { className: "nav-card__content" },
-            React.createElement("h2", { className: "nav-card__title" }, title),
-            React.createElement("div", { className: "nav-card__description" }, description))));
+import { Flex } from '../Flex';
+/**
+ * NavCard component for navigation or highlighting sections in the interface.
+ *
+ * The NavCard component is designed to provide a visually engaging and functional card
+ * that serves as a navigation element or as a callout section in a user interface.
+ *
+ * Features:
+ * - **Title**: A required title to provide the primary context for the NavCard.
+ * - **Description**: A short description to elaborate on the title or purpose of the card.
+ * - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
+ * - **Color Variants**: Offers a range of predefined color options for theming, including:
+ *   - `default`
+ *   - `akinon`
+ * - **Custom Styling**: Allows additional customizations via the `className` prop.
+ *
+ * Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
+ * and thematically consistent navigation elements are required.
+ */
+export const NavCard = ({ title, description, icon, variant = 'default', className, background, iconColor = 'white' }) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const navCardToken = theme.NavCardTokens;
+    const customTokens = theme.CustomTokens || {};
+    const prefixClsWithoutHash = `.${getPrefixCls()}-navcard`;
+    const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+    useStyleRegister({
+        token: token,
+        path: ['NavCard'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        return {
+            [prefixCls]: {
+                overflow: customTokens.overflow.overflowHidden,
+                borderRadius: customTokens.border.borderRadiusSm,
+                boxShadow: navCardToken.shadow,
+                background: 'white',
+                [`${prefixClsWithoutHash}-icon`]: {
+                    padding: '1.5rem',
+                    display: customTokens.layout.displayFlex,
+                    justifyContent: customTokens.layout.flexCenter,
+                    alignItems: customTokens.layout.flexCenter,
+                    [`&${prefixClsWithoutHash}-icon-default`]: {
+                        background: 'var(--color-gray-500)'
+                    },
+                    [`&${prefixClsWithoutHash}-icon-akinon`]: {
+                        background: 'var(--color-akinon-500)'
+                    }
+                },
+                [`${prefixClsWithoutHash}-content`]: {
+                    padding: '1.5rem'
+                },
+                [`${prefixClsWithoutHash}-title`]: {
+                    color: 'var(--color-blue-955)',
+                    margin: 0
+                },
+                [`${prefixClsWithoutHash}-description`]: {
+                    color: 'var(--color-blue-955)'
+                }
+            }
+        };
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { className: clsx(`${getPrefixCls()}-navcard`, className), "data-testid": "nav-card" },
+            React.createElement("div", { className: clsx(`${getPrefixCls()}-navcard-icon`, {
+                    [`${getPrefixCls()}-navcard-icon-${variant}`]: variant
+                }), style: {
+                    background
+                }, "data-testid": "icon-container" },
+                React.createElement(Icon, { icon: icon, size: "28", color: iconColor, "data-testid": "icon" })),
+            React.createElement("div", { className: clsx(`${getPrefixCls()}-navcard-content`) },
+                React.createElement(Title, { level: 3, className: `${getPrefixCls()}-navcard-title` }, title),
+                React.createElement("div", { className: `${getPrefixCls()}-navcard-description` }, description)))));
 };

package/dist/esm/NavCard/types.d.ts

@@ -1,30 +1,38 @@
-export type NavCardColorVariant =
-  | 'akinon'
-  | 'azure'
-  | 'blue'
-  | 'orange'
-  | 'red'
-  | 'green'
-  | 'pink'
-  | 'purple';
+import { IconName } from '@akinon/icons';
+
+export type NavCardColorVariant = 'akinon' | 'default';
 
 export interface NavCardProps {
   /**
    * The title of the NavCard.
    */
   title: string;
+
   /**
    * The description of the NavCard.
    */
-  description: string;
+  description: React.ReactNode;
+
   /**
    * The icon of the NavCard.
    */
-  icon?: React.ReactNode;
+  icon: IconName;
+
   /**
    * The color variant of the NavCard.
    */
   variant?: NavCardColorVariant;
+
+  /**
+   * Custom background for the NavCard.
+   */
+  background?: React.CSSProperties['background'];
+
+  /**
+   * Custom icon color for the NavCard.
+   */
+  iconColor?: React.CSSProperties['color'];
+
   /**
    * The additional css class
    */

package/dist/esm/PageContent/index.d.ts

@@ -1,6 +1,8 @@
-import './index.css';
 import * as React from 'react';
 import type { PageContentProps } from './types';
-export type { PageContentProps } from './types';
+/**
+ * It is used to generate content for a standard page.
+ */
 export declare const PageContent: ({ children, className, ...restProps }: PageContentProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/PageContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,sBAIlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AAEH,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,sBAMlB,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/PageContent/index.js

@@ -9,10 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import './index.css';
-import clsx from 'clsx';
 import * as React from 'react';
+/**
+ * It is used to generate content for a standard page.
+ */
 export const PageContent = (_a) => {
-    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: clsx('akinon-page-content', className) }, restProps), children));
+    var { children, className = '' } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({ className: className, style: { padding: '30px' } }, restProps), children));
 };

package/dist/esm/PageContent/types.d.ts

@@ -1,3 +1,11 @@
 export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
+  /**
+   * The content of the page.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The additional css class.
+   */
+  className?: string;
 }

package/dist/esm/PageHeading/index.d.ts

@@ -1,6 +1,9 @@
-import './index.css';
 import * as React from 'react';
 import type { PageHeadingProps } from './types';
-export type { PageHeadingProps } from './types';
+/**
+ * It is used to generate title, description and actions for a standard page.
+ * See the [PageContent](/docs/layout-pagecontent--docs) component for more information.
+ */
 export declare const PageHeading: ({ title, description, actions, className }: PageHeadingProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/PageHeading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,+CAKrB,gBAAgB,sBAalB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeading/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;GAGG;AAEH,eAAO,MAAM,WAAW,+CAKrB,gBAAgB,sBA4BlB,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/PageHeading/index.js

@@ -1,10 +1,16 @@
-import './index.css';
-import clsx from 'clsx';
+import { Flex, Space, Typography } from 'antd';
 import * as React from 'react';
+/**
+ * It is used to generate title, description and actions for a standard page.
+ * See the [PageContent](/docs/layout-pagecontent--docs) component for more information.
+ */
 export const PageHeading = ({ title, description, actions, className }) => {
-    return (React.createElement("div", { className: clsx('akinon-page-heading', className) },
-        React.createElement("div", { className: "akinon-page-heading__content" },
-            React.createElement("h1", { className: "akinon-page-heading__title" }, title),
-            description && (React.createElement("p", { className: "akinon-page-heading__description" }, description))),
-        actions && React.createElement("div", { className: "akinon-page-heading__actions" }, actions)));
+    return (React.createElement(Flex, { justify: "space-between", align: "flex-start", className: className, style: {
+            padding: '18px 30px',
+            borderBlockEnd: 'solid 1px var(--color-gray-900)'
+        } },
+        React.createElement(Space, { direction: "vertical", size: 4 },
+            React.createElement(Typography.Title, { level: 4, style: { margin: 0 } }, title),
+            description && (React.createElement(Typography.Paragraph, { type: "secondary", style: { margin: 0, fontSize: 10 } }, description))),
+        actions && React.createElement(Space, null, actions)));
 };

package/dist/esm/PageHeading/types.d.ts

@@ -3,14 +3,17 @@ export interface PageHeadingProps {
    * The title of the PageHeading.
    */
   title: string;
+
   /**
    * The description of the PageHeading.
    */
   description?: string;
+
   /**
    * The action items of the PageHeading.
    */
-  actions?: ReactNode;
+  actions?: React.ReactNode;
+
   /**
    * The additional css class
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-layout",
-  "version": "0.6.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,19 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
+    "antd": "5.22.6",
     "clsx": "^2.0.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0",
-    "@akinon/ui-theme": "0.7.0"
+    "typescript": "*",
+    "@akinon/ui-theme": "1.0.1",
+    "@akinon/icons": "1.0.1",
+    "@akinon/ui-typography": "1.0.1",
+    "@akinon/typescript-config": "1.0.1",
+    "@akinon/utils": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",