@kingsoft-ai/design 0.1.19 → 0.2.6

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

@@ -0,0 +1,227 @@
+/**
+ * Upload Styled Tokens
+ *
+ * 将 Upload 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Upload 组件的 Styled Tokens
+ */
+export declare const $upload: {
+    readonly dropzoneBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzonePadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzoneGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzoneBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzoneBorderActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzoneBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzoneBgActive: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly dropzoneBgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconFillPrimary: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly iconFillSecondary: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mainTextFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mainTextLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mainTextColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly secondaryTextFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly secondaryTextLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly secondaryTextColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly linkColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileItemPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileItemBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileItemBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileItemBgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileItemBgSuccess: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileItemBgError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileNameFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileNameColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileNameColorError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileInfoFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileInfoColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileInfoColorSuccess: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fileInfoColorError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly actionColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly actionColorHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly progressBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly progressBarBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly progressHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly progressBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly progressTextFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly progressTextColor: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly disabledOpacity: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly transition: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly focusRing: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,66 @@
+/**
+ * Upload 组件 Token 类型定义
+ */
+export interface UploadTokens {
+    dropzone: {
+        borderRadius: string;
+        padding: string;
+        gap: string;
+        border: string;
+        borderActive: string;
+        bg: string;
+        bgActive: string;
+        bgDisabled: string;
+    };
+    icon: {
+        size: string;
+        fillPrimary: string;
+        fillSecondary: string;
+    };
+    mainText: {
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+    };
+    secondaryText: {
+        fontSize: string;
+        lineHeight: string;
+        color: string;
+    };
+    linkColor: string;
+    fileItem: {
+        padding: string;
+        borderRadius: string;
+        bg: string;
+        bgHover: string;
+        bgSuccess: string;
+        bgError: string;
+    };
+    fileIconSize: string;
+    fileName: {
+        fontSize: string;
+        color: string;
+        colorError: string;
+    };
+    fileInfo: {
+        fontSize: string;
+        color: string;
+        colorSuccess: string;
+        colorError: string;
+    };
+    action: {
+        color: string;
+        colorHover: string;
+    };
+    progress: {
+        bg: string;
+        barBg: string;
+        height: string;
+        borderRadius: string;
+        textFontSize: string;
+        textColor: string;
+    };
+    disabledOpacity: number;
+    transition: string;
+    focusRing: string;
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Design Components Utils
+ */
+export { token, createStyledTokens, tokenWhen, themeValue, } from './styled-token';

package/dist/types/utils/styled-token.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Styled Token System
+ *
+ * 一套优雅的 Design Token 解析系统，支持两种样式解析策略：
+ *
+ * 1. **CSS 变量方案**（默认）
+ *    - 无 Provider 或只传 mode 时使用
+ *    - 样式通过 CSS 变量解析，支持在元素上直接覆盖
+ *    - light/dark 切换通过 data-theme 属性实现
+ *
+ * 2. **JS Token 方案**
+ *    - 传 theme prop 时使用
+ *    - 样式通过 JavaScript 对象解析
+ *    - 支持完整的主题自定义能力
+ *
+ * ## 检测逻辑
+ *
+ * | theme 状态                    | _useCSSVariables | 结果        |
+ * |------------------------------|------------------|------------|
+ * | undefined                    | -                | CSS 变量   |
+ * | 存在，_useCSSVariables=true  | true             | CSS 变量   |
+ * | 存在，_useCSSVariables=false | false            | JS Token   |
+ *
+ * @example
+ * ```tsx
+ * // 定义组件的 styled tokens
+ * export const $card = createStyledTokens({
+ *   bg: ['components.card.container.background.default', '--ksd-card-bg'],
+ *   radius: ['components.card.container.radius', '--ksd-card-radius'],
+ * });
+ *
+ * // 在 styled-components 中使用
+ * const Container = styled.div`
+ *   background: ${$card.bg};
+ *   border-radius: ${$card.radius};
+ * `;
+ * ```
+ */
+import type { AppTheme } from '@kingsoft-ai/theme';
+/**
+ * 带有样式策略标记的 Theme 类型
+ * - _useCSSVariables: true → 使用 CSS 变量
+ * - _useCSSVariables: false → 使用 JS Token
+ */
+type ThemeWithFlag = AppTheme & {
+    _useCSSVariables?: boolean;
+};
+type ThemeProps = {
+    theme?: ThemeWithFlag;
+};
+type StyledTokenFn = (props: ThemeProps) => string;
+/**
+ * 创建单个 styled token 函数
+ *
+ * @param themePath - Theme 对象中的路径
+ * @param cssVar - CSS 变量名（作为 fallback）
+ * @returns 可在 styled-components 中使用的函数
+ */
+export declare const token: (themePath: string, cssVar: string) => StyledTokenFn;
+/**
+ * Token 定义：[themePath, cssVar]
+ */
+type TokenDef = readonly [themePath: string, cssVar: string];
+/**
+ * Token 映射配置
+ */
+type TokenMap = Record<string, TokenDef>;
+/**
+ * 将 TokenMap 转换为 StyledTokens 对象
+ */
+type StyledTokens<T extends TokenMap> = {
+    readonly [K in keyof T]: StyledTokenFn;
+};
+/**
+ * 批量创建 styled tokens
+ *
+ * 将 token 定义映射为可在 styled-components 中直接使用的函数集合。
+ * 每个函数会优先使用 JS theme 值，fallback 到 CSS 变量。
+ *
+ * @param tokenMap - Token 定义映射 { name: [themePath, cssVar] }
+ * @returns Styled tokens 对象
+ *
+ * @example
+ * ```tsx
+ * const $button = createStyledTokens({
+ *   bg: ['components.button.background', '--ksd-btn-bg'],
+ *   color: ['components.button.color', '--ksd-btn-color'],
+ * });
+ *
+ * const Button = styled.button`
+ *   background: ${$button.bg};
+ *   color: ${$button.color};
+ * `;
+ * ```
+ */
+export declare const createStyledTokens: <T extends TokenMap>(tokenMap: T) => StyledTokens<T>;
+/**
+ * 条件 token：根据条件选择不同的 token 值
+ *
+ * @example
+ * ```tsx
+ * const Container = styled.div<{ variant: 'filled' | 'outlined' }>`
+ *   background: ${({ variant }) =>
+ *     tokenWhen(variant === 'filled',
+ *       ['components.card.bg.filled', '--ksd-card-bg-filled'],
+ *       ['components.card.bg.outlined', '--ksd-card-bg-outlined']
+ *     )};
+ * `;
+ * ```
+ */
+export declare const tokenWhen: (condition: boolean, whenTrue: TokenDef, whenFalse: TokenDef) => StyledTokenFn;
+/**
+ * 直接从 theme 获取值（不带 CSS fallback）
+ * 用于需要在 JS 中进行计算的场景
+ */
+export declare const themeValue: <T = string>(themePath: string, fallback: T) => ((props: ThemeProps) => T);
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kingsoft-ai/design",
-  "version": "0.1.19",
+  "version": "0.2.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -23,13 +23,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.3",
     "deepmerge": "^4.3.1",
     "@kingsoft-ai/icons": "^0.1.6",
-    "@kingsoft-ai/theme": "^0.1.8"
+    "@kingsoft-ai/theme": "^0.2.3"
   },
   "peerDependencies": {
+    "@emotion/react": ">=11",
+    "@emotion/styled": ">=11",
     "react": ">=18",
     "react-aria": ">=3",
     "react-dom": ">=18",
@@ -50,6 +50,7 @@
     "@react-aria/interactions": "^3.25.6",
     "@react-aria/utils": "^3.26.0",
     "@react-stately/toggle": "^3.9.0",
+    "@react-stately/slider": "^3.6.0",
     "@react-types/checkbox": "^3.9.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",