From fad3e16caac9608cfab9f791501b0ddb7ba1fa34 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Tue, 25 Feb 2025 15:53:55 +0700
Subject: [PATCH 01/25] v1.1.24-7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 07e0e57..d9cedd1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "0.10.31",
+    "version": "1.1.24-7",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

From 2becc16a55f1a5321902d283c6743dc7100efefe Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:10:20 +0700
Subject: [PATCH 02/25] feature: add carousel molecule

---
 src/molecules/Carousel/Carousel.tsx |  7 +++++++
 src/molecules/Carousel/index.tsx    |  2 ++
 src/molecules/Carousel/styles.tsx   |  4 ++++
 src/molecules/Carousel/types.ts     | 31 +++++++++++++++++++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 src/molecules/Carousel/Carousel.tsx
 create mode 100644 src/molecules/Carousel/index.tsx
 create mode 100644 src/molecules/Carousel/styles.tsx
 create mode 100644 src/molecules/Carousel/types.ts

diff --git a/src/molecules/Carousel/Carousel.tsx b/src/molecules/Carousel/Carousel.tsx
new file mode 100644
index 0000000..bbe132a
--- /dev/null
+++ b/src/molecules/Carousel/Carousel.tsx
@@ -0,0 +1,7 @@
+import { forwardRef } from 'react';
+import { CarouselStyles } from './styles';
+import { RdCarouselComponent } from './types';
+
+export const Carousel: RdCarouselComponent = forwardRef((props, ref) => {
+    return <CarouselStyles ref={ref} {...props} />;
+});
diff --git a/src/molecules/Carousel/index.tsx b/src/molecules/Carousel/index.tsx
new file mode 100644
index 0000000..22e4408
--- /dev/null
+++ b/src/molecules/Carousel/index.tsx
@@ -0,0 +1,2 @@
+export * from './Carousel';
+export * from './types';
\ No newline at end of file
diff --git a/src/molecules/Carousel/styles.tsx b/src/molecules/Carousel/styles.tsx
new file mode 100644
index 0000000..ca9ebc7
--- /dev/null
+++ b/src/molecules/Carousel/styles.tsx
@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Carousel } from 'antd';
+
+export const CarouselStyles = styled(Carousel)``;
diff --git a/src/molecules/Carousel/types.ts b/src/molecules/Carousel/types.ts
new file mode 100644
index 0000000..fa38e99
--- /dev/null
+++ b/src/molecules/Carousel/types.ts
@@ -0,0 +1,31 @@
+import { Carousel, GetProps } from 'antd';
+import { CarouselRef } from 'antd/es/carousel';
+import { ComponentToken as CarouselComponentTokenAntd } from 'antd/es/collapse/style';
+
+//#region Define Ant Design types
+type CarouselPropsAntd = GetProps<typeof Carousel>;
+
+type CarouselRefAntd = CarouselRef;
+//#endregion
+
+//#region Define extended component tokens
+type CarouselComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type CarouselPropsExtend = {};
+type CarouselRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdCarouselProps = CarouselPropsAntd & CarouselPropsExtend;
+export type RdCarouselRef = CarouselRefAntd & CarouselRefExtend;
+
+export type RdCarouselComponentToken = CarouselComponentTokenAntd & CarouselComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdCarouselComponent = React.ForwardRefExoticComponent<
+    RdCarouselProps & React.RefAttributes<RdCarouselRef>
+>;
+//#endregion

From 2c686a4131e8d9677a3a17c4771411ae1fb10a49 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:11:12 +0700
Subject: [PATCH 03/25] fix: Fix Header ref

---
 src/molecules/Layout/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/molecules/Layout/Header.tsx b/src/molecules/Layout/Header.tsx
index 7dc8787..9169814 100644
--- a/src/molecules/Layout/Header.tsx
+++ b/src/molecules/Layout/Header.tsx
@@ -2,6 +2,6 @@ import { forwardRef } from 'react';
 import { HeaderStyles } from './styles';
 import { RdLayoutHeaderComponent } from './types';
 
