@alifd/chat 0.3.0-beta.8 → 0.3.0

package/es/markdown/main.scss

@@ -3,8 +3,6 @@
 $primaryColor: $color-brand1-6;
 $alternativePrimaryColor: $primaryColor;
 $mistPrimaryColor: $color-brand1-1;
-$mediumTextColor: $color-text1-3;
-$subTextColor: $color-text1-2;
 
 @mixin f-single-line() {
     overflow: hidden;
@@ -12,18 +10,20 @@ $subTextColor: $color-text1-2;
     text-overflow: ellipsis;
   }
   
-.box {
-  max-width: 100%;
-}
-
-.box img:only-child, .box video:only-child, .box .image:only-child {
+.#{$prefix}markdown {
+  img:only-child,
+  video:only-child,
+  .image:only-child
+  {
     display: inline-block;
     margin: 0;
     font-size: inherit;
     vertical-align: inherit;
-}
 
-.emoji {
+  }
+
+  max-width: 100%;
+  .emoji {
     width: 1em;
     height: 1em;
     vertical-align: text-top;
@@ -31,124 +31,119 @@ $subTextColor: $color-text1-2;
     pointer-events: none;
   }
 
-.title {
-  font-size: 16px;
-  font-weight: bolder;
-  margin-bottom: 12px;
-}
-
-.text > div {
-  color:$subTextColor;
-}
-
-.reference {
-  margin-top: 6px;
-  font-size: 12px;
-
-  &-tip {
-    display: flex;
-    margin: 0 -16px 6px 0;
-    justify-content: flex-end;
-
-    &-inner {
-      @include f-single-line();
-      background: linear-gradient(to right, transparent, $mistPrimaryColor);
-      padding: 0 16px 0 32px;
-      color: $mediumTextColor;
-      min-width: 0;
-      flex: 0 1 auto;
-      font-size: 12px;
-      line-height: 20px;
+  .title {
+    font-size: 16px;
+    font-weight: bolder;
+    margin-bottom: 12px;
+  }
+
+  .text > div {
+    color:$color-text1-2;
+  }
+
+  .reference {
+    margin-top: 6px;
+    font-size: 12px;
+
+    &-tip {
+      display: flex;
+      margin: 0 -16px 6px 0;
+      justify-content: flex-end;
+
+      &-inner {
+        @include f-single-line();
+        background: linear-gradient(to right, transparent, $mistPrimaryColor);
+        padding: 0 16px 0 32px;
+        color: $color-text1-3;
+        min-width: 0;
+        flex: 0 1 auto;
+        font-size: 12px;
+        line-height: 20px;
+      }
     }
   }
-}
-
-.trustworthyRiskAlert {
-  font-size: 12px;
-  line-height: 18px;
-  color: $subTextColor;
-  margin-bottom: 8px;
-}
-.code-block-header {
-    display: flex;
-    height:24px;
-    // margin-top: 8px;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #EAECED;
-    padding: 5px 10px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom: 1px solid #ddd;
+
+  .trustworthyRiskAlert {
+    font-size: 12px;
+    line-height: 18px;
+    color: $color-text1-2;
+    margin-bottom: 8px;
   }
-  
+  .code-block-header {
+      display: flex;
+      height:24px;
+      // margin-top: 8px;
+      justify-content: space-between;
+      align-items: center;
+      background-color: $color-fill1-2;
+      padding: 5px 10px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom: 1px solid $color-line1-2;
+  }
+    
   .code-block-language {
     font-weight: bold;
   }
-  
+    
   .code-block-copy {
-    color: var(--common_level3_base_color);
+    color: $color-text1-2;
+    background-color: transparent;
     border: none;
     border-radius: 4px;
     height: 20px;
     cursor: pointer;
+    font-size: 12px;
   }
-  
+
   pre {
-    background-color: #f8f8f8;
+    background-color: $color-fill1-2;
     border-bottom-left-radius: 14px;
     border-bottom-right-radius: 14px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0px;
     padding: 10px;
     margin-bottom: 10px;
   }
 
   .code-block-copy:hover {
-    background-color: #d2d2d2;
+    color: $color-line1-4;
   }
-
   //https://done.alibaba-inc.com/dsm/16247/theme/style/font?type=theme&themeid=126576
-:root {
-    --common_hypertitle_text_style__font_size: #{$font-size-display-3};
-    --common_largetitle_text_style__font_size: #{$font-size-display-2};
-
-    --common_h1_text_style__font_size: #{$font-size-headline};
-    --common_h2_text_style__font_size: #{$font-size-title};
-    --common_h3_text_style__font_size: 18px;
-    --common_h4_text_style__font_size: #{$font-size-subhead};
-    --common_h5_text_style__font_size: 15px;
-    --common_body_text_style__font_size: #{$font-size-body-2};
-    --common_footnote_text_style__font_size: #{$font-size-body-1};
-
-    // --common_h1_text_style__font_size: #{$s-6;
-    // --common_h2_text_style__font_size: 20px;
-    // --common_h3_text_style__font_size: 18px;
-    // --common_h4_text_style__font_size: 16px;
-    // --common_h5_text_style__font_size: 15px;
-    // --common_body_text_style__font_size: 14px;
-    // --common_footnote_text_style__font_size: 12px;
-
-    --common_yellow1_color: #{$color-data1-6}; // #F4C800
-    --common_orange1_color: #{$color-data1-5}; // #FF9200
-    --common_red1_color: #{$color-data1-4}; // #FF5219
-    --common_pink1_color: #da5388; // 
-    --common_purple1_color: #{$color-data1-3}; // #B963D3
-    --common_blue1_color:  #{$color-data1-2}; // #007FFF
-
-    --common_water1_color: #{$color-data1-8}; //浅蓝 #5AC8FA 
-    --common_olive1_color: #77912b; // #6F9200 通用草绿色
-    --common_green1_color: #4fae51; // #00B042 通用绿色
-
-    --common_level1_base_color: #{$color-text1-4};
-    --common_level2_base_color: #{$color-text1-3};
-    --common_level3_base_color: #{$color-text1-2};
-    --common_level4_base_color: #{$color-text1-1};
-
-    --common_gray1_color: #{$color-line1-1};
-    --common_gray2_color: #{$color-line1-2};
-    --common_gray3_color: #{$color-line1-3};
-    --common_gray4_color: #{$color-line1-4};
-
-    --common_gray5_color: #{$color-fill1-2};
-    --common_gray6_color: #{$color-fill1-1};
-  }
-  
+
+  // 暂时先把钉卡片用到的主题变量放在markdown组件内部进行覆盖
+  --common_hypertitle_text_style__font_size: #{$font-size-display-3};
+  --common_largetitle_text_style__font_size: #{$font-size-display-2};
+  --common_h1_text_style__font_size: #{$font-size-headline};
+  --common_h2_text_style__font_size: #{$font-size-title};
+  --common_h3_text_style__font_size: 18px;
+  --common_h4_text_style__font_size: #{$font-size-subhead};
+  --common_h5_text_style__font_size: 15px;
+  --common_body_text_style__font_size: #{$font-size-body-2};
+  --common_footnote_text_style__font_size: #{$font-size-body-1};
+
+  --common_yellow1_color: #{$color-data1-6}; // #F4C800
+  --common_orange1_color: #{$color-data1-5}; // #FF9200
+  --common_red1_color: #{$color-data1-4}; // #FF5219
+  // TODO 需要扩充主题
+  --common_pink1_color: #{$color-data1-9};; // 
+  --common_purple1_color: #{$color-data1-3}; // #B963D3
+  --common_blue1_color:  #{$color-data1-2}; // #007FFF
+
+  --common_water1_color: #{$color-data1-8}; //浅蓝 #5AC8FA 
+  --common_olive1_color: #{$color-data1-10}; // #6F9200 通用草绿色
+  --common_green1_color: #{$color-data1-7}; // #00B042 通用绿色
+
+  --common_level1_base_color: #{$color-text1-4};
+  --common_level2_base_color: #{$color-text1-3};
+  --common_level3_base_color: #{$color-text1-2};
+  --common_level4_base_color: #{$color-text1-1};
+
+  --common_gray1_color: #{$color-line1-1};
+  --common_gray2_color: #{$color-line1-2};
+  --common_gray3_color: #{$color-line1-3};
+  --common_gray4_color: #{$color-line1-4};
+
+  --common_gray5_color: #{$color-fill1-2};
+  --common_gray6_color: #{$color-fill1-1};
+}

package/es/person-picker/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/select/style';
+import '@alifd/next/lib/select/style2';
 import './main.scss';

package/es/person-picker/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/select/style';
+import '@alifd/next/lib/select/style2';
 import './main.scss';

package/es/tab/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tab/style';
+import '@alifd/next/lib/tab/style2';
 import './main.scss';

package/es/tab/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tab/style';
+import '@alifd/next/lib/tab/style2';
 import './main.scss';

package/es/tag/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tag/style';
+import '@alifd/next/lib/tag/style2';
 import './main.scss';

package/es/tag/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tag/style';
+import '@alifd/next/lib/tag/style2';
 import './main.scss';

package/es/time-picker/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/time-picker2/style';
+import '@alifd/next/lib/time-picker2/style2';

package/es/time-picker/style.js

@@ -1 +1 @@
-import '@alifd/next/lib/time-picker2/style';
+import '@alifd/next/lib/time-picker2/style2';

package/lib/button/index.js

@@ -26,7 +26,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const Button = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = 'small' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
-    return (react_1.default.createElement(next_1.Button, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button`, className), size: size, ref: ref })));
+    return (react_1.default.createElement(next_1.Button, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button ${size}`, className), size: size, ref: ref })));
 });
 const ButtonWithSub = (0, utils_1.assignSubComponent)(Button, {
     displayName: 'Button',

package/lib/button/main.scss

@@ -1,5 +1,5 @@
 @import "../core/variables.scss";
 
 .#{$prefix}button {
-  
+
 }

package/lib/button/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/button/style';
+import '@alifd/next/lib/button/style2';
 import './main.scss';

package/lib/button/style.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/button/style");
+require("@alifd/next/lib/button/style2");
 require("./main.scss");

package/lib/core/variables.scss

@@ -7,6 +7,17 @@ $shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
 
 $font-size-display-3: var(--font-size-display-3, 56px) !default;
 $font-size-display-2: var(--font-size-display-2, 48px) !default;
+$s-1: var(---s-1, 4px) !default;
+$s-2: var(---s-2, 8px) !default;
+$s-3: var(---s-3, 12px) !default;
+$s-4: var(---s-4, 16px) !default;
+$s-5: var(---s-5, 20px) !default;
+$s-6: var(---s-6, 24px) !default;
+$s-7: var(---s-7, 28px) !default;
+$s-8: var(---s-8, 32px) !default;
+$s-9: var(---s-9, 36px) !default;
+$s-10: var(---s-10, 40px) !default;
+
 
 $font-size-headline: var(--font-size-headline, 24px) !default;
 $font-size-title: var(--font-size-title, 20px) !default;
@@ -37,24 +48,35 @@ $color-line1-4: var(--color-line1-4, #a0a2ad) !default;
 
 $color-brand1-1: var(--color-brand1-1, #DEE8FF) !default;
 
-$color-fill1-2: var(--color-fill1-2, #f2f3f7) !default;
+$color-fill1-1: var(--color-fill1-1, rgba(3, 11, 53, 0.03)) !default;
+
+$color-fill1-2: var(--color-fill1-2, rgb(242, 243, 247)) !default;
+
+$color-fill1-3: var(--color-fill1-3, rgb(235, 236, 240)) !default;
+
+$color-fill1-4: var(--color-fill1-4, rgb(226, 228, 232)) !default;
+
+$color-data1-1: var(--color-data1-1, #2d9c9c) !default; // ??
+
+$color-data1-2: var(--color-data1-2, #0089ff) !default; // blue
+
+$color-data1-3: var(--color-data1-3, #b963d3) !default; // purple
 
-$color-fill1-1: var(--color-fill1-1, #030b35) !default;
+$color-data1-4: var(--color-data1-4, #ff5219) !default; // red
 
-$color-data1-1: var(--color-data1-1, #DEE8FF) !default; // ??
+$color-data1-5: var(--color-data1-5, #ff9200) !default; // orange
 
-$color-data1-2: var(--color-data1-2, #007FFF) !default; // blue
+$color-data1-6: var(--color-data1-6, #f4c800) !default; // yellow
 
-$color-data1-3: var(--color-data1-3, #B963D3) !default; // purple
+$color-data1-7: var(--color-data1-7, #00b042) !default; // ?
 
-$color-data1-4: var(--color-data1-4, #FF5219) !default; // red
+$color-data1-8: var(--color-data1-8, #5ac8fa) !default; // water
 
-$color-data1-5: var(--color-data1-5, #FF9200) !default; // orange
+$color-data1-9: var(--color-data1-9, #ec4589) !default; // ?
 
-$color-data1-6: var(--color-data1-6, #F4C800) !default; // yellow
+$color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
-$color-data1-7: var(--color-data1-7, #77912b) !default; // ?
+$color-link-3: var(--color-link-3, #0056ff) !default; // ?
 
-$color-data1-8: var(--color-data1-8, #4fae51) !default; // water
+$color-bg-1: var(--color-bg-1, #ffffff) !default; // ?
 
-$color-data1-9: var(--color-data1-9, #da5388) !default; // ?

package/lib/date-picker/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/date-picker2/style';
+import '@alifd/next/lib/date-picker2/style2';

package/lib/date-picker/style.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/date-picker2/style");
+require("@alifd/next/lib/date-picker2/style2");

package/lib/drawer/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @component 抽屉
+ * @en Drawer
+ * * @remarks 同 Next Drawer- Same as Next Drawer component.
+ * @type 通用 - General
+ * @when
+ */
+import React from 'react';
+import type { DrawerProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<DrawerProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/drawer").DrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    render(): React.JSX.Element;
+    context: any;
+    setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/drawer").DrawerProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/drawer").DrawerProps> & Readonly<{
+        children?: React.ReactNode | undefined;
+    }>;
+    state: Readonly<{}>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
+}>>, "key" | keyof DrawerProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/drawer").DrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    render(): React.JSX.Element;
+    context: any;
+    setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/drawer").DrawerProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/drawer").DrawerProps> & Readonly<{
+        children?: React.ReactNode | undefined;
+    }>;
+    state: Readonly<{}>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, prevState: Readonly<{}>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/drawer").DrawerProps>, nextState: Readonly<{}>, nextContext: any): void;
+}>, {}>;
+export default _default;

package/lib/drawer/index.js

@@ -0,0 +1,29 @@
+"use strict";
+/**
+ * @component 抽屉
+ * @en Drawer
+ * * @remarks 同 Next Drawer- Same as Next Drawer component.
+ * @type 通用 - General
+ * @when
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const Drawer = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, headerStyle, children, footer, footerClassName } = _a, props = tslib_1.__rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName"]);
+    // 对齐小蜜现有的底部
+    const defaultHeaderStyle = {
+        "border-bottom:": "1px solid var(--40gmM)"
+    };
+    return (react_1.default.createElement(next_1.Drawer, Object.assign({}, props, { v2: true, ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}drawer`, className) }),
+        react_1.default.createElement("div", { className: 'draw-content' }, children),
+        footer && footer.length && react_1.default.createElement("div", { className: (0, classnames_1.default)('draw-footer', footerClassName) }, footer)));
+});
+const DrawerWithSub = (0, utils_1.assignSubComponent)(Drawer, {
+    displayName: 'Drawer',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(DrawerWithSub);

package/lib/drawer/main.scss

@@ -0,0 +1,22 @@
+@import "../core/variables.scss";
+
+.#{$prefix}drawer {
+
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+
+  .draw-footer {
+    width: calc(100% - 40px);
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      width: calc(50% - 8px);
+    }
+  }
+
+}
+
+

package/lib/drawer/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/drawer/style2';
+import './main.scss';

package/lib/drawer/style.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/drawer/style2");
+require("./main.scss");

package/lib/drawer/types.d.ts

@@ -0,0 +1,10 @@
+import { type CommonProps } from '@alifd/next';
+import type { DrawerV2Props as FusionDrawerProps } from '@alifd/next/types/drawer/types';
+import type { ButtonProps } from '../button/types';
+/**
+ * @api Drawer
+ */
+export interface DrawerProps extends FusionDrawerProps, CommonProps {
+    footer?: ButtonProps[];
+    footerClassName?: string;
+}

package/lib/drawer/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/float-button/hooks/useNestleEdge.js

@@ -12,6 +12,7 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         if (!enable || !dom) {
             return;
         }
+        // 悬浮球的dom的结构
         const rect = dom.getBoundingClientRect();
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();

package/lib/float-button/index.d.ts

@@ -2,6 +2,7 @@ declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/type
     Backtop: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").BacktopProps & import("react").RefAttributes<import("./types").BacktopRef>, "key" | keyof import("./types").BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").BacktopRef, {}>;
     Drawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
     InnerDrawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+    AddonAfter: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").AddonAfterProps & import("react").RefAttributes<import("./types").AddonAfterRef>, "key" | keyof import("./types").AddonAfterProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").AddonAfterRef, {}>;
 };
 export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonDrawerProps, FloatButtonInnerDrawerProps, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
 export default FloatButtonWithSub;

package/lib/float-button/index.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const float_button_1 = tslib_1.__importDefault(require("./view/float-button"));
 const backtop_1 = tslib_1.__importDefault(require("./view/backtop"));
+const addon_after_1 = tslib_1.__importDefault(require("./view/addon-after"));
 const inner_drawer_1 = tslib_1.__importDefault(require("./view/inner-drawer"));
 const drawer_1 = tslib_1.__importDefault(require("./view/drawer"));
 const index_1 = require("../utils/index");
-const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default, Drawer: drawer_1.default, InnerDrawer: inner_drawer_1.default });
+const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default, Drawer: drawer_1.default, InnerDrawer: inner_drawer_1.default, AddonAfter: addon_after_1.default });
 exports.default = FloatButtonWithSub;

package/lib/float-button/main.scss

@@ -16,6 +16,29 @@
         }
     }
 
+    &-addon-after {
+        opacity: 1;
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        cursor: pointer;
+        &--show-with-hover {
+            opacity: 0;
+        }
+    }
+
+    &:hover {
+        .ct-float-button-addon-after--show-with-hover{
+            opacity: 1;
+        }
+        &-addon-after {
+            &--show-with-hover {
+                opacity: 1;
+            }
+        }
+
+    }
+
     &-inner-drawer {
         flex: 1;
         overflow: hidden;

package/lib/float-button/style.d.ts

@@ -1,3 +1,3 @@
-import '@alifd/next/lib/balloon/style';
-import '@alifd/next/lib/drawer/style';
+import '@alifd/next/lib/balloon/style2';
+import '@alifd/next/lib/drawer/style2';
 import './main.scss';

package/lib/float-button/style.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/balloon/style");
-require("@alifd/next/lib/drawer/style");
+require("@alifd/next/lib/balloon/style2");
+require("@alifd/next/lib/drawer/style2");
 require("./main.scss");