enwawa-ui 2.5.2 → 2.7.0

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties, ReactNode, ChangeEvent, JSXElementConstructor, ReactElement } from "react";
 import { ButtonShape, ButtonSize, ButtonType } from "antd/es/button";
-import { ButtonProps, AutoCompleteProps, DescriptionsProps, SwitchProps } from "antd/lib";
-import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, AlertProps, ColProps, BreadcrumbProps, InputNumberProps, DropdownProps, MenuProps, SelectProps, PaginationProps, RadioChangeEvent, TooltipProps, UploadProps, RowProps, CollapseProps, LayoutProps, SiderProps, SpaceProps, FormProps, ModalFuncProps, FormInstance, TableProps, StepsProps, ModalProps as _ModalProps1, SpinProps, TagProps } from "antd";
+import { ButtonProps, AutoCompleteProps, DescriptionsProps, BreadcrumbProps as _BreadcrumbProps1, SwitchProps } from "antd/lib";
+import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, AlertProps, ColProps, BreadcrumbProps, InputNumberProps, DropdownProps, MenuProps, SelectProps, PaginationProps, RadioChangeEvent, TooltipProps, UploadProps, RowProps, CollapseProps, LayoutProps, SiderProps, SpaceProps, StepsProps, FormProps, ModalFuncProps, FormInstance, TableProps, ModalProps as _ModalProps1, SpinProps, TagProps } from "antd";
 import { Dayjs } from "dayjs";
 import { RangePickerProps } from "antd/lib/date-picker";
 import { IconComponentProps } from "@ant-design/icons/lib/components/Icon";
@@ -19,10 +19,10 @@ import { ValueType } from "@rc-component/mini-decimal";
 import { Gutter } from "antd/es/grid/row";
 import { BlockProps, EllipsisConfig, BaseType } from "antd/es/typography/Base";
 import { TextProps as _TextProps1 } from "antd/es/typography/Text";
+import { AnyObject } from "antd/es/_util/type";
 import { DrawerProps } from "antd/es/drawer";
 import { GoogleMapProps, GoogleMap } from "@react-google-maps/api";
 import { WatchOptions } from "rc-field-form/es/interface";
-import { AnyObject } from "antd/es/_util/type";
 import { ColumnsType, TablePaginationConfig } from "antd/es/table";
 import { ExpandableConfig, FilterValue, SorterResult, TableCurrentDataSource, TableRowSelection } from "antd/es/table/interface";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
