@kingsoft-ai/design 0.1.12 → 0.1.14

package/dist/types/tooltip/Tooltip.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Tooltip 文字提示组件
+ *
+ * 基于 react-aria 实现无障碍访问的提示组件
+ * 支持 hover/focus 触发，自定义位置与延迟
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="提示内容">
+ *   <Button>悬停查看</Button>
+ * </Tooltip>
+ * ```
+ */
+import { type ReactNode, type ReactElement, type CSSProperties } from 'react';
+import { type TooltipPlacement } from './Tooltip.style';
+export type { TooltipPlacement };
+export type TooltipProps = {
+    /**
+     * 触发 Tooltip 的子元素
+     * 必须是可接受 ref 的单一 React 元素
+     */
+    children: ReactElement;
+    /**
+     * Tooltip 显示的内容
+     */
+    content: ReactNode;
+    /**
+     * 弹出位置
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * 距离触发元素的偏移量 (px)
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * 打开延迟（毫秒）
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * 关闭延迟（毫秒）
+     * @default 0
+     */
+    closeDelay?: number;
+    /**
+     * 是否禁用 Tooltip（统一 API，优先级高于 isDisabled）
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示箭头
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * 受控：是否打开（替代 isOpen，符合 Design System 规范）
+     */
+    open?: boolean;
+    /**
+     * 非受控：默认是否打开
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 打开状态变更回调
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+};
+/**
+ * Tooltip 文字提示组件
+ *
+ * 基于 React Aria 实现的无障碍提示组件
+ */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/tooltip/Tooltip.style.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tooltip 样式
+ *
+ * 设计目标：
+ * - 轻盈、极简的提示框
+ * - 支持四个方向的箭头
+ * - 流畅的进入/退出动画
+ */
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipContainerProps {
+    placement: TooltipPlacement;
+}
+export declare const TooltipContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TooltipContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface TooltipArrowProps {
+    placement: TooltipPlacement;
+}
+export declare const TooltipArrow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TooltipArrowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/types/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipPlacement } from './Tooltip';

package/dist/types/tooltip/tokens.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Tooltip 组件 Token
+ *
+ * 基于三层 Token 体系：
+ * - Tier 1 (Global): 全局基础值
+ * - Tier 2 (Semantic): 语义化映射
+ * - Tier 3 (Component): 组件专用 Token
+ */
+import { TokenGenerator } from '../types/theme-utils';
+import { TooltipTokens } from '../types/component-tokens.types';
+export declare const getTooltipTokens: TokenGenerator<TooltipTokens>;

package/dist/types/transfer/Transfer.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Transfer 穿梭框组件
+ *
+ * 基于 react-aria 实现无障碍访问的穿梭框组件
+ * 支持搜索、全选、自定义渲染等功能
+ *
+ * @example
+ * ```tsx
+ * const dataSource = [
+ *   { key: '1', title: '选项1', description: '描述1' },
+ *   { key: '2', title: '选项2' },
+ * ];
+ *
+ * <Transfer
+ *   dataSource={dataSource}
+ *   targetKeys={['1']}
+ *   onChange={(keys) => console.log(keys)}
+ * />
+ * ```
+ */
+import React from 'react';
+export interface TransferItem {
+    /** 唯一标识 */
+    key: string;
+    /** 标题 */
+    title: React.ReactNode;
+    /** 描述 */
+    description?: React.ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 其他自定义数据 */
+    [key: string]: any;
+}
+export interface TransferHeaderProps {
+    /** 方向 */
+    direction: 'left' | 'right';
+    /** 已选中数量 */
+    selectedCount: number;
+    /** 总数量 */
+    totalCount: number;
+    /** 选中的keys */
+    selectedKeys: Set<string>;
+    /** 全选回调 */
+    onSelectAll: (checked: boolean) => void;
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 是否显示全选 */
+    showSelectAll: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 清空所有选中项回调 */
+    onClearAll?: () => void;
+    /** 清空模式：'selected' | 'all' */
+    clearMode?: 'selected' | 'all';
+}
+export interface TransferActions {
+    /** 左侧操作按钮，支持静态元素或动态函数 */
+    left?: React.ReactNode | ((selectedKeys: string[]) => React.ReactNode);
+    /** 右侧操作按钮，支持静态元素或动态函数 */
+    right?: React.ReactNode | ((selectedKeys: string[]) => React.ReactNode);
+}
+export interface TransferProps {
+    /** 数据源 */
+    dataSource: TransferItem[];
+    /** 目标框数据的 key 集合 */
+    targetKeys?: string[];
+    /** 默认目标框数据的 key 集合 */
+    defaultTargetKeys?: string[];
+    /** 选中项变化的回调 */
+    onChange?: (targetKeys: string[], direction: 'left' | 'right', moveKeys: string[]) => void;
+    /** 源框标题 */
+    titles?: [React.ReactNode, React.ReactNode];
+    /** 是否显示搜索框 */
+    showSearch?: boolean;
+    /** 搜索框占位符 */
+    searchPlaceholder?: [string, string];
+    /** 自定义过滤方法 */
+    filterOption?: (inputValue: string, item: TransferItem) => boolean;
+    /** 自定义渲染每一项 */
+    render?: (item: TransferItem) => React.ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 操作按钮文本 */
+    operations?: [React.ReactNode, React.ReactNode];
+    /** 是否显示全选 */
+    showSelectAll?: boolean;
+    /** 底部渲染函数 */
+    footer?: (props: {
+        direction: 'left' | 'right';
+    }) => React.ReactNode;
+    /** 列表为空时显示的内容 */
+    locale?: {
+        itemUnit?: string;
+        itemsUnit?: string;
+        notFoundContent?: React.ReactNode;
+        searchPlaceholder?: string;
+    };
+    /** 自定义头部渲染 */
+    header?: (props: TransferHeaderProps) => React.ReactNode;
+    /** 单向模式 */
+    oneWay?: boolean;
+    /** 自定义操作按钮 */
+    actions?: React.ReactNode[] | TransferActions;
+    /** 使用分页样式，自定义渲染列表下无效 */
+    pagination?: boolean | {
+        pageSize?: number;
+        showSizeChanger?: boolean;
+        pageSizeOptions?: number[];
+        showPageInfo?: boolean;
+    };
+}
+export declare const Transfer: React.FC<TransferProps>;
+export default Transfer;

package/dist/types/transfer/Transfer.style.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Transfer 样式组件
+ *
+ * 基于三层 Token 体系
+ */
+export declare const TransferRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferPanel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TransferCount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TransferSearchWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    disabled?: boolean;
+    selected?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferItemLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TransferItemContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferItemDeleteButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    disabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const TransferOperations: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferOperationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    disabled?: boolean;
+    active?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferFooter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferEmpty: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferPagination: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferPaginationInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferPaginationControls: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TransferPaginationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    disabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const TransferPageSizeSelector: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {}>;

package/dist/types/transfer/index.d.ts

@@ -0,0 +1,2 @@
+export { Transfer } from './Transfer';
+export type { TransferProps, TransferItem, TransferActions } from './Transfer';

package/dist/types/transfer/tokens.d.ts

@@ -0,0 +1,3 @@
+import { TokenGenerator } from '../types/theme-utils';
+import { TransferTokens } from '../types/component-tokens.types';
+export declare const getTransferTokens: TokenGenerator<TransferTokens>;

package/dist/types/types/component-tokens.types.d.ts

@@ -123,6 +123,69 @@ export interface ButtonTokens {
     gap: string;
     transition: string;
 }
+export interface FloatButtonTokens {
+    default: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    primary: {
+        background: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        text: {
+            default: string;
+        };
+        border: {
+            default: string;
+        };
+        shadow: {
+            default: string;
+            hover: string;
+        };
+    };
+    disabled: {
+        background: {
+            default: string;
+        };
+        text: {
+            default: string;
+        };
+        opacity: number;
+    };
+    size: {
+        sm: {
+            size: string;
+        };
+        md: {
+            size: string;
+        };
+        lg: {
+            size: string;
+        };
+    };
+    icon: {
+        size: string;
+    };
+    description: {
+        fontSize: string;
+        lineHeight: string;
+    };
+}
 type IconButtonStateTokens = {
     background: {
         default: string;
@@ -782,6 +845,73 @@ interface LinkStateTokens {
         hover: string;
     };
 }
+export interface TransferTokens {
+    container: {
+        gap: string;
+    };
+    panel: {
+        width: string;
+        height: string;
+        background: string;
+        border: string;
+        borderRadius: string;
+    };
+    header: {
+        height: string;
+        padding: string;
+        fontSize: string;
+        color: string;
+        background: string;
+    };
+    list: {
+        height: string;
+        gap: string;
+        padding: string;
+    };
+    item: {
+        height: string;
+        padding: string;
+        fontSize: string;
+        borderRadius: string;
+        gap: string;
+        text: {
+            default: string;
+            selected: string;
+            disabled: string;
+        };
+        checkboxSize: string;
+    };
+    operations: {
+        gap: string;
+        borderRadius: string;
+        borderColor: {
+            default: string;
+            disabled: string;
+            active: string;
+        };
+        width: string;
+        height: string;
+        iconSize: string;
+        iconColor: {
+            default: string;
+            disabled: string;
+            active: string;
+        };
+    };
+    footer: {
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        color: string;
+        borderTop: string;
+        marginTop: string;
+    };
+    empty: {
+        color: string;
+        fontSize: string;
+    };
+    transition: string;
+}
 export interface ModalTokens {
     size: {
         sm: {
@@ -886,8 +1016,72 @@ export interface ModalTokens {
     };
     transition: string;
 }
+export interface CardTokens {
+    container: {
+        background: {
+            default: string;
+        };
+        border: {
+            default: string;
+            hover: string;
+        };
+        shadow: {
+            elevated: string;
+            elevatedHover: string;
+            outlined: string;
+            filled: string;
+        };
+        radius: string;
+        transition: string;
+    };
+    padding: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    header: {
+        padding: string;
+        borderBottom: string;
+        title: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        extra: {
+            color: string;
+            fontSize: string;
+        };
+    };
+    cover: {
+        radius: string;
+    };
+    footer: {
+        padding: string;
+        background: string;
+        borderTop: string;
+    };
+}
+export interface TooltipTokens {
+    background: string;
+    color: string;
+    borderRadius: string;
+    boxShadow: string;
+    padding: string;
+    maxWidth: string;
+    fontSize: string;
+    lineHeight: string;
+    arrow: {
+        size: string;
+    };
+    animation: {
+        duration: string;
+        easing: string;
+    };
+    zIndex: number;
+}
 export interface ComponentTokens {
     button: ButtonTokens;
+    floatButton: FloatButtonTokens;
     iconButton: IconButtonTokens;
     checkbox: CheckboxTokens;
     radio: RadioTokens;
@@ -901,6 +1095,9 @@ export interface ComponentTokens {
     numberfield: NumberFieldTokens;
     menu: MenuTokens;
     link: LinkTokens;
+    transfer: TransferTokens;
     modal: ModalTokens;
+    card: CardTokens;
+    tooltip: TooltipTokens;
 }
 export {};

package/dist/types/types/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+export * from './component-tokens.types';
+export * from './emotion.d';
+export * from './theme-utils';

package/dist/types/types/theme-utils.d.ts

@@ -18,3 +18,10 @@ export interface ThemeContext {
     };
 }
 export type TokenGenerator<T> = (context: ThemeContext) => T;
+/**
+ * 深度 Partial 类型
+ * 将对象的所有属性（包括嵌套属性）设置为可选
+ */
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kingsoft-ai/design",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -20,12 +20,17 @@
     "access": "public"
   },
   "dependencies": {
+    "@react-aria/tooltip": "^3.9.0",
     "@react-stately/collections": "^3.12.8",
     "@react-stately/list": "^3.13.1",
     "@react-stately/select": "^3.8.0",
+    "@react-stately/tooltip": "^3.5.9",
+    "@react-types/overlays": "^3.9.2",
     "@react-types/shared": "^3.32.1",
-    "@kingsoft-ai/theme": "^0.1.5",
-    "@kingsoft-ai/icons": "^0.1.4"
+    "@react-types/tooltip": "^3.5.0",
+    "deepmerge": "^4.3.1",
+    "@kingsoft-ai/icons": "^0.1.6",
+    "@kingsoft-ai/theme": "^0.1.7"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -46,7 +51,9 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/deepmerge": "^2.2.3",
     "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.13",
     "@vitejs/plugin-react": "^5.0.3",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",