@akinon/ui-layout 0.6.0 → 1.0.0

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

@@ -1,5 +1,13 @@
 import * as React from 'react';
 import type { ContentProps } from './types';
 export type { ContentProps } from './types';
+/**
+ * `Content` is a layout component designed for the main content area of an application or page.
+ *
+ * ### Features:
+ * - **Custom Styling:** Easily apply custom styles using `prefixCls`, `suffixCls`, or `rootClassName`.
+ * - **Responsive Design:** Automatically adjusts based on the presence of a `Sider`.
+ * - **Structure:** Works seamlessly with other layout components such as `Header`, `Footer`, and `Sider`.
+ */
 export declare const Content: ({ children, ...restContentProps }: ContentProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Content/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBA4BtE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Content/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C;;;;;;;GAOG;AAEH,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBA4BtE,CAAC"}

package/dist/esm/Layout/Content/index.js

@@ -14,6 +14,14 @@ import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Layout as AntLayout } from 'antd';
 import * as React from 'react';
 const { Content: AntContent } = AntLayout;
+/**
+ * `Content` is a layout component designed for the main content area of an application or page.
+ *
+ * ### Features:
+ * - **Custom Styling:** Easily apply custom styles using `prefixCls`, `suffixCls`, or `rootClassName`.
+ * - **Responsive Design:** Automatically adjusts based on the presence of a `Sider`.
+ * - **Structure:** Works seamlessly with other layout components such as `Header`, `Footer`, and `Sider`.
+ */
 export const Content = (_a) => {
     var { children } = _a, restContentProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

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

@@ -7,8 +7,23 @@ export type AntContentProps = AntContentBasicProps &
   React.RefAttributes<HTMLElement>;
 
 interface AntContentBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Prefix class for custom styling.
+   */
   prefixCls?: string;
+
+  /**
+   * Suffix class for custom styling.
+   */
   suffixCls?: string;
+
+  /**
+   * Class name for the root element.
+   */
   rootClassName?: string;
+
+  /**
+   * Indicates if the layout contains a sider.
+   */
   hasSider?: boolean;
 }

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

@@ -2,5 +2,10 @@ import './index.css';
 import * as React from 'react';
 import type { FooterProps } from './types';
 export type { FooterProps } from './types';
+/**
+ * Footer component, which serves as the bottom section of a layout.
+ * It provides a consistent structure for displaying additional
+ * information, links, or branding at the end of the page.
+ */
 export declare const Footer: ({ children, ...restFooterProps }: FooterProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/Layout/Footer/index.js

@@ -15,6 +15,11 @@ import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Layout as AntLayout } from 'antd';
 import * as React from 'react';
 const { Footer: AntFooter } = AntLayout;
+/**
+ * Footer component, which serves as the bottom section of a layout.
+ * It provides a consistent structure for displaying additional
+ * information, links, or branding at the end of the page.
+ */
 export const Footer = (_a) => {
     var { children } = _a, restFooterProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

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

@@ -1,15 +1,43 @@
+/**
+ * Props for the Footer component, excluding specific attributes from AntFooterProps.
+ */
 export type FooterProps = Omit<
   AntFooterProps,
   'prefixCls' | 'suffixCls' | 'style' | 'styles'
 >;
 
+/**
+ * Combined type for Footer props with React reference attributes.
+ */
 export type AntFooterProps = AntFooterBasicProps &
   React.RefAttributes<HTMLElement>;
 
+/**
+ * Basic props for the Footer component.
+ */
 interface AntFooterBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Prefix class for custom styling.
+   */
   prefixCls?: string;
+
+  /**
+   * Suffix class for additional customization.
+   */
   suffixCls?: string;
+
+  /**
+   * Root class name for the Footer component.
+   */
   rootClassName?: string;
+
+  /**
+   * Indicates whether the layout contains a Sider component.
+   */
   hasSider?: boolean;
+
+  /**
+   * Content to be displayed inside the Footer.
+   */
   children: React.ReactNode;
 }

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

@@ -2,5 +2,12 @@ import './index.css';
 import * as React from 'react';
 import type { HeaderProps } from './types';
 export type { HeaderProps } from './types';
+/**
+ * Header component, which serves as the top section of a layout.
+ * It provides a consistent structure for navigation, branding, or additional controls at the top of the page.
+ *
+ * This component is part of the Layout system and is typically used alongside other Layout components
+ * such as Footer, Sider, and Content to build a structured page layout.
+ */
 export declare const Header: ({ children, ...restHeaderProps }: HeaderProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/Layout/Header/index.js

@@ -15,6 +15,13 @@ import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Layout as AntLayout } from 'antd';
 import * as React from 'react';
 const { Header: AntHeader } = AntLayout;