@@ -148,6 +148,10 @@ export interface AtButtonProps {
      * Set the button icon
      */
     icon?: ButtonProps['icon'];
+    /**
+     * Set background button transparent
+     */
+    bgTransparent?: boolean;
 }
 export const AtButton: React.FC<AtButtonProps>;
 export interface AtCheckboxProps extends CheckboxProps {
@@ -2860,231 +2864,562 @@ export interface OrDescriptionsProps extends DescriptionsProps {
     extra?: DescriptionsProps['extra'];
 }
 export const OrDescriptions: React.FC<OrDescriptionsProps>;
-interface OrDownloadProps {
+export interface OrStepProp {
     /**
-     * The function to call when the download button is clicked
+     * To set the current step, counting from 0. You can overwrite this state by using status of Step
      */
-    downloadOnClick?: () => any;
+    current?: number;
     /**
-     * The text to display on the download button
+     * To specify the direction of the step bar, horizontal or vertical
      */
-    downloadText: string;
-}
-export interface OrDownloadUploadProps {
+    direction?: 'horizontal' | 'vertical';
     /**
-     * Key identifier
+     *
      */
-    inputKey: string;
+    initial?: number;
     /**
-     * The function to call when the value of the file changes
+     *  Place title and description with horizontal or vertical direction
+     * */
+    labelPlacement?: 'horizontal' | 'vertical';
+    /**
+     * Progress circle percentage of current step in process status (only works on basic Steps)
      */
-    getValueFromEvent?: (e: any) => any;
+    percent?: number;
     /**
-     * The rules for the file
+     * Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
      */
-    rules?: MlFromItemProps['rules'];
+    progressDot?: StepsProps['progressDot'];
     /**
-     * If the file is required
+     * Change to vertical direction when screen width smaller than 532px
      */
-    isRequired?: boolean;
-    downloadProps: OrDownloadProps;
-    uploadProps: MlUploadProps;
-    disabled?: boolean;
+    responsive?: boolean;
     /**
-     * The mode of the upload
+     * To specify the size of the step bar, default and small are currently supported
      */
-    mode?: 'drag' | 'basic';
-}
-export const OrDownloadUpload: React.FC<OrDownloadUploadProps>;
-export interface OrDrawerProps {
+    size?: 'default' | 'small';
     /**
-     * The ID for input
+     * To specify the status of current step, can be set to one of the following values: wait process finish error
      */
-    id?: string;
+    status?: 'wait' | 'process' | 'finish' | 'error';
     /**
-     * Whether Drawer should get focused after open
+     * Type of steps, can be set to one of the following values: default navigation inline
      */
-    autoFocus?: boolean;
+    type?: 'default' | 'navigation' | 'inline';
     /**
-     * Callback after the animation ends when switching drawers
+     * Trigger when Step is changed
      */
-    afterOpenChange?: (open: boolean) => void;
+    onChange?: (current: number) => void;
     /**
-     * Style of the drawer content part
+     * StepItem content
      */
-    bodyStyle?: CSSProperties;
+    items?: StepsProps['items'];
     /**
-     * Config Drawer Panel className. Use rootClassName if want to config top dom style
+     * Element margin
      */
-    className?: string;
+    $margin?: string;
     /**
-     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     * Element line height
      */
-    closeIcon?: boolean | ReactNode;
+    $lineHeight?: string;
+}
+export const OrStep: React.FC<OrStepProp>;
+export interface IFormStep<T> {
+    title: string;
+    inputs?: OrFormItemsInlineProps['inputs'];
+    submitButtonText?: string;
+    image?: string;
+    cancelButtonText?: string;
+    onCancelClick?: () => void;
+    formInitialItems?: T;
+    form?: OrFormProps['form'];
+    onFinish?: (e: any) => void;
+    cancelBtnIcon?: ReactNode;
+    isSubmitButtonDanger?: boolean;
+    hiddeSubmitButton?: boolean;
+    customButtons?: {
+        label: string;
+        onClick: () => void;
+        type: AtButtonProps['type'];
+        htmlType?: AtButtonProps['htmlType'];
+    }[];
+}
+export interface TmCrudPageProps<RecordType = AnyObject, FormType = any> {
     /**
-     * Style of the drawer wrapper of content part
+     * Columns of table
      */
-    contentWrapperStyle?: CSSProperties;
+    columns: OrTableProps<RecordType>['columns'];
     /**
-     * Whether to unmount child components on closing drawer or not
+     * Data record array to be displayed
      */
-    destroyOnClose?: boolean;
+    data: OrTableProps<RecordType>['dataSource'];
     /**
-     * Extra actions area at corner
+     * Loading status of table
      */
-    extra?: ReactNode;
+    loadingTable?: OrTableProps['loading'];
     /**
-     * The footer for Drawer
+     * Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false
      */
-    footer?: ReactNode;
+    pagination?: OrTableProps['pagination'];
     /**
-     * Style of the drawer footer part
+     * Row's unique key, could be a string or function that returns a string
      */
-    footerStyle?: CSSProperties;
+    rowKey?: OrTableProps['rowKey'];
     /**
-     * Pre-render Drawer component forcibly
+     * On change form content
      */
-    forceRender?: boolean;
+    onValuesChange?: OrFormProps['onValuesChange'];
     /**
-     * mounted node and display window for Drawer
+     * Callback when pagination changes
      */
-    getContainer?: DrawerProps['getContainer'];
+    onChangeTable?: OrTableProps['onChange'];
     /**
-     * Style of the drawer header part
+     * Extendable table TM CrudPage
      */
-    headerStyle?: CSSProperties;
+    expandable?: OrTableProps['expandable'];
     /**
-     * Placement is top or bottom, height of the Drawer dialog
+     * On press cancel and close button function
      */
-    height?: string | number;
+    handleCloseCallback?: () => void;
     /**
-     * Whether support press esc to close
+     * State of the drawer
      */
-    keyboard?: boolean;
+    open?: boolean;
     /**
-     * Whether to show mask or not
+     * Page title
      */
-    mask?: boolean;
+    title?: string;
     /**
-     * Clicking on the mask (area outside the Drawer) to close the Drawer or not
+     * Page subtitle
      */
-    maskClosable?: boolean;
+    subtitle?: string;
     /**
-     * Style for Drawer's mask element
+     * Page subtitle content
      */
-    maskStyle?: CSSProperties;
+    subContent?: string;
     /**
-     * The placement of the Drawer
+     * Page table title
      */
-    placement?: 'top' | 'right' | 'bottom' | 'left';
+    tableTitle?: string;
     /**
-     * Nested drawers push behavior
+     * Button value text
      */
-    push?: boolean | {
-        distance: string | number;
-    };
+    buttonAddText?: string;
     /**
-     * The class name of the container of the Drawer dialog
+     * Callback when add button is pressed
      */
-    rootClassName?: string;
+    addButtonOnClick?: OrModuleTableHeaderProps['buttonOnClick'];
     /**
-     * Style of wrapper element which contains mask compare to style
+     * Callback when pagination changes
      */
-    rootStyle?: CSSProperties;
+    onChangePagination?: MlPaginationProps['onChange'];
     /**
-     * Style of Drawer panel. Use bodyStyle if want to config body only
+     * Total table elements
      */
-    style?: CSSProperties;
+    total?: MlPaginationProps['total'];
     /**
-     * preset size of drawer, default 378px and large 736px
+     * Way to display total pagination table
      */
-    size?: 'default' | 'large';
+    showTotal?: MlPaginationProps['showTotal'];
     /**
-     * The title for Drawer
+     * Table page size
      */
-    title?: ReactNode;
+    pageSize?: MlPaginationProps['pageSize'];
     /**
-     * Whether the Drawer dialog is visible or not
+     * Current page table
      */
-    open?: boolean;
+    currentPage?: number;
     /**
-     * Width of the Drawer dialog
+     * Disable buttons drawer
      */
-    width?: string | number;
+    disabledButtons?: boolean;
     /**
-     * The z-index of the Drawer
+     * Form Steps info
      */
-    zIndex?: number;
+    formSteps?: IFormStep<FormType>[];
     /**
-     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
+     * current step
      */
-    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    currentFormStep?: number;
     /**
-     * Children of the drawer
+     * Search table elements
      */
-    children?: React.ReactNode;
-}
-export const OrDrawer: React.FC<OrDrawerProps>;
-export interface OrEmptyProps {
+    searchBoxOnSearch?: OrModuleTableHeaderProps['searchBoxOnSearch'];
     /**
-     * The main text of the empty card
+     * title of drawer
      */
-    title: string;
+    titleLeftDrawer?: ReactNode;
     /**
-     * The additional text of the empty card
+     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
      */
-    description: string;
-}
-export const OrEmpty: React.FC<OrEmptyProps>;
-export interface OrFlagGridProps {
+    onCloseLeftDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     /**
-     * The ID for cards
+     * whether left drawer is open or close
      */
-    id?: string;
+    openLeftDrawer?: boolean;
     /**
-     * Country data to show elements into the grid
+     * Children for Left Drawer
      */
-    data?: OrCountryCardProps[];
+    leftDrawerContent?: React.ReactNode;
     /**
-     * Number of items that can contain a row
+     * Custom component to render at left side of table header
      */
-    itemsPerRow?: number;
+    tableHeaderCustomLeftElements?: React.ReactNode;
     /**
-     * Index selected Item
+     * Drawer Width
      */
-    selectedItem?: number;
+    leftDrawerWidth?: number;
     /**
-     * Callback when card is clicked
+     * searchBox placeHolder
      */
-    onSelectCard?: (index: number) => void;
-}
-export const OrFlagGrid: React.FC<OrFlagGridProps>;
-export interface OrFormProps extends FormProps {
-    children: React.ReactNode;
-}
-export const OrForm: React.FC<OrFormProps>;
-export interface AtSpaceCompactProps {
+    searchBoxPlaceholder?: string;
     /**
-     * The ID for input
+     * show search box
      */
-    id?: string;
+    showSearchBox?: boolean;
     /**
-     * Option to fit width to its parent's width
+     * Drawer Content
      */
-    block?: boolean;
+    drawerContent?: React.ReactNode;
     /**
-     * Set direction of layout
+     * Drawer Title
      */
-    direction?: 'vertical' | 'horizontal';
+    drawerTitle?: React.ReactNode;
     /**
-     * Set child component size
+     * Drawer Width
      */
-    size?: 'large' | 'middle' | 'small';
+    drawerWidth?: number;
     /**
-     * Children of the OrSpace
+     * Text of first button
      */
-    children?: React.ReactNode;
-}
+    firstButtonText?: string;
+    /**
+     * Text of second button
+     */
+    secondButtonText?: string;
+    /**
+     * Function to execute when first button is clicked
+     */
+    onClickFirstButton?: () => void;
+    /**
+     * Function to execute when second button is clicked
+     */
+    onClickSecondButton?: () => void;
+    /**
+     * Show drawer content
+     */
+    showDrawerContent?: boolean;
+    /**
+     * margin
+     */
+    $margin?: string;
+    /**
+     * table title level
+     */
+    tableTitleLevel?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * button optional text
+     */
+    secondaryButtonText?: string;
+    /**
+     * button optional onClick
+     */
+    secondaryOnClick?: () => void;
+    /**
+     * button optional text
+     */
+    showFormStepper?: boolean;
+    onBack?: () => void;
+    padding?: string;
+}
+export const TmCrudPage: <RecordType extends AnyObject, FormType extends Store>({ columns, data, loadingTable, formSteps, onValuesChange, onCloseLeftDrawer, leftDrawerContent, openLeftDrawer, subtitle, subContent, open, pageSize, currentPage, currentFormStep, titleLeftDrawer, leftDrawerWidth, drawerContent, showDrawerContent, showSearchBox, drawerTitle, drawerWidth, firstButtonText, secondButtonText, onClickFirstButton, onClickSecondButton, $margin, title, tableTitle, buttonAddText, addButtonOnClick, onChangePagination, onChangeTable, total, showTotal, disabledButtons, searchBoxOnSearch, searchBoxPlaceholder, tableHeaderCustomLeftElements, pagination, handleCloseCallback, tableTitleLevel, secondaryButtonText, secondaryOnClick, showFormStepper, onBack, padding, expandable }: TmCrudPageProps<RecordType, FormType>) => import("react/jsx-runtime").JSX.Element;
+export interface OrDetailsPageProps<FormType = any> {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Title of the description set
+     */
+    title: string;
+    /**
+     * Whether the table has border or not
+     */
+    bordered?: boolean;
+    /**
+     * Items to display
+     */
+    items: OrDescriptionsProps['items'];
+    /**
+     * Extra content to display
+     */
+    extra?: OrDescriptionsProps['extra'];
+    /**
+     * Form Steps info
+     */
+    formSteps?: IFormStep<FormType>[];
+    /**
+     * On press cancel and close button function
+     */
+    handleCloseCallback?: () => void;
+    /**
+     * State of the drawer
+     */
+    open?: boolean;
+    /**
+     * Drawer Content
+     */
+    drawerContent?: React.ReactNode;
+    /**
+     * Drawer Title
+     */
+    drawerTitle?: React.ReactNode;
+    /**
+     * Drawer Width
+     */
+    drawerWidth?: number;
+    /**
+     * Disable buttons drawer
+     */
+    disabledButtons?: boolean;
+    /**
+     * current step
+     */
+    currentFormStep?: number;
+    /**
+     * button optional text
+     */
+    showFormStepper?: boolean;
+    /**
+     * On change form content
+     */
+    onValuesChange?: OrFormProps['onValuesChange'];
+}
+export const OrDetailsPage: <FormType extends Store>({ title, bordered, items, extra, formSteps, handleCloseCallback, open, drawerTitle, drawerWidth, disabledButtons, currentFormStep, showFormStepper, onValuesChange, }: OrDetailsPageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
+interface OrDownloadProps {
+    /**
+     * The function to call when the download button is clicked
+     */
+    downloadOnClick?: () => any;
+    /**
+     * The text to display on the download button
+     */
+    downloadText: string;
+}
+export interface OrDownloadUploadProps {
+    /**
+     * Key identifier
+     */
+    inputKey: string;
+    /**
+     * The function to call when the value of the file changes
+     */
+    getValueFromEvent?: (e: any) => any;
+    /**
+     * The rules for the file
+     */
+    rules?: MlFromItemProps['rules'];
+    /**
+     * If the file is required
+     */
+    isRequired?: boolean;
+    downloadProps: OrDownloadProps;
+    uploadProps: MlUploadProps;
+    disabled?: boolean;
+    /**
+     * The mode of the upload
+     */
+    mode?: 'drag' | 'basic';
+}
+export const OrDownloadUpload: React.FC<OrDownloadUploadProps>;
+export interface OrDrawerProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Whether Drawer should get focused after open
+     */
+    autoFocus?: boolean;
+    /**
+     * Callback after the animation ends when switching drawers
+     */
+    afterOpenChange?: (open: boolean) => void;
+    /**
+     * Style of the drawer content part
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Config Drawer Panel className. Use rootClassName if want to config top dom style
+     */
+    className?: string;
+    /**
+     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     */
+    closeIcon?: boolean | ReactNode;
+    /**
+     * Style of the drawer wrapper of content part
+     */
+    contentWrapperStyle?: CSSProperties;
+    /**
+     * Whether to unmount child components on closing drawer or not
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Extra actions area at corner
+     */
+    extra?: ReactNode;
+    /**
+     * The footer for Drawer
+     */
+    footer?: ReactNode;
+    /**
+     * Style of the drawer footer part
+     */
+    footerStyle?: CSSProperties;
+    /**
+     * Pre-render Drawer component forcibly
+     */
+    forceRender?: boolean;
+    /**
+     * mounted node and display window for Drawer
+     */
+    getContainer?: DrawerProps['getContainer'];
+    /**
+     * Style of the drawer header part
+     */
+    headerStyle?: CSSProperties;
+    /**
+     * Placement is top or bottom, height of the Drawer dialog
+     */
+    height?: string | number;
+    /**
+     * Whether support press esc to close
+     */
+    keyboard?: boolean;
+    /**
+     * Whether to show mask or not
+     */
+    mask?: boolean;
+    /**
+     * Clicking on the mask (area outside the Drawer) to close the Drawer or not
+     */
+    maskClosable?: boolean;
+    /**
+     * Style for Drawer's mask element
+     */
+    maskStyle?: CSSProperties;
+    /**
+     * The placement of the Drawer
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Nested drawers push behavior
+     */
+    push?: boolean | {
+        distance: string | number;
+    };
+    /**
+     * The class name of the container of the Drawer dialog
+     */
+    rootClassName?: string;
+    /**
+     * Style of wrapper element which contains mask compare to style
+     */
+    rootStyle?: CSSProperties;
+    /**
+     * Style of Drawer panel. Use bodyStyle if want to config body only
+     */
+    style?: CSSProperties;
+    /**
+     * preset size of drawer, default 378px and large 736px
+     */
+    size?: 'default' | 'large';
+    /**
+     * The title for Drawer
+     */
+    title?: ReactNode;
+    /**
+     * Whether the Drawer dialog is visible or not
+     */
+    open?: boolean;
+    /**
+     * Width of the Drawer dialog
+     */
+    width?: string | number;
+    /**
+     * The z-index of the Drawer
+     */
+    zIndex?: number;
+    /**
+     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
+     */
+    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Children of the drawer
+     */
+    children?: React.ReactNode;
+}
+export const OrDrawer: React.FC<OrDrawerProps>;
+export interface OrEmptyProps {
+    /**
+     * The main text of the empty card
+     */
+    title: string;
+    /**
+     * The additional text of the empty card
+     */
+    description: string;
+}
+export const OrEmpty: React.FC<OrEmptyProps>;
+export interface OrFlagGridProps {
+    /**
+     * The ID for cards
+     */
+    id?: string;
+    /**
+     * Country data to show elements into the grid
+     */
+    data?: OrCountryCardProps[];
+    /**
+     * Number of items that can contain a row
+     */
+    itemsPerRow?: number;
+    /**
+     * Index selected Item
+     */
+    selectedItem?: number;
+    /**
+     * Callback when card is clicked
+     */
+    onSelectCard?: (index: number) => void;
+}
+export const OrFlagGrid: React.FC<OrFlagGridProps>;
+export interface OrFormProps extends FormProps {
+    children: React.ReactNode;
+}
+export const OrForm: React.FC<OrFormProps>;
+export interface AtSpaceCompactProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Option to fit width to its parent's width
+     */
+    block?: boolean;
+    /**
+     * Set direction of layout
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Set child component size
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * Children of the OrSpace
+     */
+    children?: React.ReactNode;
+}
 export const OrSpaceCompact: React.FC<AtSpaceCompactProps>;
 export interface OrPhoneInputProps {
     /**
@@ -3280,65 +3615,6 @@ export interface OrSelectTableProps<T = any> extends AtSelectProps {
     rules?: MlFromItemProps['rules'][];
 }
 export const OrSelectTable: React.FC<OrSelectTableProps>;
-export interface OrStepProp {
-    /**
-     * To set the current step, counting from 0. You can overwrite this state by using status of Step
-     */
-    current?: number;
-    /**
-     * To specify the direction of the step bar, horizontal or vertical
-     */
-    direction?: 'horizontal' | 'vertical';
-    /**
-     *
-     */
-    initial?: number;
-    /**
-     *  Place title and description with horizontal or vertical direction
-     * */
-    labelPlacement?: 'horizontal' | 'vertical';
-    /**
-     * Progress circle percentage of current step in process status (only works on basic Steps)
-     */
-    percent?: number;
-    /**
-     * Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
-     */
-    progressDot?: StepsProps['progressDot'];
-    /**
-     * Change to vertical direction when screen width smaller than 532px
-     */
-    responsive?: boolean;
-    /**
-     * To specify the size of the step bar, default and small are currently supported
-     */
-    size?: 'default' | 'small';
-    /**
-     * To specify the status of current step, can be set to one of the following values: wait process finish error
-     */
-    status?: 'wait' | 'process' | 'finish' | 'error';
-    /**
-     * Type of steps, can be set to one of the following values: default navigation inline
-     */
-    type?: 'default' | 'navigation' | 'inline';
-    /**
-     * Trigger when Step is changed
-     */
-    onChange?: (current: number) => void;
-    /**
-     * StepItem content
-     */
-    items?: StepsProps['items'];
-    /**
-     * Element margin
-     */
-    $margin?: string;
-    /**
-     * Element line height
-     */
-    $lineHeight?: string;
-}
-export const OrStep: React.FC<OrStepProp>;
 interface TextProps extends AtTextProps {
     text: string;
 }
