@kingsoft-ai/design 0.1.19 → 0.2.6

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

@@ -0,0 +1,252 @@
+/**
+ * Transfer Styled Tokens
+ *
+ * 将 Transfer 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Transfer 组件的 Styled Tokens
+ */
+export declare const $transfer: {
+    readonly containerGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly panelWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly panelHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly panelBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly panelBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly panelBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly headerBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly listHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly listGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly listPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemText: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemTextSelected: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemTextDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly itemCheckboxSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBorderDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBorderActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsBgActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsIcon: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsIconDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly operationsIconActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerBorderTop: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly footerMarginTop: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly emptyColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly emptyFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly searchWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly searchIconColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly transition: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,79 @@
+/**
+ * Transfer 组件 Token 类型定义
+ */
+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;
+        };
+        backgroundColor?: {
+            default: string;
+            disabled: string;
+            active: string;
+        };
+        width: string;
+        height: string;
+        iconSize: string;
+        iconColor: {
+            default: string;
+            disabled: string;
+            active: string;
+        };
+    };
+    search?: {
+        width: string;
+        iconColor: string;
+    };
+    footer: {
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        color: string;
+        borderTop: string;
+        marginTop: string;
+    };
+    empty: {
+        color: string;
+        fontSize: string;
+    };
+    transition: string;
+}

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

@@ -1,6 +1,66 @@
 /**
- * @file Automatically generated by barrelsby.
+ * Design Token 类型定义 - 统一导出
+ *
+ * 从各组件目录 re-export 所有 Token 类型
  */
-export * from './component-tokens.types';
-export * from './emotion.d';
-export * from './theme-utils';
+export type { ButtonTokens, IconButtonTokens } from '../button/tokens.types';
+export type { FloatButtonTokens } from '../floatButton/tokens.types';
+export type { CheckboxTokens } from '../checkbox/tokens.types';
+export type { RadioTokens } from '../radio/tokens.types';
+export type { SwitchTokens } from '../switch/tokens.types';
+export type { InputTokens } from '../input/tokens.types';
+export type { NumberFieldTokens } from '../numberInput/tokens.types';
+export type { SelectTokens } from '../select/tokens.types';
+export type { CollapseTokens } from '../collapse/tokens.types';
+export type { MenuTokens } from '../menu/tokens.types';
+export type { LinkTokens } from '../link/tokens.types';
+export type { TagTokens, TagColorTokens } from '../tag/tokens.types';
+export type { SkeletonTokens } from '../skeleton/tokens.types';
+export type { StepperTokens } from '../stepper/tokens.types';
+export type { CardTokens } from '../card/tokens.types';
+export type { TooltipTokens } from '../tooltip/tokens.types';
+export type { SliderTokens } from '../slider/tokens.types';
+export type { ModalTokens } from '../modal/tokens.types';
+export type { TransferTokens } from '../transfer/tokens.types';
+export type { ThemeContext, TokenGenerator, DeepPartial } from './theme-utils';
+import type { ButtonTokens, IconButtonTokens } from '../button/tokens.types';
+import type { FloatButtonTokens } from '../floatButton/tokens.types';
+import type { CheckboxTokens } from '../checkbox/tokens.types';
+import type { RadioTokens } from '../radio/tokens.types';
+import type { SwitchTokens } from '../switch/tokens.types';
+import type { InputTokens } from '../input/tokens.types';
+import type { NumberFieldTokens } from '../numberInput/tokens.types';
+import type { SelectTokens } from '../select/tokens.types';
+import type { CollapseTokens } from '../collapse/tokens.types';
+import type { MenuTokens } from '../menu/tokens.types';
+import type { LinkTokens } from '../link/tokens.types';
+import type { TagTokens } from '../tag/tokens.types';
+import type { SkeletonTokens } from '../skeleton/tokens.types';
+import type { StepperTokens } from '../stepper/tokens.types';
+import type { CardTokens } from '../card/tokens.types';
+import type { TooltipTokens } from '../tooltip/tokens.types';
+import type { ModalTokens } from '../modal/tokens.types';
+import type { TransferTokens } from '../transfer/tokens.types';
+import type { SliderTokens } from '../slider/tokens.types';
+export interface ComponentTokens {
+    button: ButtonTokens;
+    floatButton: FloatButtonTokens;
+    iconButton: IconButtonTokens;
+    checkbox: CheckboxTokens;
+    radio: RadioTokens;
+    switch: SwitchTokens;
+    input: InputTokens;
+    select: SelectTokens;
+    collapse: CollapseTokens;
+    tag: TagTokens;
+    skeleton: SkeletonTokens;
+    stepper: StepperTokens;
+    numberfield: NumberFieldTokens;
+    menu: MenuTokens;
+    link: LinkTokens;
+    transfer: TransferTokens;
+    modal: ModalTokens;
+    card: CardTokens;
+    tooltip: TooltipTokens;
+    slider: SliderTokens;
+}