+/**
+ * Header component, which serves as the top section of a layout.
+ * It provides a consistent structure for navigation, branding, or additional controls at the top of the page.
+ *
+ * This component is part of the Layout system and is typically used alongside other Layout components
+ * such as Footer, Sider, and Content to build a structured page layout.
+ */
 export const Header = (_a) => {
     var { children } = _a, restHeaderProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

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

@@ -1,3 +1,7 @@
+/**
+ * Header component, which serves as the top section of a layout.
+ * It provides a consistent structure for navigation, branding, or additional controls at the top of the page.
+ */
 export type HeaderProps = Omit<
   AntHeaderProps,
   'prefixCls' | 'suffixCls' | 'style' | 'styles'
@@ -7,9 +11,28 @@ export type AntHeaderProps = AntHeaderBasicProps &
   React.RefAttributes<HTMLElement>;
 
 interface AntHeaderBasicProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Prefix class for custom styling.
+   */
   prefixCls?: string;
+
+  /**
+   * Suffix class for custom styling.
+   */
   suffixCls?: string;
+
+  /**
+   * Root class name for the component.
+   */
   rootClassName?: string;
+
+  /**
+   * Indicates if the layout has a sider.
+   */
   hasSider?: boolean;
+
+  /**
+   * The children elements to render within the header.
+   */
   children: React.ReactNode;
 }

package/dist/esm/Layout/Sider/index.css

@@ -1,7 +1,7 @@
 .akinon-layout-sider {
   position: sticky;
   top: 0;
-  height: 100vh;
+  height: 100svh;
   overflow-y: auto;
 }
 
@@ -16,13 +16,19 @@
 .akinon-layout-sider .logo-container {
   display: flex;
   flex-direction: row;
-  justify-content: center;
   align-items: center;
   height: 3.5rem;
   gap: 0.8rem;
+  background-color: var(--color-ebonyClay-600);
+  padding-inline: 1.5rem;
   /* border-bottom: 1px solid var(--color-gray-900); */
 }
 
+.akinon-layout-sider .logo-container.collapsed {
+  justify-content: center;
+  padding-inline: 1rem;
+}
+
 .akinon-layout-sider .logo-container.collapsed .brand-image {
   display: none;
 }

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

@@ -2,5 +2,28 @@ import './index.css';
 import * as React from 'react';
 import type { SiderProps } from './types';
 export type { LeftSiderItem, SiderProps } from './types';
-export declare const Sider: ({ children, collapsed, iconUrl, brandImageUrl, ...restSiderProps }: SiderProps) => React.JSX.Element;
+/**
+ * Sider component for building collapsible sidebars in user interfaces.
+ *
+ * The Sider component is designed to provide a flexible and customizable sidebar
+ * that integrates seamlessly with layouts, menus, and responsive designs.
+ *
+ * Features:
+ * - **Collapsible**: Option to collapse the sidebar manually or automatically.
+ * - **Custom Triggers**: Supports custom triggers or hiding the trigger altogether.
+ * - **Width Options**: Configure both default and collapsed widths.
+ * - **Responsive Breakpoints**: Adjusts behavior based on predefined screen sizes.
+ * - **Theming**: Offers `light` and `dark` themes to match application aesthetics.
+ * - **Callbacks**:
+ *   - `onCollapse`: Triggered when the sidebar is collapsed or expanded.
+ *   - `onBreakpoint`: Triggered when responsive breakpoints are reached.
+ * - **Custom Styling**:
+ *   - `className` for additional styling.
+ *   - `zeroWidthTriggerStyle` for styling triggers when the collapsed width is zero.
+ *   - `brandImageUrl` and `iconUrl` for branding and visual customization.
+ *
+ * Ideal for dashboards, navigation menus, and applications requiring collapsible or responsive side navigation.
+ *
+ */
+export declare const Sider: ({ children, collapsed, iconUrl, brandImageUrl, position, ...restSiderProps }: SiderProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Sider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIzD,eAAO,MAAM,KAAK,uEAMf,UAAU,sBAuDZ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Sider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,eAAO,MAAM,KAAK,iFAOf,UAAU,sBAgEZ,CAAC"}

package/dist/esm/Layout/Sider/index.js

@@ -15,21 +15,51 @@ import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Layout as AntLayout } from 'antd';
 import * as React from 'react';
 const { Sider: AntSider } = AntLayout;