@@ -3572,6 +3848,28 @@ export interface OrInfoCardProps {
     image?: string;
 }
 export const OrInfoCard: React.FC<OrInfoCardProps>;
+export interface OrInfoHeaderCardProps extends MlCardProps {
+    /**
+     * Left arrow click event
+     */
+    onClickLeftArrow?: () => void;
+    /**
+     * Breadcrumb items
+     */
+    breadcrumbItems?: _BreadcrumbProps1['items'];
+    /**
+     * Breadcrumb items
+     */
+    leftElement?: React.ReactElement;
+    /**
+     * Breadcrumb items
+     */
+    rightElement?: React.ReactElement;
+}
+/**
+ * Primary input UI component for user interaction
+ */
+export const OrInfoHeaderCard: React.FC<OrInfoHeaderCardProps>;
 export interface OrModuleTableHeaderProps {
     /**
      * Title of the module table header
@@ -3869,215 +4167,6 @@ interface OrModalProps {
     content?: string | React.ReactNode;
 }
 export const OrModal: React.FC<OrModalProps>;
-export interface IFormStep<T> {
-    title: string;
-    inputs?: OrFormItemsInlineProps['inputs'];
-    submitButtonText?: string;
-    image?: string;
-    cancelButtonText?: string;
-    onCancelClick?: () => void;
-    formInitialItems?: T;
-    form?: OrFormProps['form'];
-    onFinish?: (e: any) => void;
-    cancelBtnIcon?: ReactNode;
-    isSubmitButtonDanger?: boolean;
-    hiddeSubmitButton?: boolean;
-    customButtons?: {
-        label: string;
-        onClick: () => void;
-        type: AtButtonProps['type'];
-        htmlType?: AtButtonProps['htmlType'];
-    }[];
-}
-export interface TmCrudPageProps<RecordType = AnyObject, FormType = any> {
-    /**
-     * Columns of table
-     */
-    columns: OrTableProps<RecordType>['columns'];
-    /**
-     * Data record array to be displayed
-     */
-    data: OrTableProps<RecordType>['dataSource'];
-    /**
-     * Loading status of table
-     */
-    loadingTable?: OrTableProps['loading'];
-    /**
-     * Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false
-     */
-    pagination?: OrTableProps['pagination'];
-    /**
-     * Row's unique key, could be a string or function that returns a string
-     */
-    rowKey?: OrTableProps['rowKey'];
-    /**
-     * On change form content
-     */
-    onValuesChange?: OrFormProps['onValuesChange'];
-    /**
-     * Callback when pagination changes
-     */
-    onChangeTable?: OrTableProps['onChange'];
-    /**
-     * Extendable table TM CrudPage
-     */
-    expandable?: OrTableProps['expandable'];
-    /**
-     * On press cancel and close button function
-     */
-    handleCloseCallback?: () => void;
-    /**
-     * State of the drawer
-     */
-    open?: boolean;
-    /**
-     * Page title
-     */
-    title?: string;
-    /**
-     * Page subtitle
-     */
-    subtitle?: string;
-    /**
-     * Page subtitle content
-     */
-    subContent?: string;
-    /**
-     * Page table title
-     */
-    tableTitle?: string;
-    /**
-     * Button value text
-     */
-    buttonAddText?: string;
-    /**
-     * Callback when add button is pressed
-     */
-    addButtonOnClick?: OrModuleTableHeaderProps['buttonOnClick'];
-    /**
-     * Callback when pagination changes
-     */
-    onChangePagination?: MlPaginationProps['onChange'];
-    /**
-     * Total table elements
-     */
-    total?: MlPaginationProps['total'];
-    /**
-     * Way to display total pagination table
-     */
-    showTotal?: MlPaginationProps['showTotal'];
-    /**
-     * Table page size
-     */
-    pageSize?: MlPaginationProps['pageSize'];
-    /**
-     * Current page table
-     */
-    currentPage?: number;
-    /**
-     * Disable buttons drawer
-     */
-    disabledButtons?: boolean;
-    /**
-     * Form Steps info
-     */
-    formSteps?: IFormStep<FormType>[];
-    /**
-     * current step
-     */
-    currentFormStep?: number;
-    /**
-     * Search table elements
-     */
-    searchBoxOnSearch?: OrModuleTableHeaderProps['searchBoxOnSearch'];
-    /**
-     * title of drawer
-     */
-    titleLeftDrawer?: ReactNode;
-    /**
-     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
-     */
-    onCloseLeftDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    /**
-     * whether left drawer is open or close
-     */
-    openLeftDrawer?: boolean;
-    /**
-     * Children for Left Drawer
-     */
-    leftDrawerContent?: React.ReactNode;
-    /**
-     * Custom component to render at left side of table header
-     */
-    tableHeaderCustomLeftElements?: React.ReactNode;
-    /**
-     * Drawer Width
-     */
-    leftDrawerWidth?: number;
-    /**
-     * searchBox placeHolder
-     */
-    searchBoxPlaceholder?: string;
-    /**
-     * show search box
-     */
-    showSearchBox?: boolean;
-    /**
-     * Drawer Content
-     */
-    drawerContent?: React.ReactNode;
-    /**
-     * Drawer Title
-     */
-    drawerTitle?: React.ReactNode;
-    /**
-     * Drawer Width
-     */
-    drawerWidth?: number;
-    /**
-     * Text of first button
-     */
-    firstButtonText?: string;
-    /**
-     * Text of second button
-     */
-    secondButtonText?: string;
-    /**
-     * Function to execute when first button is clicked
-     */
-    onClickFirstButton?: () => void;
-    /**
-     * Function to execute when second button is clicked
-     */
-    onClickSecondButton?: () => void;
-    /**
-     * Show drawer content
-     */
-    showDrawerContent?: boolean;
-    /**
-     * margin
-     */
-    $margin?: string;
-    /**
-     * table title level
-     */
-    tableTitleLevel?: 1 | 2 | 3 | 4 | 5;
-    /**
-     * button optional text
-     */
-    secondaryButtonText?: string;
-    /**
-     * button optional onClick
-     */
-    secondaryOnClick?: () => void;
-    /**
-     * button optional text
-     */
-    showFormStepper?: boolean;
-    onBack?: () => void;
-    padding?: string;
-}
-export const TmCrudPage: <RecordType extends AnyObject, FormType extends Store>({ columns, data, loadingTable, formSteps, onValuesChange, onCloseLeftDrawer, leftDrawerContent, openLeftDrawer, subtitle, subContent, open, pageSize, currentPage, currentFormStep, titleLeftDrawer, leftDrawerWidth, drawerContent, showDrawerContent, showSearchBox, drawerTitle, drawerWidth, firstButtonText, secondButtonText, onClickFirstButton, onClickSecondButton, $margin, title, tableTitle, buttonAddText, addButtonOnClick, onChangePagination, onChangeTable, total, showTotal, disabledButtons, searchBoxOnSearch, searchBoxPlaceholder, tableHeaderCustomLeftElements, pagination, handleCloseCallback, tableTitleLevel, secondaryButtonText, secondaryOnClick, showFormStepper, onBack, padding, expandable }: TmCrudPageProps<RecordType, FormType>) => import("react/jsx-runtime").JSX.Element;
 export interface TmCustomTabsPageProps<FormType = any> {
     /**
      * Avatar image
@@ -4173,15 +4262,11 @@ export interface TmCustomTabsPageProps<FormType = any> {
     tabsProps: OrTabsProps;
 }
 export const TmCustomTabsPage: <FormType extends Store>({ avatar, username, phone, balanceLabel, balanceValue, infoIcon, infoLabel, infoValue, mainButtonLabel, mainButtonIcon, onClickLeftArrow, onClickMainAction, formSteps, handleCloseCallback, open, drawerTitle, drawerWidth, disabledButtons, currentFormStep, showFormStepper, onValuesChange, tabsProps, }: TmCustomTabsPageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
-export interface TmDetailsPageProps<FormType = any> {
-    /**
-       * The ID for input
-       */
-    id?: string;
+export interface TmDescriptionsPageProps {
     /**
-     * Title of the description set
+     * The ID for input
      */
-    title: string;
+    id?: string;
     /**
      * Whether the table has border or not
      */
@@ -4189,53 +4274,21 @@ export interface TmDetailsPageProps<FormType = any> {
     /**
      * Items to display
      */
-    items: OrDescriptionsProps['items'];
-    /**
-     * Extra content to display
-     */
-    extra?: OrDescriptionsProps['extra'];
-    /**
-     * Form Steps info
-     */
-    formSteps?: IFormStep<FormType>[];
-    /**
-     * On press cancel and close button function
-     */
-    handleCloseCallback?: () => void;
-    /**
-     * State of the drawer
-     */
-    open?: boolean;
-    /**
-     * Drawer Content
-     */
-    drawerContent?: React.ReactNode;
-    /**
-     * Drawer Title
-     */
-    drawerTitle?: React.ReactNode;
-    /**
-     * Drawer Width
-     */
-    drawerWidth?: number;
+    items: Array<OrDetailsPageProps | Array<OrDetailsPageProps>>;
     /**
      * Disable buttons drawer
      */
     disabledButtons?: boolean;
-    /**
-     * current step
-     */
-    currentFormStep?: number;
-    /**
-     * button optional text
-     */
-    showFormStepper?: boolean;
     /**
      * On change form content
      */
     onValuesChange?: OrFormProps['onValuesChange'];
+    /**
+     * Custom header page template
+     */
+    header?: React.ReactElement;
 }
-export const TmDetailsPage: <FormType extends Store>({ title, bordered, items, extra, formSteps, handleCloseCallback, open, drawerTitle, drawerWidth, disabledButtons, currentFormStep, showFormStepper, onValuesChange, }: TmDetailsPageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
+export const TmDescriptionsPage: ({ items, header, }: TmDescriptionsPageProps) => import("react/jsx-runtime").JSX.Element;
 export interface TmFormListPageProps<FormType = any> {
     formList?: {
         title?: string;