@kingsoft-ai/design 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1316 -951
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +7643 -5469
- package/dist/index.mjs.map +1 -1
- package/dist/types/DesignThemeProvider.d.ts +27 -5
- package/dist/types/card/Card.d.ts +34 -0
- package/dist/types/card/Card.style.d.ts +46 -0
- package/dist/types/card/index.d.ts +2 -0
- package/dist/types/card/tokens.d.ts +3 -0
- package/dist/types/floatButton/FloatButton.d.ts +57 -0
- package/dist/types/floatButton/FloatButton.style.d.ts +74 -0
- package/dist/types/floatButton/__tests__/FloatButton.test.d.ts +4 -0
- package/dist/types/floatButton/index.d.ts +4 -0
- package/dist/types/floatButton/tokens.d.ts +3 -0
- package/dist/types/index.d.ts +5 -1
- package/dist/types/menu/SubMenuPopover.d.ts +1 -1
- package/dist/types/modal/Modal.d.ts +57 -72
- package/dist/types/modal/Modal.style.d.ts +10 -96
- package/dist/types/modal/__tests__/Modal.test.d.ts +1 -0
- package/dist/types/modal/index.d.ts +1 -3
- package/dist/types/tooltip/Tooltip.d.ts +84 -0
- package/dist/types/tooltip/Tooltip.style.d.ts +24 -0
- package/dist/types/tooltip/index.d.ts +2 -0
- package/dist/types/tooltip/tokens.d.ts +11 -0
- package/dist/types/transfer/Transfer.d.ts +117 -0
- package/dist/types/transfer/Transfer.style.d.ts +95 -0
- package/dist/types/transfer/index.d.ts +2 -0
- package/dist/types/transfer/tokens.d.ts +3 -0
- package/dist/types/types/component-tokens.types.d.ts +197 -0
- package/dist/types/types/index.d.ts +6 -0
- package/dist/types/types/theme-utils.d.ts +7 -0
- package/package.json +10 -3
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import type { ReactNode } from 'react';
|
|
8
8
|
import type { AppTheme } from '@kingsoft-ai/theme';
|
|
9
|
+
import type { DeepPartial } from './types/theme-utils';
|
|
9
10
|
export interface DesignThemeProviderProps {
|
|
10
11
|
/** 子组件 */
|
|
11
12
|
children: ReactNode;
|
|
@@ -16,9 +17,30 @@ export interface DesignThemeProviderProps {
|
|
|
16
17
|
mode?: 'light' | 'dark';
|
|
17
18
|
/**
|
|
18
19
|
* 自定义主题对象(可选)
|
|
19
|
-
*
|
|
20
|
+
*
|
|
21
|
+
* 支持部分配置,会自动与默认主题进行深度合并。
|
|
22
|
+
* 只需要提供你想要覆盖的部分即可。
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* // 只覆盖 card 组件的部分 token
|
|
27
|
+
* const customTheme = {
|
|
28
|
+
* components: {
|
|
29
|
+
* card: {
|
|
30
|
+
* container: {
|
|
31
|
+
* background: { default: '#F0F4FF' },
|
|
32
|
+
* radius: '24px',
|
|
33
|
+
* }
|
|
34
|
+
* }
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
*
|
|
38
|
+
* <DesignThemeProvider theme={customTheme}>
|
|
39
|
+
* <Card>自定义样式的卡片</Card>
|
|
40
|
+
* </DesignThemeProvider>
|
|
41
|
+
* ```
|
|
20
42
|
*/
|
|
21
|
-
theme?: AppTheme
|
|
43
|
+
theme?: DeepPartial<AppTheme>;
|
|
22
44
|
}
|
|
23
45
|
/**
|
|
24
46
|
* Design 组件主题提供者
|
|
@@ -35,9 +57,9 @@ export interface DesignThemeProviderProps {
|
|
|
35
57
|
* <Button>点击我</Button>
|
|
36
58
|
* </DesignThemeProvider>
|
|
37
59
|
*
|
|
38
|
-
* //
|
|
39
|
-
* <DesignThemeProvider theme={
|
|
40
|
-
* <
|
|
60
|
+
* // 使用部分自定义主题(自动与默认主题合并)
|
|
61
|
+
* <DesignThemeProvider theme={{ components: { card: { container: { radius: '24px' } } } }}>
|
|
62
|
+
* <Card>自定义圆角的卡片</Card>
|
|
41
63
|
* </DesignThemeProvider>
|
|
42
64
|
* ```
|
|
43
65
|
*/
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
|
+
/**
|
|
4
|
+
* Card title
|
|
5
|
+
*/
|
|
6
|
+
title?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Content to render in the top-right corner of the card
|
|
9
|
+
*/
|
|
10
|
+
extra?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Card cover image
|
|
13
|
+
*/
|
|
14
|
+
cover?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Card footer content
|
|
17
|
+
*/
|
|
18
|
+
footer?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Lift up when hovering card
|
|
21
|
+
*/
|
|
22
|
+
hoverable?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Card variant
|
|
25
|
+
* @default 'elevated'
|
|
26
|
+
*/
|
|
27
|
+
variant?: 'elevated' | 'outlined' | 'filled';
|
|
28
|
+
/**
|
|
29
|
+
* Custom padding for body
|
|
30
|
+
*/
|
|
31
|
+
bodyPadding?: string;
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { CardTokens } from '../types/component-tokens.types';
|
|
2
|
+
export declare const CardContainer: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme;
|
|
4
|
+
as?: React.ElementType;
|
|
5
|
+
} & {
|
|
6
|
+
tokens: CardTokens;
|
|
7
|
+
variant: "elevated" | "outlined" | "filled";
|
|
8
|
+
hoverable?: boolean;
|
|
9
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
|
+
export declare const CardHeader: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme;
|
|
12
|
+
as?: React.ElementType;
|
|
13
|
+
} & {
|
|
14
|
+
tokens: CardTokens;
|
|
15
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
|
+
export declare const CardTitle: import("@emotion/styled").StyledComponent<{
|
|
17
|
+
theme?: import("@emotion/react").Theme;
|
|
18
|
+
as?: React.ElementType;
|
|
19
|
+
} & {
|
|
20
|
+
tokens: CardTokens;
|
|
21
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
22
|
+
export declare const CardExtra: import("@emotion/styled").StyledComponent<{
|
|
23
|
+
theme?: import("@emotion/react").Theme;
|
|
24
|
+
as?: React.ElementType;
|
|
25
|
+
} & {
|
|
26
|
+
tokens: CardTokens;
|
|
27
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
28
|
+
export declare const CardBody: import("@emotion/styled").StyledComponent<{
|
|
29
|
+
theme?: import("@emotion/react").Theme;
|
|
30
|
+
as?: React.ElementType;
|
|
31
|
+
} & {
|
|
32
|
+
tokens: CardTokens;
|
|
33
|
+
padding?: string;
|
|
34
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
35
|
+
export declare const CardCover: import("@emotion/styled").StyledComponent<{
|
|
36
|
+
theme?: import("@emotion/react").Theme;
|
|
37
|
+
as?: React.ElementType;
|
|
38
|
+
} & {
|
|
39
|
+
tokens: CardTokens;
|
|
40
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
41
|
+
export declare const CardFooter: import("@emotion/styled").StyledComponent<{
|
|
42
|
+
theme?: import("@emotion/react").Theme;
|
|
43
|
+
as?: React.ElementType;
|
|
44
|
+
} & {
|
|
45
|
+
tokens: CardTokens;
|
|
46
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FloatButton 悬浮按钮组件
|
|
3
|
+
*
|
|
4
|
+
* 基于 react-aria 实现无障碍访问的悬浮按钮组件
|
|
5
|
+
* 参考 antd FloatButton 设计实现
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <FloatButton
|
|
10
|
+
* icon={<IconPlus />}
|
|
11
|
+
* type="primary"
|
|
12
|
+
* onClick={() => console.log('clicked')}
|
|
13
|
+
* />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
import type { ReactNode } from 'react';
|
|
17
|
+
import type { AriaButtonProps } from 'react-aria';
|
|
18
|
+
import { type FloatButtonType, type FloatButtonShape, type FloatButtonSize, type TooltipPlacement } from './FloatButton.style';
|
|
19
|
+
export type { TooltipPlacement };
|
|
20
|
+
export interface TooltipConfig {
|
|
21
|
+
/** Tooltip 标题 */
|
|
22
|
+
title?: ReactNode;
|
|
23
|
+
/** Tooltip 颜色 */
|
|
24
|
+
color?: string;
|
|
25
|
+
/** Tooltip 位置 */
|
|
26
|
+
placement?: TooltipPlacement;
|
|
27
|
+
}
|
|
28
|
+
export declare const TYPES: readonly ["default", "primary"];
|
|
29
|
+
export declare const SHAPES: readonly ["circle", "square"];
|
|
30
|
+
export declare const SIZES: readonly ["sm", "md", "lg"];
|
|
31
|
+
export interface FloatButtonProps extends Omit<AriaButtonProps, 'elementType'> {
|
|
32
|
+
/** 按钮类型 */
|
|
33
|
+
buttonType?: FloatButtonType;
|
|
34
|
+
/** 按钮形状 */
|
|
35
|
+
shape?: FloatButtonShape;
|
|
36
|
+
/** 按钮尺寸 */
|
|
37
|
+
size?: FloatButtonSize;
|
|
38
|
+
/** 图标 */
|
|
39
|
+
icon?: ReactNode;
|
|
40
|
+
/** 文字描述 */
|
|
41
|
+
description?: ReactNode;
|
|
42
|
+
/** 提示文字或配置 */
|
|
43
|
+
tooltip?: ReactNode | TooltipConfig;
|
|
44
|
+
/** 是否禁用 */
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
/** 自定义类名 */
|
|
47
|
+
className?: string;
|
|
48
|
+
/** 自定义样式 */
|
|
49
|
+
style?: React.CSSProperties;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* FloatButton 悬浮按钮组件
|
|
53
|
+
*
|
|
54
|
+
* 用于页面中的悬浮操作按钮,通常固定在页面特定位置
|
|
55
|
+
* 支持圆形和方形两种形状
|
|
56
|
+
*/
|
|
57
|
+
export declare const FloatButton: import("react").ForwardRefExoticComponent<FloatButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FloatButton 悬浮按钮样式
|
|
3
|
+
*
|
|
4
|
+
* 基于三层 Token 体系实现悬浮按钮样式
|
|
5
|
+
* 参考 antd FloatButton 设计规范
|
|
6
|
+
*/
|
|
7
|
+
export declare const floatButtonTypes: readonly ["default", "primary"];
|
|
8
|
+
export declare const floatButtonShapes: readonly ["circle", "square"];
|
|
9
|
+
export declare const floatButtonSizes: readonly ["sm", "md", "lg"];
|
|
10
|
+
export declare const tooltipPlacements: readonly ["top", "bottom", "left", "right"];
|
|
11
|
+
export type FloatButtonType = (typeof floatButtonTypes)[number];
|
|
12
|
+
export type FloatButtonShape = (typeof floatButtonShapes)[number];
|
|
13
|
+
export type FloatButtonSize = (typeof floatButtonSizes)[number];
|
|
14
|
+
export type TooltipPlacement = (typeof tooltipPlacements)[number];
|
|
15
|
+
/**
|
|
16
|
+
* 悬浮按钮根元素
|
|
17
|
+
*/
|
|
18
|
+
export declare const FloatButtonRoot: import("@emotion/styled").StyledComponent<{
|
|
19
|
+
theme?: import("@emotion/react").Theme;
|
|
20
|
+
as?: React.ElementType;
|
|
21
|
+
} & {
|
|
22
|
+
$buttonType: FloatButtonType;
|
|
23
|
+
$shape: FloatButtonShape;
|
|
24
|
+
$size: FloatButtonSize;
|
|
25
|
+
$isPressed: boolean;
|
|
26
|
+
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
27
|
+
/**
|
|
28
|
+
* 按钮内容容器
|
|
29
|
+
*/
|
|
30
|
+
export declare const FloatButtonContent: import("@emotion/styled").StyledComponent<{
|
|
31
|
+
theme?: import("@emotion/react").Theme;
|
|
32
|
+
as?: React.ElementType;
|
|
33
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
34
|
+
/**
|
|
35
|
+
* 图标包装器
|
|
36
|
+
*/
|
|
37
|
+
export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
|
|
38
|
+
theme?: import("@emotion/react").Theme;
|
|
39
|
+
as?: React.ElementType;
|
|
40
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
41
|
+
/**
|
|
42
|
+
* 描述文字
|
|
43
|
+
*/
|
|
44
|
+
export declare const Description: import("@emotion/styled").StyledComponent<{
|
|
45
|
+
theme?: import("@emotion/react").Theme;
|
|
46
|
+
as?: React.ElementType;
|
|
47
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
48
|
+
/**
|
|
49
|
+
* Tooltip 包装器
|
|
50
|
+
*/
|
|
51
|
+
export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
|
|
52
|
+
theme?: import("@emotion/react").Theme;
|
|
53
|
+
as?: React.ElementType;
|
|
54
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
55
|
+
/**
|
|
56
|
+
* Tooltip 卡片
|
|
57
|
+
*/
|
|
58
|
+
export declare const TooltipCard: import("@emotion/styled").StyledComponent<{
|
|
59
|
+
theme?: import("@emotion/react").Theme;
|
|
60
|
+
as?: React.ElementType;
|
|
61
|
+
} & {
|
|
62
|
+
$placement: TooltipPlacement;
|
|
63
|
+
$color?: string;
|
|
64
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
65
|
+
/**
|
|
66
|
+
* Tooltip 箭头
|
|
67
|
+
*/
|
|
68
|
+
export declare const TooltipArrow: import("@emotion/styled").StyledComponent<{
|
|
69
|
+
theme?: import("@emotion/react").Theme;
|
|
70
|
+
as?: React.ElementType;
|
|
71
|
+
} & {
|
|
72
|
+
$placement: TooltipPlacement;
|
|
73
|
+
$color?: string;
|
|
74
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './button';
|
|
2
2
|
export * from './checkbox';
|
|
3
3
|
export * from './collapse';
|
|
4
|
+
export * from './floatButton';
|
|
4
5
|
export * from './input';
|
|
5
6
|
export * from './menu';
|
|
6
7
|
export * from './link';
|
|
@@ -14,9 +15,12 @@ export * from './select';
|
|
|
14
15
|
export * from './table';
|
|
15
16
|
export * from './switch';
|
|
16
17
|
export * from './tag';
|
|
18
|
+
export * from './transfer';
|
|
17
19
|
export * from './upload';
|
|
20
|
+
export * from './card';
|
|
21
|
+
export * from './tooltip';
|
|
18
22
|
export * from './theme';
|
|
19
|
-
export
|
|
23
|
+
export type { ThemeContext, TokenGenerator, DeepPartial } from './types/theme-utils';
|
|
20
24
|
export { DesignThemeProvider } from './DesignThemeProvider';
|
|
21
25
|
export type { DesignThemeProviderProps } from './DesignThemeProvider';
|
|
22
26
|
export { CustomThemeProvider, globalColors, globalSpacing, globalRadii, globalTypography, globalShadows, globalGradients, lightSemantic, darkSemantic, } from '@kingsoft-ai/theme';
|
|
@@ -24,6 +24,6 @@ export interface SubMenuPopoverProps {
|
|
|
24
24
|
* 在折叠状态下,鼠标悬浮一级菜单时展示二级菜单
|
|
25
25
|
*/
|
|
26
26
|
export declare const SubMenuPopover: {
|
|
27
|
-
({ visible, anchorRef, children, onClose, onMouseEnter, onMouseLeave, }: SubMenuPopoverProps):
|
|
27
|
+
({ visible, anchorRef, children, onClose, onMouseEnter, onMouseLeave, }: SubMenuPopoverProps): import("react").ReactPortal | null;
|
|
28
28
|
displayName: string;
|
|
29
29
|
};
|
|
@@ -1,78 +1,63 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Modal
|
|
2
|
+
* Modal 弹窗组件(React Aria)
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* ```tsx
|
|
9
|
-
* <Modal
|
|
10
|
-
* open={isOpen}
|
|
11
|
-
* onClose={() => setIsOpen(false)}
|
|
12
|
-
* title="确认操作"
|
|
13
|
-
* size="md"
|
|
14
|
-
* >
|
|
15
|
-
* <p>确定要执行此操作吗?</p>
|
|
16
|
-
* </Modal>
|
|
17
|
-
* ```
|
|
4
|
+
* - 受控:open + onOpenChange(所有关闭路径统一出口)
|
|
5
|
+
* - 基于 react-aria overlays/dialog:焦点管理、ESC、无障碍语义
|
|
6
|
+
* - 支持 portalContainer(微前端 / iframe / shadow dom)
|
|
7
|
+
* - 样式分层:overlay / dialog / close button 分别支持 className 与 style
|
|
18
8
|
*/
|
|
19
|
-
import { type ReactNode } from 'react';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export interface ModalProps {
|
|
23
|
-
/** 是否打开弹窗 */
|
|
9
|
+
import { type CSSProperties, type ReactNode } from 'react';
|
|
10
|
+
export type ModalProps = {
|
|
11
|
+
/** 是否展示 Modal */
|
|
24
12
|
open: boolean;
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
-
|
|
13
|
+
/**
|
|
14
|
+
* open 状态变更回调
|
|
15
|
+
* 所有关闭路径(ESC / 遮罩 / 关闭按钮 / outside)统一出口
|
|
16
|
+
*/
|
|
17
|
+
onOpenChange: (open: boolean) => void;
|
|
18
|
+
/** 内容(完全自定义) */
|
|
19
|
+
children: ReactNode;
|
|
20
|
+
/** 标题(用于默认头部与 aria 标注) */
|
|
28
21
|
title?: ReactNode;
|
|
29
|
-
/**
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
'aria-labelledby'?: string;
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* Modal 弹窗组件
|
|
74
|
-
*
|
|
75
|
-
* 高性能、无障碍、可定制的弹窗组件
|
|
76
|
-
*/
|
|
22
|
+
/**
|
|
23
|
+
* 是否隐藏默认头部(标题 + 右上角关闭按钮)
|
|
24
|
+
* - true:不渲染默认 Header,你可以在 children 内完全自定义标题区与关闭按钮
|
|
25
|
+
* - false:按默认逻辑渲染(有 title 或可关闭时显示 Header)
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
hideHeader?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* 是否允许“用户主动关闭”
|
|
31
|
+
* - false:禁用 ESC/遮罩/close button/outside 关闭(只能由外部控制 open)
|
|
32
|
+
* - true:按各关闭开关控制
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
isDismissable?: boolean;
|
|
36
|
+
/** 是否允许 ESC 关闭(在 isDismissable=true 前提下生效)@default true */
|
|
37
|
+
closeOnEsc?: boolean;
|
|
38
|
+
/** 是否允许点击遮罩关闭(在 isDismissable=true 前提下生效)@default true */
|
|
39
|
+
closeOnOverlay?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* 是否允许点击外部关闭(在 isDismissable=true 前提下生效)
|
|
42
|
+
* 对应 react-aria shouldCloseOnInteractOutside
|
|
43
|
+
* @default true
|
|
44
|
+
*/
|
|
45
|
+
closeOnOutside?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* 外部点击白名单/黑名单
|
|
48
|
+
* 返回 true 表示允许触发关闭
|
|
49
|
+
*/
|
|
50
|
+
shouldCloseOnInteractOutside?: (element: Element) => boolean;
|
|
51
|
+
/** Portal 挂载容器,默认 document.body(SSR 环境下不回退) */
|
|
52
|
+
portalContainer?: Element;
|
|
53
|
+
/** overlay(遮罩层)样式分层 */
|
|
54
|
+
overlayClassName?: string;
|
|
55
|
+
overlayStyle?: CSSProperties;
|
|
56
|
+
/** dialog(弹层容器)样式分层 */
|
|
57
|
+
dialogClassName?: string;
|
|
58
|
+
dialogStyle?: CSSProperties;
|
|
59
|
+
/** close button 样式分层 */
|
|
60
|
+
closeButtonClassName?: string;
|
|
61
|
+
closeButtonStyle?: CSSProperties;
|
|
62
|
+
};
|
|
77
63
|
export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
78
|
-
export { ModalHeader, ModalContent, ModalFooter, ModalTitle, ModalDescription, ModalCloseButton, };
|
|
@@ -1,121 +1,35 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Modal
|
|
2
|
+
* Modal 样式(React Aria)
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* -
|
|
6
|
-
* -
|
|
7
|
-
* - Tier 3 (Component): 组件专用 Token
|
|
8
|
-
*
|
|
9
|
-
* 特性:
|
|
10
|
-
* - 优雅的入场/退场动画
|
|
11
|
-
* - 响应式尺寸支持
|
|
12
|
-
* - 无障碍访问友好
|
|
13
|
-
* - 支持暗色主题
|
|
14
|
-
*/
|
|
15
|
-
export declare const modalSizes: readonly ["sm", "md", "lg", "xl", "fullscreen"];
|
|
16
|
-
export type ModalSize = (typeof modalSizes)[number];
|
|
17
|
-
/**
|
|
18
|
-
* Modal 遮罩层
|
|
19
|
-
*
|
|
20
|
-
* 特性:
|
|
21
|
-
* - 毛玻璃效果
|
|
22
|
-
* - 点击关闭支持
|
|
23
|
-
* - 优雅的淡入淡出动画
|
|
4
|
+
* 设计目标:
|
|
5
|
+
* - 轻盈、科技、极简阴影(避免厚重“Antd 弹窗”观感)
|
|
6
|
+
* - overlay / dialog / close button 三层明确分工
|
|
24
7
|
*/
|
|
25
|
-
export declare const
|
|
8
|
+
export declare const ModalPortalRoot: import("@emotion/styled").StyledComponent<{
|
|
26
9
|
theme?: import("@emotion/react").Theme;
|
|
27
10
|
as?: React.ElementType;
|
|
28
|
-
} & {
|
|
29
|
-
isOpen: boolean;
|
|
30
|
-
isClosing: boolean;
|
|
31
11
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
32
|
-
|
|
33
|
-
* Modal 容器(用于 Portal 和定位)
|
|
34
|
-
*/
|
|
35
|
-
export declare const ModalPortalContainer: import("@emotion/styled").StyledComponent<{
|
|
12
|
+
export declare const ModalBackdrop: import("@emotion/styled").StyledComponent<{
|
|
36
13
|
theme?: import("@emotion/react").Theme;
|
|
37
14
|
as?: React.ElementType;
|
|
38
|
-
} & {
|
|
39
|
-
isOpen: boolean;
|
|
40
15
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
41
|
-
|
|
42
|
-
* Modal 主容器
|
|
43
|
-
*
|
|
44
|
-
* 特性:
|
|
45
|
-
* - 居中定位
|
|
46
|
-
* - 响应式宽度
|
|
47
|
-
* - 弹性动画效果
|
|
48
|
-
*/
|
|
49
|
-
export declare const ModalContainer: import("@emotion/styled").StyledComponent<{
|
|
16
|
+
export declare const ModalDialog: import("@emotion/styled").StyledComponent<{
|
|
50
17
|
theme?: import("@emotion/react").Theme;
|
|
51
18
|
as?: React.ElementType;
|
|
52
|
-
} & {
|
|
53
|
-
size: ModalSize;
|
|
54
|
-
isOpen: boolean;
|
|
55
|
-
isClosing: boolean;
|
|
56
|
-
isFullscreen: boolean;
|
|
57
|
-
animationType: "scale" | "slide" | "fade";
|
|
58
|
-
centered: boolean;
|
|
59
19
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
60
|
-
|
|
61
|
-
* Modal 头部
|
|
62
|
-
*
|
|
63
|
-
* 包含标题、描述和关闭按钮
|
|
64
|
-
*/
|
|
65
|
-
export declare const ModalHeader: import("@emotion/styled").StyledComponent<{
|
|
20
|
+
export declare const ModalDialogHeader: import("@emotion/styled").StyledComponent<{
|
|
66
21
|
theme?: import("@emotion/react").Theme;
|
|
67
22
|
as?: React.ElementType;
|
|
68
|
-
} & {
|
|
69
|
-
size: ModalSize;
|
|
70
|
-
hasDescription: boolean;
|
|
71
23
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
72
|
-
|
|
73
|
-
* 标题容器
|
|
74
|
-
*/
|
|
75
|
-
export declare const ModalTitleWrapper: import("@emotion/styled").StyledComponent<{
|
|
76
|
-
theme?: import("@emotion/react").Theme;
|
|
77
|
-
as?: React.ElementType;
|
|
78
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
79
|
-
/**
|
|
80
|
-
* Modal 标题
|
|
81
|
-
*/
|
|
82
|
-
export declare const ModalTitle: import("@emotion/styled").StyledComponent<{
|
|
24
|
+
export declare const ModalDialogTitle: import("@emotion/styled").StyledComponent<{
|
|
83
25
|
theme?: import("@emotion/react").Theme;
|
|
84
26
|
as?: React.ElementType;
|
|
85
|
-
} & {
|
|
86
|
-
size: ModalSize;
|
|
87
27
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
88
|
-
/**
|
|
89
|
-
* Modal 描述
|
|
90
|
-
*/
|
|
91
|
-
export declare const ModalDescription: import("@emotion/styled").StyledComponent<{
|
|
92
|
-
theme?: import("@emotion/react").Theme;
|
|
93
|
-
as?: React.ElementType;
|
|
94
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
95
|
-
/**
|
|
96
|
-
* Modal 关闭按钮
|
|
97
|
-
*/
|
|
98
28
|
export declare const ModalCloseButton: import("@emotion/styled").StyledComponent<{
|
|
99
29
|
theme?: import("@emotion/react").Theme;
|
|
100
30
|
as?: React.ElementType;
|
|
101
31
|
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
102
|
-
|
|
103
|
-
* Modal 内容区域
|
|
104
|
-
*/
|
|
105
|
-
export declare const ModalContent: import("@emotion/styled").StyledComponent<{
|
|
32
|
+
export declare const ModalDialogBody: import("@emotion/styled").StyledComponent<{
|
|
106
33
|
theme?: import("@emotion/react").Theme;
|
|
107
34
|
as?: React.ElementType;
|
|
108
|
-
} & {
|
|
109
|
-
size: ModalSize;
|
|
110
|
-
hasHeader: boolean;
|
|
111
|
-
hasFooter: boolean;
|
|
112
35
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
113
|
-
/**
|
|
114
|
-
* Modal 底部
|
|
115
|
-
*/
|
|
116
|
-
export declare const ModalFooter: import("@emotion/styled").StyledComponent<{
|
|
117
|
-
theme?: import("@emotion/react").Theme;
|
|
118
|
-
as?: React.ElementType;
|
|
119
|
-
} & {
|
|
120
|
-
size: ModalSize;
|
|
121
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
export { Modal
|
|
1
|
+
export { Modal } from './Modal';
|
|
2
2
|
export type { ModalProps } from './Modal';
|
|
3
|
-
export type { ModalSize } from './Modal.style';
|
|
4
|
-
export { ModalHeader, ModalContent, ModalFooter, ModalTitle, ModalDescription, ModalCloseButton, } from './Modal';
|