+/**
+ * Sider component for building collapsible sidebars in user interfaces.
+ *
+ * The Sider component is designed to provide a flexible and customizable sidebar
+ * that integrates seamlessly with layouts, menus, and responsive designs.
+ *
+ * Features:
+ * - **Collapsible**: Option to collapse the sidebar manually or automatically.
+ * - **Custom Triggers**: Supports custom triggers or hiding the trigger altogether.
+ * - **Width Options**: Configure both default and collapsed widths.
+ * - **Responsive Breakpoints**: Adjusts behavior based on predefined screen sizes.
+ * - **Theming**: Offers `light` and `dark` themes to match application aesthetics.
+ * - **Callbacks**:
+ *   - `onCollapse`: Triggered when the sidebar is collapsed or expanded.
+ *   - `onBreakpoint`: Triggered when responsive breakpoints are reached.
+ * - **Custom Styling**:
+ *   - `className` for additional styling.
+ *   - `zeroWidthTriggerStyle` for styling triggers when the collapsed width is zero.
+ *   - `brandImageUrl` and `iconUrl` for branding and visual customization.
+ *
+ * Ideal for dashboards, navigation menus, and applications requiring collapsible or responsive side navigation.
+ *
+ */
 export const Sider = (_a) => {
-    var { children, collapsed, iconUrl, brandImageUrl } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl"]);
+    var { children, collapsed, iconUrl, brandImageUrl, position = 'left' } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl", "position"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
-    //const layoutToken = (token as GlobalToken).Layout;
+    const layoutToken = token.Layout;
     const useStyle = useStyleRegister({
         token: token,
         path: ['Sider'],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         theme: theme
     }, () => {
-        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-sider`;
-        const prefixClsWithoutHash = `.${getPrefixCls()}-sider`;
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-layout-sider`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-layout-sider`;
         return {
-            [prefixCls]: {},
+            [prefixCls]: {
+                '&-left': {
+                    borderInlineEnd: layoutToken.mainBorder
+                },
+                '&-right': {
+                    borderInlineStart: layoutToken.mainBorder
+                }
+            },
             [prefixClsWithoutHash]: {}
         };
     });
@@ -39,7 +69,7 @@ export const Sider = (_a) => {
             React.createElement("img", { className: "logo", src: iconUrl, alt: "icon", width: 20, height: 20 }),
             React.createElement("img", { className: "brand-image", src: brandImageUrl, alt: "brand-image", height: 20 })));
     }
-    return useStyle(React.createElement(AntSider, Object.assign({ collapsible: true, collapsed: collapsed, trigger: null, width: 250 }, restSiderProps),
+    return useStyle(React.createElement(AntSider, Object.assign({ className: `${getPrefixCls()}-layout-sider-${position}`, collapsible: true, collapsed: collapsed, trigger: null, width: 250, collapsedWidth: 56 }, restSiderProps),
         LogoContainer,
         children));
 };

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/index.d.ts

@@ -2,5 +2,29 @@ import './index.css';
 import * as React from 'react';
 import type { NavCardProps } from './types';
 export type { NavCardProps } 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:
+ *   - `akinon`
+ *   - `azure`
+ *   - `blue`
+ *   - `orange`
+ *   - `red`
+ *   - `green`
+ *   - `pink`
+ *   - `purple`
+ * - **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 }: 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":"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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}

package/dist/esm/NavCard/index.js

@@ -1,6 +1,30 @@
 import './index.css';
 import clsx from 'clsx';
 import * as React from 'react';
+/**
+ * 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:
+ *   - `akinon`
+ *   - `azure`
+ *   - `blue`
+ *   - `orange`
+ *   - `red`
+ *   - `green`
+ *   - `pink`
+ *   - `purple`
+ * - **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, className }) => {
     const variantClass = variant ? `nav-card-${variant}` : '';
     return (React.createElement("div", { className: clsx('nav-card', variantClass, className) },

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

@@ -13,18 +13,22 @@ export interface NavCardProps {
    * The title of the NavCard.
    */
   title: string;
+
   /**
    * The description of the NavCard.
    */
   description: string;
+
   /**
    * The icon of the NavCard.
    */
   icon?: React.ReactNode;
+
   /**
    * The color variant of the NavCard.
    */
   variant?: NavCardColorVariant;
+
   /**
    * 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));
 };