@kingsoft-ai/design 0.1.9

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

@@ -0,0 +1,20 @@
+import type { GlobalColors, GlobalSpacing, GlobalRadii, GlobalTypography, GlobalShadows, GlobalGradients, SemanticColors, SemanticSpacing, SemanticBorderRadius, SemanticTypography, SemanticShadows } from '@kingsoft-ai/theme';
+export interface ThemeContext {
+    mode: 'light' | 'dark';
+    global: {
+        colors: GlobalColors;
+        spacing: GlobalSpacing;
+        radii: GlobalRadii;
+        typography: GlobalTypography;
+        shadows: GlobalShadows;
+        gradients: GlobalGradients;
+    };
+    semantic: {
+        colors: SemanticColors;
+        spacing: SemanticSpacing;
+        borderRadius: SemanticBorderRadius;
+        typography: SemanticTypography;
+        shadows: SemanticShadows;
+    };
+}
+export type TokenGenerator<T> = (context: ThemeContext) => T;

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

@@ -0,0 +1,80 @@
+/**
+ * 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"];
+export interface UploadFile {
+    /** 文件唯一标识 */
+    uid: string;
+    /** 文件名 */
+    name: string;
+    /** 文件对象 */
+    file?: File;
+    /** 上传状态 */
+    status: UploadStatus;
+    /** 上传进度 (0-100) */
+    percent?: number;
+    /** 错误信息 */
+    error?: string;
+}
+export type UploadProps = {
+    /** 接受的文件类型 */
+    accept?: string;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 最大文件大小（字节） */
+    maxSize?: number;
+    /** 最大文件数量 */
+    maxCount?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 文件列表 */
+    fileList?: UploadFile[];
+    /** 默认文件列表 */
+    defaultFileList?: UploadFile[];
+    /** 文件变化回调 */
+    onChange?: (fileList: UploadFile[]) => void;
+    /** 文件上传前的钩子 */
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    /** 自定义上传逻辑 */
+    customRequest?: (options: {
+        file: File;
+        onProgress: (percent: number) => void;
+        onSuccess: () => void;
+        onError: (error: Error) => void;
+    }) => void;
+    /** 主要提示文本 */
+    mainText?: ReactNode;
+    /** 次要提示文本 */
+    secondaryText?: ReactNode;
+    /** 文件类型提示 */
+    fileTypeHint?: ReactNode;
+    /** 下载模板文本 */
+    downloadTemplateText?: ReactNode;
+    /** 下载模板回调 */
+    onDownloadTemplate?: () => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义上传图标 */
+    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

@@ -0,0 +1,158 @@
+/**
+ * Upload 上传组件样式
+ *
+ * 基于三层 Token 体系：
+ * - Tier 1 (Global): 全局基础值
+ * - Tier 2 (Semantic): 语义化映射
+ * - Tier 3 (Component): 组件专用 Token
+ *
+ * 完全还原 Figma 设计稿规范
+ */
+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;
+} & {
+    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;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

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

@@ -0,0 +1,16 @@
+/**
+ * Upload 组件测试
+ *
+ * 测试覆盖：
+ * - 基础渲染
+ * - 点击上传
+ * - 拖拽上传
+ * - 文件列表展示
+ * - 上传状态
+ * - 删除文件
+ * - 禁用状态
+ * - 文件验证
+ * - 无障碍性
+ * - ref 转发
+ */
+export {};

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

@@ -0,0 +1,3 @@
+export { Upload, STATUSES as UPLOAD_STATUSES } from './Upload';
+export type { UploadProps, UploadFile } from './Upload';
+export type { UploadStatus } from './Upload.style';

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@kingsoft-ai/design",
+  "version": "0.1.9",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@react-stately/collections": "^3.12.8",
+    "@react-stately/list": "^3.13.1",
+    "@react-stately/select": "^3.8.0",
+    "@react-types/shared": "^3.32.1",
+    "@kingsoft-ai/icons": "^0.1.4",
+    "@kingsoft-ai/theme": "^0.1.5"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11",
+    "@emotion/styled": ">=11",
+    "react": ">=18",
+    "react-aria": ">=3",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.3",
+    "@react-aria/button": "^3.14.2",
+    "@react-aria/focus": "^3.21.2",
+    "@react-aria/interactions": "^3.25.6",
+    "@react-aria/utils": "^3.26.0",
+    "@react-stately/toggle": "^3.9.0",
+    "@react-types/checkbox": "^3.9.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.1.13",
+    "@vitejs/plugin-react": "^5.0.3",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "babel-plugin-react-compiler": "^19.1.0-rc.3",
+    "jsdom": "^25.0.1",
+    "react": "^19.1.1",
+    "react-aria": "^3.44.0",
+    "react-dom": "^19.1.1",
+    "rimraf": "^6.0.1",
+    "typescript": "~5.8.3",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "build:lib": "tsc -p tsconfig.json && vite build",
+    "dev": "tsc -p tsconfig.json --watch & vite build --watch",
+    "prepare:lib": "npm run clean && npm run build:lib",
+    "clean": "rimraf dist",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}