@kingsoft-ai/design 0.1.19 → 0.2.6

package/dist/types/tag/Tag.style.d.ts

@@ -1,12 +1,11 @@
 /**
- * Tag 标签样式
+ * Tag Styled Components
  *
- * 基于 CSS 变量的三层 Token 体系：
- * - Tier 1 (Global): 全局基础值 --ksd-colors-*, --ksd-spacing-*, etc.
- * - Tier 2 (Semantic): 语义化映射 --ksd-brand-*, --ksd-text-*, etc.
- * - Tier 3 (Component): 组件专用 Token --ksd-tag-*
+ * 使用 Styled Token System 实现样式：
+ * - JS Token 优先（来自 ThemeProvider，支持用户自定义）
+ * - CSS 变量作为 fallback（无 Provider 时的兜底）
  *
- * 无需 ThemeProvider，直接使用 CSS 变量
+ * 注意：颜色变体使用动态 CSS 变量命名，保持原有模式
  */
 export declare const tagVariants: readonly ["default", "checkable"];
 export declare const tagSizes: readonly ["sm", "md", "lg"];
@@ -14,15 +13,6 @@ export declare const tagColors: readonly ["default", "red", "orange", "yellow",
 export type TagVariant = (typeof tagVariants)[number];
 export type TagSize = (typeof tagSizes)[number];
 export type TagColor = (typeof tagColors)[number];
-/**
- * Tag 根元素
- *
- * 特性：
- * - 基于 CSS 变量，无需 ThemeProvider
- * - 支持多种颜色和变体
- * - 完整的交互状态（hover, active, disabled）
- * - 支持边框和无边框模式
- */
 export declare const TagRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -35,46 +25,20 @@ export declare const TagRoot: import("@emotion/styled").StyledComponent<{
     closable: boolean;
     isDisabled: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * Tag 内容容器
- *
- * 用于布局图标和文本
- */
 export declare const TagContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 图标包装器
- *
- * 特性：
- * - 保持布局稳定
- * - 支持前置图标
- */
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 关闭按钮
- *
- * 使用 span 而非 button，避免在 Select 等组件中嵌套 button 导致的 HTML 错误
- *
- * 特性：
- * - 独立的交互区域
- * - hover 时显示反馈
- */
 export declare const CloseButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     size: TagSize;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-/**
- * 添加按钮（New Tag）
- *
- * 专门用于添加新标签的按钮样式
- */
 export declare const AddButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -0,0 +1,140 @@
+/**
+ * Tag Styled Tokens
+ *
+ * 将 Tag 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ *
+ * 注意：Tag 组件有多种颜色变体，颜色相关的 token 使用 CSS 变量动态命名模式，
+ * 因此颜色 token 保持使用 CSS 变量方式。
+ */
+/**
+ * Tag 组件的 Styled Tokens
+ */
+export declare const $tag: {
+    readonly smHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smCloseIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdCloseIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgCloseIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fontWeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly transition: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly disabledOpacity: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

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

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

@@ -0,0 +1,76 @@
+/**
+ * Tag 组件 Token 类型定义
+ */
+export interface TagColorTokens {
+    background: {
+        default: string;
+        hover?: string;
+        active?: string;
+        checked?: string;
+        checkedHover?: string;
+        checkedActive?: string;
+    };
+    text: {
+        default: string;
+        checked?: string;
+    };
+    border: {
+        default: string;
+        hover?: string;
+        active?: string;
+        checked?: string;
+        checkedHover?: string;
+        checkedActive?: string;
+    };
+}
+export interface TagTokens {
+    colors: {
+        default: TagColorTokens;
+        red: TagColorTokens;
+        orange: TagColorTokens;
+        yellow: TagColorTokens;
+        green: TagColorTokens;
+        lavender: TagColorTokens;
+        lilac: TagColorTokens;
+        carmine: TagColorTokens;
+        rose: TagColorTokens;
+        mint: TagColorTokens;
+        olive: TagColorTokens;
+        blue: TagColorTokens;
+    };
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            paddingInline: string;
+            gap: string;
+            iconSize: string;
+            closeIconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            paddingInline: string;
+            gap: string;
+            iconSize: string;
+            closeIconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            lineHeight: string;
+            paddingInline: string;
+            gap: string;
+            iconSize: string;
+            closeIconSize: string;
+        };
+    };
+    fontWeight: number;
+    borderRadius: string;
+    transition: string;
+    disabled: {
+        opacity: number;
+    };
+}

package/dist/types/theme.d.ts

@@ -1,6 +1,5 @@
 import { AppTheme, SemanticColors, SemanticSpacing, SemanticBorderRadius, SemanticTypography, SemanticShadows } from '@kingsoft-ai/theme';
-import { ThemeContext } from './types/theme-utils';
-import { ComponentTokens } from './types/component-tokens.types';
+import { ThemeContext, ComponentTokens } from './types';
 export declare const createComponentTokens: (context: ThemeContext) => ComponentTokens;
 interface SemanticTheme {
     colors: SemanticColors;

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

@@ -1,16 +1,3 @@
-/**
- * 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 };
@@ -76,9 +63,4 @@ export type TooltipProps = {
      */
     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

@@ -1,30 +1,11 @@
-/**
- * Tooltip 组件样式
- *
- * 基于 CSS 变量的三层 Token 体系：
- * - Tier 1 (Global): 全局基础值 --ksd-colors-*, --ksd-spacing-*, etc.
- * - Tier 2 (Semantic): 语义化映射 --ksd-brand-*, --ksd-text-*, etc.
- * - Tier 3 (Component): 组件专用 Token --ksd-tooltip-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- */
 import type { Placement } from '@react-types/overlays';
-/**
- * Tooltip 位置类型
- */
 export type TooltipPlacement = Placement;
-/**
- * Tooltip 容器
- */
 export declare const TooltipContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     placement?: Placement;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Tooltip 箭头
- */
 export declare const TooltipArrow: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -0,0 +1,72 @@
+/**
+ * Tooltip Styled Tokens
+ *
+ * 将 Tooltip 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Tooltip 组件的 Styled Tokens
+ */
+export declare const $tooltip: {
+    readonly background: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly color: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly boxShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly padding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly maxWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly fontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly arrowSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly animationDuration: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly animationEasing: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly zIndex: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

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

@@ -7,5 +7,5 @@
  * - Tier 3 (Component): 组件专用 Token
  */
 import { TokenGenerator } from '../types/theme-utils';
-import { TooltipTokens } from '../types/component-tokens.types';
+import { TooltipTokens } from './tokens.types';
 export declare const getTooltipTokens: TokenGenerator<TooltipTokens>;

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

@@ -0,0 +1,21 @@
+/**
+ * Tooltip 组件 Token 类型定义
+ */
+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;
+}

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

@@ -1,23 +1,3 @@
-/**
- * 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 {
     /** 唯一标识 */

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

@@ -1,13 +1,3 @@
-/**
- * Transfer 样式组件
- *
- * 基于 CSS 变量的三层 Token 体系：
- * - Tier 1 (Global): 全局基础值 --ksd-colors-*, --ksd-spacing-*, etc.
- * - Tier 2 (Semantic): 语义化映射 --ksd-brand-*, --ksd-text-*, etc.
- * - Tier 3 (Component): 组件专用 Token --ksd-transfer-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- */
 export declare const TransferRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;