-export const LayoutHeader: RdLayoutHeaderComponent = forwardRef(props => {
-    return <HeaderStyles {...props} />;
+export const LayoutHeader: RdLayoutHeaderComponent = forwardRef((props, ref) => {
+    return <HeaderStyles ref={ref} {...props} />;
 });

From 29aca6f2f52b9c47622685788cd05e02a49cf3da Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:11:47 +0700
Subject: [PATCH 04/25] fix: Fix bug RdListItemMetaComponent

---
 src/molecules/List/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts
index c4ffe6a..dbb4387 100644
--- a/src/molecules/List/types.ts
+++ b/src/molecules/List/types.ts
@@ -30,7 +30,7 @@ export type RdListComponent = React.FC<RdListProps & React.RefAttributes<HTMLDiv
 export type RdListItemComponent = React.ForwardRefExoticComponent<
     RdListItemProps & React.RefAttributes<HTMLDivElement>
 >;
-export type RdListItemMetaComponent = React.FC<RdListItemProps>;
+export type RdListItemMetaComponent = React.FC<RdListItemMetaProps>;
 
 export type RdListItemCompoundedComponent = RdListItemComponent & {
     Meta: RdListItemMetaComponent;

From 7f404811448c2c13ab5518f71e6424dfe716da18 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:12:11 +0700
Subject: [PATCH 05/25] feature: Add rd-skeleton class to skeleton molecule

---
 src/molecules/Skeleton/SkeletonAvatar.tsx |  5 +-
 src/molecules/Skeleton/SkeletonButton.tsx |  5 +-
 src/molecules/Skeleton/SkeletonImage.tsx  |  5 +-
 src/molecules/Skeleton/SkeletonInput.tsx  |  5 +-
 src/molecules/Skeleton/SkeletonNode.tsx   |  5 +-
 src/molecules/Skeleton/styles.tsx         | 83 +++++++++++++++++++++--
 src/molecules/Skeleton/types.ts           | 30 ++++++--
 7 files changed, 116 insertions(+), 22 deletions(-)

diff --git a/src/molecules/Skeleton/SkeletonAvatar.tsx b/src/molecules/Skeleton/SkeletonAvatar.tsx
index 0c5d0e4..e1b7323 100644
--- a/src/molecules/Skeleton/SkeletonAvatar.tsx
+++ b/src/molecules/Skeleton/SkeletonAvatar.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonAvatarStyled } from './styles';
 import { RdSkeletonAvatarComponent } from './types';
 
-export const SkeletonAvatar: RdSkeletonAvatarComponent = props => {
-    return <SkeletonAvatarStyled {...props} />;
+export const SkeletonAvatar: RdSkeletonAvatarComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonAvatarStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonButton.tsx b/src/molecules/Skeleton/SkeletonButton.tsx
index f2a4f5c..ea7ccd7 100644
--- a/src/molecules/Skeleton/SkeletonButton.tsx
+++ b/src/molecules/Skeleton/SkeletonButton.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonButtonStyled } from './styles';
 import { RdSkeletonButtonComponent } from './types';
 
-export const SkeletonButton: RdSkeletonButtonComponent = props => {
-    return <SkeletonButtonStyled {...props} />;
+export const SkeletonButton: RdSkeletonButtonComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonButtonStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonImage.tsx b/src/molecules/Skeleton/SkeletonImage.tsx
index 0d3c484..e5f6fab 100644
--- a/src/molecules/Skeleton/SkeletonImage.tsx
+++ b/src/molecules/Skeleton/SkeletonImage.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonImageStyled } from './styles';
 import { RdSkeletonImageComponent } from './types';
 
-export const SkeletonImage: RdSkeletonImageComponent = props => {
-    return <SkeletonImageStyled {...props} />;
+export const SkeletonImage: RdSkeletonImageComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonImageStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonInput.tsx b/src/molecules/Skeleton/SkeletonInput.tsx
index 06e4a1c..185d208 100644
--- a/src/molecules/Skeleton/SkeletonInput.tsx
+++ b/src/molecules/Skeleton/SkeletonInput.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonInputStyled } from './styles';
 import { RdSkeletonInputComponent } from './types';
 
-export const SkeletonInput: RdSkeletonInputComponent = props => {
-    return <SkeletonInputStyled {...props} />;
+export const SkeletonInput: RdSkeletonInputComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonInputStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonNode.tsx b/src/molecules/Skeleton/SkeletonNode.tsx
index 386a7f5..296824f 100644
--- a/src/molecules/Skeleton/SkeletonNode.tsx
+++ b/src/molecules/Skeleton/SkeletonNode.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonNodeStyled } from './styles';
 import { RdSkeletonNodeComponent } from './types';
 
-export const SkeletonNode: RdSkeletonNodeComponent = props => {
-    return <SkeletonNodeStyled {...props} />;
+export const SkeletonNode: RdSkeletonNodeComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonNodeStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/styles.tsx b/src/molecules/Skeleton/styles.tsx
index e69a772..0589503 100644
--- a/src/molecules/Skeleton/styles.tsx
+++ b/src/molecules/Skeleton/styles.tsx
@@ -1,9 +1,80 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Skeleton } from 'antd';
+import { getExcludeForwardProps } from '../../utils';
+import {
+    RdSkeletonAvatarComponent,
+    RdSkeletonAvatarProps,
+    RdSkeletonButtonComponent,
+    RdSkeletonButtonProps,
+    RdSkeletonComponent,
+    RdSkeletonImageComponent,
+    RdSkeletonImageProps,
+    RdSkeletonInputComponent,
+    RdSkeletonInputProps,
+    RdSkeletonNodeComponent,
+    RdSkeletonNodeProps,
+} from './types';
 
-export const SkeletonStyled = styled(Skeleton)``;
-export const SkeletonButtonStyled = styled(Skeleton.Button)``;
-export const SkeletonAvatarStyled = styled(Skeleton.Avatar)``;
-export const SkeletonImageStyled = styled(Skeleton.Image)``;
-export const SkeletonInputStyled = styled(Skeleton.Input)``;
-export const SkeletonNodeStyled = styled(Skeleton.Node)``;
+export const SkeletonStyled = styled(Skeleton as RdSkeletonComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonImageProps>(
+            ['fullWidth'] as (keyof RdSkeletonImageProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonButtonStyled = styled(Skeleton.Button as RdSkeletonButtonComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonButtonProps>(
+            ['fullWidth'] as (keyof RdSkeletonButtonProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonAvatarStyled = styled(Skeleton.Avatar as RdSkeletonAvatarComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonAvatarProps>(
+            ['fullWidth'] as (keyof RdSkeletonAvatarProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonImageStyled = styled(Skeleton.Image as RdSkeletonImageComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonImageProps>(
+            ['fullWidth'] as (keyof RdSkeletonImageProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonInputStyled = styled(Skeleton.Input as RdSkeletonInputComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonInputProps>(
+            ['fullWidth'] as (keyof RdSkeletonInputProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonNodeStyled = styled(Skeleton.Node as RdSkeletonNodeComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonNodeProps>(
+            ['fullWidth'] as (keyof RdSkeletonNodeProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+
+const fullWidthCSS = css`
+    width: 100% !important;
+
+    &.rd-skeleton {
+        width: 100% !important;
+    }
+`;
diff --git a/src/molecules/Skeleton/types.ts b/src/molecules/Skeleton/types.ts
index f5d97d9..ec2dfe9 100644
--- a/src/molecules/Skeleton/types.ts
+++ b/src/molecules/Skeleton/types.ts
@@ -15,6 +15,14 @@ type SkeletonComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
+type SkeletonBaseProps = {
+    /**
+     * 	If `true`, the skeleton image  will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+};
+
 type SkeletonPropsExtend = {};
 type SkeletonButtonPropsExtend = {};
 type SkeletonAvatarPropsExtend = {};
@@ -24,12 +32,22 @@ type SkeletonNodePropsExtend = {};
 //#endregion
 
 //#region Export types
-export type RdSkeletonProps = SkeletonPropsAntd & SkeletonPropsExtend;
-export type RdSkeletonButtonProps = SkeletonButtonPropsAntd & SkeletonButtonPropsExtend;
-export type RdSkeletonAvatarProps = SkeletonAvatarPropsAntd & SkeletonAvatarPropsExtend;
-export type RdSkeletonInputProps = SkeletonInputPropsAntd & SkeletonInputPropsExtend;
-export type RdSkeletonImageProps = SkeletonImagePropsAntd & SkeletonImagePropsExtend;
-export type RdSkeletonNodeProps = SkeletonNodePropsAntd & SkeletonNodePropsExtend;
+export type RdSkeletonProps = SkeletonPropsAntd & SkeletonBaseProps & SkeletonPropsExtend;
+export type RdSkeletonButtonProps = SkeletonButtonPropsAntd &
+    SkeletonBaseProps &
+    SkeletonButtonPropsExtend;
+export type RdSkeletonAvatarProps = SkeletonAvatarPropsAntd &
+    SkeletonBaseProps &
+    SkeletonAvatarPropsExtend;
+export type RdSkeletonInputProps = SkeletonInputPropsAntd &
+    SkeletonBaseProps &
+    SkeletonInputPropsExtend;
+export type RdSkeletonImageProps = SkeletonImagePropsAntd &
+    SkeletonBaseProps &
+    SkeletonImagePropsExtend;
+export type RdSkeletonNodeProps = SkeletonNodePropsAntd &
+    SkeletonBaseProps &
+    SkeletonNodePropsExtend;
 
 export type RdSkeletonComponentToken = SkeletonComponentTokenAntd & SkeletonComponentTokenExtend;
 //#endregion

From e3d5fe31e393a8a3fcbb4bcc2c3edf4df78e21e6 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:13:09 +0700
Subject: [PATCH 06/25] feature: Fix remove prop descriptin in Form.Item

---
 src/molecules/Form/FormItem.tsx              | 11 +----------
 src/molecules/Form/FormItemControl.tsx       |  9 ---------
 src/molecules/Form/FormItemReactHookForm.tsx |  8 ++++----
 src/molecules/Form/types.ts                  |  7 +------
 4 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/src/molecules/Form/FormItem.tsx b/src/molecules/Form/FormItem.tsx
index 53b54a8..0c9e889 100644
--- a/src/molecules/Form/FormItem.tsx
+++ b/src/molecules/Form/FormItem.tsx
@@ -1,20 +1,11 @@
 import { FormItemStyles } from './styles';
 import { RdFormItemProps } from './types';
 
-export const FormItem = ({ errorMessage, description, ...antdProps }: RdFormItemProps) => {
+export const FormItem = ({ errorMessage, ...antdProps }: RdFormItemProps) => {
     if (errorMessage) {
         antdProps.validateStatus = 'error';
         antdProps.help = errorMessage;
     }
 
-    if (description) {
-        antdProps.label = (
-            <>
-                {antdProps.label}
-                <div>{description}</div>
-            </>
-        );
-    }
-
     return <FormItemStyles {...antdProps} />;
 };
diff --git a/src/molecules/Form/FormItemControl.tsx b/src/molecules/Form/FormItemControl.tsx
index 4aac72b..8fae0fe 100644
--- a/src/molecules/Form/FormItemControl.tsx
+++ b/src/molecules/Form/FormItemControl.tsx
@@ -5,14 +5,5 @@ import { RdFormItemControlProps } from './types';
 export const FormItemControl = <TFieldValues extends FieldValues = FieldValues>(
     props: RdFormItemControlProps<TFieldValues>
 ) => {
-    // if (description) {
-    //     antdProps.label = (
-    //         <>
-    //             <div>{antdProps.label}</div>
-    //             <div>{description}</div>
-    //         </>
-    //     );
-    // }
-
     return <FormItemReactHookForm<TFieldValues> {...props} />;
 };
diff --git a/src/molecules/Form/FormItemReactHookForm.tsx b/src/molecules/Form/FormItemReactHookForm.tsx
index c3918ee..01fa265 100644
--- a/src/molecules/Form/FormItemReactHookForm.tsx
+++ b/src/molecules/Form/FormItemReactHookForm.tsx
@@ -3,13 +3,13 @@ import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, use
 import { FieldValues, useController } from 'react-hook-form';
 import { FormItemStyles } from './styles';
 import { FormItemReactHookFormProps } from './types';
+import { FormItem } from './FormItem';
 
 export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldValues>({
     children,
     control,
     name,
     disabled,
-    help,
     valuePropName,
     shouldUnregister,
     defaultValue,
@@ -30,12 +30,12 @@ export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldVa
     }, [field.value, form, name]);
 
     return (
-        <FormItemStyles
+        <FormItem
             {...props}
             name={name}
             initialValue={field.value}
             validateStatus={fieldState.invalid ? 'error' : undefined}
-            help={fieldState.error?.message ?? help}
+            help={fieldState.error?.message}
         >
             {Children.map(
                 children,
@@ -61,6 +61,6 @@ export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldVa
                         }),
                     })
             )}
-        </FormItemStyles>
+        </FormItem>
     );
 };
diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts
index 8bc531f..cb2d692 100644
--- a/src/molecules/Form/types.ts
+++ b/src/molecules/Form/types.ts
@@ -38,11 +38,6 @@ type FormItemPropsExtend = {
      */
     errorMessage?: string;
 
-    /**
-     * @description Extra description for label
-     */
-    description?: string;
-
     /**
      * @description Option to fit Space width to its parent width, default is false
      */
@@ -86,7 +81,7 @@ export type FormItemReactHookFormProps<
     disabled?: boolean;
     defaultValue?: any;
     overrideFieldOnChange?: (...values: any[]) => void;
-} & Omit<FormItemPropsAntd, 'name' | 'rules' | 'validateStatus'>;
+} & Omit<RdFormItemProps, 'name' | 'rules' | 'validateStatus' | 'help'>;
 //#endregion
 
 //#region Define component types

From 5bb45ecf9cb2534c4419332c43b423302d6bb9c7 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:13:52 +0700
Subject: [PATCH 07/25] feature: Add prop tooltip to Button and auto
 hideTooltipWhenClick

---
 src/molecules/Button/Button.tsx | 72 ++++++++++++++++++++++++++++++---
 src/molecules/Button/types.ts   | 13 ++++++
 2 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/src/molecules/Button/Button.tsx b/src/molecules/Button/Button.tsx
index b9d16a9..ae1e322 100644
--- a/src/molecules/Button/Button.tsx
+++ b/src/molecules/Button/Button.tsx
@@ -1,14 +1,74 @@
-import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { forwardRef, useMemo, useState } from 'react';
+import { RdTooltipProps, Tooltip } from '../Tooltip';
 import { ButtonGroup } from './ButtonGroup';
 import { ButtonStyles } from './styles';
-import { RdButtonComponent, RdButtonCompoundedComponent } from './types';
-import clsx from 'clsx';
+import { RdButtonComponent, RdButtonCompoundedComponent, RdButtonProps } from './types';
 
 export const ButtonInternal: RdButtonComponent = forwardRef((props, ref) => {
-    const { rootClassName } = props;
+    const {
+        rootClassName,
+        tooltip,
+        hideTooltipWhenClick = true,
+        onClick,
+        onMouseLeave,
+        ...defaultProps
+    } = props;
+    const [isOpenTooltip, setIsOpenTooltip] = useState(false);
+
+    const handleClickButton: RdButtonProps['onClick'] = event => {
+        if (hideTooltipWhenClick) {
+            setIsOpenTooltip(false);
+        }
+
+        if (onClick) {
+            onClick(event);
+        }
+    };
+
+    const handleMouseLeave: RdButtonProps['onMouseLeave'] = event => {
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+    };
+
+    const RdButtonStyles = useMemo(() => {
+        return (
+            <ButtonStyles
+                rootClassName={clsx('rd-button', rootClassName)}
+                ref={ref}
+                onMouseLeave={handleMouseLeave}
+                onClick={handleClickButton}
+                {...defaultProps}
+            />
+        );
+    }, [defaultProps, rootClassName, handleClickButton, handleMouseLeave]);
+
+    if (tooltip) {
+        const tooltipProps: RdTooltipProps = hideTooltipWhenClick
+            ? {
+                  open: isOpenTooltip,
+                  onOpenChange: visible => setIsOpenTooltip(visible),
+              }
+            : {};
+
+        if (typeof tooltip === 'string') {
+            return (
+                <Tooltip {...tooltipProps} title={tooltip}>
+                    {RdButtonStyles}
+                </Tooltip>
+            );
+        }
+
+        return (
+            <Tooltip {...tooltipProps} {...tooltip}>
+                {RdButtonStyles}
+            </Tooltip>
+        );
+    }
 
-    return <ButtonStyles rootClassName={clsx('rd-button', rootClassName)} ref={ref} {...props} />;
+    return RdButtonStyles;
 });
 
 export const Button = ButtonInternal as RdButtonCompoundedComponent;
-Button.Group = ButtonGroup;
\ No newline at end of file
+Button.Group = ButtonGroup;
diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts
index c1a9569..675bbff 100644
--- a/src/molecules/Button/types.ts
+++ b/src/molecules/Button/types.ts
@@ -2,6 +2,7 @@ import { Button, ButtonProps, GetProps } from 'antd';
 import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style';
 import { ButtonInternal } from './Button';
 import { ButtonGroup } from './ButtonGroup';
+import { RdTooltipProps } from '../Tooltip';
 
 //#region Define Ant Design types
 type ButtonPropsAntd = GetProps<typeof Button>;
@@ -37,6 +38,18 @@ type ButtonPropsExtend = {
      * Align content in the button.
      */
     align?: 'left' | 'center' | 'right';
+
+    /**
+     * Configuration for the tooltip displayed when hovering over the button.
+     * @see string | RdTooltipProps for more details on available options.
+     */
+    tooltip?: string | RdTooltipProps;
+
+    /**
+     * 	If `true`, the button  will auto hide when the button is clicked.
+     * @default true
+     */
+    hideTooltipWhenClick?: boolean;
 };
 
 type ButtonGroupPropsExtend = {};

From 84473842ee7fd3bc61ae80ba49865c3d4d2268eb Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:14:20 +0700
Subject: [PATCH 08/25] feature: Add ref for Popover

---
 src/molecules/Popover/Popover.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/molecules/Popover/Popover.tsx b/src/molecules/Popover/Popover.tsx
index 6966066..2e84e44 100644
--- a/src/molecules/Popover/Popover.tsx
+++ b/src/molecules/Popover/Popover.tsx
@@ -2,6 +2,6 @@ import { forwardRef } from 'react';
 import { PopoverStyles } from './styles';
 import { RdPopoverComponent } from './types';
 
-export const Popover: RdPopoverComponent = forwardRef(props => {
-    return <PopoverStyles {...props} />;
+export const Popover: RdPopoverComponent = forwardRef((props, ref) => {
+    return <PopoverStyles ref={ref} {...props} />;
 });

From b8c0e0355d83e86bfcbb693c663579f3a2a5a588 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:14:31 +0700
Subject: [PATCH 09/25] feature: Add ref for Tag

---
 src/molecules/Tag/Tag.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/molecules/Tag/Tag.tsx b/src/molecules/Tag/Tag.tsx
index 4f87c4f..5d9c00e 100644
--- a/src/molecules/Tag/Tag.tsx
+++ b/src/molecules/Tag/Tag.tsx
@@ -3,9 +3,9 @@ import { TagStyled } from './styles';
 import { RdTagComponent, RdTagCompoundedComponent } from './types';
 import { TagCheckable } from './TagCheckable';
 
-export const TagInternal: RdTagComponent = forwardRef(props => {
-    return <TagStyled {...props} />;
+export const TagInternal: RdTagComponent = forwardRef((props, ref) => {
+    return <TagStyled ref={ref} {...props} />;
 });
 
 export const Tag = TagInternal as RdTagCompoundedComponent;
-Tag.CheckableTag = TagCheckable;
\ No newline at end of file
+Tag.CheckableTag = TagCheckable;

From af025019f3c9a06764e32e37209fe185b279386f Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:14:50 +0700
Subject: [PATCH 10/25] feature: Export carousel

---
 src/molecules/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/molecules/index.ts b/src/molecules/index.ts
index 1d9de7e..28b5560 100644
--- a/src/molecules/index.ts
+++ b/src/molecules/index.ts
@@ -6,6 +6,7 @@ export * from './Blur';
 export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Checkbox';
 export * from './Collapse';
 export * from './DatePicker';

From 9b84539ba6b6e1b58eee16d1175d05e2f75489be Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Sat, 15 Mar 2025 22:15:05 +0700
Subject: [PATCH 11/25] feature: Add unit utils

---
 src/utils/index.ts | 5 +++--
 src/utils/unit.ts  | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/unit.ts

diff --git a/src/utils/index.ts b/src/utils/index.ts
index a3b9ad8..30619e0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
-export * from './token';
 export * from './styles';
-export * from './types';
 export * from './theme';
+export * from './token';
+export * from './types';
+export * from './unit';
diff --git a/src/utils/unit.ts b/src/utils/unit.ts
new file mode 100644
index 0000000..f3dd1fa
--- /dev/null
+++ b/src/utils/unit.ts
@@ -0,0 +1,7 @@
+import { unit as unitAntd } from '@ant-design/cssinjs';
+
+export const unit = (num: string | number): string => {
+    const result = unitAntd(num);
+
+    return result;
+};

From c92c87ee6bbf553d174b8087062d23589cc72d75 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Tue, 18 Mar 2025 14:06:10 +0700
Subject: [PATCH 12/25] Add generic data type for List molecule

---
 src/molecules/List/List.tsx   | 10 ++++++----
 src/molecules/List/styles.tsx |  4 +++-
 src/molecules/List/types.ts   | 14 ++++++++++----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/molecules/List/List.tsx b/src/molecules/List/List.tsx
index f605d19..7b0fca8 100644
--- a/src/molecules/List/List.tsx
+++ b/src/molecules/List/List.tsx
@@ -1,9 +1,11 @@
 import { ListItem } from './ListItem';
-import { ListStyles } from './styles';
-import { RdListComponent, RdListCompoundedComponent } from './types';
+import { ListStyledFunc } from './styles';
+import { RdListComponent, RdListCompoundedComponent, RdListProps } from './types';
 
-export const ListInternal: RdListComponent = props => {
-    return <ListStyles {...props} />;
+export const ListInternal: RdListComponent = <T extends any>(props: RdListProps<T>) => {
+    const ListStyled = ListStyledFunc<T>();
+
+    return <ListStyled {...props} />;
 };
 
 export const List = ListInternal as RdListCompoundedComponent;
diff --git a/src/molecules/List/styles.tsx b/src/molecules/List/styles.tsx
index 0c73627..93836e3 100644
--- a/src/molecules/List/styles.tsx
+++ b/src/molecules/List/styles.tsx
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 import { List } from 'antd';
 
-export const ListStyles = styled(List)``;
+// export const ListStyles = styled(List)``;
+
+export const ListStyledFunc = <T extends any>() => styled(List<T>)``;
 
 export const ListItemStyles = styled(List.Item)``;
 
diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts
index dbb4387..8f3c3eb 100644
--- a/src/molecules/List/types.ts
+++ b/src/molecules/List/types.ts
@@ -1,8 +1,9 @@
-import { List, GetProps } from 'antd';
+import { GetProps, List } from 'antd';
 import { ComponentToken as ListComponentTokenAntd } from 'antd/es/list/style';
+import { ReactElement } from 'react';
 
 //#region Define Ant Design types
-type ListProps = GetProps<typeof List>;
+type ListProps<T> = GetProps<typeof List<T>>;
 type ListItemProps = GetProps<typeof List.Item>;
 type ListItemMetaProps = GetProps<typeof List.Item.Meta>;
 //#endregion
@@ -18,7 +19,7 @@ type ListItemMetaPropsExtend = {};
 //#endregion
 
 //#region Export types
-export type RdListProps = ListProps & ListPropsExtend;
+export type RdListProps<T> = ListProps<T> & ListPropsExtend;
 export type RdListItemProps = ListItemProps & ListItemPropsExtend;
 export type RdListItemMetaProps = ListItemMetaProps & ListItemMetaPropsExtend;
 
@@ -26,7 +27,12 @@ export type RdListComponentToken = ListComponentTokenAntd & ListComponentTokenEx
 //#endregion
 
 //#region Define component types
-export type RdListComponent = React.FC<RdListProps & React.RefAttributes<HTMLDivElement>>;
+// export type RdListComponent = React.FC<RdListProps & React.RefAttributes<HTMLDivElement>>;
+export type RdListComponent = (<T>(
+    props: React.PropsWithChildren<RdListProps<T>> & React.RefAttributes<HTMLDivElement>
+) => ReactElement) &
+    Pick<React.FC, 'displayName'>;
+
 export type RdListItemComponent = React.ForwardRefExoticComponent<
     RdListItemProps & React.RefAttributes<HTMLDivElement>
 >;

From 618d1191741aa371c4c4617eb2eb68dfc466850d Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Tue, 18 Mar 2025 14:06:43 +0700
Subject: [PATCH 13/25] Fix type for Form Internal molecule

---
 src/molecules/Form/Form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/molecules/Form/Form.tsx b/src/molecules/Form/Form.tsx
index 729a5c0..634661d 100644
--- a/src/molecules/Form/Form.tsx
+++ b/src/molecules/Form/Form.tsx
@@ -5,9 +5,9 @@ import { FormItemControl } from './FormItemControl';
 import { FormList } from './FormList';
 import { FormProvider } from './FormProvider';
 import { FormStyles } from './styles';
-import { RdFormCompoundedComponent, RdFormProps } from './types';
+import { RdFormComponent, RdFormCompoundedComponent, RdFormProps } from './types';
 
-export const FormInternal = (props: RdFormProps) => {
+export const FormInternal: RdFormComponent = (props: RdFormProps) => {
     return <FormStyles {...props} />;
 };
 

From e2dfd42c9128a0259cfdd1f7b76380d252b6a0ad Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:45:31 +0700
Subject: [PATCH 14/25] feature: remove ConfigProviderDesign, use
 ConfigProvider based context, and improve ConfigProvider to easy custom

---
 src/ConfigProviderDesign.tsx                 | 44 ---------
 src/atomics/Flex/Flex.tsx                    |  7 +-
 src/molecules/DatePicker/TimePicker.tsx      |  7 +-
 src/molecules/DatePicker/WeekPicker.tsx      |  7 +-
 src/molecules/DatePicker/YearPicker.tsx      |  7 +-
 src/molecules/Dropdown/DropdownButton.tsx    |  7 +-
 src/molecules/Upload/UploadDragger.tsx       |  7 +-
 src/molecules/types.ts                       |  2 +-
 src/organisms/App/App.tsx                    |  9 +-
 src/organisms/ConfigProvider/types.colors.ts | 40 ++++++++
 src/organisms/ConfigProvider/types.ts        | 51 ++++++++++-
 src/utils/index.ts                           |  1 -
 src/utils/theme.ts                           | 13 ++-
 src/utils/token.ts                           |  6 +-
 src/utils/types.ts                           | 96 --------------------
 15 files changed, 103 insertions(+), 201 deletions(-)
 delete mode 100644 src/ConfigProviderDesign.tsx
 create mode 100644 src/organisms/ConfigProvider/types.colors.ts
 delete mode 100644 src/utils/types.ts

diff --git a/src/ConfigProviderDesign.tsx b/src/ConfigProviderDesign.tsx
deleted file mode 100644
index 448bad7..0000000
--- a/src/ConfigProviderDesign.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ConfigProvider, ThemeConfig } from 'antd';
-import { PropsWithChildren, useContext } from 'react';
-import { config } from '.';
-
-interface IConfigProviderDesignProps extends PropsWithChildren {
-    /**
-     * The theme components configuration.
-     * This will override the default `config.componentToken` if provided.
-     */
-    componentToken?: ThemeConfig['components'];
-
-    /**
-     * The theme design token configuration.
-     * This will override the default `config.designToken` if provided.
-     */
-    designToken?: ThemeConfig['token'];
-}
-
-export const ConfigProviderDesign = ({
-    children,
-    componentToken,
-    designToken,
-}: IConfigProviderDesignProps) => {
-    const componentTokenCombined = {
-        ...config.componentToken,
-        ...componentToken,
-    };
-
-    const designTokenCombined = {
-        ...config.designToken,
-        ...designToken,
-    };
-
-    return (
-        <ConfigProvider
-            theme={{
-                token: designTokenCombined,
-                components: componentTokenCombined,
-            }}
-        >
-            {children}
-        </ConfigProvider>
-    );
-};
diff --git a/src/atomics/Flex/Flex.tsx b/src/atomics/Flex/Flex.tsx
index eef662d..1b4e6ae 100644
--- a/src/atomics/Flex/Flex.tsx
+++ b/src/atomics/Flex/Flex.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { FlexStyles } from './styles';
 import { RdFlexProps } from './types';
 
 export const Flex = ({ ...antdProps }: RdFlexProps) => {
-    return (
-        <ConfigProviderDesign>
-            <FlexStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <FlexStyles {...antdProps} />;
 };
diff --git a/src/molecules/DatePicker/TimePicker.tsx b/src/molecules/DatePicker/TimePicker.tsx
index 3e68610..e3728b5 100644
--- a/src/molecules/DatePicker/TimePicker.tsx
+++ b/src/molecules/DatePicker/TimePicker.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { TimePickerStyles } from './styles';
 import { RdTimePickerProps } from './types';
 
 export const TimePicker = (props: RdTimePickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <TimePickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <TimePickerStyles {...props} />;
 };
diff --git a/src/molecules/DatePicker/WeekPicker.tsx b/src/molecules/DatePicker/WeekPicker.tsx
index be93f16..9c499e6 100644
--- a/src/molecules/DatePicker/WeekPicker.tsx
+++ b/src/molecules/DatePicker/WeekPicker.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { WeekPickerStyles } from './styles';
 import { RdWeekPickerProps } from './types';
 
 export const WeekPicker = (props: RdWeekPickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <WeekPickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <WeekPickerStyles {...props} />;
 };
diff --git a/src/molecules/DatePicker/YearPicker.tsx b/src/molecules/DatePicker/YearPicker.tsx
index 498debf..3c8f968 100644
--- a/src/molecules/DatePicker/YearPicker.tsx
+++ b/src/molecules/DatePicker/YearPicker.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { YearPickerStyles } from './styles';
 import { RdYearPickerProps } from './types';
 
 export const YearPicker = (props: RdYearPickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <YearPickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <YearPickerStyles {...props} />;
 };
diff --git a/src/molecules/Dropdown/DropdownButton.tsx b/src/molecules/Dropdown/DropdownButton.tsx
index a40c6c1..1e26872 100644
--- a/src/molecules/Dropdown/DropdownButton.tsx
+++ b/src/molecules/Dropdown/DropdownButton.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { DropdownButtonStyles } from './styles';
 import { RdDropdownButtonProps } from './types';
 
 export const DropdownButton = ({ ...antdProps }: RdDropdownButtonProps) => {
-    return (
-        <ConfigProviderDesign>
-            <DropdownButtonStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <DropdownButtonStyles {...antdProps} />;
 };
diff --git a/src/molecules/Upload/UploadDragger.tsx b/src/molecules/Upload/UploadDragger.tsx
index 982100d..06e3d2f 100644
--- a/src/molecules/Upload/UploadDragger.tsx
+++ b/src/molecules/Upload/UploadDragger.tsx
@@ -1,5 +1,4 @@
 import { forwardRef } from 'react';
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { UploadDraggerStyled } from './styles';
 import { RdUploadDraggerProps } from './types';
 
@@ -7,10 +6,6 @@ export const UploadDragger = forwardRef(
     (props: RdUploadDraggerProps, ref: RdUploadDraggerProps['ref']) => {
         const { ...antdProps } = props;
 
-        return (
-            <ConfigProviderDesign>
-                <UploadDraggerStyled ref={ref} {...antdProps} />
-            </ConfigProviderDesign>
-        );
+        return <UploadDraggerStyled ref={ref} {...antdProps} />;
     }
 );
diff --git a/src/molecules/types.ts b/src/molecules/types.ts
index b77bf96..8d1070a 100644
--- a/src/molecules/types.ts
+++ b/src/molecules/types.ts
@@ -41,7 +41,7 @@ import { RdTagComponentToken } from './Tag';
 import { RdTooltipComponentToken } from './Tooltip';
 import { RdUploadComponentToken } from './Upload';
 
-export interface RdComponentTokenMap {
+export interface RdMoleculesTokenMap {
     Affix?: RdAffixComponentToken;
     // Alert?: AlertComponentToken;
     Anchor?: RdAnchorComponentToken;
diff --git a/src/organisms/App/App.tsx b/src/organisms/App/App.tsx
index 185aa64..ebc1320 100644
--- a/src/organisms/App/App.tsx
+++ b/src/organisms/App/App.tsx
@@ -1,14 +1,9 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
+import { App as AppAntd } from 'antd';
 import { AppStyles } from './styles';
 import { RdAppCompoundedComponent, RdAppProps } from './types';
-import { App as AppAntd } from 'antd';
 
 export const AppInternal = ({ ...antdProps }: RdAppProps) => {
-    return (
-        <ConfigProviderDesign>
-            <AppStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <AppStyles {...antdProps} />;
 };
 
 export const App = AppInternal as RdAppCompoundedComponent;
diff --git a/src/organisms/ConfigProvider/types.colors.ts b/src/organisms/ConfigProvider/types.colors.ts
new file mode 100644
index 0000000..4b36783
--- /dev/null
+++ b/src/organisms/ConfigProvider/types.colors.ts
@@ -0,0 +1,40 @@
+export interface ISecondaryColor {
+    colorSecondary: string;
+    colorSecondaryActive: string;
+    colorSecondaryBg: string;
+    colorSecondaryBgHover: string;
+    colorSecondaryBorder: string;
+    colorSecondaryBorderHover: string;
+    colorSecondaryHover: string;
+    colorSecondaryText: string;
+    colorSecondaryTextActive: string;
+    colorSecondaryTextHover: string;
+}
+
+export interface ITertiaryColor {
+    colorTertiary: string;
+    colorTertiaryActive: string;
+    colorTertiaryBg: string;
+    colorTertiaryBgHover: string;
+    colorTertiaryBorder: string;
+    colorTertiaryBorderHover: string;
+    colorTertiaryHover: string;
+    colorTertiaryText: string;
+    colorTertiaryTextActive: string;
+    colorTertiaryTextHover: string;
+}
+
+export interface IQuaternaryColor {
+    colorQuaternary: string;
+    colorQuaternaryActive: string;
+    colorQuaternaryBg: string;
+    colorQuaternaryBgHover: string;
+    colorQuaternaryBorder: string;
+    colorQuaternaryBorderHover: string;
+    colorQuaternaryHover: string;
+    colorQuaternaryText: string;
+    colorQuaternaryTextActive: string;
+    colorQuaternaryTextHover: string;
+}
+
+export interface IAdditionalColor extends ISecondaryColor, ITertiaryColor, IQuaternaryColor {}
diff --git a/src/organisms/ConfigProvider/types.ts b/src/organisms/ConfigProvider/types.ts
index 0e6c244..7506d30 100644
--- a/src/organisms/ConfigProvider/types.ts
+++ b/src/organisms/ConfigProvider/types.ts
@@ -1,27 +1,68 @@
-import { ConfigProvider as ConfigProviderAntd, GetProps, ThemeConfig } from 'antd';
+import { OverrideTokenMap } from '@ant-design/cssinjs-utils';
+import {
+    ConfigProvider as ConfigProviderAntd,
+    GetProps,
+    MappingAlgorithm,
+    ThemeConfig,
+} from 'antd';
 import { AliasToken } from 'antd/es/theme/internal';
+import { RdMoleculesTokenMap } from '../../molecules/types';
 import { ConfigProviderInternal } from './ConfigProvider';
+import { RdTemplatesTokenMap } from '../../templates/types';
 
 //#region Define Ant Design types
 type ConfigProviderProps = GetProps<typeof ConfigProviderAntd>;
-type ComponentsConfig = NonNullable<ThemeConfig['components']>;
 type Algorithm = ThemeConfig['algorithm'];
 //#endregion
 
 //#region Define extended types
 type ConfigProviderPropsExtend = {};
-type AliasTokenExtend = {};
+type AliasTokenExtend = {
+    /**
+     * Brand secondary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+     */
+    colorSecondary: string;
+
+    /**
+     * Brand tertiary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+     */
+    colorTertiary: string;
+
+    /**
+     * Brand quaternary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+     */
+    colorQuaternary: string;
+};
 type ComponentsConfigExtend = {};
 type AlgorithmExtend = {};
-type ThemeConfigExtend = {};
+type ThemeConfigExtend = {
+    /**
+     * @desc Modify Design Token.
+     * @override Partial<AliasToken> (antd)
+     */
+    token?: Partial<RdAliasToken>;
+
+    /**
+     * @desc Modify Component Token and Alias Token applied to components.
+     * @override ComponentsConfig (antd)
+     */
+    components?: RdComponentsConfig;
+};
 //#endregion
 
 //#region Export types
+export type RdComponentTokenMap = RdMoleculesTokenMap & RdTemplatesTokenMap;
 export type RdConfigProviderProps = ConfigProviderProps & ConfigProviderPropsExtend;
 export type RdAliasToken = AliasToken & AliasTokenExtend;
-export type RdComponentsConfigExtend = ComponentsConfig & ComponentsConfigExtend;
+export type RdComponentsConfigExtend = RdComponentsConfig & ComponentsConfigExtend;
 export type RdAlgorithm = Algorithm & AlgorithmExtend;
 export type RdThemeConfig = ThemeConfig & ThemeConfigExtend;
+export type RdOverrideToken = OverrideTokenMap<RdComponentTokenMap, RdAliasToken>;
+export type RdComponentsConfig = {
+    [key in keyof RdOverrideToken]?: RdOverrideToken[key] & {
+        algorithm?: boolean | MappingAlgorithm | MappingAlgorithm[];
+    };
+};
 
 export type RdConfigProviderCompoundedComponent = typeof ConfigProviderInternal & {
     ConfigContext: (typeof ConfigProviderAntd)['ConfigContext'];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 30619e0..7caae4f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * from './styles';
 export * from './theme';
 export * from './token';
-export * from './types';
 export * from './unit';
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 7147975..4f374c1 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,12 +1,11 @@
 import { theme } from 'antd';
+import { darken, lighten } from 'polished';
+import { RdAliasToken, RdThemeConfig } from '../organisms';
 import {
     IQuaternaryColor,
-    IRdAliasToken,
-    IRdThemeConfig,
     ISecondaryColor,
     ITertiaryColor,
-} from './types';
-import { darken, lighten } from 'polished';
+} from '../organisms/ConfigProvider/types.colors';
 
 /**
  * @description Generate color based on base color
@@ -28,7 +27,7 @@ const generateColor = (baseColor: string) => {
 
 export const rdTheme = {
     ...theme,
-    getDesignToken: (config: IRdThemeConfig): IRdAliasToken => {
+    getDesignToken: (config: RdThemeConfig): RdAliasToken => {
         // getDesignToken in antd
         const design = theme.getDesignToken(config);
 
@@ -75,7 +74,7 @@ export const rdTheme = {
             colorQuaternaryTextHover: quaternaryColorGenerated.colorTextHover,
         };
 
-        const result: IRdAliasToken = {
+        const result: RdAliasToken = {
             ...design,
             ...secondaryColorAdditional,
             ...tertiaryColorAdditional,
@@ -86,4 +85,4 @@ export const rdTheme = {
     },
 };
 
-export const rdTheme2 = theme;
\ No newline at end of file
+export const rdTheme2 = theme;
diff --git a/src/utils/token.ts b/src/utils/token.ts
index 2d58adb..c2e17f4 100644
--- a/src/utils/token.ts
+++ b/src/utils/token.ts
@@ -1,6 +1,4 @@
-import { config } from '..';
-import { RdComponentTokenMap } from '../molecules/types';
-import { IRdAliasToken, RdComponentsConfig } from './types';
+import { config, RdAliasToken, RdComponentsConfig, RdComponentTokenMap } from '..';
 
 /**
  * Get the token value for a given component and alias name.
@@ -12,7 +10,7 @@ import { IRdAliasToken, RdComponentsConfig } from './types';
  */
 export const getComponentOrGlobalToken = (
     componentName: keyof RdComponentsConfig,
-    aliasName: keyof IRdAliasToken
+    aliasName: keyof RdAliasToken
 ) => {
     const componentTokenValue = config.componentToken?.[componentName]?.[aliasName];
     const designTokenValue = config.designToken?.[aliasName];
diff --git a/src/utils/types.ts b/src/utils/types.ts
deleted file mode 100644
index 68e6310..0000000
--- a/src/utils/types.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { OverrideTokenMap } from '@ant-design/cssinjs-utils';
-import { AliasToken } from 'antd/es/theme/internal';
-import { RdComponentTokenMap } from '../molecules/types';
-import { MappingAlgorithm, ThemeConfig } from 'antd';
-
-export interface ISecondaryColor {
-    colorSecondary: string;
-    colorSecondaryActive: string;
-    colorSecondaryBg: string;
-    colorSecondaryBgHover: string;
-    colorSecondaryBorder: string;
-    colorSecondaryBorderHover: string;
-    colorSecondaryHover: string;
-    colorSecondaryText: string;
-    colorSecondaryTextActive: string;
-    colorSecondaryTextHover: string;
-}
-
-export interface ITertiaryColor {
-    colorTertiary: string;
-    colorTertiaryActive: string;
-    colorTertiaryBg: string;
-    colorTertiaryBgHover: string;
-    colorTertiaryBorder: string;
-    colorTertiaryBorderHover: string;
-    colorTertiaryHover: string;
-    colorTertiaryText: string;
-    colorTertiaryTextActive: string;
-    colorTertiaryTextHover: string;
-}
-
-export interface IQuaternaryColor {
-    colorQuaternary: string;
-    colorQuaternaryActive: string;
-    colorQuaternaryBg: string;
-    colorQuaternaryBgHover: string;
-    colorQuaternaryBorder: string;
-    colorQuaternaryBorderHover: string;
-    colorQuaternaryHover: string;
-    colorQuaternaryText: string;
-    colorQuaternaryTextActive: string;
-    colorQuaternaryTextHover: string;
-}
-
-interface IAdditionalColor extends ISecondaryColor, ITertiaryColor, IQuaternaryColor {}
-
-/**
- * @description Custom Design Token.
- * @overload AliasToken (antd)
- */
-export interface IRdAliasToken extends AliasToken, IAdditionalColor {
-    /**
-     * @desc Brand secondary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
-     */
-    colorSecondary: string;
-
-    /**
-     * @desc Brand tertiary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
-     */
-    colorTertiary: string;
-
-    /**
-     * @desc Brand quaternary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
-     */
-    colorQuaternary: string;
-}
-
-/**
- * @description Custom OverrideToken for RdAliasToken
- */
-export type OverrideToken = OverrideTokenMap<RdComponentTokenMap, IRdAliasToken>;
-
-/**
- * @description ComponentsConfig in antd
- */
-export type ComponentsConfig = {
-    [key in keyof OverrideToken]?: OverrideToken[key] & {
-        algorithm?: boolean | MappingAlgorithm | MappingAlgorithm[];
-    };
-};
-
-export type RdComponentsConfig = ComponentsConfig & {};
-
-export interface IRdThemeConfig extends ThemeConfig {
-    /**
-     * @desc Modify Design Token.
-     * @override Partial<AliasToken> (antd)
-     */
-    token?: Partial<IRdAliasToken>;
-
-    /**
-     * @desc Modify Component Token and Alias Token applied to components.
-     * @override ComponentsConfig (antd)
-     */
-    components?: RdComponentsConfig;
-}

From daffade80f1891cfd2406bc10cbf14cb13c5e5bd Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:46:02 +0700
Subject: [PATCH 15/25] feature: remove extend color in button

---
 src/molecules/Button/styles.tsx        |  6 ++----
 src/molecules/Button/useExtendColor.ts | 17 -----------------
 2 files changed, 2 insertions(+), 21 deletions(-)
 delete mode 100644 src/molecules/Button/useExtendColor.ts

diff --git a/src/molecules/Button/styles.tsx b/src/molecules/Button/styles.tsx
index 4e98c91..df71d6c 100644
--- a/src/molecules/Button/styles.tsx
+++ b/src/molecules/Button/styles.tsx
@@ -9,7 +9,6 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
         getExcludeForwardProps<RdButtonProps>(['fullWidth'] as (keyof RdButtonProps)[], prop),
 })<RdButtonProps>`
     ${({ fullWidth }) => fullWidth && fullWidthCSS}
-
     ${({ color }) => {
         switch (color) {
             case 'second':
@@ -28,8 +27,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
                 return color;
         }
     }}
-
-     ${({ align }) => {
+        ${({ align }) => {
         switch (align) {
             case 'left':
                 return css`
@@ -46,7 +44,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
             default:
                 return null;
         }
-    }}
+    }};
 `;
 export const ButtonGroupStyles = styled(Button.Group)<RdButtonGroupProps>``;
 
diff --git a/src/molecules/Button/useExtendColor.ts b/src/molecules/Button/useExtendColor.ts
deleted file mode 100644
index f600024..0000000
--- a/src/molecules/Button/useExtendColor.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { config } from '../..';
-import { RdComponentsConfig } from '../../utils/types';
-import { ColorButtonExtendProp } from './types';
-
-export const useExtendColor = (color: ColorButtonExtendProp) => {
-    const newComponentsButton: RdComponentsConfig['Button'] = {};
-
-    switch (color) {
-        case 'second':
-            if (newComponentsButton) {
-                newComponentsButton.colorPrimary = config.designToken.colorSecondary;
-                newComponentsButton.algorithm = true;
-            }
-    }
-
-    return newComponentsButton;
-};

From cf5e7b29bdd22922f61b6192d9e79e29b493fc54 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:46:26 +0700
Subject: [PATCH 16/25] feature: remove extend variant in select mocule

---
 src/molecules/Select/useExtendVariant.tsx | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/molecules/Select/useExtendVariant.tsx

diff --git a/src/molecules/Select/useExtendVariant.tsx b/src/molecules/Select/useExtendVariant.tsx
deleted file mode 100644
index 9e18c3e..0000000
--- a/src/molecules/Select/useExtendVariant.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RdComponentsConfig } from '../../utils/types';
-import { variantSelectExtend } from './types';
-
-const useExtendVariant = (variant: variantSelectExtend) => {
-    const newSelectComponentToken: RdComponentsConfig['Select'] = {};
-
-    switch (variant) {
-        case 'outlined-transparent': {
-            if (newSelectComponentToken) {
-                newSelectComponentToken.selectorBg = 'transparent';
-            }
-        }
-    }
-
-    return newSelectComponentToken;
-};
-
-export default useExtendVariant;

From 6901b1a144adde5c51603643c4bc14897b8582ad Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:46:49 +0700
Subject: [PATCH 17/25] feature: Add InputUpload molecule

---
 src/molecules/Input/InputUpload.tsx | 26 ++++++++++++++++++++++++
 src/molecules/Input/styles.tsx      |  2 ++
 src/molecules/Input/types.ts        | 31 ++++++++++++++++++++++++-----
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/molecules/Input/InputUpload.tsx

diff --git a/src/molecules/Input/InputUpload.tsx b/src/molecules/Input/InputUpload.tsx
new file mode 100644
index 0000000..fd03a8e
--- /dev/null
+++ b/src/molecules/Input/InputUpload.tsx
@@ -0,0 +1,26 @@
+import { CloudUploadOutlined, LoadingOutlined } from '@ant-design/icons';
+import { forwardRef } from 'react';
+import { Tooltip } from '../Tooltip';
+import { Upload } from '../Upload';
+import { InputUploadStyled } from './styles';
+import { RdInputUploadComponent } from './types';
+
+export const InputUpload: RdInputUploadComponent = forwardRef((props, ref) => {
+    const { loading, upload } = props;
+    return (
+        <InputUploadStyled
+            ref={ref}
+            prefix={loading && <LoadingOutlined />}
+            // addonAfter={
+            //     <Tooltip title={''}>
+            //         <Upload showUploadList={false} {...upload}>
+            //             <CloudUploadOutlined onClick={() => {}} />
+            //         </Upload>
+            //     </Tooltip>
+            // }
+            {...props}
+        />
+    );
+});
+
+<InputUpload loading />;
diff --git a/src/molecules/Input/styles.tsx b/src/molecules/Input/styles.tsx
index 7273a88..dd01098 100644
--- a/src/molecules/Input/styles.tsx
+++ b/src/molecules/Input/styles.tsx
@@ -12,3 +12,5 @@ export const InputSearchStyled = styled(Input.Search)``;
 export const InputGroupStyled = styled(Input.Group)``;
 
 export const OTPStyled = styled(Input.OTP)``;
+
+export const InputUploadStyled = styled(Input)``;
diff --git a/src/molecules/Input/types.ts b/src/molecules/Input/types.ts
index 0ff1931..b4126a9 100644
--- a/src/molecules/Input/types.ts
+++ b/src/molecules/Input/types.ts
@@ -9,6 +9,8 @@ import { TextArea } from './TextArea';
 import { TextAreaRef } from 'antd/es/input/TextArea';
 import { OTPRef } from 'antd/es/input/OTP';
 import React from 'react';
+import { InputUpload } from './InputUpload';
+import { RdUploadProps } from '../Upload';
 
 //#region Define Ant Design types
 type InputPropsAntd = GetProps<typeof Input>;
@@ -34,6 +36,15 @@ type InputGroupPropsExtend = {};
 type OTPPropsExtend = {};
 type PasswordPropsExtend = {};
 type TextAreaPropsExtend = {};
+type InputUploadPropsExtend = {
+    loading?: boolean;
+
+    upload?: Omit<RdUploadProps, 'showUploadList'>
+};
+
+type InputRefExtend = {};
+type TextareaRefExtend = {};
+type OTPRefExtend = {};
 //#endregion
 
 //#region Export types
@@ -43,27 +54,36 @@ export type RdInputGroupProps = InputGroupPropsAntd & InputGroupPropsExtend;
 export type RdOTPProps = OTPPropsAntd & OTPPropsExtend;
 export type RdPasswordProps = PasswordPropsAntd & PasswordPropsExtend;
 export type RdTextAreaProps = TextAreaPropsAntd & TextAreaPropsExtend;
+export type RdInputUploadProps = InputPropsAntd & InputUploadPropsExtend;
+
+export type RdInputRef = InputRefAntd & InputRefExtend;
+export type RdTextareaRef = TextareaRefAntd & TextareaRefExtend;
+export type RdOTPRefExtend = OTPRefAntd & OTPRefExtend;
 //#endregion
 
 //#region Define component types
 export type RdInputInternalComponent = React.ForwardRefExoticComponent<
-    RdInputProps & React.RefAttributes<InputRefAntd>
+    RdInputProps & React.RefAttributes<RdInputRef>
 >;
 
 export type RdPasswordComponent = React.ForwardRefExoticComponent<
-    RdPasswordProps & React.RefAttributes<InputRefAntd>
+    RdPasswordProps & React.RefAttributes<RdInputRef>
 >;
 
 export type RdOTPComponent = React.ForwardRefExoticComponent<
-    RdOTPProps & React.RefAttributes<OTPRefAntd>
+    RdOTPProps & React.RefAttributes<RdOTPRefExtend>
 >;
 
 export type RdTextareaComponent = React.ForwardRefExoticComponent<
-    RdTextAreaProps & React.RefAttributes<TextareaRefAntd>
+    RdTextAreaProps & React.RefAttributes<RdTextareaRef>
 >;
 
 export type RdSearchComponent = React.ForwardRefExoticComponent<
-    RdSearchProps & React.RefAttributes<InputRef>
+    RdSearchProps & React.RefAttributes<RdInputRef>
+>;
+
+export type RdInputUploadComponent = React.ForwardRefExoticComponent<
+    RdInputUploadProps & React.RefAttributes<RdInputRef>
 >;
 
 export type RdInputGroupComponent = React.FC<RdInputGroupProps>;
@@ -74,6 +94,7 @@ export type RdInputCompoundedComponent = typeof InputInternal & {
     OTP: typeof OTP;
     Password: typeof Password;
     TextArea: typeof TextArea;
+    Upload: typeof InputUpload;
 };
 
 export type RdInputComponentToken = InputComponentTokenAntd & InputComponentTokenExtend;

From 874ab7459e411979adc364a90d4e3052babd709d Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:47:10 +0700
Subject: [PATCH 18/25] feature: improve types in layout to easy custom

---
 src/molecules/Layout/types.ts | 41 ++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/molecules/Layout/types.ts b/src/molecules/Layout/types.ts
index 5cf73fc..84bc40a 100644
--- a/src/molecules/Layout/types.ts
+++ b/src/molecules/Layout/types.ts
@@ -1,12 +1,16 @@
-import { GetProps, Layout } from 'antd';
+import { SiderProps as SiderPropsAntd } from 'antd';
+import { BasicProps as BasicPropsAntd } from 'antd/es/layout/layout';
 import { ComponentToken as LayoutComponentTokenAntd } from 'antd/es/layout/style';
 
 //#region Define Ant Design types
-type LayoutProps = GetProps<typeof Layout>;
-type ContentProps = GetProps<typeof Layout.Content>;
-type FooterProps = GetProps<typeof Layout.Footer>;
-type HeaderProps = GetProps<typeof Layout.Header>;
-type SiderProps = GetProps<typeof Layout.Sider>;
+type LayoutProps = BasicPropsAntd;
+type ContentProps = BasicPropsAntd;
+type FooterProps = BasicPropsAntd;
+type HeaderProps = BasicPropsAntd;
+type SiderProps = SiderPropsAntd;
+
+type LayoutBaseRefAntd = React.RefAttributes<HTMLElement>;
+type LayoutSiderRefAntd = React.RefAttributes<HTMLDivElement>;
 //#endregion
 
 //#region Define extended component tokens
@@ -19,6 +23,13 @@ type ContentPropsExtend = {};
 type FooterPropsExtend = {};
 type HeaderPropsExtend = {};
 type SiderPropsExtend = {};
+
+type LayoutRefExtend = {};
+type LayoutHeaderRefExtend = {};
+type LayoutFooterRefExtend = {};
+type LayoutContentRefExtend = {};
+type LayoutSiderRefExtend = {};
+
 //#endregion
 
 //#region Export types
@@ -28,25 +39,29 @@ export type RdFooterProps = FooterProps & FooterPropsExtend;
 export type RdHeaderProps = HeaderProps & HeaderPropsExtend;
 export type RdSiderProps = SiderProps & SiderPropsExtend;
 
+export type RdLayoutRef = LayoutBaseRefAntd & LayoutRefExtend;
+export type RdLayoutHeaderRef = LayoutBaseRefAntd & LayoutHeaderRefExtend;
+export type RdLayoutFooterRef = LayoutBaseRefAntd & LayoutFooterRefExtend;
+export type RdLayoutContentRef = LayoutBaseRefAntd & LayoutContentRefExtend;
+export type RdLayoutSiderRef = LayoutSiderRefAntd & LayoutSiderRefExtend;
+
 export type RdLayoutComponentToken = LayoutComponentTokenAntd & LayoutComponentTokenExtend;
 //#endregion
 
 //#region Define component types
-export type RdLayoutComponent = React.ForwardRefExoticComponent<
-    RdLayoutProps & React.RefAttributes<HTMLElement>
->;
+export type RdLayoutComponent = React.ForwardRefExoticComponent<RdLayoutProps & RdLayoutRef>;
 
 export type RdLayoutHeaderComponent = React.ForwardRefExoticComponent<
-    RdHeaderProps & React.RefAttributes<HTMLElement>
+    RdHeaderProps & RdLayoutHeaderRef
 >;
 export type RdLayoutFooterComponent = React.ForwardRefExoticComponent<
-    RdFooterProps & React.RefAttributes<HTMLElement>
+    RdFooterProps & RdLayoutFooterRef
 >;
 export type RdLayoutContentComponent = React.ForwardRefExoticComponent<
-    RdContentProps & React.RefAttributes<HTMLElement>
+    RdContentProps & RdLayoutContentRef
 >;
 export type RdLayoutSiderComponent = React.ForwardRefExoticComponent<
-    RdSiderProps & React.RefAttributes<HTMLDivElement>
+    RdSiderProps & RdLayoutSiderRef
 >;
 
 export type RdLayoutCompoundedComponent = RdLayoutComponent & {

From e3575a445a91b30dd7fc47f705eb840ba904e487 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:47:45 +0700
Subject: [PATCH 19/25] feature: add centered template

---
 .../CenteredTemplate/CenteredTemplate.tsx     | 13 ++++++
 src/templates/CenteredTemplate/index.tsx      |  3 ++
 src/templates/CenteredTemplate/styles.tsx     | 45 +++++++++++++++++++
 .../CenteredTemplate/types.componentToken.ts  |  3 ++
 src/templates/CenteredTemplate/types.ts       | 22 +++++++++
 src/templates/index.ts                        |  2 +
 src/templates/types.ts                        |  7 +++
 7 files changed, 95 insertions(+)
 create mode 100644 src/templates/CenteredTemplate/CenteredTemplate.tsx
 create mode 100644 src/templates/CenteredTemplate/index.tsx
 create mode 100644 src/templates/CenteredTemplate/styles.tsx
 create mode 100644 src/templates/CenteredTemplate/types.componentToken.ts
 create mode 100644 src/templates/CenteredTemplate/types.ts
 create mode 100644 src/templates/index.ts
 create mode 100644 src/templates/types.ts

diff --git a/src/templates/CenteredTemplate/CenteredTemplate.tsx b/src/templates/CenteredTemplate/CenteredTemplate.tsx
new file mode 100644
index 0000000..fab7144
--- /dev/null
+++ b/src/templates/CenteredTemplate/CenteredTemplate.tsx
@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { CenteredTemplateContent, CenteredTemplateStyles } from './styles';
+import { RdCenteredTemplateComponent } from './types';
+
+export const CenteredTemplate: RdCenteredTemplateComponent = forwardRef((props, ref) => {
+    const { children, maxWidth = 450, ...antdProps } = props;
+
+    return (
+        <CenteredTemplateStyles ref={ref} {...antdProps}>
+            <CenteredTemplateContent maxWidth={maxWidth}>{children}</CenteredTemplateContent>
+        </CenteredTemplateStyles>
+    );
+});
diff --git a/src/templates/CenteredTemplate/index.tsx b/src/templates/CenteredTemplate/index.tsx
new file mode 100644
index 0000000..632f813
--- /dev/null
+++ b/src/templates/CenteredTemplate/index.tsx
@@ -0,0 +1,3 @@
+export * from './CenteredTemplate';
+export * from './types';
+export * from './types.componentToken'
\ No newline at end of file
diff --git a/src/templates/CenteredTemplate/styles.tsx b/src/templates/CenteredTemplate/styles.tsx
new file mode 100644
index 0000000..7a0d08d
--- /dev/null
+++ b/src/templates/CenteredTemplate/styles.tsx
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { Layout } from '../../molecules';
+import { getComponentOrGlobalToken, getExcludeForwardProps, unit } from '../../utils';
+import { css } from '@emotion/react';
+import { RdCenteredTemplateProps } from './types';
+
+export const CenteredTemplateStyles = styled(Layout, {
+    label: 'rd-centered-template',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdCenteredTemplateProps>(
+            ['maxWidth'] as (keyof RdCenteredTemplateProps)[],
+            prop
+        ),
+})`
+    ${() => {
+        return css`
+            background-color: ${getComponentOrGlobalToken('CenteredTemplate', 'colorPrimary')};
+        `;
+    }}
+
+    width: 100%;
+    height: 100vh;
+`;
+
+export const CenteredTemplateContent = styled('div', {
+    label: 'rd-centered-template-content',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdCenteredTemplateProps>(
+            ['maxWidth'] as (keyof RdCenteredTemplateProps)[],
+            prop
+        ),
+})<{ maxWidth: number }>`
+    width: 100%;
+    margin: auto;
+
+    ${({ maxWidth }) => {
+        return css`
+            max-width: ${maxWidth}px;
+            background-color: ${getComponentOrGlobalToken('CenteredTemplate', 'colorBgElevated')};
+            padding: ${getComponentOrGlobalToken('CenteredTemplate', 'paddingContentVerticalLG')}px
+                ${getComponentOrGlobalToken('CenteredTemplate', 'paddingContentHorizontalLG')}px;
+            border-radius: ${getComponentOrGlobalToken('CenteredTemplate', 'borderRadius')}px;
+        `;
+    }}
+`;
diff --git a/src/templates/CenteredTemplate/types.componentToken.ts b/src/templates/CenteredTemplate/types.componentToken.ts
new file mode 100644
index 0000000..6c77ef9
--- /dev/null
+++ b/src/templates/CenteredTemplate/types.componentToken.ts
@@ -0,0 +1,3 @@
+export type RdCenteredTemplateComponentToken = {
+    contentPadding: number | string;
+};
diff --git a/src/templates/CenteredTemplate/types.ts b/src/templates/CenteredTemplate/types.ts
new file mode 100644
index 0000000..d067cad
--- /dev/null
+++ b/src/templates/CenteredTemplate/types.ts
@@ -0,0 +1,22 @@
+import { RdLayoutProps, RdLayoutRef } from '../../molecules';
+
+
+//#region Define extended types
+type CenteredTemplatePropsExtend = {
+    maxWidth?: number;
+};
+
+type CenteredTemplateRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdCenteredTemplateProps = RdLayoutProps & CenteredTemplatePropsExtend;
+
+export type RdCenteredTemplateRef = RdLayoutRef & CenteredTemplateRefExtend;
+//#endregion
+
+//#region Define component types
+export type RdCenteredTemplateComponent = React.ForwardRefExoticComponent<
+    RdCenteredTemplateProps & RdCenteredTemplateRef
+>;
+//#endregion
diff --git a/src/templates/index.ts b/src/templates/index.ts
new file mode 100644
index 0000000..3cf3a53
--- /dev/null
+++ b/src/templates/index.ts
@@ -0,0 +1,2 @@
+export * from './CenteredTemplate';
+export * from './DashboardTemplate';
diff --git a/src/templates/types.ts b/src/templates/types.ts
new file mode 100644
index 0000000..5907b8f
--- /dev/null
+++ b/src/templates/types.ts
@@ -0,0 +1,7 @@
+import { RdCenteredTemplateComponentToken } from './CenteredTemplate';
+import { RdDashboardTemplateComponentToken } from './DashboardTemplate';
+
+export interface RdTemplatesTokenMap {
+    CenteredTemplate?: RdCenteredTemplateComponentToken;
+    DashboardTemplate?: RdDashboardTemplateComponentToken
+}

From a0afec15893927bf8c9a915954c7a91000e2190f Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:48:03 +0700
Subject: [PATCH 20/25] feature: add dashboard template

---
 .../DashboardTemplate/DashboardTemplate.tsx   | 27 +++++++++++++
 .../DashboardTemplate/Header/index.tsx        | 20 ++++++++++
 .../DashboardTemplate/Header/styles.tsx       | 21 ++++++++++
 .../DashboardTemplate/Header/types.ts         | 16 ++++++++
 .../DashboardTemplate/Sider/index.tsx         | 29 ++++++++++++++
 .../DashboardTemplate/Sider/styles.tsx        | 29 ++++++++++++++
 .../DashboardTemplate/Sider/types.ts          | 16 ++++++++
 src/templates/DashboardTemplate/index.tsx     |  2 +
 src/templates/DashboardTemplate/styles.tsx    | 12 ++++++
 src/templates/DashboardTemplate/types.ts      | 40 +++++++++++++++++++
 10 files changed, 212 insertions(+)
 create mode 100644 src/templates/DashboardTemplate/DashboardTemplate.tsx
 create mode 100644 src/templates/DashboardTemplate/Header/index.tsx
 create mode 100644 src/templates/DashboardTemplate/Header/styles.tsx
 create mode 100644 src/templates/DashboardTemplate/Header/types.ts
 create mode 100644 src/templates/DashboardTemplate/Sider/index.tsx
 create mode 100644 src/templates/DashboardTemplate/Sider/styles.tsx
 create mode 100644 src/templates/DashboardTemplate/Sider/types.ts
 create mode 100644 src/templates/DashboardTemplate/index.tsx
 create mode 100644 src/templates/DashboardTemplate/styles.tsx
 create mode 100644 src/templates/DashboardTemplate/types.ts

diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx
new file mode 100644
index 0000000..5c978dd
--- /dev/null
+++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx
@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import DashboardTemplateHeader from './Header';
+import DashboardTemplateSider from './Sider';
+import { DashboardTemplateStyles } from './styles';
+import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types';
+import { Layout } from '../../molecules';
+
+const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((props, ref) => {
+    const { headerProps: headerProps, siderProps: siderProps, ...restProps } = props;
+
+    return (
+        <DashboardTemplateStyles ref={ref} {...restProps}>
+            <DashboardTemplateHeader {...headerProps} />
+
+            <Layout hasSider>
+                <DashboardTemplateSider {...siderProps} />
+
+                <Layout>{props.children}</Layout>
+            </Layout>
+        </DashboardTemplateStyles>
+    );
+});
+
+export const DashboardTemplate =
+    DashboardTemplateInternal as RdDashboardTemplateCompoundedComponent;
+DashboardTemplate.Header = DashboardTemplateHeader;
+DashboardTemplate.Sider = DashboardTemplateSider;
diff --git a/src/templates/DashboardTemplate/Header/index.tsx b/src/templates/DashboardTemplate/Header/index.tsx
new file mode 100644
index 0000000..7d23b5a
--- /dev/null
+++ b/src/templates/DashboardTemplate/Header/index.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { DashboardTemplateHeaderStyles } from './styles';
+import { RdDashboardTemplateHeaderComponent } from './types';
+
+export const DashboardTemplateHeader: RdDashboardTemplateHeaderComponent = forwardRef(
+    (props, ref) => {
+        const { children, render, ...restProps } = props;
+
+        if (render) {
+            return render({ children, ...restProps });
+        }
+
+        return (
+            <DashboardTemplateHeaderStyles ref={ref} {...restProps}>
+                {children}
+            </DashboardTemplateHeaderStyles>
+        );
+    }
+);
+export default DashboardTemplateHeader;
diff --git a/src/templates/DashboardTemplate/Header/styles.tsx b/src/templates/DashboardTemplate/Header/styles.tsx
new file mode 100644
index 0000000..d4d8a86
--- /dev/null
+++ b/src/templates/DashboardTemplate/Header/styles.tsx
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Layout } from 'antd';
+import { getExcludeForwardProps } from '../../../utils';
+import { RdDashboardTemplateHeaderProps } from './types';
+
+export const DashboardTemplateHeaderStyles = styled(Layout.Header, {
+    label: 'rd-dashboard-template-header',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<Omit<RdDashboardTemplateHeaderProps, 'render'>>(
+            ['fixedOnScroll'] as (keyof Omit<RdDashboardTemplateHeaderProps, 'render'>)[],
+            prop
+        ),
+})<Omit<RdDashboardTemplateHeaderProps, 'render'>>`
+    ${({ fixedOnScroll }) =>
+        fixedOnScroll &&
+        css`
+            position: sticky;
+            top: 0;
+        `}
+`;
diff --git a/src/templates/DashboardTemplate/Header/types.ts b/src/templates/DashboardTemplate/Header/types.ts
new file mode 100644
index 0000000..1739488
--- /dev/null
+++ b/src/templates/DashboardTemplate/Header/types.ts
@@ -0,0 +1,16 @@
+import { RdHeaderProps, RdLayoutHeaderRef } from '../../../molecules';
+
+//#region Define extended types
+export type DashboardTemplateHeaderPropsExtend = {
+    fixedOnScroll?: boolean;
+
+    render?: (props: Omit<RdDashboardTemplateHeaderProps, 'render'>) => React.ReactNode;
+};
+//#endregion
+
+export type RdDashboardTemplateHeaderProps = RdHeaderProps & DashboardTemplateHeaderPropsExtend;
+export type RdDashboardTemplateHeaderRef = RdLayoutHeaderRef & {};
+
+export type RdDashboardTemplateHeaderComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateHeaderProps & RdDashboardTemplateHeaderRef
+>;
diff --git a/src/templates/DashboardTemplate/Sider/index.tsx b/src/templates/DashboardTemplate/Sider/index.tsx
new file mode 100644
index 0000000..a81cdff
--- /dev/null
+++ b/src/templates/DashboardTemplate/Sider/index.tsx
@@ -0,0 +1,29 @@
+import { forwardRef, useState } from 'react';
+import { DashboardTemplateSiderStyles } from './styles';
+import { RdDashboardTemplateSiderComponent } from './types';
+
+export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forwardRef(
+    (props, ref) => {
+        const { children, render, ...restProps } = props;
+        const [collapsed, setCollapsed] = useState(false);
+
+        if (render) {
+            return render({ children, ...restProps });
+        }
+
+        return (
+            <DashboardTemplateSiderStyles
+                ref={ref}
+                width={264}
+                collapsedWidth={68}
+                collapsible
+                collapsed={collapsed}
+                onCollapse={value => setCollapsed(value)}
+                {...restProps}
+            >
+                {children}
+            </DashboardTemplateSiderStyles>
+        );
+    }
+);
+export default DashboardTemplateSider;
diff --git a/src/templates/DashboardTemplate/Sider/styles.tsx b/src/templates/DashboardTemplate/Sider/styles.tsx
new file mode 100644
index 0000000..3686374
--- /dev/null
+++ b/src/templates/DashboardTemplate/Sider/styles.tsx
@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Layout } from 'antd';
+import { getComponentToken, getExcludeForwardProps } from '../../../utils';
+import { RdDashboardTemplateSiderProps } from './types';
+
+export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
+    label: 'rd-dashboard-template-header',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<Omit<RdDashboardTemplateSiderProps, 'render'>>(
+            ['fixedOnScroll'] as (keyof Omit<RdDashboardTemplateSiderProps, 'render'>)[],
+            prop
+        ),
+})<Omit<RdDashboardTemplateSiderProps, 'render'>>`
+    ${() => css`
+        overflow: auto;
+        inset-inline-start: 0;
+        height: 100%;
+    `}
+
+    ${({ fixedOnScroll }) =>
+        fixedOnScroll &&
+        css`
+            height: calc(100vh - ${getComponentToken('Layout', 'headerHeight')}px);
+            position: sticky;
+            top: ${getComponentToken('Layout', 'headerHeight')}px;
+            bottom: 0;
+        `}
+`;
diff --git a/src/templates/DashboardTemplate/Sider/types.ts b/src/templates/DashboardTemplate/Sider/types.ts
new file mode 100644
index 0000000..ef5a0f5
--- /dev/null
+++ b/src/templates/DashboardTemplate/Sider/types.ts
@@ -0,0 +1,16 @@
+import { RdLayoutSiderRef, RdSiderProps } from "../../../molecules";
+
+//#region Define extended types
+export type DashboardTemplateSiderPropsExtend = {
+    fixedOnScroll?: boolean;
+
+    render?: (props: Omit<RdDashboardTemplateSiderProps, 'render'>) => React.ReactNode;
+};
+//#endregion
+
+export type RdDashboardTemplateSiderProps = RdSiderProps & DashboardTemplateSiderPropsExtend;
+export type RdDashboardTemplateSiderRef = RdLayoutSiderRef & {};
+
+export type RdDashboardTemplateSiderComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateSiderProps & RdDashboardTemplateSiderRef
+>;
diff --git a/src/templates/DashboardTemplate/index.tsx b/src/templates/DashboardTemplate/index.tsx
new file mode 100644
index 0000000..60dde6f
--- /dev/null
+++ b/src/templates/DashboardTemplate/index.tsx
@@ -0,0 +1,2 @@
+export * from './DashboardTemplate';
+export * from './types';
diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx
new file mode 100644
index 0000000..3ef98c6
--- /dev/null
+++ b/src/templates/DashboardTemplate/styles.tsx
@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { getComponentOrGlobalToken } from '../..';
+import { Layout } from '../../molecules';
+
+export const DashboardTemplateStyles = styled(Layout, {
+    label: 'rd-dashboard-template',
+})`
+    ${() => css`
+        background: ${getComponentOrGlobalToken('DashboardTemplate', 'colorBgLayout')};
+    `}
+`;
diff --git a/src/templates/DashboardTemplate/types.ts b/src/templates/DashboardTemplate/types.ts
new file mode 100644
index 0000000..035e28e
--- /dev/null
+++ b/src/templates/DashboardTemplate/types.ts
@@ -0,0 +1,40 @@
+import { RdLayoutProps, RdLayoutRef } from '../../molecules';
+import { RdDashboardTemplateHeaderComponent, RdDashboardTemplateHeaderProps } from './Header/types';
+import { RdDashboardTemplateSiderComponent, RdDashboardTemplateSiderProps } from './Sider/types';
+
+//#region Define extended component tokens
+type DashboardTemplateComponentTokenExtend = {};
+
+//#endregion
+
+//#region Define extended types
+type DashboardTemplatePropsExtend = {
+    headerProps?: RdDashboardTemplateHeaderProps;
+    siderProps?: RdDashboardTemplateSiderProps;
+    test?: boolean;
+};
+
+type DashboardTemplateRefExtend = {};
+
+//#endregion
+
+//#region Export types
+export type RdDashboardTemplateProps = RdLayoutProps & DashboardTemplatePropsExtend;
+export type RdDashboardTemplateRef = RdLayoutRef & DashboardTemplateRefExtend;
+
+export type RdDashboardTemplateComponentToken = DashboardTemplateComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdDashboardTemplateComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateProps & RdDashboardTemplateRef
+>;
+
+export type RdDashboardTemplateCompoundedComponent = RdDashboardTemplateComponent & {
+    Header: RdDashboardTemplateHeaderComponent;
+    Sider: RdDashboardTemplateSiderComponent;
+    // Content: RdLayoutContentComponent;
+    // Sider: RdLayoutSiderComponent;
+};
+
+//#endregion

From 6e1d81472f9817bbced97b5ea191ccf5f05b2509 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:48:38 +0700
Subject: [PATCH 21/25] feature: export templates and change IRd to Rd

---
 src/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 1366ed7..85f4a0f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,9 @@
 import { theme } from 'antd';
-import { IRdThemeConfig } from './utils/types';
+import { RdThemeConfig } from './organisms';
 
 export interface IConfig {
-    designToken: NonNullable<IRdThemeConfig['token']>;
-    componentToken: IRdThemeConfig['components'];
+    designToken: NonNullable<RdThemeConfig['token']>;
+    componentToken: RdThemeConfig['components'];
 }
 
 export const config: IConfig = {
@@ -14,4 +14,5 @@ export const config: IConfig = {
 export * from './atomics';
 export * from './molecules';
 export * from './organisms';
+export * from './templates';
 export * from './utils';
\ No newline at end of file

From 4c3932d2918d6e4919ac777fdbcb7c8244d1233a Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 26 Mar 2025 10:49:04 +0700
Subject: [PATCH 22/25] build: change tsconfig to use this in feature

---
 tsconfig.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tsconfig.json b/tsconfig.json
index b0d9eee..8e2d810 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,11 @@
         "forceConsistentCasingInFileNames": true,
         "declaration": true,
         "outDir": "./dist",
+
+        // "baseUrl": ".",
+        // "paths": {
+        //     "@/*": ["src/*"]
+        // }
     },
     "include": ["src"]
 }

From 3ad1c0a8731b074824444fadbe4013f5ae9e46bb Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Mon, 31 Mar 2025 09:52:01 +0700
Subject: [PATCH 23/25] feature: improve style z-index for DashboardTemplate

---
 src/templates/DashboardTemplate/DashboardTemplate.tsx |  4 ++--
 src/templates/DashboardTemplate/Header/styles.tsx     |  3 ++-
 src/templates/DashboardTemplate/styles.tsx            | 10 +++++++++-
 src/templates/DashboardTemplate/types.ts              |  4 +++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx
index 5c978dd..b79a3db 100644
--- a/src/templates/DashboardTemplate/DashboardTemplate.tsx
+++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import DashboardTemplateHeader from './Header';
 import DashboardTemplateSider from './Sider';
-import { DashboardTemplateStyles } from './styles';
+import { DashboardTemplateContent, DashboardTemplateStyles } from './styles';
 import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types';
 import { Layout } from '../../molecules';
 
@@ -15,7 +15,7 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop
             <Layout hasSider>
                 <DashboardTemplateSider {...siderProps} />
 
-                <Layout>{props.children}</Layout>
+                <DashboardTemplateContent>{props.children}</DashboardTemplateContent>
             </Layout>
         </DashboardTemplateStyles>
     );
diff --git a/src/templates/DashboardTemplate/Header/styles.tsx b/src/templates/DashboardTemplate/Header/styles.tsx
index d4d8a86..d09daf9 100644
--- a/src/templates/DashboardTemplate/Header/styles.tsx
+++ b/src/templates/DashboardTemplate/Header/styles.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Layout } from 'antd';
-import { getExcludeForwardProps } from '../../../utils';
+import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../../utils';
 import { RdDashboardTemplateHeaderProps } from './types';
 
 export const DashboardTemplateHeaderStyles = styled(Layout.Header, {
@@ -17,5 +17,6 @@ export const DashboardTemplateHeaderStyles = styled(Layout.Header, {
         css`
             position: sticky;
             top: 0;
+            z-index: 1;
         `}
 `;
diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx
index 3ef98c6..cfb6bd0 100644
--- a/src/templates/DashboardTemplate/styles.tsx
+++ b/src/templates/DashboardTemplate/styles.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { getComponentOrGlobalToken } from '../..';
+import { getComponentOrGlobalToken, getComponentToken } from '../..';
 import { Layout } from '../../molecules';
 
 export const DashboardTemplateStyles = styled(Layout, {
@@ -10,3 +10,11 @@ export const DashboardTemplateStyles = styled(Layout, {
         background: ${getComponentOrGlobalToken('DashboardTemplate', 'colorBgLayout')};
     `}
 `;
+
+export const DashboardTemplateContent = styled(Layout, {
+    label: 'rd-dashboard-template-content',
+})`
+    ${() => css`
+        padding: ${getComponentToken('CenteredTemplate', 'contentPadding') || '32px 32px'};
+    `}
+`;
diff --git a/src/templates/DashboardTemplate/types.ts b/src/templates/DashboardTemplate/types.ts
index 035e28e..2c2e08d 100644
--- a/src/templates/DashboardTemplate/types.ts
+++ b/src/templates/DashboardTemplate/types.ts
@@ -3,7 +3,9 @@ import { RdDashboardTemplateHeaderComponent, RdDashboardTemplateHeaderProps } fr
 import { RdDashboardTemplateSiderComponent, RdDashboardTemplateSiderProps } from './Sider/types';
 
 //#region Define extended component tokens
-type DashboardTemplateComponentTokenExtend = {};
+type DashboardTemplateComponentTokenExtend = {
+    contentPadding?: string;
+};
 
 //#endregion
 

From fbbffc2474d6a61941a2b1c08789f73624ddf255 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Mon, 31 Mar 2025 09:52:40 +0700
Subject: [PATCH 24/25] feature: add prop disableMargin for FormItem

---
 src/molecules/Form/FormItemReactHookForm.tsx | 5 ++---
 src/molecules/Form/styles.tsx                | 8 +++++++-
 src/molecules/Form/types.ts                  | 8 +++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/molecules/Form/FormItemReactHookForm.tsx b/src/molecules/Form/FormItemReactHookForm.tsx
index 01fa265..12b2b70 100644
--- a/src/molecules/Form/FormItemReactHookForm.tsx
+++ b/src/molecules/Form/FormItemReactHookForm.tsx
@@ -1,9 +1,8 @@
 import { Form as AntdForm } from 'antd';
-import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useMemo } from 'react';
+import { Children, cloneElement, isValidElement, useEffect } from 'react';
 import { FieldValues, useController } from 'react-hook-form';
-import { FormItemStyles } from './styles';
-import { FormItemReactHookFormProps } from './types';
 import { FormItem } from './FormItem';
+import { FormItemReactHookFormProps } from './types';
 
 export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldValues>({
     children,
diff --git a/src/molecules/Form/styles.tsx b/src/molecules/Form/styles.tsx
index 04af563..52b8cd8 100644
--- a/src/molecules/Form/styles.tsx
+++ b/src/molecules/Form/styles.tsx
@@ -9,8 +9,14 @@ export const FormListStyles = styled(Form.List)``;
 export const FormProviderStyles = styled(Form.Provider)``;
 export const FormErrorListStyles = styled(Form.ErrorList)``;
 export const FormItemStyles = styled(Form.Item, {
-    shouldForwardProp: prop => getExcludeForwardProps<RdFormItemProps>(['block'], prop),
+    shouldForwardProp: prop => getExcludeForwardProps<RdFormItemProps>(['block', 'disableMargin'], prop),
 })<RdFormItemProps>`
+    ${({ disableMargin }) =>
+        disableMargin &&
+        css`
+            margin-bottom: 0px;
+        `}
+
     ${({ block }) =>
         block &&
         css`
diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts
index cb2d692..5fea2e9 100644
--- a/src/molecules/Form/types.ts
+++ b/src/molecules/Form/types.ts
@@ -3,7 +3,7 @@ import { Form } from 'antd';
 import { ComponentToken } from 'antd/es/form/style';
 import { FormRef } from 'rc-field-form/lib/interface';
 import React, { ReactElement } from 'react';
-import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { Control, FieldPath, FieldValues, Path, PathValue } from 'react-hook-form';
 
 //#region Define Ant Design types
 type FormPropsAntd<Values = any> = GetProps<typeof Form<Values>>;
@@ -42,6 +42,12 @@ type FormItemPropsExtend = {
      * @description Option to fit Space width to its parent width, default is false
      */
     block?: boolean;
+
+    /**
+     * If set to `true`, disables the default margin applied to the Typography.Title component.
+     * @default false
+     */
+    disableMargin?: boolean;
 };
 
 type FormListPropsExtend = {};

From da546231f05591cbc78ec95f6ae252fb045001b9 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Mon, 31 Mar 2025 09:53:11 +0700
Subject: [PATCH 25/25] build: remove import not use

---
 src/molecules/Form/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts
index 5fea2e9..1093e4e 100644
--- a/src/molecules/Form/types.ts
+++ b/src/molecules/Form/types.ts
@@ -3,7 +3,7 @@ import { Form } from 'antd';
 import { ComponentToken } from 'antd/es/form/style';
 import { FormRef } from 'rc-field-form/lib/interface';
 import React, { ReactElement } from 'react';
-import { Control, FieldPath, FieldValues, Path, PathValue } from 'react-hook-form';
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
 
 //#region Define Ant Design types
 type FormPropsAntd<Values = any> = GetProps<typeof Form<Values>>;