@akinon/ui-layout 0.6.0 → 1.0.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/Layout/index.js

@@ -16,6 +16,12 @@ const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("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.
+ */
 const Layout = (_a) => {
     var { children } = _a, restLayoutProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);

package/dist/cjs/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/cjs/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/cjs/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/cjs/NavCard/index.js

@@ -4,6 +4,30 @@ exports.NavCard = void 0;
 require("./index.css");
 const clsx_1 = require("clsx");
 const React = require("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.
+ */
 const NavCard = ({ title, description, icon, variant, className }) => {
     const variantClass = variant ? `nav-card-${variant}` : '';
     return (React.createElement("div", { className: (0, clsx_1.default)('nav-card', variantClass, className) },

package/dist/cjs/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/cjs/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/cjs/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/cjs/PageContent/index.js

@@ -12,11 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContent = void 0;
-require("./index.css");
-const clsx_1 = require("clsx");
 const React = require("react");
+/**
+ * It is used to generate content for a standard page.
+ */
 const PageContent = (_a) => {
-    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: (0, clsx_1.default)('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));
 };
 exports.PageContent = PageContent;

package/dist/cjs/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/cjs/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/cjs/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/cjs/PageHeading/index.js

@@ -1,14 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeading = void 0;
-require("./index.css");
-const clsx_1 = require("clsx");
+const antd_1 = require("antd");
 const React = require("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.
+ */
 const PageHeading = ({ title, description, actions, className }) => {
-    return (React.createElement("div", { className: (0, clsx_1.default)('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(antd_1.Flex, { justify: "space-between", align: "flex-start", className: className, style: {
+            padding: '18px 30px',
+            borderBlockEnd: 'solid 1px var(--color-gray-900)'
+        } },
+        React.createElement(antd_1.Space, { direction: "vertical", size: 4 },
+            React.createElement(antd_1.Typography.Title, { level: 4, style: { margin: 0 } }, title),
+            description && (React.createElement(antd_1.Typography.Paragraph, { type: "secondary", style: { margin: 0, fontSize: 10 } }, description))),
+        actions && React.createElement(antd_1.Space, null, actions)));
 };
 exports.PageHeading = PageHeading;

package/dist/cjs/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/dist/esm/Flex/index.d.ts

@@ -1,5 +1,16 @@
 import * as React from 'react';
 import type { FlexProps } from './types';
-export type { FlexProps } from './types';
+export type * from './types';
+/**
+ * The `Flex` component is a wrapper for creating flexible layouts using the flexbox model.
+ * It provides a clean and simple API to manage alignment, spacing, and direction
+ * of child elements, ensuring responsive and adaptable designs.
+ *
+ * Features include:
+ * - Vertical and horizontal layouts with optional wrapping.
+ * - Customizable alignment for both main and cross axes.
+ * - Support for predefined or custom gap sizes between child elements.
+ * - Flexibility to use any custom HTML element or React component as the container.
+ */
 export declare const Flex: ({ children, ...restFlexProps }: FlexProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBA4B7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,mBAAmB,SAAS,CAAC;AAE7B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBA4B7D,CAAC"}

package/dist/esm/Flex/index.js

@@ -13,6 +13,17 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Flex as AntFlex } from 'antd';
 import * as React from 'react';
+/**
+ * The `Flex` component is a wrapper for creating flexible layouts using the flexbox model.
+ * It provides a clean and simple API to manage alignment, spacing, and direction
+ * of child elements, ensuring responsive and adaptable designs.
+ *
+ * Features include:
+ * - Vertical and horizontal layouts with optional wrapping.
+ * - Customizable alignment for both main and cross axes.
+ * - Support for predefined or custom gap sizes between child elements.
+ * - Flexibility to use any custom HTML element or React component as the container.
+ */
 export const Flex = (_a) => {
     var { children } = _a, restFlexProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

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

@@ -1,38 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export type FlexProps = Omit<AntFlexProps, 'prefixCls' | 'style' | 'styles'>;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface AntFlexProps<P = Record<PropertyKey, any>>
   extends React.HTMLAttributes<HTMLElement> {
-  prefixCls?: string;
   /**
    * ClassName on the root element
    */
   rootClassName?: string;
+
   /**
    * Is direction of the flex vertical, use <code>flex-direction: column</code>
    */
   vertical?: boolean;
+
   /**
    * Set whether the element is displayed in a single line or in multiple lines
    */
   wrap?: boolean | React.CSSProperties['flexWrap'];
+
   /**
    * Sets the alignment of elements in the direction of the main axis
    */
   justify?: React.CSSProperties['justifyContent'];
+
   /**
    * Sets the alignment of elements in the direction of the cross axis
    */
   align?: React.CSSProperties['alignItems'];
+
   /**
    * Flex CSS shorthand properties
    */
   flex?: React.CSSProperties['flex'];
+
   /**
    * Sets the gap between grids
    */
   gap?: React.CSSProperties['gap'] | SizeType;
+
+  /**
+   * The content inside the flex container.
+   */
   children: React.ReactNode;
+
   /**
    * Custom element type
    */
@@ -41,7 +51,6 @@ export interface AntFlexProps<P = Record<PropertyKey, any>>
 
 type SizeType = 'small' | 'middle' | 'large' | undefined;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type CustomComponent<P = Record<PropertyKey, any>> =
   | React.ComponentType<P>
   | string;

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

@@ -1,6 +1,29 @@
 import * as React from 'react';
 import type { ColProps, RowProps } from './types';
 export type { ColProps, RowProps } from './types';
+/**
+ * `Row` and `Col` are layout components used in a grid system to create responsive and flexible designs.
+ * They work together to divide the available space into rows and columns, aligning content
+ * based on the specified layout rules and breakpoints.
+ *
+ * Together, `Row` and `Col` provide a complete solution for responsive grid-based layouts.
+ */
+/**
+ *
+ * The `Row` component is used to create horizontal groups of columns. It manages spacing, alignment, and wrapping behavior.
+ * - Supports custom spacing (`gutter`) for horizontal and vertical space between columns.
+ * - Allows vertical alignment (`align`) and horizontal justification (`justify`) of content.
+ * - Automatically wraps columns into the next line when necessary (`wrap`).
+ *
+ */
 export declare const Row: ({ children, ...restRowProps }: RowProps) => React.JSX.Element;
+/**
+ *
+ * The `Col` component represents individual columns within a row. It determines the width and position of the column.
+ * - Flexible width management using `span`, `offset`, `push`, and `pull`.
+ * - Supports responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) for defining behavior across screen sizes.
+ * - Can define flex-specific properties like `flex` for advanced layouts.
+ *
+ */
 export declare const Col: ({ children, ...restColProps }: ColProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Grid/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBAkC1D,CAAC;AAEF,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBA4B1D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Grid/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;GAMG;AAEH;;;;;;;GAOG;AAEH,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBAkC1D,CAAC;AAEF;;;;;;;GAOG;AAEH,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBA4B1D,CAAC"}

package/dist/esm/Grid/index.js

@@ -13,6 +13,21 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { Col as AntCol, ConfigProvider, Row as AntRow } from 'antd';
 import * as React from 'react';
+/**
+ * `Row` and `Col` are layout components used in a grid system to create responsive and flexible designs.
+ * They work together to divide the available space into rows and columns, aligning content
+ * based on the specified layout rules and breakpoints.
+ *
+ * Together, `Row` and `Col` provide a complete solution for responsive grid-based layouts.
+ */
+/**
+ *
+ * The `Row` component is used to create horizontal groups of columns. It manages spacing, alignment, and wrapping behavior.
+ * - Supports custom spacing (`gutter`) for horizontal and vertical space between columns.
+ * - Allows vertical alignment (`align`) and horizontal justification (`justify`) of content.
+ * - Automatically wraps columns into the next line when necessary (`wrap`).
+ *
+ */
 export const Row = (_a) => {
     var { children } = _a, restRowProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
@@ -35,6 +50,14 @@ export const Row = (_a) => {
     });
     return useStyle(React.createElement(AntRow, Object.assign({ gutter: [gridToken === null || gridToken === void 0 ? void 0 : gridToken.gutter, gridToken === null || gridToken === void 0 ? void 0 : gridToken.gutter] }, restRowProps), children));
 };
+/**
+ *
+ * The `Col` component represents individual columns within a row. It determines the width and position of the column.
+ * - Flexible width management using `span`, `offset`, `push`, and `pull`.
+ * - Supports responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) for defining behavior across screen sizes.
+ * - Can define flex-specific properties like `flex` for advanced layouts.
+ *
+ */
 export const Col = (_a) => {
     var { children } = _a, restColProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

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

@@ -22,51 +22,61 @@ export interface AntColProps extends React.HTMLAttributes<HTMLDivElement> {
    * Flex layout style
    */
   flex?: FlexType;
+
   /**
    * Raster number of cells to occupy, 0 corresponds to display: none
    */
   span?: number | string;
+
   /**
    * Raster order
    */
   order?: number | string;
+
   /**
    * The number of cells to offset Col from the left
    */
   offset?: number | string;
+
   /**
    * The number of cells that raster is moved to the right
    */
   push?: number | string;
+
   /**
    * The number of cells that raster is moved to the left
    */
   pull?: number | string;
+
   /**
    * screen < 576px and also default setting, could be a span value or an object containing above props
    */
   xs?: number | string | ColSize;
+
   /**
    * screen ≥ 576px, could be a span value or an object containing above props
    */
   sm?: number | string | ColSize;
+
   /**
    * screen ≥ 768px, could be a span value or an object containing above props
    */
   md?: number | string | ColSize;
+
   /**
    * screen ≥ 992px, could be a span value or an object containing above props
    */
   lg?: number | string | ColSize;
+
   /**
    * screen ≥ 1200px, could be a span value or an object containing above props
    */
   xl?: number | string | ColSize;
+
   /**
    * screen ≥ 1600px, could be a span value or an object containing above props
    */
   xxl?: number | string | ColSize;
-  prefixCls?: string;
 }
 
 export declare const Col: React.ForwardRefExoticComponent<
@@ -103,15 +113,17 @@ export interface AntRowProps extends React.HTMLAttributes<HTMLDivElement> {
    * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time <code>[horizontal, vertical]</code>
    */
   gutter?: Gutter | [Gutter, Gutter];
+
   /**
    * Vertical alignment
    */
   align?: 'top' | 'middle' | 'bottom' | 'stretch' | ResponsiveAligns;
+
   /**
    * Horizontal arrangement
    */
   justify?: (typeof RowJustify)[number] | ResponsiveJustify;
-  prefixCls?: string;
+
   /**
    * Auto wrap line
    */