migrate all in-tree components to the new slot spec

2025-04-12 21:50:23 +08:00 · 2022-05-11 18:14:45 +08:00 · 2022-05-11 18:14:45 +08:00 · 74bfc5ebf4
commit 74bfc5ebf4
parent 9b4cf9be0c
72 changed files with 308 additions and 188 deletions
--- 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?.();
      }}
--- 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?.();
      }}
--- 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>
  );
 });
--- 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
    >
--- 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;

--- 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'],
  },
 };
--- 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 (
--- 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 (
--- 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: [],
  },
--- 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>
  );
 });
--- 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" />
      )}
--- 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>
  );
 });
--- 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'],
  },
--- 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'],
  },
--- 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={() => {
--- 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>
  );
--- 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: [],
  },
--- 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'],
  },
--- 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'],
  },
--- 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>
  );
--- 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'],
  },
--- 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'],
  },
--- 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>
  );
 });
--- 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}
+    />
  );
 });
--- 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'],
  },
--- 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>
        );
      }}
--- 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>
  );
 });
--- 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>
  );
 });
--- 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}
--- 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'],
  },
--- 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'],
  },
--- 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>
--- 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'],
  },
--- 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: [],
  },
--- 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>
  );
--- 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'],
  },
--- 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'],
  },
--- 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 */
--- 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>
  );
 });
--- 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'],
  },
--- 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: [],
  },
--- 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>
  );
--- 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
--- 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: [],
  },
--- 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"
--- 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
--- 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>
    );
  }
--- 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'],
  },
--- 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: [],
  },
--- 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: [],
  },
--- 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: [],
  },
--- 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: [],
  },
--- 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: [],
  },
--- 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: [],
  },
--- 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: [],
  },
--- 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>
    );
  }
--- 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: [],
  },
--- 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>
  );
 });
--- 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: [],
  },
--- 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: [],
  },
--- 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,
--- 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>
    );
  }
--- 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>
    );
  }
--- 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: [],
      },
    });
--- 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: [],
  },
--- 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>
    );
  }
--- 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>
  );
--- 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: [],
  },
--- 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} />;
 });
--- 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>
  );
 });
--- 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: [],
  },
--- 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';