From 74bfc5ebf4fa433d39d13eec8a12a871329adbde Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 11 May 2022 18:14:45 +0800
Subject: [PATCH] migrate all in-tree components to the new slot spec

---
 packages/arco-lib/src/components/Alert.tsx    |  9 +-
 packages/arco-lib/src/components/Avatar.tsx   |  6 +-
 packages/arco-lib/src/components/Badge.tsx    |  6 +-
 packages/arco-lib/src/components/Button.tsx   |  6 +-
 packages/arco-lib/src/components/Cascader.tsx |  9 +-
 packages/arco-lib/src/components/Checkbox.tsx |  2 +-
 packages/arco-lib/src/components/Collapse.tsx |  6 +-
 .../arco-lib/src/components/Descriptions.tsx  |  4 +-
 packages/arco-lib/src/components/Divider.tsx  |  2 +-
 packages/arco-lib/src/components/Dropdown.tsx |  8 +-
 .../src/components/Form/FormControl.tsx       |  6 +-
 packages/arco-lib/src/components/Grid.tsx     | 20 +++-
 packages/arco-lib/src/components/Icon.tsx     |  2 +-
 packages/arco-lib/src/components/Image.tsx    |  6 +-
 packages/arco-lib/src/components/Input.tsx    | 15 ++-
 packages/arco-lib/src/components/Layout.tsx   | 23 ++++-
 packages/arco-lib/src/components/Link.tsx     |  2 +-
 packages/arco-lib/src/components/Mentions.tsx |  2 +-
 packages/arco-lib/src/components/Menu.tsx     |  2 +-
 packages/arco-lib/src/components/Modal.tsx    | 11 ++-
 .../arco-lib/src/components/Pagination.tsx    |  2 +-
 .../arco-lib/src/components/PasswordInput.tsx |  2 +-
 packages/arco-lib/src/components/Popover.tsx  | 17 +++-
 packages/arco-lib/src/components/Progress.tsx | 13 ++-
 packages/arco-lib/src/components/Radio.tsx    |  2 +-
 packages/arco-lib/src/components/Select.tsx   | 10 +-
 packages/arco-lib/src/components/Skeleton.tsx |  6 +-
 packages/arco-lib/src/components/Space.tsx    |  6 +-
 packages/arco-lib/src/components/Steps.tsx    |  6 +-
 packages/arco-lib/src/components/Switch.tsx   |  2 +-
 packages/arco-lib/src/components/Table.tsx    |  2 +-
 packages/arco-lib/src/components/Tabs.tsx     | 16 ++--
 packages/arco-lib/src/components/TextArea.tsx |  2 +-
 packages/arco-lib/src/components/Timeline.tsx |  2 +-
 packages/arco-lib/src/components/Tooltip.tsx  | 12 ++-
 packages/arco-lib/src/components/Tree.tsx     |  2 +-
 .../arco-lib/src/components/TreeSelect.tsx    |  2 +-
 packages/arco-lib/src/sunmao-helper.ts        |  5 +-
 packages/chakra-ui-lib/src/components/Box.tsx |  6 +-
 .../chakra-ui-lib/src/components/Button.tsx   |  2 +-
 .../chakra-ui-lib/src/components/Checkbox.tsx |  2 +-
 .../src/components/CheckboxGroup.tsx          |  6 +-
 .../chakra-ui-lib/src/components/Dialog.tsx   |  8 +-
 .../chakra-ui-lib/src/components/Divider.tsx  |  2 +-
 .../src/components/Form/Form.tsx              |  6 +-
 .../src/components/Form/FormControl.tsx       |  6 +-
 .../chakra-ui-lib/src/components/HStack.tsx   |  6 +-
 .../chakra-ui-lib/src/components/Image.tsx    |  2 +-
 .../chakra-ui-lib/src/components/Input.tsx    |  2 +-
 packages/chakra-ui-lib/src/components/Kbd.tsx |  2 +-
 .../chakra-ui-lib/src/components/Link.tsx     |  2 +-
 .../chakra-ui-lib/src/components/List.tsx     |  2 +-
 .../src/components/MultiSelect.tsx            |  2 +-
 .../src/components/NumberInput.tsx            | 95 ++++++++++---------
 .../chakra-ui-lib/src/components/Radio.tsx    |  2 +-
 .../src/components/RadioGroup.tsx             |  6 +-
 .../chakra-ui-lib/src/components/Select.tsx   |  2 +-
 .../chakra-ui-lib/src/components/Stack.tsx    |  6 +-
 .../chakra-ui-lib/src/components/Switch.tsx   |  2 +-
 .../src/components/Table/spec.ts              |  6 +-
 .../chakra-ui-lib/src/components/Tabs.tsx     |  2 +-
 .../chakra-ui-lib/src/components/Tooltip.tsx  |  6 +-
 .../chakra-ui-lib/src/components/VStack.tsx   |  6 +-
 packages/core/__tests__/component.spec.ts     |  2 +-
 .../runtime/src/components/core/Dummy.tsx     |  2 +-
 .../runtime/src/components/core/FileInput.tsx |  8 +-
 .../src/components/core/GridLayout.tsx        |  6 +-
 .../src/components/core/ModuleContainer.tsx   |  2 +-
 .../src/components/core/Router/index.tsx      | 10 +-
 .../runtime/src/components/core/Stack.tsx     |  6 +-
 packages/runtime/src/components/core/Text.tsx |  2 +-
 packages/runtime/src/traits/core/index.ts     | 13 ++-
 72 files changed, 308 insertions(+), 188 deletions(-)