package/dist/types/upload/Upload.d.ts

@@ -1,18 +1,3 @@
-/**
- * Upload 上传组件
- *
- * 基于 react-aria 实现无障碍访问的上传组件
- * 完全符合 Figma 设计稿规范
- *
- * @example
- * ```tsx
- * <Upload
- *   accept=".xls,.xlsx"
- *   maxSize={5 * 1024 * 1024}
- *   onChange={(files) => console.log(files)}
- * />
- * ```
- */
 import { type ReactNode } from 'react';
 import { type UploadStatus } from './Upload.style';
 export declare const STATUSES: readonly ["idle", "uploading", "success", "error"];
@@ -68,13 +53,9 @@ export type UploadProps = {
     onDownloadTemplate?: () => void;
     /** 自定义类名 */
     className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
     /** 自定义上传图标 */
     icon?: ReactNode;
 };
-/**
- * Upload 上传组件
- *
- * 基于 Figma 设计规范实现的上传组件，支持拖拽上传和点击上传
- * 使用 react-aria 保证无障碍访问性
- */
 export declare const Upload: import("react").ForwardRefExoticComponent<UploadProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/upload/Upload.style.d.ts

@@ -1,25 +1,16 @@
 /**
- * Upload 上传组件样式
+ * Upload Styled Components
  *
- * 基于三层 Token 体系：
- * - Tier 1 (Global): 全局基础值
- * - Tier 2 (Semantic): 语义化映射
- * - Tier 3 (Component): 组件专用 Token
- *
- * 完全还原 Figma 设计稿规范
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  */
 export declare const uploadStatuses: readonly ["idle", "uploading", "success", "error"];
 export type UploadStatus = (typeof uploadStatuses)[number];
-/**
- * 上传区域容器
- */
 export declare const UploadRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 拖拽区域
- */
 export declare const UploadDropzone: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -27,131 +18,80 @@ export declare const UploadDropzone: import("@emotion/styled").StyledComponent<{
     isDragActive: boolean;
     isDisabled: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 上传图标容器
- */
 export declare const UploadIconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 上传提示文本容器
- */
 export declare const UploadTextWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 主要提示文本
- */
 export declare const UploadMainText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 次要提示文本
- */
 export declare const UploadSecondaryText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-/**
- * 链接文本
- */
 export declare const UploadLink: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 文件列表容器
- */
 export declare const FileList: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 文件项容器
- */
 export declare const FileItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     status: UploadStatus;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 文件信息行
- */
 export declare const FileInfoRow: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     status: UploadStatus;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 文件图标
- */
 export declare const FileIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 文件名
- */
 export declare const FileName: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     status: UploadStatus;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 状态图标
- */
 export declare const StatusIcon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     status: UploadStatus;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 删除按钮
- */
 export declare const DeleteButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-/**
- * 进度条容器
- */
 export declare const ProgressWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 进度条轨道
- */
 export declare const ProgressTrack: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 进度条填充
- */
 export declare const ProgressBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     percent: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * 进度百分比文本
- */
 export declare const ProgressText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 隐藏的文件输入框
- */
 export declare const HiddenInput: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;