diff --git a/packages/arco-lib/src/components/Alert.tsx b/packages/arco-lib/src/components/Alert.tsx
index c84d3261..714deb85 100644
--- a/packages/arco-lib/src/components/Alert.tsx
+++ b/packages/arco-lib/src/components/Alert.tsx
@@ -32,7 +32,10 @@ const options = {
     properties: AlertPropsSpec,
     state: AlertStateSpec,
     methods: {},
-    slots: ['action', 'icon'],
+    slots: {
+      action: { slotProps: Type.Object({}) },
+      icon: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onClose', 'afterClose'],
   },
@@ -45,8 +48,8 @@ export const Alert = implementRuntimeComponent(options)(props => {
   return (
     <BaseAlert
       ref={elementRef}
-      action={slotsElements.action}
-      icon={slotsElements.icon}
+      action={slotsElements.action ? <slotsElements.action /> : null}
+      icon={slotsElements.icon ? <slotsElements.icon /> : null}
       onClose={_e => {
         callbackMap?.onClose?.();
       }}
diff --git a/packages/arco-lib/src/components/Avatar.tsx b/packages/arco-lib/src/components/Avatar.tsx
index 0b213296..123c516d 100644
--- a/packages/arco-lib/src/components/Avatar.tsx
+++ b/packages/arco-lib/src/components/Avatar.tsx
@@ -32,7 +32,9 @@ const options = {
     properties: AvatarPropsSpec,
     state: AvatarStateSpec,
     methods: {},
-    slots: ['triggerIcon'],
+    slots: {
+      triggerIcon: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onClick'],
   },
@@ -47,7 +49,7 @@ export const Avatar = implementRuntimeComponent(options)(props => {
       ref={elementRef}
       className={css(customStyle?.content)}
       {...cProps}
-      triggerIcon={slotsElements.triggerIcon}
+      triggerIcon={slotsElements.triggerIcon ? <slotsElements.triggerIcon /> : null}
       onClick={_e => {
         callbackMap?.onClick?.();
       }}
diff --git a/packages/arco-lib/src/components/Badge.tsx b/packages/arco-lib/src/components/Badge.tsx
index 97e350aa..0d32d313 100644
--- a/packages/arco-lib/src/components/Badge.tsx
+++ b/packages/arco-lib/src/components/Badge.tsx
@@ -31,7 +31,9 @@ const options = {
     properties: BadgePropsSpec,
     state: BadgeStateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -57,7 +59,7 @@ export const Badge = implementRuntimeComponent(options)(props => {
       {...cProps}
       color={cProps.dotColor}
     >
-      {slotsElements.content}
+      {slotsElements.content ? <slotsElements.content /> : null}
     </BaseBadge>
   );
 });
diff --git a/packages/arco-lib/src/components/Button.tsx b/packages/arco-lib/src/components/Button.tsx
index 1757fc61..52cb9cd5 100644
--- a/packages/arco-lib/src/components/Button.tsx
+++ b/packages/arco-lib/src/components/Button.tsx
@@ -36,7 +36,9 @@ const options = {
     properties: ButtonPropsSpec,
     state: ButtonStateSpec,
     methods: {},
-    slots: ['icon'],
+    slots: {
+      icon: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onClick'],
   },
@@ -51,7 +53,7 @@ export const Button = implementRuntimeComponent(options)(props => {
       ref={elementRef}
       className={css(customStyle?.content)}
       onClick={callbackMap?.onClick}
-      icon={slotsElements.icon}
+      icon={slotsElements.icon ? <slotsElements.icon /> : null}
       {...cProps}
       loadingFixedWidth
     >
diff --git a/packages/arco-lib/src/components/Cascader.tsx b/packages/arco-lib/src/components/Cascader.tsx
index 19443164..025c6e67 100644
--- a/packages/arco-lib/src/components/Cascader.tsx
+++ b/packages/arco-lib/src/components/Cascader.tsx
@@ -8,7 +8,6 @@ import {
   CascaderValueSpec,
 } from '../generated/types/Cascader';
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { isArray } from 'lodash-es';
 import { SelectViewHandle } from '@arco-design/web-react/es/_class/select-view';
 
 const CascaderPropsSpec = Type.Object(BaseCascaderPropsSpec);
@@ -101,7 +100,9 @@ const options = {
     properties: CascaderPropsSpec,
     state: CascaderStateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onChange'],
   },
@@ -113,9 +114,7 @@ export const Cascader = implementRuntimeComponent(options)(props => {
   const { multiple, options, placeholder, ...cProps } = getComponentProps(props);
   const ref = useRef<SelectViewHandle | null>(null);
 
-  const content = isArray(slotsElements.content)
-    ? slotsElements.content[0]
-    : slotsElements.content;
+  const content = slotsElements.content ? <slotsElements.content /> : null;
 
   const mode = multiple ? 'multiple' : undefined;
 
diff --git a/packages/arco-lib/src/components/Checkbox.tsx b/packages/arco-lib/src/components/Checkbox.tsx
index 31f1ff72..24f1bb14 100644
--- a/packages/arco-lib/src/components/Checkbox.tsx
+++ b/packages/arco-lib/src/components/Checkbox.tsx
@@ -63,7 +63,7 @@ const options = {
       }),
     },
     styleSlots: ['content'],
-    slots: [],
+    slots: {},
     events: ['onChange'],
   },
 };
diff --git a/packages/arco-lib/src/components/Collapse.tsx b/packages/arco-lib/src/components/Collapse.tsx
index 48209b0f..7db40107 100644
--- a/packages/arco-lib/src/components/Collapse.tsx
+++ b/packages/arco-lib/src/components/Collapse.tsx
@@ -49,7 +49,9 @@ const options = {
     methods: {
       setActiveKey: Type.String(),
     },
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onChange'],
   },
@@ -71,7 +73,7 @@ export const Collapse = implementRuntimeComponent(options)(props => {
   );
 
   const collapseItems = slotsElements.content
-    ? ([] as React.ReactElement[]).concat(slotsElements.content)
+    ? ([] as React.ReactElement[]).concat(<slotsElements.content />)
     : [];
 
   return (
diff --git a/packages/arco-lib/src/components/Descriptions.tsx b/packages/arco-lib/src/components/Descriptions.tsx
index 9c425faa..892e3542 100644
--- a/packages/arco-lib/src/components/Descriptions.tsx
+++ b/packages/arco-lib/src/components/Descriptions.tsx
@@ -60,14 +60,14 @@ const options = {
     properties: DescriptionPropsSpec,
     state: DescriptionStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
 };
 
 export const Descriptions = implementRuntimeComponent(options)(props => {
-  const { data,...cProps } = getComponentProps(props);
+  const { data, ...cProps } = getComponentProps(props);
   const { customStyle } = props;
 
   return (
diff --git a/packages/arco-lib/src/components/Divider.tsx b/packages/arco-lib/src/components/Divider.tsx
index d218f049..ec09d547 100644
--- a/packages/arco-lib/src/components/Divider.tsx
+++ b/packages/arco-lib/src/components/Divider.tsx
@@ -30,7 +30,7 @@ const options = {
     properties: DividerPropsSpec,
     state: DividerStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/arco-lib/src/components/Dropdown.tsx b/packages/arco-lib/src/components/Dropdown.tsx
index 417ff4ba..b52b8492 100644
--- a/packages/arco-lib/src/components/Dropdown.tsx
+++ b/packages/arco-lib/src/components/Dropdown.tsx
@@ -44,7 +44,9 @@ const options = {
     properties: DropdownPropsSpec,
     state: DropdownStateSpec,
     methods: {},
-    slots: ['trigger'],
+    slots: {
+      trigger: { slotProps: Type.Object({}) },
+    },
     styleSlots: [],
     events: ['onClickMenuItem', 'onVisibleChange', 'onButtonClick'],
   },
@@ -89,7 +91,9 @@ export const Dropdown = implementRuntimeComponent(options)(props => {
       onClick={callbackMap?.onButtonClick}
       triggerProps={{ autoAlignPopupMinWidth: autoAlignPopupWidth }}
     >
-      <div ref={elementRef}>{slotsElements.trigger || <Button>Click</Button>}</div>
+      <div ref={elementRef}>
+        {slotsElements.trigger ? <slotsElements.trigger /> : <Button>Click</Button>}
+      </div>
     </Dropdown>
   );
 });
diff --git a/packages/arco-lib/src/components/Form/FormControl.tsx b/packages/arco-lib/src/components/Form/FormControl.tsx
index 9343b0b4..143612fd 100644
--- a/packages/arco-lib/src/components/Form/FormControl.tsx
+++ b/packages/arco-lib/src/components/Form/FormControl.tsx
@@ -52,7 +52,9 @@ export const FormControl = implementRuntimeComponent({
     properties: FormControlPropsSpec,
     state: Type.Object({}),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -73,7 +75,7 @@ export const FormControl = implementRuntimeComponent({
       {...cProps}
     >
       {slotsElements.content ? (
-        slotsElements.content
+        <slotsElements.content />
       ) : (
         <EmptyPlaceholder componentName="Input" />
       )}
diff --git a/packages/arco-lib/src/components/Grid.tsx b/packages/arco-lib/src/components/Grid.tsx
index bc7a0a9a..a67f8abe 100644
--- a/packages/arco-lib/src/components/Grid.tsx
+++ b/packages/arco-lib/src/components/Grid.tsx
@@ -28,7 +28,9 @@ export const Row = implementRuntimeComponent({
     properties: Type.Object(RowPropsSpec),
     state: Type.Object({}),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['wrapper'],
     events: [],
   },
@@ -38,7 +40,11 @@ export const Row = implementRuntimeComponent({
 
   return (
     <Grid.Row className={css(customStyle?.wrapper)} ref={elementRef} {...cProps}>
-      {slotsElements.content || <EmptyPlaceholder componentName="" />}
+      {slotsElements.content ? (
+        <slotsElements.content />
+      ) : (
+        <EmptyPlaceholder componentName="" />
+      )}
     </Grid.Row>
   );
 });
@@ -67,7 +73,9 @@ export const Col = implementRuntimeComponent({
     properties: Type.Object(ColPropsSpec),
     state: Type.Object({}),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['wrapper'],
     events: [],
   },
@@ -76,7 +84,11 @@ export const Col = implementRuntimeComponent({
   const { ...cProps } = getComponentProps(props);
   return (
     <Grid.Col className={css(customStyle?.wrapper)} ref={elementRef} {...cProps}>
-      {slotsElements.content || <EmptyPlaceholder componentName="" />}
+      {slotsElements.content ? (
+        <slotsElements.content />
+      ) : (
+        <EmptyPlaceholder componentName="" />
+      )}
     </Grid.Col>
   );
 });
diff --git a/packages/arco-lib/src/components/Icon.tsx b/packages/arco-lib/src/components/Icon.tsx
index 5113372a..537bc071 100644
--- a/packages/arco-lib/src/components/Icon.tsx
+++ b/packages/arco-lib/src/components/Icon.tsx
@@ -31,7 +31,7 @@ export const Icon = implementRuntimeComponent({
     properties: IconPropsSpec,
     state: Type.Object({}),
     methods: {},
-    slots: ['slot'],
+    slots: {},
     styleSlots: ['content'],
     events: ['event'],
   },
diff --git a/packages/arco-lib/src/components/Image.tsx b/packages/arco-lib/src/components/Image.tsx
index bba3c0ed..647d4952 100644
--- a/packages/arco-lib/src/components/Image.tsx
+++ b/packages/arco-lib/src/components/Image.tsx
@@ -20,7 +20,7 @@ const exampleProperties: Static<typeof ImagePropsSpec> = {
   preview: false,
   width: 200,
   height: 200,
-  error:''
+  error: '',
 };
 
 const options = {
@@ -38,7 +38,7 @@ const options = {
     properties: ImagePropsSpec,
     state: ImageStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onClick'],
   },
@@ -101,7 +101,7 @@ export const ImageGroup = implementRuntimeComponent({
       current: Type.Number(),
     }),
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onChange'],
   },
diff --git a/packages/arco-lib/src/components/Input.tsx b/packages/arco-lib/src/components/Input.tsx
index fad2060b..dfffd4fd 100644
--- a/packages/arco-lib/src/components/Input.tsx
+++ b/packages/arco-lib/src/components/Input.tsx
@@ -39,7 +39,12 @@ const options = {
     properties: InputPropsSpec,
     state: InputStateSpec,
     methods: {},
-    slots: ['addAfter', 'prefix', 'suffix', 'addBefore'],
+    slots: {
+      addAfter: { slotProps: Type.Object({}) },
+      prefix: { slotProps: Type.Object({}) },
+      suffix: { slotProps: Type.Object({}) },
+      addBefore: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['input'],
     events: ['onChange', 'onBlur', 'onFocus', 'onClear', 'onPressEnter'],
   },
@@ -71,10 +76,10 @@ export const Input = implementRuntimeComponent(options)(props => {
     <BaseInput
       className={css(customStyle?.input)}
       ref={ref}
-      addAfter={slotsElements.addAfter}
-      addBefore={slotsElements.addBefore}
-      prefix={slotsElements.prefix}
-      suffix={slotsElements.suffix}
+      addAfter={slotsElements.addAfter ? <slotsElements.addAfter /> : null}
+      addBefore={slotsElements.addBefore ? <slotsElements.addBefore /> : null}
+      prefix={slotsElements.prefix ? <slotsElements.prefix /> : null}
+      suffix={slotsElements.suffix ? <slotsElements.suffix /> : null}
       value={value}
       onChange={onChange}
       onClear={() => {
diff --git a/packages/arco-lib/src/components/Layout.tsx b/packages/arco-lib/src/components/Layout.tsx
index e593c79e..00c8f699 100644
--- a/packages/arco-lib/src/components/Layout.tsx
+++ b/packages/arco-lib/src/components/Layout.tsx
@@ -48,7 +48,12 @@ export const Layout = implementRuntimeComponent({
     }),
     state: LayoutStateSpec,
     methods: {},
-    slots: ['header', 'content', 'sidebar', 'footer'],
+    slots: {
+      header: { slotProps: Type.Object({}) },
+      content: { slotProps: Type.Object({}) },
+      sidebar: { slotProps: Type.Object({}) },
+      footer: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['layout', 'header', 'content', 'sidebar', 'footer'],
     events: [],
   },
@@ -99,16 +104,24 @@ export const Layout = implementRuntimeComponent({
   return (
     <BaseLayout {...baseProps}>
       {showHeader && (
-        <BaseLayout.Header {...headerProps}>{slotsElements.header}</BaseLayout.Header>
+        <BaseLayout.Header {...headerProps}>
+          {slotsElements.header ? <slotsElements.header /> : null}
+        </BaseLayout.Header>
       )}
       <BaseLayout>
         {showSideBar && (
-          <BaseLayout.Sider {...siderProps}>{slotsElements.sidebar}</BaseLayout.Sider>
+          <BaseLayout.Sider {...siderProps}>
+            {slotsElements.sidebar ? <slotsElements.sidebar /> : null}
+          </BaseLayout.Sider>
         )}
-        <BaseLayout.Content {...contentProps}>{slotsElements.content}</BaseLayout.Content>
+        <BaseLayout.Content {...contentProps}>
+          {slotsElements.content ? <slotsElements.content /> : null}
+        </BaseLayout.Content>
       </BaseLayout>
       {showFooter && (
-        <BaseLayout.Footer {...footerProps}>{slotsElements.footer}</BaseLayout.Footer>
+        <BaseLayout.Footer {...footerProps}>
+          {slotsElements.footer ? <slotsElements.footer /> : null}
+        </BaseLayout.Footer>
       )}
     </BaseLayout>
   );
diff --git a/packages/arco-lib/src/components/Link.tsx b/packages/arco-lib/src/components/Link.tsx
index 0456d6e8..b765a5eb 100644
--- a/packages/arco-lib/src/components/Link.tsx
+++ b/packages/arco-lib/src/components/Link.tsx
@@ -31,7 +31,7 @@ const options = {
     properties: LinkPropsSpec,
     state: LinkStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/arco-lib/src/components/Mentions.tsx b/packages/arco-lib/src/components/Mentions.tsx
index 908cda45..52431e46 100644
--- a/packages/arco-lib/src/components/Mentions.tsx
+++ b/packages/arco-lib/src/components/Mentions.tsx
@@ -35,7 +35,7 @@ const options = {
     properties: MentionsPropsSpec,
     state: MentionsStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onChange', 'onClear', 'onPressEnter', 'onFocus', 'onBlur'],
   },
diff --git a/packages/arco-lib/src/components/Menu.tsx b/packages/arco-lib/src/components/Menu.tsx
index 2151e531..a8bea57f 100644
--- a/packages/arco-lib/src/components/Menu.tsx
+++ b/packages/arco-lib/src/components/Menu.tsx
@@ -43,7 +43,7 @@ export const Menu = implementRuntimeComponent({
         active: Type.String(),
       }),
     },
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onClick'],
   },
diff --git a/packages/arco-lib/src/components/Modal.tsx b/packages/arco-lib/src/components/Modal.tsx
index aa4ee585..4529cdd4 100644
--- a/packages/arco-lib/src/components/Modal.tsx
+++ b/packages/arco-lib/src/components/Modal.tsx
@@ -39,7 +39,10 @@ export const Modal = implementRuntimeComponent({
       openModal: Type.String(),
       closeModal: Type.String(),
     },
-    slots: ['content', 'footer'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+      footer: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['afterOpen', 'afterClose', 'onCancel', 'onOk'],
   },
@@ -87,12 +90,14 @@ export const Modal = implementRuntimeComponent({
         }}
         afterClose={afterClose}
         afterOpen={afterOpen}
-        footer={slotsElements.footer}
+        footer={slotsElements.footer ? <slotsElements.footer /> : null}
         className={css(customStyle?.content)}
         mountOnEnter={true}
         {...cProps}
       >
-        <div ref={contentRef}>{slotsElements.content}</div>
+        <div ref={contentRef}>
+          {slotsElements.content ? <slotsElements.content /> : null}
+        </div>
       </BaseModal>
     </ConfigProvider>
   );
diff --git a/packages/arco-lib/src/components/Pagination.tsx b/packages/arco-lib/src/components/Pagination.tsx
index b9aeb3ba..8bd4b071 100644
--- a/packages/arco-lib/src/components/Pagination.tsx
+++ b/packages/arco-lib/src/components/Pagination.tsx
@@ -39,7 +39,7 @@ const options = {
     properties: PaginationPropsSpec,
     state: PaginationStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onChange'],
   },
diff --git a/packages/arco-lib/src/components/PasswordInput.tsx b/packages/arco-lib/src/components/PasswordInput.tsx
index 6d0202ae..a1b62e18 100644
--- a/packages/arco-lib/src/components/PasswordInput.tsx
+++ b/packages/arco-lib/src/components/PasswordInput.tsx
@@ -39,7 +39,7 @@ const options = {
     properties: InputPropsSpec,
     state: InputStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['input'],
     events: ['onChange', 'onBlur', 'onFocus', 'onPressEnter'],
   },
diff --git a/packages/arco-lib/src/components/Popover.tsx b/packages/arco-lib/src/components/Popover.tsx
index 4889d2ec..47966b5a 100644
--- a/packages/arco-lib/src/components/Popover.tsx
+++ b/packages/arco-lib/src/components/Popover.tsx
@@ -37,7 +37,10 @@ const options = {
       openPopover: Type.String(),
       closePopover: Type.String(),
     },
-    slots: ['popupContent', 'content'],
+    slots: {
+      popupContent: { slotProps: Type.Object({}) },
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -64,21 +67,25 @@ export const Popover = implementRuntimeComponent(options)(props => {
     <BasePopover
       className={css(customStyle?.content)}
       {...cProps}
-      content={slotsElements.popupContent}
+      content={slotsElements.popupContent ? <slotsElements.popupContent /> : null}
     >
-      <span ref={elementRef}>{slotsElements.content || <Button>Hover Me</Button>}</span>
+      <span ref={elementRef}>
+        {slotsElements.content ? <slotsElements.content /> : <Button>Hover Me</Button>}
+      </span>
     </BasePopover>
   ) : (
     <BasePopover
       className={css(customStyle?.content)}
       {...cProps}
-      content={slotsElements.popupContent}
+      content={slotsElements.popupContent ? <slotsElements.popupContent /> : null}
       popupVisible={popupVisible}
       onVisibleChange={visible => {
         setPopupVisible(visible);
       }}
     >
-      <span ref={elementRef}>{slotsElements.content || <Button>Hover Me</Button>}</span>
+      <span ref={elementRef}>
+        {slotsElements.content ? <slotsElements.content /> : <Button>Hover Me</Button>}
+      </span>
     </BasePopover>
   );
 });
diff --git a/packages/arco-lib/src/components/Progress.tsx b/packages/arco-lib/src/components/Progress.tsx
index 5dc6ba14..722dde94 100644
--- a/packages/arco-lib/src/components/Progress.tsx
+++ b/packages/arco-lib/src/components/Progress.tsx
@@ -17,7 +17,7 @@ const exampleProperties: Static<typeof ProgressPropsSpec> = {
   percent: 20,
   width: 100,
   size: 'default',
-  animation:false,
+  animation: false,
 };
 
 const options = {
@@ -35,17 +35,22 @@ const options = {
     properties: ProgressPropsSpec,
     state: ProgressStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
 };
 
 export const Progress = implementRuntimeComponent(options)(props => {
-  const { color,...cProps } = getComponentProps(props);
+  const { color, ...cProps } = getComponentProps(props);
   const { customStyle, elementRef } = props;
 
   return (
-    <BaseProgress ref={elementRef} color={cProps.status==='normal'?color:''} className={css(customStyle?.content)} {...cProps} />
+    <BaseProgress
+      ref={elementRef}
+      color={cProps.status === 'normal' ? color : ''}
+      className={css(customStyle?.content)}
+      {...cProps}
+    />
   );
 });
diff --git a/packages/arco-lib/src/components/Radio.tsx b/packages/arco-lib/src/components/Radio.tsx
index b1dc8ca4..beb56a74 100644
--- a/packages/arco-lib/src/components/Radio.tsx
+++ b/packages/arco-lib/src/components/Radio.tsx
@@ -44,7 +44,7 @@ const options = {
         value: Type.String(),
       }),
     },
-    slots: [],
+    slots: {},
     styleSlots: ['group'],
     events: ['onChange'],
   },
diff --git a/packages/arco-lib/src/components/Select.tsx b/packages/arco-lib/src/components/Select.tsx
index c988da17..1db7e0ed 100644
--- a/packages/arco-lib/src/components/Select.tsx
+++ b/packages/arco-lib/src/components/Select.tsx
@@ -50,7 +50,9 @@ export const Select = implementRuntimeComponent({
     properties: SelectPropsSpec,
     state: SelectStateSpec,
     methods: {},
-    slots: ['dropdownRenderSlot'],
+    slots: {
+      dropdownRenderSlot: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content', 'dropdownRenderWrap'],
     events: ['onChange', 'onClear', 'onBlur', 'onFocus'],
   },
@@ -86,7 +88,7 @@ export const Select = implementRuntimeComponent({
       onChange={v => {
         setValue(v);
         mergeState({
-          value:v,
+          value: v,
         });
         callbackMap?.onChange?.();
       }}
@@ -97,7 +99,9 @@ export const Select = implementRuntimeComponent({
         return (
           <div className={css(customStyle?.dropdownRenderWrap)}>
             {menu}
-            {slotsElements.dropdownRenderSlot}
+            {slotsElements.dropdownRenderSlot ? (
+              <slotsElements.dropdownRenderSlot />
+            ) : null}
           </div>
         );
       }}
diff --git a/packages/arco-lib/src/components/Skeleton.tsx b/packages/arco-lib/src/components/Skeleton.tsx
index 1fd35959..bafeb6c0 100644
--- a/packages/arco-lib/src/components/Skeleton.tsx
+++ b/packages/arco-lib/src/components/Skeleton.tsx
@@ -30,7 +30,9 @@ const options = {
     properties: SkeletonPropsSpec,
     state: SkeletonStateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -42,7 +44,7 @@ export const Skeleton = implementRuntimeComponent(options)(props => {
 
   return (
     <BaseSkeleton ref={elementRef} className={css(customStyle?.content)} {...cProps}>
-      {slotsElements.content}
+      {slotsElements.content ? <slotsElements.content /> : null}
     </BaseSkeleton>
   );
 });
diff --git a/packages/arco-lib/src/components/Space.tsx b/packages/arco-lib/src/components/Space.tsx
index b9e9d5fb..e78d9dd1 100644
--- a/packages/arco-lib/src/components/Space.tsx
+++ b/packages/arco-lib/src/components/Space.tsx
@@ -31,7 +31,9 @@ export const Space = implementRuntimeComponent({
     properties: SpacePropsSpec,
     state: SpaceStateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onClick'],
   },
@@ -41,7 +43,7 @@ export const Space = implementRuntimeComponent({
 
   return (
     <BaseSpace ref={elementRef} className={css(customStyle?.content)} {...cProps}>
-      {slotsElements.content}
+      {slotsElements.content ? <slotsElements.content /> : null}
     </BaseSpace>
   );
 });
diff --git a/packages/arco-lib/src/components/Steps.tsx b/packages/arco-lib/src/components/Steps.tsx
index d6a7cd02..efa89282 100644
--- a/packages/arco-lib/src/components/Steps.tsx
+++ b/packages/arco-lib/src/components/Steps.tsx
@@ -42,7 +42,9 @@ const options = {
     properties: StepsPropsSpec,
     state: StepsStateSpec,
     methods: {},
-    slots: ['icons'],
+    slots: {
+      icons: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -65,7 +67,7 @@ export const Steps = implementRuntimeComponent(options)(props => {
         items.map((stepItem: StepItem, idx: number) => {
           return (
             <BaseSteps.Step
-              icon={slotsElements.icons}
+              icon={slotsElements.icons ? <slotsElements.icons /> : null}
               key={idx}
               title={stepItem.title}
               description={stepItem.description}
diff --git a/packages/arco-lib/src/components/Switch.tsx b/packages/arco-lib/src/components/Switch.tsx
index 8bbd3b62..b169b2fe 100644
--- a/packages/arco-lib/src/components/Switch.tsx
+++ b/packages/arco-lib/src/components/Switch.tsx
@@ -36,7 +36,7 @@ const options = {
     properties: SwitchPropsSpec,
     state: SwitchStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onChange'],
   },
diff --git a/packages/arco-lib/src/components/Table.tsx b/packages/arco-lib/src/components/Table.tsx
index 0640f559..cc40eeef 100644
--- a/packages/arco-lib/src/components/Table.tsx
+++ b/packages/arco-lib/src/components/Table.tsx
@@ -196,7 +196,7 @@ export const Table = implementRuntimeComponent({
     properties: TablePropsSpec,
     state: TableStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onRowClick'],
   },
diff --git a/packages/arco-lib/src/components/Tabs.tsx b/packages/arco-lib/src/components/Tabs.tsx
index 94e35640..00520696 100644
--- a/packages/arco-lib/src/components/Tabs.tsx
+++ b/packages/arco-lib/src/components/Tabs.tsx
@@ -39,7 +39,13 @@ export const Tabs = implementRuntimeComponent({
         activeTab: Type.Number(),
       }),
     },
-    slots: ['content'],
+    slots: {
+      content: {
+        slotProps: Type.Object({
+          tabIndex: Type.Number(),
+        }),
+      },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -60,10 +66,6 @@ export const Tabs = implementRuntimeComponent({
     }
   }, [getElement, ref]);
 
-  const slots = Array.isArray(slotsElements.content)
-    ? slotsElements.content
-    : [slotsElements.content];
-
   useEffect(() => {
     subscribeMethods({
       setActiveTab: ({ activeTab }) => {
@@ -85,8 +87,8 @@ export const Tabs = implementRuntimeComponent({
       ref={ref}
     >
       {tabNames.map((tabName, idx) => (
-        <TabPane key={idx} title={tabName}>
-          {slots[idx]}
+        <TabPane key={String(idx)} title={tabName}>
+          {slotsElements?.content ? <slotsElements.content tabIndex={idx} /> : null}
         </TabPane>
       ))}
     </BaseTabs>
diff --git a/packages/arco-lib/src/components/TextArea.tsx b/packages/arco-lib/src/components/TextArea.tsx
index 248cb824..8f20f043 100644
--- a/packages/arco-lib/src/components/TextArea.tsx
+++ b/packages/arco-lib/src/components/TextArea.tsx
@@ -41,7 +41,7 @@ const options = {
     properties: TextAreaPropsSpec,
     state: TextAreaStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['TextArea'],
     events: ['onChange', 'onBlur', 'onFocus', 'onClear', 'onPressEnter'],
   },
diff --git a/packages/arco-lib/src/components/Timeline.tsx b/packages/arco-lib/src/components/Timeline.tsx
index 3e3b47e3..9eba37b9 100644
--- a/packages/arco-lib/src/components/Timeline.tsx
+++ b/packages/arco-lib/src/components/Timeline.tsx
@@ -61,7 +61,7 @@ const options = {
     properties: TimelinePropsSpec,
     state: TimelineStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/arco-lib/src/components/Tooltip.tsx b/packages/arco-lib/src/components/Tooltip.tsx
index c7ecaf85..19e0fb25 100644
--- a/packages/arco-lib/src/components/Tooltip.tsx
+++ b/packages/arco-lib/src/components/Tooltip.tsx
@@ -35,7 +35,9 @@ const options = {
       openTooltip: Type.String(),
       closeTooltip: Type.String(),
     },
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -67,13 +69,17 @@ export const Tooltip = implementRuntimeComponent(options)(props => {
         popupVisible={popupVisible}
       >
         {/* need the child node of Tooltip accepts onMouseEnter, onMouseLeave, onFocus, onClick events */}
-        <span ref={elementRef}>{slotsElements.content || <Button>Hover Me</Button>}</span>
+        <span ref={elementRef}>
+          {slotsElements.content ? <slotsElements.content /> : <Button>Hover Me</Button>}
+        </span>
       </BaseTooltip>
     </div>
   ) : (
     <div>
       <BaseTooltip className={css(customStyle?.content)} {...cProps}>
-        <span ref={elementRef}>{slotsElements.content || <Button>Hover Me</Button>}</span>
+        <span ref={elementRef}>
+          {slotsElements.content ? <slotsElements.content /> : <Button>Hover Me</Button>}
+        </span>
       </BaseTooltip>
     </div>
   );
diff --git a/packages/arco-lib/src/components/Tree.tsx b/packages/arco-lib/src/components/Tree.tsx
index e64e5097..0fd5168f 100644
--- a/packages/arco-lib/src/components/Tree.tsx
+++ b/packages/arco-lib/src/components/Tree.tsx
@@ -87,7 +87,7 @@ export const Tree = implementRuntimeComponent({
     properties: TreePropsSpec,
     state: TreeStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onSelect'],
   },
diff --git a/packages/arco-lib/src/components/TreeSelect.tsx b/packages/arco-lib/src/components/TreeSelect.tsx
index a6e0c4e0..27fc434b 100644
--- a/packages/arco-lib/src/components/TreeSelect.tsx
+++ b/packages/arco-lib/src/components/TreeSelect.tsx
@@ -69,7 +69,7 @@ const options = {
     properties: TreeSelectPropsSpec,
     state: TreeSelectStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onChange'],
   },
diff --git a/packages/arco-lib/src/sunmao-helper.ts b/packages/arco-lib/src/sunmao-helper.ts
index 96e5b02f..10dc1a71 100644
--- a/packages/arco-lib/src/sunmao-helper.ts
+++ b/packages/arco-lib/src/sunmao-helper.ts
@@ -3,6 +3,7 @@
 import { ComponentMetadata } from '@sunmao-ui/core/lib/metadata';
 import { ComponentImplProps } from '@sunmao-ui/runtime';
 import { TLiteral, Type } from '@sinclair/typebox';
+import { SlotSchema } from '@sunmao-ui/core';
 
 export type IntoStringUnion<T> = {
   [K in keyof T]: T[K] extends string ? TLiteral<T[K]> : never;
@@ -34,11 +35,11 @@ export const getComponentProps = <
   T,
   TState,
   TMethods,
-  KSlot extends string,
+  TSlots extends Record<string, SlotSchema>,
   KStyleSlot extends string,
   KEvent extends string
 >(
-  props: T & ComponentImplProps<TState, TMethods, KSlot, KStyleSlot, KEvent>
+  props: T & ComponentImplProps<TState, TMethods, TSlots, KStyleSlot, KEvent>
 ) => {
   const {
     /* eslint-disable @typescript-eslint/no-unused-vars */
diff --git a/packages/chakra-ui-lib/src/components/Box.tsx b/packages/chakra-ui-lib/src/components/Box.tsx
index 45af513f..10461923 100644
--- a/packages/chakra-ui-lib/src/components/Box.tsx
+++ b/packages/chakra-ui-lib/src/components/Box.tsx
@@ -144,7 +144,9 @@ export default implementRuntimeComponent({
     properties: StyleSpec,
     state: Type.Object({}),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -164,7 +166,7 @@ export default implementRuntimeComponent({
       `}
       ref={elementRef}
     >
-      {slotsElements.content}
+      {slotsElements.content ? <slotsElements.content /> : null}
     </BaseBox>
   );
 });
diff --git a/packages/chakra-ui-lib/src/components/Button.tsx b/packages/chakra-ui-lib/src/components/Button.tsx
index 66afbd41..be43929c 100644
--- a/packages/chakra-ui-lib/src/components/Button.tsx
+++ b/packages/chakra-ui-lib/src/components/Button.tsx
@@ -50,7 +50,7 @@ export default implementRuntimeComponent({
     methods: {
       click: undefined,
     },
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onClick'],
   },
diff --git a/packages/chakra-ui-lib/src/components/Checkbox.tsx b/packages/chakra-ui-lib/src/components/Checkbox.tsx
index 385b514a..3f87bbbb 100644
--- a/packages/chakra-ui-lib/src/components/Checkbox.tsx
+++ b/packages/chakra-ui-lib/src/components/Checkbox.tsx
@@ -100,7 +100,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: CheckboxStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
index dfb666d5..6b9ca944 100644
--- a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
+++ b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
@@ -43,7 +43,9 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: [],
     events: [],
   },
@@ -61,7 +63,7 @@ export default implementRuntimeComponent({
         isDisabled={isDisabled}
         onChange={val => setValue(val)}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </BaseCheckboxGroup>
     </Box>
   );
diff --git a/packages/chakra-ui-lib/src/components/Dialog.tsx b/packages/chakra-ui-lib/src/components/Dialog.tsx
index 548a2ada..ede412de 100644
--- a/packages/chakra-ui-lib/src/components/Dialog.tsx
+++ b/packages/chakra-ui-lib/src/components/Dialog.tsx
@@ -76,7 +76,9 @@ export default implementRuntimeComponent({
       confirmDialog: undefined,
       cancelDialog: undefined,
     },
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['cancelDialog', 'confirmDialog'],
   },
@@ -160,7 +162,9 @@ export default implementRuntimeComponent({
             ref={contentRef}
           >
             <AlertDialogHeader>{title}</AlertDialogHeader>
-            <AlertDialogBody>{slotsElements.content}</AlertDialogBody>
+            <AlertDialogBody>
+              {slotsElements.content ? <slotsElements.content /> : null}
+            </AlertDialogBody>
 
             <AlertDialogFooter>
               <Button
diff --git a/packages/chakra-ui-lib/src/components/Divider.tsx b/packages/chakra-ui-lib/src/components/Divider.tsx
index 425698bc..8ba92ddb 100644
--- a/packages/chakra-ui-lib/src/components/Divider.tsx
+++ b/packages/chakra-ui-lib/src/components/Divider.tsx
@@ -21,7 +21,7 @@ export default implementRuntimeComponent({
     properties: Type.Object({}),
     state: Type.Object({}),
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Form/Form.tsx b/packages/chakra-ui-lib/src/components/Form/Form.tsx
index 2d4863ea..6bcab7ed 100644
--- a/packages/chakra-ui-lib/src/components/Form/Form.tsx
+++ b/packages/chakra-ui-lib/src/components/Form/Form.tsx
@@ -37,7 +37,9 @@ export default implementRuntimeComponent({
     methods: {
       resetForm: undefined,
     },
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: ['onSubmit'],
   },
@@ -158,7 +160,7 @@ export default implementRuntimeComponent({
         `}
         ref={elementRef}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
         {hideSubmit ? undefined : (
           <Button
             marginInlineStart="auto !important"
diff --git a/packages/chakra-ui-lib/src/components/Form/FormControl.tsx b/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
index 9a76562f..88c5254e 100644
--- a/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
+++ b/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
@@ -66,7 +66,9 @@ export default implementRuntimeComponent({
       value: Type.Any(),
     }),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -149,7 +151,7 @@ export default implementRuntimeComponent({
     }, [inputId, fieldName, isInvalid, isRequired, inputValue, mergeState]);
 
     const placeholder = <Text color="gray.200">Please Add Input Here</Text>;
-    const slotView = slotsElements.content;
+    const slotView = slotsElements.content ? <slotsElements.content /> : null;
 
     return (
       <FormControl
diff --git a/packages/chakra-ui-lib/src/components/HStack.tsx b/packages/chakra-ui-lib/src/components/HStack.tsx
index d339ce72..470988d7 100644
--- a/packages/chakra-ui-lib/src/components/HStack.tsx
+++ b/packages/chakra-ui-lib/src/components/HStack.tsx
@@ -41,7 +41,9 @@ export default implementRuntimeComponent({
   spec: {
     properties: PropsSpec,
     state: Type.Object({}),
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     methods: {},
     events: [],
@@ -72,7 +74,7 @@ export default implementRuntimeComponent({
         ref={elementRef}
         {...{ direction, wrap, align, justify, spacing }}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </BaseHStack>
     );
   }
diff --git a/packages/chakra-ui-lib/src/components/Image.tsx b/packages/chakra-ui-lib/src/components/Image.tsx
index 988a1e02..dc8b27d5 100644
--- a/packages/chakra-ui-lib/src/components/Image.tsx
+++ b/packages/chakra-ui-lib/src/components/Image.tsx
@@ -159,7 +159,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: ['onLoad', 'onError'],
   },
diff --git a/packages/chakra-ui-lib/src/components/Input.tsx b/packages/chakra-ui-lib/src/components/Input.tsx
index 66b898eb..6c62fa15 100644
--- a/packages/chakra-ui-lib/src/components/Input.tsx
+++ b/packages/chakra-ui-lib/src/components/Input.tsx
@@ -133,7 +133,7 @@ export default implementRuntimeComponent({
       }),
       resetInputValue: undefined,
     },
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Kbd.tsx b/packages/chakra-ui-lib/src/components/Kbd.tsx
index 11bcc956..3f2d5382 100644
--- a/packages/chakra-ui-lib/src/components/Kbd.tsx
+++ b/packages/chakra-ui-lib/src/components/Kbd.tsx
@@ -35,7 +35,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Link.tsx b/packages/chakra-ui-lib/src/components/Link.tsx
index 1c08e0c0..4e040ae2 100644
--- a/packages/chakra-ui-lib/src/components/Link.tsx
+++ b/packages/chakra-ui-lib/src/components/Link.tsx
@@ -43,7 +43,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: Type.Object({}),
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/List.tsx b/packages/chakra-ui-lib/src/components/List.tsx
index 163e6756..6cd31916 100644
--- a/packages/chakra-ui-lib/src/components/List.tsx
+++ b/packages/chakra-ui-lib/src/components/List.tsx
@@ -50,7 +50,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     methods: {},
     state: Type.Object({}),
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/MultiSelect.tsx b/packages/chakra-ui-lib/src/components/MultiSelect.tsx
index e7ef8d0c..631ad623 100644
--- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx
+++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx
@@ -115,7 +115,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/NumberInput.tsx b/packages/chakra-ui-lib/src/components/NumberInput.tsx
index 26b0d767..c73496fe 100644
--- a/packages/chakra-ui-lib/src/components/NumberInput.tsx
+++ b/packages/chakra-ui-lib/src/components/NumberInput.tsx
@@ -54,51 +54,58 @@ const PropsSpec = Type.Object({
       category: APPEARANCE,
     }
   ),
-  customerIncrement: Type.Optional(Type.Object(
-    {
-      bg: Type.String({
-        title: 'Background',
-      }),
-      children: Type.String({
-        title: 'Text',
-      }),
-      _active: Type.Object({
+  customerIncrement: Type.Optional(
+    Type.Object(
+      {
         bg: Type.String({
-          title: 'Active Background',
+          title: 'Background',
         }),
-      }, {
-        title: 'Active',
-      }),
-    },
-    {
-      title: 'Increment Button',
-      category: APPEARANCE,
-    }
-  )),
-  customerDecrement: Type.Optional(Type.Object(
-    {
-      bg: Type.String({
-        title: 'Background',
-      }),
-      children: Type.String({
-        title: 'Text',
-      }),
-      _active: Type.Object(
-        {
-          bg: Type.String({
-            title: 'Active Background',
-          }),
-        },
-        {
-          title: 'Active',
-        }
-      ),
-    },
-    {
-      title: 'Decrement Button',
-      category: APPEARANCE,
-    }
-  )),
+        children: Type.String({
+          title: 'Text',
+        }),
+        _active: Type.Object(
+          {
+            bg: Type.String({
+              title: 'Active Background',
+            }),
+          },
+          {
+            title: 'Active',
+          }
+        ),
+      },
+      {
+        title: 'Increment Button',
+        category: APPEARANCE,
+      }
+    )
+  ),
+  customerDecrement: Type.Optional(
+    Type.Object(
+      {
+        bg: Type.String({
+          title: 'Background',
+        }),
+        children: Type.String({
+          title: 'Text',
+        }),
+        _active: Type.Object(
+          {
+            bg: Type.String({
+              title: 'Active Background',
+            }),
+          },
+          {
+            title: 'Active',
+          }
+        ),
+      },
+      {
+        title: 'Decrement Button',
+        category: APPEARANCE,
+      }
+    )
+  ),
 });
 
 const StateSpec = Type.Object({
@@ -137,7 +144,7 @@ export default implementRuntimeComponent({
       }),
       resetInputValue: undefined,
     },
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Radio.tsx b/packages/chakra-ui-lib/src/components/Radio.tsx
index a7e3f2f7..9e75f99a 100644
--- a/packages/chakra-ui-lib/src/components/Radio.tsx
+++ b/packages/chakra-ui-lib/src/components/Radio.tsx
@@ -87,7 +87,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/RadioGroup.tsx b/packages/chakra-ui-lib/src/components/RadioGroup.tsx
index 1c17f6eb..f607394c 100644
--- a/packages/chakra-ui-lib/src/components/RadioGroup.tsx
+++ b/packages/chakra-ui-lib/src/components/RadioGroup.tsx
@@ -42,7 +42,9 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -67,7 +69,7 @@ export default implementRuntimeComponent({
         `}
         ref={elementRef}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </BaseRadioGroup>
     );
   }
diff --git a/packages/chakra-ui-lib/src/components/Select.tsx b/packages/chakra-ui-lib/src/components/Select.tsx
index 91c8a3ad..7dab6717 100644
--- a/packages/chakra-ui-lib/src/components/Select.tsx
+++ b/packages/chakra-ui-lib/src/components/Select.tsx
@@ -127,7 +127,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Stack.tsx b/packages/chakra-ui-lib/src/components/Stack.tsx
index 408f9c98..8d179793 100644
--- a/packages/chakra-ui-lib/src/components/Stack.tsx
+++ b/packages/chakra-ui-lib/src/components/Stack.tsx
@@ -82,14 +82,16 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: Type.Object({}),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: [],
     events: [],
   },
 })(({ direction, wrap, align, justify, spacing, slotsElements, elementRef }) => {
   return (
     <BaseStack {...{ direction, wrap, align, justify, spacing }} ref={elementRef}>
-      {slotsElements.content}
+      {slotsElements.content ? <slotsElements.content /> : null}
     </BaseStack>
   );
 });
diff --git a/packages/chakra-ui-lib/src/components/Switch.tsx b/packages/chakra-ui-lib/src/components/Switch.tsx
index 2e2ac4d1..3a8739d8 100644
--- a/packages/chakra-ui-lib/src/components/Switch.tsx
+++ b/packages/chakra-ui-lib/src/components/Switch.tsx
@@ -48,7 +48,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Table/spec.ts b/packages/chakra-ui-lib/src/components/Table/spec.ts
index 8a9ce060..5d141e65 100644
--- a/packages/chakra-ui-lib/src/components/Table/spec.ts
+++ b/packages/chakra-ui-lib/src/components/Table/spec.ts
@@ -33,8 +33,8 @@ const exampleProperties = {
       type: 'text',
       displayValue: '',
       buttonConfig: {
-        handlers: []
-      }
+        handlers: [],
+      },
     },
   ],
   majorKey: 'id',
@@ -62,7 +62,7 @@ export const implementTable = implementRuntimeComponent({
     properties: PropsSpec,
     state: TableStateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: [],
     events: [],
   },
diff --git a/packages/chakra-ui-lib/src/components/Tabs.tsx b/packages/chakra-ui-lib/src/components/Tabs.tsx
index 68ddb2e1..efe2fcee 100644
--- a/packages/chakra-ui-lib/src/components/Tabs.tsx
+++ b/packages/chakra-ui-lib/src/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
 import {
   Tabs as BaseTabs,
diff --git a/packages/chakra-ui-lib/src/components/Tooltip.tsx b/packages/chakra-ui-lib/src/components/Tooltip.tsx
index 185a9857..9963bcc1 100644
--- a/packages/chakra-ui-lib/src/components/Tooltip.tsx
+++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx
@@ -82,7 +82,9 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: Type.Object({}),
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: [],
     events: [],
   },
@@ -113,7 +115,7 @@ export default implementRuntimeComponent({
         shouldWrapChildren={shouldWrapChildren}
         ref={elementRef}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </Tooltip>
     );
   }
diff --git a/packages/chakra-ui-lib/src/components/VStack.tsx b/packages/chakra-ui-lib/src/components/VStack.tsx
index da321850..39455cc6 100644
--- a/packages/chakra-ui-lib/src/components/VStack.tsx
+++ b/packages/chakra-ui-lib/src/components/VStack.tsx
@@ -41,7 +41,9 @@ export default implementRuntimeComponent({
   spec: {
     properties: PropsSpec,
     state: Type.Object({}),
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     methods: {},
     events: [],
@@ -72,7 +74,7 @@ export default implementRuntimeComponent({
         ref={elementRef}
         {...{ direction, wrap, align, justify, spacing }}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </BaseVStack>
     );
   }
diff --git a/packages/core/__tests__/component.spec.ts b/packages/core/__tests__/component.spec.ts
index f25a581a..92deb7a1 100644
--- a/packages/core/__tests__/component.spec.ts
+++ b/packages/core/__tests__/component.spec.ts
@@ -33,7 +33,7 @@ describe('component', () => {
           },
         ],
         styleSlots: ['content'],
-        slots: [],
+        slots: {},
         events: [],
       },
     });
diff --git a/packages/runtime/src/components/core/Dummy.tsx b/packages/runtime/src/components/core/Dummy.tsx
index 9fde73f6..63fd5cea 100644
--- a/packages/runtime/src/components/core/Dummy.tsx
+++ b/packages/runtime/src/components/core/Dummy.tsx
@@ -20,7 +20,7 @@ export default implementRuntimeComponent({
     properties: Type.Object({}),
     state: Type.Object({}),
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: [],
     events: [],
   },
diff --git a/packages/runtime/src/components/core/FileInput.tsx b/packages/runtime/src/components/core/FileInput.tsx
index 084741b2..e63134af 100644
--- a/packages/runtime/src/components/core/FileInput.tsx
+++ b/packages/runtime/src/components/core/FileInput.tsx
@@ -2,7 +2,7 @@ import { Type } from '@sinclair/typebox';
 import { css } from '@emotion/css';
 import { implementRuntimeComponent } from '../../utils/buildKit';
 import React, { useEffect, useRef } from 'react';
-import { CORE_VERSION }  from '@sunmao-ui/shared';
+import { CORE_VERSION } from '@sunmao-ui/shared';
 
 const PropsSpec = Type.Object({
   multiple: Type.Boolean({
@@ -57,7 +57,9 @@ export default implementRuntimeComponent({
     methods: {
       selectFile: Type.Object({}),
     },
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -105,7 +107,7 @@ export default implementRuntimeComponent({
           accept={fileTypes.join(',')}
           onChange={onChange}
         />
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </div>
     );
   }
diff --git a/packages/runtime/src/components/core/GridLayout.tsx b/packages/runtime/src/components/core/GridLayout.tsx
index 03690563..a17cffc8 100644
--- a/packages/runtime/src/components/core/GridLayout.tsx
+++ b/packages/runtime/src/components/core/GridLayout.tsx
@@ -54,7 +54,9 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: {},
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
@@ -78,7 +80,7 @@ export default implementRuntimeComponent({
           ${customStyle?.content}
         `}
       >
-        {slotsElements.content}
+        {slotsElements.content ? <slotsElements.content /> : null}
       </BaseGridLayout>
     </Suspense>
   );
diff --git a/packages/runtime/src/components/core/ModuleContainer.tsx b/packages/runtime/src/components/core/ModuleContainer.tsx
index 0239d830..b6e1f31a 100644
--- a/packages/runtime/src/components/core/ModuleContainer.tsx
+++ b/packages/runtime/src/components/core/ModuleContainer.tsx
@@ -23,7 +23,7 @@ export default implementRuntimeComponent({
     properties: ModuleSpec,
     state: {},
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: [],
     events: [],
   },
diff --git a/packages/runtime/src/components/core/Router/index.tsx b/packages/runtime/src/components/core/Router/index.tsx
index a98d72e1..bb024b81 100644
--- a/packages/runtime/src/components/core/Router/index.tsx
+++ b/packages/runtime/src/components/core/Router/index.tsx
@@ -56,14 +56,10 @@ export default implementRuntimeComponent({
     state: Type.Object({}),
     methods: {},
     // route slots are dynamic
-    slots: [],
+    slots: {},
     styleSlots: [],
     events: [],
   },
-})((props) => {
-  return (
-    <Switch
-      {...props}
-     />
-  );
+})(props => {
+  return <Switch {...props} />;
 });
diff --git a/packages/runtime/src/components/core/Stack.tsx b/packages/runtime/src/components/core/Stack.tsx
index 1a000b07..df53c0ed 100644
--- a/packages/runtime/src/components/core/Stack.tsx
+++ b/packages/runtime/src/components/core/Stack.tsx
@@ -95,14 +95,16 @@ export default implementRuntimeComponent({
     properties: StackPropertySpec,
     state: StateSpec,
     methods: {},
-    slots: ['content'],
+    slots: {
+      content: { slotProps: Type.Object({}) },
+    },
     styleSlots: ['content'],
     events: [],
   },
 })(({ customStyle, elementRef, slotsElements, ...restProps }) => {
   return (
     <Stack cssStyle={customStyle?.content} ref={elementRef} {...restProps}>
-      {slotsElements.content}
+      {slotsElements.content ? <slotsElements.content /> : null}
     </Stack>
   );
 });
diff --git a/packages/runtime/src/components/core/Text.tsx b/packages/runtime/src/components/core/Text.tsx
index 5c7f0932..b4314da7 100644
--- a/packages/runtime/src/components/core/Text.tsx
+++ b/packages/runtime/src/components/core/Text.tsx
@@ -34,7 +34,7 @@ export default implementRuntimeComponent({
     properties: PropsSpec,
     state: StateSpec,
     methods: {},
-    slots: [],
+    slots: {},
     styleSlots: ['content'],
     events: [],
   },
diff --git a/packages/runtime/src/traits/core/index.ts b/packages/runtime/src/traits/core/index.ts
index c47c4601..6df241a7 100644
--- a/packages/runtime/src/traits/core/index.ts
+++ b/packages/runtime/src/traits/core/index.ts
@@ -2,7 +2,14 @@ export { default as arrayStateTrait, ArrayStateTraitPropertiesSpec } from './Arr
 export { default as eventTrait, EventTraitPropertiesSpec } from './Event';
 export { default as fetchTrait, FetchTraitPropertiesSpec } from './Fetch';
 export { default as hiddenTrait, HiddenTraitPropertiesSpec } from './Hidden';
-export { default as localStorageTrait, LocalStorageTraitPropertiesSpec } from './LocalStorage';
-export { default as slotTrait, SlotTraitPropertiesSpec } from './Slot';
+export {
+  default as localStorageTrait,
+  LocalStorageTraitPropertiesSpec,
+} from './LocalStorage';
+export { default as slotTrait, PropsSpec as SlotTraitPropertiesSpec } from './Slot';
 export { default as styleTrait, StyleTraitPropertiesSpec } from './Style';
-export { default as validationTrait, ValidationTraitPropertiesSpec, ValidationTraitStateSpec } from './Validation';
+export {
+  default as validationTrait,
+  ValidationTraitPropertiesSpec,
+  ValidationTraitStateSpec,
+} from './Validation';